formio / ngformiogrid Goto Github PK

View Code? Open in Web Editor NEW

11.0 19.0 14.0 1.96 MB

Provides a way to display Form.io submission data within the Angular UI-Grid.

Home Page: http://formio.github.io/ngFormioGrid/

License: MIT License

JavaScript 84.87% HTML 15.13%

ngformiogrid's Introduction

This repository is now considered legacy and no longer supported. Please take a look at our recent repositories and help documentation at the following links.

Form.io Angular UI-Grid component

This library allows Form.io submission data to be rendered within a Angular UI Grid. This introduces a new directive that produces a Grid view of the submission data provided the Form within Form.io

<formio-grid src="'https://myapp.form.io/myform'"></formio-grid>

This will render the Form.io Submissions like so.

Installation

You can install this library by typing the following command in your application.

bower install ng-formio-grid --save

Once you have this installed, you can add this library to your application with the following <script> tag.

<link rel="stylesheet" href="https://cdn.rawgit.com/formio/ngFormioGrid/master/dist/ng-formio-grid-full.min.css" />
<script src="https://cdn.rawgit.com/formio/ngFormioGrid/master/dist/ng-formio-grid-full.min.js"></script>

You will now need to add this module within your Angular.js application declaration like so...

app.js

angular.module('yourApp', [
  'ngFormioGrid'
])

Usage

Now that you have the library installed, you can then do the following to add a form to your application.

Create an account on https://form.io
Create a new project.
Create a Form within your project.
Add some submissions to this form.
You can then embed the data grid within your application using the following snippit of code.

<formio-grid src="'https://myapp.form.io/myform'"></formio-grid>

Full Documentation

To view detailed documentation, go to https://github.com/formio/ngFormioGrid/wiki

Enjoy!

The Form.io Team!

ngformiogrid's People

Contributors

Stargazers

Watchers

Forkers

dalbir npmcdn-to-unpkg-bot codeinpeace chicofos douglaselee alena-levina lemamin demonrem asitti maheshsundaramurthy catbakun forkedit abd123al florin141

ngformiogrid's Issues

Cannot read property 'grid' of undefined

Hey guys,

Running Chrome 55.0.2883.95

Using bower install ng-formio-grid:

we get:

Unable to find a suitable version for angular, please choose one by typing one of the numbers below:
    1) angular#>=1.4.0 which resolved to 1.5.11 and is required by angular-bootstrap#2.4.0, angular-bootstrap#1.3.3
    2) angular#>=1.4.0 1.5.x which resolved to 1.5.11 and is required by angular-ui-grid#4.0.2
    3) angular#>=1.2.18 which resolved to 1.5.11 and is required by angular-ui-select#0.19.6
    4) angular#^1.6.1 which resolved to 1.6.1 and is required by ng-formio#2.8.2, ng-formio-grid#0.12.1
    5) angular#>=1.2.0 <1.7.0 which resolved to 1.6.1 and is required by angular-moment#1.0.1
    6) angular#>= 1.3.6 which resolved to 1.6.1 and is required by angular-ui-mask#1.8.8-beta.1
    7) angular#>1.2.0 which resolved to 1.6.1 and is required by ng-file-upload#12.2.13
    8) angular#1.6.1 which resolved to 1.6.1 and is required by angular-sanitize#1.6.1

I chose 4.... then

1) angular-bootstrap#^1.2.0 which resolved to 1.3.3 and is required by bootstrap-ui-datetime-picker#2.5.4
2) angular-bootstrap#^2.4.0 which resolved to 2.4.0 and is required by ng-formio#2.8.2pyh

I chose option2.

I use wiredep -s index.html to load all the dependencies:

