Toggle menu

Script Buttons

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.


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

nameUsed 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
labelThe button's label. Defaults to "Press"
indexAn optional index that will be appended to the button's name to generate the id/name attribute values.  Only needed when looping, in which case @index can be used
onClickThe 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 somewhere so it's callable (there's an example in Writing a Custom Function). It will be automatically be supplied the form helper, button name and, where applicable, the loop 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.
dataAny additional data that should be passed through to the function (as the last argument) whose name has been specified via the onClick parameter. This data can be a simple value (data="value1",  data=99, or data=this.businessKey). It can also be used to pass through an object (data={"key1":"value1", "key2":"value2"}). When in a loop, the "this" object may be used to pass through data about the current item (data=this or data=this.businessKey)
classDefaults 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
extraClassAn 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 helper registers the output 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.

Share this page

Facebook icon Twitter icon email icon


print icon