About Text Format
The UI Designer provides robust text formatting options. Double clicking the Text element in the form view enables typing and display the formatting tool as shown in the figure below
Selection Formatting
When the Text element is in Edit mode, you can select different characters for editing. The text format can be changed based on the following parameters:
1. Font-Style: bold, italic, underline, strike-through, font, font size.
2. Alignment: align-left, align-right, align-center, align-justify.
3. Paragraph: number-list, bullet-list, increase indent, decrease indent.
4. Special: hyperlink, remove hyperlink.
5. Operations: redo, undo.
6. Text color: changes the color of the selected text.
7. Text background: changes the background color of the selected text.
8. Erase formatting: erases any formatting or styling changes to the selected text.
Element Formatting
The other formatting options in the Text edit panel apply changes to the entire Text control.
Character Spacing: increases or decreases the size of the space between each character
Line Spacing: increases or decreases the size of the space between each line or row of text
Save Format
Font color, font size, font, bold and italic font style can be saved among all the text formats. However, during each UI Designer session, only one custom text format style can be saved. Previous styles are overwritten when a new one is saved.
To save a format:
1. Select the text fragment and click Save.
2. This format is saved into the drop down as Your Style.
3. To reuse, select the text fragment and choose Your Style in the dropdown.
Field Values
Field values can be displayed in-line in a text control, using the format: !~fieldname~! .
For example, in the designer, if we set up the form as shown below…
In the case folder, when the user enters the text “hello world” into the left cell on the form, we are able to display what was entered in the right cell:
Styling this part of the text will also produce styled output.
Others
The format tool will close whenever the text element loses its focus. It can be moved by dragging the left-side handle