<html>
    <head>
      <!-- bower:css -->
      <link rel="stylesheet" href="bower_components/angular-ui-grid/ui-grid.css" />
      <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
      <link rel="stylesheet" href="bower_components/angular-ui-select/dist/select.css" />
      <link rel="stylesheet" href="bower_components/ng-formio/css/formio.css" />
      <!-- endbower -->
    </head>
    <body ng-app="formioForm">
      <!--[if lt IE 7]>
        <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
      <![endif]-->

      <formio src="'https://myapp.form.io/ecoffintest'"></formio>
 
      <formio-grid src="'https://myapp.form.io/ecoffintest'"></formio-grid>

      <!-- bower:js -->
      <script src="bower_components/angular/angular.js"></script>
      <script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
      <script src="bower_components/angular-ui-grid/ui-grid.js"></script>
      <script src="bower_components/ng-file-upload/ng-file-upload.js"></script>
      <script src="bower_components/moment/moment.js"></script>
      <script src="bower_components/angular-moment/angular-moment.js"></script>
      <script src="bower_components/jquery/dist/jquery.js"></script>
      <script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
      <script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
      <script src="bower_components/bootstrap-ui-datetime-picker/dist/datetime-picker.js"></script>
      <script src="bower_components/signature_pad/signature_pad.js"></script>
      <script src="bower_components/angular-ui-mask/dist/mask.js"></script>
      <script src="bower_components/blob-polyfill/Blob.js"></script>
      <script src="bower_components/file-saver.js/FileSaver.js"></script>
      <script src="bower_components/angular-file-saver/dist/angular-file-saver.bundle.js"></script>
      <script src="bower_components/angular-ui-select/dist/select.js"></script>
      <script src="bower_components/ng-formio/dist/formio.js"></script>
      <script src="bower_components/ng-formio-grid/dist/ng-formio-grid.js"></script>
      <!-- endbower -->

      <script type="text/javascript">
        angular.module('formioForm', ['ngFormioGrid']);
      </script>

    </body>
  </html>

The form view / submit works fine.

However with data grid never loads with the following errors:

