One page wizard using angular formly - angularjs

I'm creating form using angular formly with more than 50 fields and i have displayed fields using Advance layout. (link)
Now the form is so big and i want to divide it in small parts.
How can i
achieve one page wizard (eg- Sample Pattern ) using angular formly?
Or is there any other best way to show such big form in user friendly manner using angular formly? Please Suggest.
Another issue that i'm facing is most of the fields in the form are select field and data in this select field is coming from server. So the form is taking some time to load. How can i reduce the loading time of form?

You can easily use
http://angular-formly.com/#/example/bootstrap-specific/advanced-layout
and break up the form into a step manner for user friendly form.
I don't think formly-form takes time in rendering (negligible). You might need to tweak your server api to return data soon.

Related

Is there a way to get the user inputs from floating filters in AG-grid?

I have a react application with an ag-grid data table. I have created a custom Excel Export for the Ag-grid data since we don’t want to invest in the Enterprise version yet. The only problem with this is when floating filters are used the entire data gets exported to the excel sheet even after the filter is applied. I was wondering if there is a way to read the user input from the floating filters and filter the output data accordingly?
Use gridApi.getFilterModel() method. See docs on Filter API.

change angular datatables filter's look

We are using angular datatable and in the backend webapi. We are using Light-column-filter http://l-lin.github.io/angular-datatables/#/withLightColumnFilter for serverside processing and it works perfectly as showed in the website. but we want to change the table filter's look to get more filter options (like contains, less than, greater than, equal) and its look like user friendly. it should be look like below image.
we want these type of filter in the angular datatables with serverside processing
image taken from www.ag-grid.com website but we want in angular-datatables with serverside processing. I spend a lot of time for this but didn't get any solution. please help and thanks in advance.

AngularJS - Better Implementation for hiding Dom elements based on Filter changes

I was writing a sample app to display a set of youtube videos using AngularJS and filtering the videos based on language. I am binding user action to ngFilter and hiding and displaying filter based on that.
Please see JS Fiddle for code ==> http://jsfiddle.net/saratchandramrs/kxk9p/
If the ideal place to put the DOM manipulation code is on the directive per this AngularJS post - click here
Should I be doing something with the directives in my example? or would it be a overkill or could someone help me understand if I am doing it right per AngularJS principles? or if there is a better way to do what I am doing?
Also, every time the filter value changes, the DOM reloads, is there a way we can accomplish this functionality with out the reload? or is it like hiding individual elements based on the filter value (similar to css style:"display:none")?
Side note: I am using Bootstrap 3 for UI styling.
Thanks for the guidance.
The problem with performance is that you load a iframe for youtube in the directive. Every time you filter, load data form youtube. Did you see http://devgirl.org/2013/03/21/fun-with-angularjs/ ?

CakePHP Ajax form - cloning form fields

Using cake 2.2. I currently have a form (built using the form helper) that allows users to add expense claims. Each claim consists of many expenses. So the form contains a row for each expense along with a button that uses jQuery to clone the first row of fields and insert them (with incremented ids/names). The problem is when the form is submitted and there is an error, the cloned fields disappears as the page refreshes (I guess because their not in the dom any more).
The values are still in $this->data so I guess I could manually rebuild them but if I made the form submit by ajax would it solve the problem? IE on error the cloned fields would still remain?
Thanks in advance
Things that are built from Javascript will not retain from one page-load to the next.
Either use Ajax (probably ideal), or build out the fields with PHP based on the supplied data.
Either way is fairly "normal" way of doing it.

DotNetNuke -- Inserting URL parameters in forms

We are migrating our website to DotNetNuke and are looking to replicate the functionality of our survey page. Currently, on the bottom of every e-mail we send through our CRM system, there is a link to a satisfaction survey along with some parameters to pre-populate some of the fields. So the URL looks something like like:
/survey.aspx?ticketID=1234&userName=John+Doe
I found the custom module "helferlein_Form" which seems okay for actually creating the form that the user fills in, but I don't see a way to pre-populate the fields. DotNetNuke does let you insert tokens(ex: [Date:now], [User:username]), but I don't see a way to grab individual parameters from the URL. Is there something I'm missing that will let me do that?
I'm not familiar with that module either, but I would strongly recommend using Xmod for customized forms that allow you to easily grab url parameters.
I'm not sure about the module you reference.
However, in my experience Dynamic Forms from Data Springs would fit the bill perfect. It has the ability to pre-fill and even run custom SQL queries to get data.
You should definitely try our My Tokens module.
It allows you to access the URL parameters using [Get:ticketID] or [QueryString:tickedID]. You can also build SQL tokens that use these parameters to return a list of items for example to populate a dropdown.
Also try our Action Form module which integrates very nice with My Tokens.
If you have a module you like and want to use you can always write a little javascript to grab the variables out of the URL and pre-populate your form fields using javascript.

Resources