Documentation
API
Q&A
Read
AnnouncementsArticlesWebsite tips
Learn
Getting StartedManagerMaestroAnalyticsExchangeWorkspaces
Resources
VideosDownloadsExchange PackagesRelease Notes
Ideas
Contact
Platform
Manager
Maestro
Exchange
Workspaces
Analytics
Springboard

Text Display

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

Maestro comes with the Text Display component (widget), which allows you to display rich textual context, such as icons, HTML code, and JavaScript, to users. The component invokes the Rich Text editor where you can edit this textual content.

As opposed to the iFrame component, which accepts a static URL only, the Text Display allows you to configure a dynamic URL, which is assembled at runtime. This functionality let you to embed various documents, such as legal statements, disclosures and term and conditions (T&Cs), into a form and present them to form users as per a journey flow.

To embed a PDF file into a form:

  1. Upload a resource on a Manager server in a resource of a form space the form is hosted and rendered from.
  2. Generate a relative URL to the resource path to load iFrame at runtime in Maestro form.
  3. Insert the following HTML code into the Label property of the Text Display component. 
    <iframe id="iframePdf" scrolling="auto" src="{{Form.data.SFMData.SystemProfile.FormDataServiceURL.replace('servlet/FormDynamicDataServlet', 'resources/dummy-pdf-file.pdf')}}" style="width: 100%; height: 100%;">&nbsp;</iframe>

Usage

  1. Open the Palette pane in the Maestro Editor.
  2. Locate the Text Display component within the Display Fields 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 Text Display component:

Label
Text label
This will display the component name as text.
In some cases, you can use this property to enhance or even change the component behavior by inserting an HTML code instead of a static text. For example, you may want to specify a dynamic relative URL pointing to a PDF file hosted on a Manager form space.
To insert an HTML code:
  1. Click the label to edit its content in the Rich Text editor and select Source tab.
  2. Insert the HTML tags and click Save.
You can also provide a JavaScript in the label that will be evaluated dynamically to populate the label's content. For example, ${{((+data.amount) / (+data.term * + data.frequency)).toFixed(2)}}, which is calculated in the Preview mode and on the rendered form. However, in the Design mode, the Text Display displays any embedded data in its raw form, and doesn't attempt to evaluate any embedded calculations.
A complete example is shown below:
<p><i class="fas fa-exclamation-circle declined-icon"></i></p>
<p>Sorry, but we&#39;re unable to approve you online at this time.</p>
<p>Please use this reference number if you need to contact us about your application:</p>
<p><strong>{{Form.data.SFMData.SystemProfile.TrackingCode}}</strong></p>

Accessibility

Enable Focus On Headings
Boolean enableHeadingFocus
This will enable focus on heading elements (h1, h2) etc.

Next, learn about the Form Footer component.