angular.js:14328 TypeError: element.html(...).show is not a function
    at Object.link (http://localhost:8000/bower_components/ng-formio-grid/dist/ng-formio-grid.js:51:30)
    at http://localhost:8000/bower_components/angular/angular.js:1291:18
    at http://localhost:8000/bower_components/angular/angular.js:10246:44
    at invokeLinkFn (http://localhost:8000/bower_components/angular/angular.js:10252:9)
    at nodeLinkFn (http://localhost:8000/bower_components/angular/angular.js:9641:11)
    at compositeLinkFn (http://localhost:8000/bower_components/angular/angular.js:8881:13)
    at compositeLinkFn (http://localhost:8000/bower_components/angular/angular.js:8884:13)
    at publicLinkFn (http://localhost:8000/bower_components/angular/angular.js:8746:30)
    at http://localhost:8000/bower_components/angular/angular.js:1843:27
    at Scope.$eval (http://localhost:8000/bower_components/angular/angular.js:17972:28) <div src="'https://eeypyxcviiwgrat.form.io/ecoffintest'" class="ng-isolate-scope">
(anonymous) @ angular.js:14328
(anonymous) @ angular.js:10837
invokeLinkFn @ angular.js:10254
nodeLinkFn @ angular.js:9641
compositeLinkFn @ angular.js:8881
compositeLinkFn @ angular.js:8884
publicLinkFn @ angular.js:8746
(anonymous) @ angular.js:1843
$eval @ angular.js:17972
$apply @ angular.js:18072
bootstrapApply @ angular.js:1841
invoke @ angular.js:4842
doBootstrap @ angular.js:1839
bootstrap @ angular.js:1859
angularInit @ angular.js:1744
(anonymous) @ angular.js:32977
trigger @ angular.js:3314
2017-01-26 10:06:48.599 angular.js:14328 Error: [jqLite:nosel] Looking up elements via selectors is not supported by jqLite! See: http://docs.angularjs.org/api/angular.element
http://errors.angularjs.org/1.6.1/jqLite/nosel
    at http://localhost:8000/bower_components/angular/angular.js:68:12
    at Object.JQLite [as element] (http://localhost:8000/bower_components/angular/angular.js:3067:13)
    at setLoading (http://localhost:8000/bower_components/ng-formio-grid/dist/ng-formio-grid.js:117:39)
    at http://localhost:8000/bower_components/ng-formio-grid/dist/ng-formio-grid.js:363:15
    at processQueue (http://localhost:8000/bower_components/angular/angular.js:16648:37)
    at http://localhost:8000/bower_components/angular/angular.js:16692:27
    at Scope.$eval (http://localhost:8000/bower_components/angular/angular.js:17972:28)
    at Scope.$digest (http://localhost:8000/bower_components/angular/angular.js:17786:31)
    at http://localhost:8000/bower_components/angular/angular.js:18011:26
    at completeOutstandingRequest (http://localhost:8000/bower_components/angular/angular.js:6111:10) Possibly unhandled rejection: {}
(anonymous) @ angular.js:14328
(anonymous) @ angular.js:10837
processChecks @ angular.js:16674
$eval @ angular.js:17972
$digest @ angular.js:17786
(anonymous) @ angular.js:18011
completeOutstandingRequest @ angular.js:6111
(anonymous) @ angular.js:6390
2017-01-26 10:06:48.609 angular.js:14328 TypeError: Cannot read property 'grid' of undefined
    at ng-formio-grid.js:373
    at angular.js:19916
    at completeOutstandingRequest (angular.js:6111)
    at angular.js:6390
(anonymous) @ angular.js:14328
(anonymous) @ angular.js:10837
(anonymous) @ angular.js:19919
completeOutstandingRequest @ angular.js:6111
(anonymous) @ angular.js:6390
2017-01-26 10:06:48.610 angular.js:14328 TypeError: Cannot read property 'grid' of undefined
    at http://localhost:8000/bower_components/ng-formio-grid/dist/ng-formio-grid.js:373:124
    at http://localhost:8000/bower_components/angular/angular.js:19916:31
    at completeOutstandingRequest (http://localhost:8000/bower_components/angular/angular.js:6111:10)
    at http://localhost:8000/bower_components/angular/angular.js:6390:7 Possibly unhandled rejection: {}
(anonymous) @ angular.js:14328
(anonymous) @ angular.js:10837
processChecks @ angular.js:16674
$eval @ angular.js:17972
$digest @ angular.js:17786
$apply @ angular.js:18080
(anonymous) @ angular.js:19924
completeOutstandingRequest @ angular.js:6111
(anonymous) @ angular.js:6390

Use Interpolated Value in Grid Query

I'm adding a query attribute to my formio directive like so:

query="{'data.companyActivation': 'abcd' }"

That works perfectly, but as soon as I change it to:

query="{'data.companyActivation': '{{companyActivation}}' }"

It no longer works even though the value is interpolated correctly and the html is rendered with the correct value on the page. It seems like the directive is loading with the raw value before angular has time to interpolate it because the network request contains {{companyActivation}} in the query instead of 'abcd'.

Is it possible to use an interpolated value in the grid query?

Listening to formio-grid events

Hi, I was wondering is there any built-in method for listening on formio grid events like click?
Currently, I'm using this code for rendering my formio-grid

   <div *ngIf="selectedItem!=null">
                    <formio-grid src={{formSrc}} [gridType]="submission"></formio-grid>
   </div>

Use ngFormioGrid

Can anybody help me using ngFormioGrid independent of form.io. I get issue with src
I pass src = "'http://localhost:59641/api/customer'" but on rendering of grid it converts to
src = "'http://localhost:59641/api/customer/submission?limit=25&skip=0&sort=null'".

Columns & Grid Options

How should columnDefs and columns be defined? When using templates/resource/index.html provided by the formio-helper module, currentResource.columns and currentResource.gridOptions are passed to the formio-grid directive.

ColumnDef declaration...
$scope.currentResource.gridOptions={ columnDefs:[ { displayName:'Filter ID', field:'data.filterId' }] };

but, I'm unable to attach links within the columnDefinition. To do so, add a column to currentResources.columns.

Columns...
$scope.currentResource.columns=[ { key:'data.filterId', label: 'Filter ID', link: true } ];

However, if columnDefs is defined, then currentResource.columns has no effect on the dom, and the link does not exist.

Load Data Error

Is there anyone to help me what is my mistake of using this grid ? ,
I followed the instructions and didn't see my data in grid except record count .
you will see my usage in the following ,

when using (') inside the src this error will raise :

ERROR TypeError: Cannot read property '1' of null
at new Formio (Formio.js:139) ...

and without it ,Api call is Ok ,just getting record count, without any data presentation .
data :

[{"_id":"5b601c0c7ceb4f02a47c5ce6","name":"JMS-MQ","link":"oooo"},{"_id":"5b601f163fa1c72238cb69b2","name":"SEPAM_MQ_IP","link":"uuuu"},{"_id":"5b601f899921fc1fd855527e","name":"Receive_Queue","link":"hhhhh"},{"_id":"5b601fa49921fc1fd855527f","name":"QMSPBKMT","link":"yyyy"},{"_id":"5b73de5fb60c9d21e0d1a1af","name":"Mohammad","link":"http..."}]

Thank you in advance . :)

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.

Jobs

Jooble