The “Rich Text” control is a feature rich text editor control for adding and formatting and displaying text information and dynamic text based data values from within the connected Entity instance / Thing through the use of attribute shortcodes. Static text which needs to be displayed within the “Visual Interaction” can simply be keyed in and formatted for font, colors, text styles, alignment or more. Dynamic values which need to be displayed from the “Thing” data can be done by selecting the appropriate “attribute shortcode” from the dropdown available within the editor. When the template is applied to a “Thing” in order to create an interaction, this “attribute shortcode” placeholder will be replaced by the actual value of the data from the “Thing”. (e.g. The shortcode {{EI.data.NetContent}} will be replaced by the actual value for Net Content such as ‘115 g’)
Properties
- ShortCode: Denoted by an [S] icon, this control displays a dropdown selector with all the attributes within the “Entity” your Visual Interaction Template is connected to. On selecting an attribute, the control will automatically place a shortcode for that attribute in the text editor which will be replaced by the actual attribute value when the Visual Digital Interaction is invoked. Note: If your template is connected to an “Entity” as the source of data for that template, then the attributes for that entity will be displayed. If your template is connected to a “Custom API” as a source of data, then the attributes available within that Custom API will be displayed.
- Bold: This option enables you to apply “Bold” styling for the selected text.
- Italic: This option enables you to apply “Italic” styling to the selected text.
- Underline: This option enables you to “Underline” the selected text.
- Strikethrough: This option enables you to “Strikethrough” the selected text.
- Subscript: This option enables you to convert the selected text into a “Subscript” format.
- Superscript: This option enables you to convert the selected text into a “Superscript” format.
- Align Left: This option aligns the selected text to the “Left”
- Align Center: This option aligns the selected text to the “Center”
- Align Right: This option aligns the selected text to the “Right”
- Align Justify: This option justifies the text alignment to spread across the paragraph area evenly.
- Ordered List: This option enables you to create an ordered list format
- Ordered List Style: This option enables you to change the style of the ordered list and create lettered ordering, numbered ordering, roman numeral ordering and so on.
- Unordered List: This option enables you to create an unordered bullet point style list with the options of selecting the style of bullets you wish to display.
- Title: This field is used to set a label for the rich text area to help you identify it (e.g. ‘Caution & Warnings Information Text’)
- Font Family: This option enables you to change the “Font” for the selected text
- Font Size: This option enables you to change the “Font Size” of the selected text. The size value options are displayed in points.
- Text Color: This option enables you to select a font color for the selected text.
- Text Highlight Color: This option enables you to select a font highlight color for the selected text.
- Clear Formatting: This option allows you to clear all formatting applied to the selected text.
- Paragraph Format: This setting allows you to to select text and set a pre-formatted Heading style or Paragraph text style.
- Paragraph Style: This option allows you to select an apply a predefined style to the selected paragraph for example “upper case”, “bordered” and “spaced”.
- Line Height: This option allows you to set the height and spacing of selected lines of text.
- Decrease Indent Paragraph: This option enables you to increase the indent for a selected paragraph.
- Increase Indent Paragraph: This option enables you to decrease the indent for a selected paragraph.
- Quotes: This option enables you to set and style the selected text as quoted text and alter the size of the quotes.
- Insert Link: This option enables you to add a URL hyperlink to the selected text.
- Insert Table: This option enables you to generate an HTML table by selecting the number of rows and columns required in the grid and clicking to confirm. The tables created can be selected and right clicked to bring up formatting options for the table.
- Insert Horizontal Line: This option places a horizontal ruled line in the editor.
- Fullscreen: This option maximizes the editor window to a full screen view. Clicking on the the Fullscreen icon a second time will restore the window view of the editor.
- Code View: This option enables you to add HTML code and tags within the editor or simply view everything in plain HTML.