Rich Text Editor

   MaestroPreviously known as Transact Maestro.  |   Form Builder | |   22.04 This feature was updated in 22.04.

The Maestro editor comes with the rich text editor allowing you to directly apply custom HTML, styles, images and Font AwesomeFont Awesome is a font and icon toolkit based on CSS and Less., as well as use AngularJSAngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly. AngularJS's data binding and dependency injection eliminate much of the code you would otherwise have to write. For more information, see http://angularjs.org/ expressions in some component's, such as a label, to derive the text from other fields in the form.

To edit text in the rich text editor:

  1. Open a form or a template in the Maestro editor and click the Design tab.
  2. Select a component and switch to the Properties tab.
  3. Click the property with a pencil icon, for example the label, to open the rich text editor.
    Note

    The component's property must be enabled for the rich text content. Rich text is enabled for all labels, but you can also define component properties as rich text, for example section headings and the help text (popover) to name a few.

  4. Edit the text in the editor using rich formatting as required.
  5. The editor provides a larger workspace for editing the properties and it has the following options:

    • Insert Field Value
    • Source
    • Paste as Plain Text
    • Paste from Word
    • Find
    • Replace
    • Bold
    • Italic
    • Insert / Remove Numbered List
    • Insert / Remove Bulleted List
    • Decrease Indent
    • Increase Indent
    • Align Left
    • Align Center
    • Align Right
    • Justify
    • Mandatory Marker
    • Link
    • Unlink
    • Format
    • Font
    • Size
    • Text Color
    • Background Color
    • API Methods
  6. Select the Icons tab to choose an icon using the Icon Picker from the list of available icons and double-click it to insert it into the property.  |  21.05 This feature was introduced in 21.05.
    Note

    You can also insert Font Awesome icons into a component using rich text properties using the HTML code, for example, <i class="fa fa-camera-retro"></i>

  7. Select the Insert Field Value tab and double-click a property from the tree to reference its values in your property. This makes your property value change dynamically. This tree view displays the structure of the design, similar to the View pane. Click API Methods to open the JavaScript API Reference documentation for all available functions that you can use in your component. For more information, see dynamic labels.
  8. Select the Source tab to view the rich text content as a source code. You can't use any of rich text formatting in this mode.
  9. Click Save to save your changes.

Next, learn about Properties pane.