OnePlan

Plan details form JavaScript customization

Updated

This article describes the JavaScript customization capability in the Plan Details configuration.

When using JavaScript in the Plan Details configuration, the Initialize tab should only be used for scripts that are to be executed when the Plan first loads. The Load Plan tab should be used for scripts that are to be executed after the first load (anywhere on the loaded Plan).

Code wrapped in a function does is sometimes not executed unless the page is refreshed or reloaded. Code added directly, without being wrapped into a function, is triggered every time a plan details section is loaded.

Two functions available:

  • Init(Form): Passes in the current form and then can use the functions.
  • Load(form): Passes in the current form to use.

Object Functions available to use:

Form Functions

  • getField(fieldname)
  • validateField(fieldname)
  • validateAllFields()

Fields Functions

  • validators.push({})
    • Error: Message to show when validation fails.
    • OnChange: Set to true to validate when changing the field.
    • Steps: An array with the ids of steps you want to validate on when both. changing a field value and when moving steps.
    • Fn: function for validating. Passes in a field and a step id.

Example:

form.getField("Name").validators.push({

   Error: ‘Cannot be blank’,

   OnChange: true,

   Steps: ["aeaf7420-9040-44a4-3a67-b3c45ef10997"],

   Fn: function(field, step)

   {

If(field.getValue() == “”)

       return false;

   }

})

  • changers.push({})
    • Fn: Function when changing the value. Passes in the form, field, and step id.

Example:
form.getField("Name").changers.push({

   Fn: function(form, field, step)

   {

If(field.getValue() == “Some Name”)

       form.getField(“someField”).hide()

   }

})

  • getValue()
  • setValue(v)
  • hide()Hide the field based on the response of a field.
  • show()

Example: Hide the field based on the response of a field.

form.getField("FlagField").changers.push({

  Fn: function(form, field, step)

  {

    var fieldValue = field.getValue("FlagField");

       if(fieldValue)

          form.getField('MultiBusinessField').hide()

       else

          form.getField('MultiBusinessField').show();

  }

});

Customizations

Add button to toolbar.

  • On init:

form.down("toolbar").add({

text: 'Test Button',

handler: function () {

var p = DetailsApp.GetActivePlan(this);

OnePlanCore.Plans.GetPlan(p).then(function (plan) {

//DO something with plan here

});

}

});

Previous Article Set up plan detail form layouts
Next Article Set up plan detail form split fields