How to: Advance Heading Customization

The form heading may be customized in an advanced fashion to display dynamic values as they relate to the form, with HTML enabled styling.

Steps:

  1.  Select the Module link in the top left banner then select the appropriate module name link.

  2.  Select the Forms tab.

  3.  Then select the Default form.

  4. Select the link at the top: Click here to customize the form header

  5. Paste the following heading with any HTML headings or styling tags.
    <span id="customFormHeading"><h3>Default</h3></span>

  6. Select OK

  7. Select the Wrench icon on one of the main form fields

  8. Select the Custom JavaScript tab.

  9. In the init JS editor paste the below:
    // Get the heading element
    const element = document.getElementById("customFormHeading");

    // Override the Default heading text to dynamic referenced form fields
    element.innerHTML = "<span style="color:#26531f"><h3>" + formScope.formdata.customString4 + " | " + formScope.formdata.customLookup3 + "</h3></span>";

  10. Customize the form fields referenced to those internal names of the fields you would like to display in the heading

  11. Then Save the Default form.

    Return to the module, refresh the page, and open the form to validate the heading at the top.

Tips

  • The form fields referenced may be updated to any of the internal names present on the form

  • The styling may be customized by color or heading styles or any other styling preferences