How to: Advance Heading Customization

Created by Joshua Miller, Modified on Tue, 25 Mar at 5:53 PM by Joshua Miller

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:

Select the Module link in the top left banner then select the appropriate module name link.
Select the Forms tab.
Then select the Default form.
Select the link at the top
Paste the following heading with any HTML headings or styling tags.
<span id="customFormHeading"><h3>Default</h3></span>
Select OK
Select the Wrench icon on one of the main form fields
Select the Custom JavaScript tab.
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>";
Customize the form fields referenced to those internal names of the fields you would like to display in the heading
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