Skip to main content
Kinetic Community

Using Subforms

The K.load function allows a form/submission to be loaded into the current page, it will be loaded and submitted via AJAX interactions.

Below is an example usage of the K.load function.

K.load({
  path: '/kinetic/acme/catalog/ipad-request',
  container: '#subform-div',
  loaded: function(form) { ... },
  created: function(data) { ... }
  updated: function(data) { ... },
  completed: function(data, action) { ... }
});

Options/Callbacks

  • path path to the form (including space, kapp, and form slugs) that will be loaded
  • container CSS selector that specifies where the loaded form should be placed
  • loaded called after the form is loaded and appended to the page, it is passed the following parameters
    • form the Form object representing the loaded form, see Using Kinetic Objects for details
  • created called after the page save/submission results in the successful creation of a new submission, it is passed the following parameters
    • data contains the following properties
      • submission the submission API result, see the REST API documentation for details
  • updated called after each save/submit following creation, it is passed the following parameters
    • data contains the following properties
      • submission the submission API result, see the REST API documentation for details
  • completed called after page submit results in completion of the submission, it is passed the following parameters
    • data contains the following properties
      • submission the submission API result, see the REST API documentation for details
    • action contains the following action functions
      • default loads the confirmation page for the embedded submission, note that this is done automatically unless the stop action (below) is called
      • close removes the embedded form from the page
      • stop prevents the default action from being done

Scenarios

  • For a simple, one page, service item the created and completed callbacks will likely be called at the same time.
  • For a multi-page service item, the created callback will be called upon submission of the first page. Any subsequent save or submit will result in the update callback being called. And finally, when the last page has been submitted the completed callback will be called.

Usage Examples

  • A simple section requiring no values set or passed back and forth (ex. Additional Information) is created with the intent to be shared across several forms.
    K.load({
      path: '/space/kapp/additional-info',
      container: '#additionalInfoDiv',
      loaded: function(form) {  },
      created: function(data) {  },
      updated: function(data) {  },
      completed: function(data, action) {  }
    });
  • A section with the requested for information is created with the intention of being shared between multiple forms. This subform will allow for searching for a new requested for. When the requested for user is selected, the value will be passed to the parent form into hidden fields.
    K.load({
      path: '/space/kapp/requested-for', 
      container: '#requestedForDiv',
      loaded: function(form) { 
        var subform = K.as(form);
        //watch the login id field on the subform and place the new value in the Requested For
        //field on the parent form when it is updated
        subform('form').$watch('Login Id', function(newVal,oldVal){
            K('field[Requested For]').value(newVal);
          });
        //watch the Full Name field on the subform and place the new value in the Requested For Display Name
        //field on the parent form when it is updated
        subform('form').$watch('Full Name', function(newVal,oldVal){
            K('field[Requested For Display Name]').value(newVal);
          });
        //Watch the This request is for field on the subform and if Myself is selected, set the Requested For
        //values to be the Requested By values, otherwise, clear the requested by Values in preparation for
        //search results. Note this will allow the main form to see that they chose something other than
        //myself but did not complete the search properly if that happens (allows enforcement of requirements)
        subform('form').$watch('This request is for', function(newVal,oldVal){
             if (newVal == "Myself") { 
               K('field[Requested For]').value(K('field[Requested By]').value()); 
               K('field[Requested For Display Name]').value(K('field[Requested By Display Name]').value());
                                 } else { 
               K('field[Requested For]').value(''); 
               K('field[Requested For Display Name]').value('');
                                 }
          });
    
      },
      created: function(data) {  },
      updated: function(data) {  },
      completed: function(data, action) {  }
    });
    

For more details on passing values, see this article.