Modal Page

   MaestroThe UI design product.  |   Form Builder |  All versions This feature is related to all versions.

Maestro comes with the Modal Page component, which represents a start or an end point where a form user must perform a task, an action, or make a decision, for example submit form data or cancel a form. A Modal Page can contain critical information or involve multiple tasks.

Note

This component inherits properties and shared styles from the Form component.

Usage

  1. Open the Palette pane in the Maestro Editor.
  2. Locate the Modal Page component within the Containers folder.
  3. Drag the component into the View pane or the Wireframe.
  4. Configure the component's properties via the Properties pane.

Properties

The following properties are available to the Modal Page component:

Page Icon
Image
favicon

The browser page / tab icon for this form

Popover Help Icon
Icon
popoverHelpIcon

The icon used for popover help

Auto-Send Confirmation Emails
Boolean
autoSendEmails

This property will auto-send an email on submit and save to the contact email address

Auto-Scroll Checkbox/Radio Button Selection
Boolean
checkboxRadioAutoScroll

This property will enable auto-scroll to checkboxes/radio buttons to the middle of screen on selection

Leave Page Warning
Boolean
enableLeavePageWarning

This property will prompt a confirm dialog if the user tries to leave the page.

Leave Page Warning Message
Text
leavePageWarningMessage

This property will replace the default message for the leave page warning.

Mandatory Message Suffix
Text
mandatoryMsgSuffix

This text will be concatenated to the end of the label when a field is deemed mandatory.

Progress Message
Text
progressMsg

This message will be used when Form.submit, Form.taskUrlNavigate and Form.postData methods are called.

Accessibility

Announcement Message
Text
alertMsg

This message will be announced to screen readers when the modal has loaded. Otherwise the label will be used

Dynamic Page Title
Boolean
dynamicPageTitle

If checked, the title will be updated with the current progress of the application.

New Window Link Warning Message
Text
linkWarningMsg

This text will be concatenated to the end of link text and read out on focus to screen readers.

Enable Mobile Zooming
Boolean
enableZoom

This will enable pinch-to-zoom on mobile devices. This is not normally needed with good responsive design, but some accessibility reviews require it.

Component

Component JavaScript
Js
componentJs

This property will enable the upload of a JavaScript file, which will get added to the component on publish

Google Analytics

Google Tracking ID
Text
gaTrackingId

Tracks page load and navigation views using Google Analytics. For more information, see how to add Google Tag Manager to a Maestro form.

Base URL
Text
gaBaseUrl

(Optional) Identifies form within site context.

Transact Manager

Session Expiry Redirect Timeout (Seconds)
Integer
sessionExpiryRedirectTimeout

Perform redirect after session expiry timeout

Auto Background Save Interval (Seconds)
Integer
autoSaveInterval

Performs an auto background save using the interval (In Seconds) entered, if set to blank it will never auto-save

Next, learn about the Dialog component.