Script Button Helper

The SCRIPTBUTTON helper generates a button with the same markup as the script button field type. It's useful if you need to insert a button into your template or dynamically set button attributes.

Parameters

{{SCRIPTBUTTON name="testbutton" label=this.description index=@index data="example" onClick="clickFunc" class="application" extraClass="remove"}}

Name	Description
name	Used to make up the button's name and id. Defaults to "SCRIPTBUTTON". The index will be automatically appended where applicable. The id will prepend the form name to this value (separated by an underscore), for consistency with iCM form fields, eg MYFORM_SCRIPTBUTTON1
label	The button's label. Defaults to "Press"
index	An optional index that will be appended to the button's name to generate the id/name attribute values. Needed when iterating over collections to generate multiple buttons, in which case @index can be used
onClick	The name of the function to call when the button is clicked. For example onClick="myFunction". The function will need to be defined somewhere on the form so it's callable (there's an example in Writing a Custom Function). The function will be automatically be passed the form helper, button name, index and any custom data (see the data parameter) as its arguments. Alternatively the actual JavaScript (for example, "window.alert('button clicked!')") can be set, although supplying a function name and allowing the helper to construct the onClick attribute value itself is the preferred use. The onClick attribute value of the generated input element calls an auto-created id_onClick function that in turn calls the function whose name has been set via this parameter.
data	Any additional data that should be passed through to the function (as the last argument) of the onClick parameter. This data can be a simple value data="value1", data=99 or object data={"key1":"value1", "key2":"value2"}. When in a loop, the "this" object may be used to pass through data about the current item, for example data=this.businessKey
class	Defaults to "script" matching the standard script buttons. Added to the outer div and to the input with a prefix of "icminput--". The standard button classes (used by the various button field types) are reset, save, submit, next, back
extraClass	An optional additional class that will be applied to the input with an "icminput--" prefix. For example "contrast" will add the class "icminput--contrast" to the input. Contrast is a standard class, others will need to be styled by your site's CSS

Additional Notes

The SCRIPTBUTTON helper registers the button with the form runtime, so that the standard helper methods (helper.focusField, hideField, disableField, etc) can be called on any button created using it.

Handlebars sub-expressions can be used for any of the attributes, but their result must make up the entirety of the parameter value. So label=this.description or label=(VARIABLE "VAR1") are acceptable, but label="TESTBTN"+this.description and label="TESTBTN{{description}}" are not, because Handlebars will not perform its substitution on these sub-expressions.

Button Examples

You can download these examples from the Downloads section on this page.

All of the buttons on this form are generated using browser-side handlebars templates.
Basic onClick Function
1. This first button is generated like this:
  
  {{SCRIPTBUTTON label=(VARIABLE 'buttonLabel') onClick="helper.updateFieldValue('MYSCRIPT','')"}}
  
  MYSCRIPT is the name of a browser-side helper variable field. The script is held in the field's handler. "Updating" the value of the field triggers the handler, which shows or hides the text field.
4. Text1
Inline JavaScript
1. This button uses inline JavaScript.
  
  {{SCRIPTBUTTON name="Inline JavaScript" label="Inline JavaScript" onClick="alert('Hi!');"}}
Loop and Data
1. These final three buttons are created using the #each helper.
  
  {{#any items}}   {{#each items}}     {{SCRIPTBUTTON name="buttonloop" index=@index label=this.description data=this.number onClick="myClick"}}   {{/each}} {{/any}}
  
  items is set in the template's default function:
  
  function (helper, defaultValue, currentValue) {     defaultValue = {};     defaultValue.items = [];     defaultValue.items.push({ "description": "Account one", "number": 1});     defaultValue.items.push({ "description": "Account two", "number": 2});     defaultValue.items.push({ "description": "Account three", "number": 3});     return defaultValue; }
  
  The "myClick" function is set in an HTML template field between script tags:
  <script>     function myClick(helper, name, index, data) {         var msg = "Acount Number: " + data;         helper.updateFieldValue("TEXT2", msg);     } </script>
4. Data

Downloads

Handlebars Script Buttons (ZIP) [3KB](opens new window)

This website uses cookies

Parameters

Additional Notes

Button Examples

Downloads

Was this page useful?