Customizing with JavaScript

Kinetic JS Objects

The Kinetic Runtime API provides a number of methods and properties for the various Kinetic objects.

Important! Do not modify any Kinetic methods or properties. Changing them may have adverse affects on behavior and is not supported!

Kinetic Object

The Kinetic object K provides high-level API access.

Kinetic ObjectPurpose
K(selector)Selects an object based on the selection criteria. See Using Kinetic Selectors for more information.
K.select(selector)An alternative way to execute object selections.
K.api(method, path, options)Executes an asynchronous API call and safely updates the form display upon completion. It takes 3 arguments:
- method - string name of the method, e.g. 'GET'
- path - the URL or path to access.
- options - a jQuery-compatible AJAX options config.
K.reset()Completely resets the Kinetic object. Useful for kapp-level pages embedding forms dynamically.
K.as(form)Given a Kinetic form object execute API functionality as that form. Used primarily in embedded and child forms.
K.use(form)This advanced method is used to change the current active form to the Form object provided.
K.load(options)Asynchronously load an embedded form. See Embedding Subforms into Forms for more information.

Note: The K.ready() function is not the same as the ready function provided in the bundle customization object. This method is reserved and should only be called by Core Edition generated code.

Field Object

The Field object has a number of useful methods defined on it for Form and Kapp developers.

Notes

  • Some of the functions that correspond to conditions specified within the builder may cause conflicts. For example, if you define a "Visible" condition in the builder of "Hidden" and then call the show method, the form will eventually self-correct and hide the field again.
  • The following functions can cause conflicts: hide, show, disable, enable. In many cases, leaving these conditions in their default state should allow you use the functions in JavaScript event code, but this is not guaranteed.

Form Object

The Form object provides methods for manipulating form behavior and properties.

Form ObjectPurpose
K('form').slug()Returns the slug of the current form.
K('form').description()Returns the description of the current form.
K('form').attributes()Returns all attributes configured for the form.
K('form').attributes('name')Returns a specific attribute configured for the form.
K('form').reviewMode()Returns true if the form is being rendered in review mode.
K('form').embeddedMode()Returns true if the form is currently embedded.
K('form').element()Returns the form DOM element representing the current form.
K('form').find(selector)Given a jQuery-style selector, finds DOM elements within this form (excluding subforms).
K('form').serialize()Returns a serialized object representing the fields and values for the current page.
K('form').validate()Executes client-side constraint validation for all fields. Returns an object with field violations.
K('form').basePath()Returns the path to the base REST API.
K('form').kappPath()Returns the REST API path for the kapps resource.
K('form').formPath()Returns the REST API path for the forms resource.
K('form').submissionPath()Returns the REST API path for the current submission.
K('form').save()Performs the "Save for Later" action (does not enforce constraints or advance pages).
K('form').submitPage()Performs the "Submit Page" action.
K('form').previousPage()Performs the "Previous Page" action.

Bridged Resource Object

The Bridged Resource object provides the ability to dynamically load data from bridges.

Bridged Resource ObjectPurpose
attributesAn array of attributes that you want to be returned.
metadataA map of metadata parameters that will be passed to the bridge adapter.
Note: Supported metadata parameters depend on the bridge adapter being used.
valuesA map of values referenced by your bridged resource parameters.
successA function called when the bridged resource request is complete. Takes one argument — the bridged data.
errorA function called when there is an error encountered while processing the bridged resource request. Takes one argument — the error response.

Here's an example of a bridged resource load script:

// Load a bridged resource named 'People' that has no parameters:
K('bridgedResource[People]').load({
    attributes: ['First Name', 'Last Name', 'Login Id'],
    metadata: {
      "limit": "5",
      "pageToken": "i0j70ogl9638s4ccs0bvdkrqftxa6kvzt52",
      "order": "Login Id:asc"
    },
    success: function(bridgedData) {
        // Do something with the bridged data response.
        // For example:
        console.log(bridgedData.records);
    }
});

// Load a bridged resource named 'Person' that has a parameter. The
// parameter is configured to reference the value of the Login ID field,
// which is defined in the Form Builder:
K('bridgedResource[Person]').load({
    attributes: ['First Name', 'Last Name'],
    values: {'Login ID' : 'Allen'},
    success: function(bridgedData) {
        console.log(bridgedData.record);
    }
});

