Rendering form elements from a stored JSON

[radwanic]

Hi,

Before I ask my question, I'd like to thank you for this wonderful form builder...

I was able to get the JSON output of the form builder and passes it to a PHP function that stores it in the DB.

[{"component":"textInput","editable":true,"index":0,"label":"Text Input","description":"","placeholder":"","options":[],"required":false,"validation":"/./"},{"component":"textArea","editable":true,"index":1,"label":"Text Area","description":"","placeholder":"","options":[],"required":false,"validation":"/./"},{"component":"checkbox","editable":true,"index":2,"label":"Checkbox","description":"","placeholder":"","options":["Option one","Option two"],"required":false,"validation":"/./"},{"component":"radio","editable":true,"index":3,"label":"Radio","description":"","placeholder":"","options":["Option one","Option two"],"required":false,"validation":"/./"},{"component":"select","editable":true,"index":4,"label":"Select","description":"","placeholder":"","options":["Option one","Option two"],"required":false,"validation":"/.*/"}]

Can you show me an example on how to use this output to render the form elements once the form is loaded?

It is my first time to use AngularJS, so please forgive my ignorance.

Thanks in advance.

[radwanic]

Hi all,

I'm posting this because I was able to recover forms from the stored JSON. I'm not sure if this is the perfect way to do it, but it did the job.

In demo.js I dynamically added form objects by looping on the stored JSON elements.

Here is the example:

.controller('DemoController', [ '$scope', '$builder', '$validator', function($scope, $builder, $validator) {

  var json = '[{"component":"textInput","editable":true,"index":0,"label":"National ID","description":"","placeholder":"","options":[],"required":true,"validation":"[number]"},{"component":"checkbox","editable":true,"index":1,"label":"Interest","description":"","placeholder":"","options":["Games","Reading","Movies"],"required":false,"validation":"\/.*\/"},{"component":"radio","editable":true,"index":2,"label":"Gender","description":"","placeholder":"","options":["Male","Female"],"required":false,"validation":"\/.*\/"},{"component":"select","editable":true,"index":3,"label":"Country","description":"","placeholder":"","options":["Egypt","Russia"],"required":false,"validation":"\/.*\/"},{"component":"textArea","editable":true,"index":4,"label":"Feedback","description":"","placeholder":"","options":[],"required":false,"validation":"\/.*\/"}]'; 

  var component = $.parseJSON(json);
  $.each(component, function(i, item){
      var formObj = $builder.addFormObject('default', item);
  });
  $scope.form = $builder.forms['default'];
  ...
  ...
  ...

]); Hope this'll help.

[otang]

@Th3Dr4g0n thanks very much. This helped me get through something I was stuck on. Cheers and happy new year.

[jonathanzinger]

Hi @Th3Dr4g0n can you please share how you accessed the form input/output and stored it?

[radwanic]

Glad I could help @otang

@jonathanzinger, sorry for my delayed response...

You can get the JSON string from the pre HTML element with the class ng-binding. Once you have the JSON string, you can store it in the DB via AJAX request.

Here is my test code, you can adjust it to suite your project.

var form_fields = $('pre.ng-binding').html(); var form_id = 1 //The id of the form in my DB $.ajax({ mimeType: 'text/html; charset=utf-8', // ! Need set mimeType only when run from local file url: '/add-form-fields/'+form_id+'/', type: 'POST', contentType: "application/json; charset=utf-8", data: form_fields, success: function(data) { console.log(data); }, dataType: "html", async: false });

To render the stored form fields, you need to use the code in my earlier post.

[jonathanzinger]

Hi @Th3Dr4g0n,

Sorry for not getting back to you sooner, I was on vacation so I had no email access. Thank you for the code I will try it out and let you know how it works

Cheers, Jon

[jonathanzinger]

Hi @Th3Dr4g0n,

Did you load the JSON before the application is rendered or did you load it dynamically via file upload/ text input etc?

The reason I am asking is that I am trying to load the JSON via file upload which works fine, however the presentation only updates when I change some sort of input (for example checking the Show scope check box). Did you run into this issue? Do you now why this might happen?

Thank!

[radwanic]

@jonathanzinger I loaded the JSON from the DB into a hidden input, so it was already there when the page is loaded.

[JoeGrasso]

If you want to load the components dynamically, instead of app.config, and store them in cache, this is what I did. I also created an "imageTemplate" to replace the forms actually being dragged (less space). My only criticism is the popover. I would much prefer it be embeded in the form (ng-hide/ng-show) under each component).

    'use strict'
    var $builderProviderRef;
    ng.module('app.Shared.FormBuilder', ['validator', 'validator.rules'])
        .config(['$builderProvider', function($builderProvider) {
            $builderProviderRef = $builderProvider;
        }
      ])

---

 .run(function (FormBuilderSvc, FormBuilderSvcCache) {
         var componentsCache = [],
           templatePath = '/app/dashboards/_shared/components/formBuilder/views/',
           componentImgPath = '/app/dashboards/_shared/components/formBuilder/images/widget-icons/';

        FormBuilderSvc.all().success(function (components) {
            ng.forEach(components, function (component) {
                componentsCache.push(component);

                var componentObj = {
                    name: component.name,
                    answer : component.answer,
                    group:component.group,
                    parentGroup : component.parentGroup,
                    description: component.description,
                    label: component.label,
                    options: component.options,
                    placeholder: component.placeholder,
                    required: component.required,
                    validationOptions: component.validationOptions,
                    warning : component.warning,
                    imageTemplate: "<label class='lblComponent' id='lbl" + component._id  + "'><img style='padding-right:5px;' src='" + componentImgPath + component.imageTemplate + "' />" + component.label  + "</label>",
                    templateUrl: templatePath + component.templateUrl,
                    hiddenToolsUrl: templatePath + component.hiddenToolsUrl
                }

                $builderProviderRef.registerComponent(component.name, componentObj);
            })
            FormBuilderSvcCache.put('FormBuilderSvc', componentsCache);
        });
    })

[vko-online]

Still not clear how to render saved form data.

[santosh-k1]

@Th3Dr4g0n it working as per i need ... Thanks :+1:

[santosh-k1]

@vko-online it clear above that you need to add below code in the DemoController to rendered save json form -

var json = '[{"component":"textInput","editable":true,"index":0,"label":"National ID","description":"","placeholder":"","options":[],"required":true,"validation":"[number]"},{"component":"checkbox","editable":true,"index":1,"label":"Interest","description":"","placeholder":"","options":["Games","Reading","Movies"],"required":false,"validation":"\/.*\/"},{"component":"radio","editable":true,"index":2,"label":"Gender","description":"","placeholder":"","options":["Male","Female"],"required":false,"validation":"\/.*\/"},{"component":"select","editable":true,"index":3,"label":"Country","description":"","placeholder":"","options":["Egypt","Russia"],"required":false,"validation":"\/.*\/"},{"component":"textArea","editable":true,"index":4,"label":"Feedback","description":"","placeholder":"","options":[],"required":false,"validation":"\/.*\/"}]'; 

  var component = $.parseJSON(json);
  $.each(component, function(i, item){
      var formObj = $builder.addFormObject('default', item);
  });
  $scope.form = $builder.forms['default'];