Formio - how to post/save JSON output of form?
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

I'm using the Angular form builder (open source version from form.io) for embedding a form generator in my app. https://github.com/formio/ngFormBuilder

Although the JSON output of the generated form shows on the right hand side of the page (using "JSON-Explorer"), how do I access this content in a standard JS variable, in order to post the contents of the JSON to a PHP page (via AJAX) where I can process the data (I don't want to use node.js)?

The variable within angular is $rootScope.form , but this seems outside of scope when I try and access it via a button on my page with regular javascript (Can't find variable: $rootScope). I'm new to angular.

I just need a "save" button that can get the JSON data (as dynamically generated when the form is built, by dragging in components) and post it to my PHP page (with the intention of saving to a DB, then reloading).

Many thanks in advance for any help with this.

Do you have any JavaScript that you could post (working or not)?
jduplessis294 5 months ago
It's here (sorry for not including): https://github.com/formio/ngFormBuilder/blob/master/index.html
BSUK 5 months ago
awarded to jduplessis294

Crowdsource coding tasks.

1 Solution

Winning solution

EDIT:
change js in script tag to

angular
.module("formBuilder", ["ui.bootstrap", "ui.select", "formio", "ngFormBuilder", "ngJsonExplorer"])
.run([
  "$rootScope",
  'formioComponents',
  '$timeout',
  function(
    $rootScope,
    formioComponents,
    $timeout
  ) {
    $rootScope.displays = [{
      name: 'form',
      title: 'Form'
    }, {
      name: 'wizard',
      title: 'Wizard'
    }];
    $rootScope.form = {
      components: [{
        input: true,
        tableView: true,
        inputType: 'text',
        inputMask: '',
        label: 'First Name',
        key: 'firstName',
        placeholder: 'Enter your first name',
        prefix: '',
        suffix: '',
        multiple: false,
        defaultValue: '',
        protected: false,
        unique: false,
        persistent: true,
        validate: {
          required: false,
          minLength: '',
          maxLength: '',
          pattern: '',
          custom: '',
          customPrivate: false
        },
        conditional: {
          show: false,
          when: null,
          eq: ''
        },
        type: 'textfield'
      }, {
        input: true,
        tableView: true,
        inputType: 'text',
        inputMask: '',
        label: 'Last Name',
        key: 'lastName',
        placeholder: 'Enter your last name',
        prefix: '',
        suffix: '',
        multiple: false,
        defaultValue: '',
        protected: false,
        unique: false,
        persistent: true,
        validate: {
          required: false,
          minLength: '',
          maxLength: '',
          pattern: '',
          custom: '',
          customPrivate: false
        },
        conditional: {
          show: false,
          when: null,
          eq: ''
        },
        type: 'textfield'
      }, {
        type: 'select',
        validate: {
          required: false
        },
        clearOnHide: true,
        persistent: true,
        unique: false,
        protected: false,
        multiple: true,
        template: '<span>{{ item.label }}</span>',
        authenticate: false,
        filter: '',
        refreshOn: '',
        defaultValue: '',
        valueProperty: '',
        dataSrc: 'values',
        data: {
          custom: '',
          resource: '',
          url: '',
          json: '',
          values: [
            {
              label: 'Raindrops on roses',
              value: 'raindropsOnRoses'
            },
            {
              label: 'Whiskers on Kittens',
              value: 'whiskersOnKittens'
            },
            {
              label: 'Bright copper kettles',
              value: 'brightCopperKettles'
            },
            {
              label: 'Warm woolen Mittens',
              value: 'warmWoolenMittens'
            },
            [
            ]
          ]
        },
        placeholder: 'Select a few',
        key: 'favoriteThings',
        label: 'Favorite Things',
        tableView: true,
        input: true
      }, {
        input: true,
        tableView: true,
        label: 'Message',
        key: 'message',
        placeholder: 'What do you think?',
        prefix: '',
        suffix: '',
        rows: 3,
        multiple: false,
        defaultValue: '',
        protected: false,
        persistent: true,
        validate: {
          required: false,
          minLength: '',
          maxLength: '',
          pattern: '',
          custom: ''
        },
        type: 'textarea',
        conditional: {
          show: false,
          when: null,
          eq: ''
        }
      }, {
        type: 'button',
        theme: 'primary',
        disableOnInvalid: true,
        action: 'submit',
        block: false,
        rightIcon: '',
        leftIcon: '',
        size: 'md',
        key: 'submit',
        tableView: false,
        label: 'Submit',
        input: true
      }],
      display: 'form'
    };
    $rootScope.renderForm = true;
    $rootScope.$on('formUpdate', function(event, form) {
      angular.merge($rootScope.form, form);
      $rootScope.renderForm = false;
      setTimeout(function() {
        $rootScope.renderForm = true;
      }, 10);
    });
    var originalComps = _.cloneDeep($rootScope.form.components);
    $rootScope.jsonCollapsed = true;
    $timeout(function() {
      $rootScope.jsonCollapsed = false;
    }, 200);
    var currentDisplay = 'form';
    $rootScope.$watch('form.display', function(display) {
      if (display && (display !== currentDisplay)) {
        currentDisplay = display;
        if (display === 'form') {
          $rootScope.form.components = originalComps;
        } else {
          $rootScope.form.components = [{
            type: 'panel',
            input: false,
            title: 'Page 1',
            theme: 'default',
            components: originalComps
          }];
        }
      }
    });
  }
])
.controller('testCtrl', ['$scope', '$rootScope',
    function ($scope, $rootScope) {
      $scope.save = function () {
        // You have access to $rootScope.form
        console.log(JSON.stringify($rootScope.form))
      }
    }
    ]);

and add this somewhere above in the html of your page:

<div ng-controller="testCtrl">
    <button ng-click="save()">Save</button>
</div>
You're a star, it works! :) Thanks so much!
BSUK 5 months ago
Glad to help!
jduplessis294 5 months ago