Configuring the HTML Buttons

Top Menu Buttons

In QuikFormsEngine 5.4, the button's properties were direct properties of the QuikFormsEngine object. Since new properties were added that are associated to the buttons, all button-related properties are now grouped in one object per button. In other words, now each button has a particular object property in the QuikFormsEngine object. The table below describes them.

New/Updated Properties

Property Name	Type	Description	Sub Properties
HTMLButtonSubmit	SubmitButton	Object that configures the Submit button. Sends the form data in value pair format to the SubmitURL (typically a location in your system/platform/application for further processing). Clicking the Submit button also validates required fields if any are included on the form. In other words, forms may not be submitted to any location until the required fields are filled out.	Show (bool): Shows/Hides the button. Title (string): Tooltip for the button. Name (string): Name of the button. SubmitJavascript (string): Javascript to be run when clicking the button. This takes priority over the Form Submission. If provided, the Javascript will be run and the form won't be submitted. SubmitURL (string): URL where the form will be submitted to.
HTMLButtonSign	SignButton	Object that configures the Sign button. Launches the E-Signature pop-up for either SIGNiX, DocuSign, or Quik! Native E-Signature.	Show (bool): Shows/Hides the button. Title (string): Tooltip for the button. Name (string): Name of the button. SignJavascript (string): Javascript to be run when clicking the button. This takes priority over the the default Sign event. If provided, the Javascript will be run.
HTMLButtonEmail	EmailButton	Object that configures the Email button. Allows the user to email the form (completed or not) to another party. Quik! only posts form data to the URL you provide. You must build the email service which actually sends the email to the recipient with the link to the form.	Show (bool): Shows/Hides the button. Title (string): Tooltip for the button. Name (string): Name of the button. SendURL (string): URL to which the form will post the data
HTMLButtonLoad	LoadButton	Object that configures the Load button. Loads the saved version of the form or user to continue to fill out, when the form has been saved to the browser only. This button is hidden if RoutingRulesOn = TRUE, and also if the Save button is hidden.	Show (bool): Shows/Hides the button. Title (string): Tooltip for the button. Name (string): Name of the button.
HTMLButtonSave	SaveButton	Object that configures the Save button. Saves the current version of the form either to a pre-configured location, or, if location is not provided, to user's local browser.	Show (bool): Shows/Hides the button. Title (string): Tooltip for the button. Name (string): Name of the button. SaveJavascript (string): Javascript to be run when clicking the button. This takes priority over the the default Save event. If provided, the Javascript will be run and the form won't be submitted to any Custom URL provided in the SaveURL property. SaveURL (string): URL to post the form data for saving. If not provided, the form will save to the browser's localstorage by default.
HTMLButtonPrint	PrintButton	Object that configures the Print button. Exports and downloads the form as a PDF.	Show (bool): Shows/Hides the button. Title (string): Tooltip for the button. Name (string): Name of the button.
HTMLButtonReset	ResetButton	Object that configures the Reset button. Deletes field data that has been entered by the user. Pre-filled data will remain.	Show (bool): Shows/Hides the button. Title (string): Tooltip for the button. Name (string): Name of the button.
HTMLButtonClear	ClearButton	Object that configures the Clear button. Deletes all field data that has been pre-filled or entered by the user.	Show (bool): Shows/Hides the button. Title (string): Tooltip for the button. Name (string): Name of the button.

Sample Code

Clear Button

We will take the Clear button as an example .

In QuikFormsEngine v5.4 the buttons' properties were set as follows:

QFE.HTMLShowButtonClear = False 
QFE.HTMLButtonClearName = ”Clear”

Now, in QuikFormsEngine v5.5.0, we can configure the button as follows:

QFE.HTMLButtonClear.Show = true 
QFE.HTMLButtonClear.Title = "Clear all fields of form data." 
QFE.HTMLButtonClear.Name = ”Clear”

Here are some screenshots showing the above configuration

Tooltip and name shown

Submit Button

This button configuration includes two properties: SubmitJavascript and SubmitURL. In order to set them in the new engine, see sample code below:

QFE.HTMLButtonSubmit.SubmitJavascript = ”alert('custom javascript!');”
QFE.HTMLButtonSubmit.SubmitURL = ”https://my.domain/submit”

Of course the other common properties (e.g tooltip) are set here:

QFE.HTMLButtonSubmit.Show = true 
QFE.HTMLButtonSubmit.Title = "Submit the data to the server" 
QFE.HTMLButtonSubmit.Name = ”Submit”

Save Button

This button is very similar to the Submit button, having two properties for custom javascripts and save urls: SaveJavascript and SaveURL. In order to set them in the new engine, see sample code below:

QFE.HTMLButtonSave.SaveJavascript = ”alert('custom javascript!');”
QFE.HTMLButtonSave.SaveURL = ”https://my.domain/save”

Of course the other common properties (e.g tooltip) are set here:

QFE.HTMLButtonSave.Show = true
QFE.HTMLButtonSave.Title = "Save to the server!"
QFE.HTMLButtonSubmit.Name = ”Save”