You can also call these other methods:

MethodPurpose
K('bridgedResource[People]').name()Returns the name of the bridged resource.
K('bridgedResource[People]').type()Returns the bridged resource type, either "Single" or "Multiple"
K('bridgedResource[People]').dependencies()Returns an array of field names that are used in parameters.
K('bridgedResource[People]').attributes()Returns an array of values that will be returned from the bridge.
K('bridgedResource[People]').metadata()Returns a map of metadata properties sent to the bridge.

Page Object

The page object provides information about the current form page. It has the following functions:

FunctionPurpose
K('page').id()Returns the current page ID.
K('page').name()Returns the current page name.

Section Object

The section object provides information about a section on the current page. It has the following functions:

FunctionPurpose
K('section[Section Name]').name()Returns the section name.
K('section[Section Name]').element()Returns the DOM element representing the section.
K('section[Section Name]').hide()Hides the section, respecting the omit values behavior.
K('section[Section Name]').show()Shows the section, respecting the omit values behavior.

Like other object types, the hide and show behavior is conditional and may be superseded by the form's behavior.

Button Object

The button object provides information about a button on the current page. It has the following functions:

FunctionPurpose
K('button[Submit Button]').name()Returns the button name.
K('button[Submit Button]').element()Returns the DOM element representing the button.
K('button[Submit Button]').hide()Hides the button.
K('button[Submit Button]').show()Shows the button.
K('button[Submit Button]').disable()Enables the button.
K('button[Submit Button]').enable()Disables the button.

Like other object types, the hide, show, enable, and disable behavior is conditional and may be superseded by the form's behavior.

Content Object

The content object provides information about a content field on the current page. It has the following functions:

FunctionPurpose
K('content[Content Name]').name()Returns the content field's name.
K('content[Content Name]').element()Returns the DOM element representing the content field.
K('content[Content Name]').show()Shows the content field.
K('content[Content Name]').hide()Hides the content field.

Like other object types, the hide and show behavior is conditional and may be superseded by the form's behavior.

Kapp Object

FunctionPurpose
K('kapp').name()Returns the Kapp name.
K('kapp').slug()Returns the Kapp slug.
K('kapp').attributes()Returns all of the attributes configured for the Kapp.
K('kapp').attributes('name')Returns a specific attribute configured for the Kapp.

Space Object

FunctionPurpose
K('space').name()Returns the space name.
K('space').slug()Returns the space slug.
K('space').attributes()Returns all of the attributes configured for the space.
K('space').attributes('name')Returns a specific attribute configured for the space.

Submission Object

  • K('submission').id() - returns the submission ID or null if a new submission.
  • K('submission').value(fieldName) - returns the value from a field that was on a previous page.

Using Kinetic Selectors

Using the runtime API you can use patterns to retrieve information and objects pertaining to the form. For detailed documentation see the class reference.

// Selecting the current form.
K('form')
// Selecting a form by slug. If multiple forms of the same slug are loaded you will
// receive an array of forms.
K('form[ipad-request]')
// Selecting a field by name.
K('field[FirstName]')
// Selecting a bridged resource by name
K('bridgedResource[People]')

Other supporting form data can also be selected.

// Selecting the current page
K('page')
// Selecting the current submission data.
K('submission')
// Selecting the current kapp.
K('kapp')
// Selecting the current identity.
K('identity')

Nesting Selectors

Many selectors can be nested, for example:

// Selecting a field by name which is on the current page.
K('form page field[FirstName]')

Selectors imply the active form so the 'form' selector can nearly always be omitted:

// Get the FirstName field for the current page.
K('page field[FirstName]')

Selecting Elements by Name

A number of form elements can also be selected by their names:

// Select a button by name
K('button[Refresh List]')
// Select a section by name
K('section[Personal Information]')
// Select a text element by name.
K('text[Introduction]')

The Bundle Object

Bundle is a helper object designed to be used in javascript applications. The bundle object provides a number of static methods that are automatically included with each request.