How do I add custom code to a button in my Form Type?

Description

Custom code can be called when the user taps an Action Button in the form.

Custom TPL can be added to an Action Button's ON *BUTTON event. The custom code is executed when the user taps the Action Button.

  1. Insert an Action Button into your form.

  2. Enter a name in the Action Name property for the Action Button. The name must start with a letter and may only contain letters (upper and lower case) and numbers.

    /TransFormDocumentation/pages/images/actionButton1.png
    The Action Name must contain a valid name if you want to add custom TPL to the Action Button.
  3. Click Save Commands to return to the Form Properties screen.

    /TransFormDocumentation/pages/images/saveCommands.png
  4. Open the TPL Editor for the form that contains the calculated field. Go to Advanced Features > Edit Custom Code.

    /TransFormDocumentation/pages/images/openTPLEditor.png

    Select the Yes radio button above the Edit Custom Code link to enable the TPL editor.

  5. Click the Button button to open the *ON BUTTON event for the button.

    /TransFormDocumentation/pages/images/actionButton2a.png
  6. Enter the TPL to execute. In this example, the area is being calculated from the length and width fields and being stored in the area field:

    ON *button_calculateArea
       
       #area = #length * #width
    
    ENDON
    /TransFormDocumentation/pages/images/actionButton3.png
    Field names are case sensitive!
  7. Click Save to save your calculation.

    /TransFormDocumentation/pages/images/actionButton4.png
  8. After you have added the TPL to the ON *BUTTON event for the button, click Save on the left-hand side of the screen to save your changes. Then, click Click to save changes to upload your changes to the TransForm Cloud.

    /TransFormDocumentation/pages/images/saveAllTPLCode.png
    Save changes to the Form Design
    /TransFormDocumentation/pages/images/saveFormChanges.png
    Save changes to the TransForm Cloud, making them available in the TransForm Filler App
  9. Finally, test your form in the TransForm Filler mobile application.

    /TransFormDocumentation/pages/images/actionButton5.png

See Also