Access

You can access the text editor from the Label, Header/Footer and HTML Code properties of a widget in the graphic editor.

Description of the text editor

The text editor is divided into two zones:

• Toolbar (1)
• Edit box (2)
           

Notes

• Move the cursor over each icon in the toolbar to see its infotip.
• Depending on the property from which the text editor was opened, certain icons in the toolbar may be hidden.
• A contextual toolbar available for certain objects is displayed when you click the object, e.g. image, hyperlink or table.
• The text is automatically converted to HTML when the text editor window is saved.
• The formatting defined in the text editor will have priority over the colors defined in Theme > Text Color.

Caution

• If the URL of a Web page or app is modified, then any hyperlink pointing to it must be modified accordingly or the link will not work. To do so, you can update the hyperlink in the text editor.
• Depending on the Web browser used, the behavior of certain tags may vary.

Best Practice

• To display a table border, you should use the HTML style attribute instead of the border attributes because these are not interpreted correctly outside the text editor.

Example	HTML code
	<table style="border: outset 2px grey ;" cellpadding="1" cellspacing="1">      <tbody>           <tr>                <td><strong>Month: #[FIELD('Creation Date')]#</strong><br/>                     Incidents: #[FIELD('Incidents')]#<br/>                     Service Requests: #[FIELD('Service Requests')]#                </td>           </tr>      </tbody> </table>

Description of the toolbar

         Note: The icons below are grouped by functionality.

Document editing

  Undo/Return to the last modification

  Select all text 

  HTML code editor: Used to toggle between the HTML code editor and the Wysiwyg preview.
         

  Full screen: Used to switch from a minimized window to full screen mode.

Text formatting

  Bold/Italic/Underline/Strikethrough

  Subscript/Superscript/Font/Font size/Text color

  Cancel formatting: Select the formatted text and click the icon to clear text formatting.
 

Text presentation

  Paragraph/Align text (Left/Center/Right/Justified)

  Decrease indent/Increase indent (tab)
 

Enriched text

  Insert numbered list/Insert bullet list

  Insert citation

  Insert horizontal line

  Insert table: Move the cursor to select the number of rows and columns you want.
    

Click the table displayed in the text editor to modify its properties. A contextual toolbar will appear.

		Define the header row of the table.
		Insert or delete a table row. Insert row above: Insert a row above the current row. Insert row below: Insert a row below the current row. Delete row: Delete the current row.
		Insert or delete a table column. Insert column before: Insert a column to the left of the current column. Insert column after: Insert a column to the right of the current column. Delete column: Delete the current column.
		Delete the table.
		Split and merge cells. Horizontal split: Split the current cell into two rows. Vertical split: Split the current cell into two columns. Merge cells: Merge the selected cells.
		Define the table layout.

Managing hyperlinks

  Insert a hyperlink

Hyperlinks can point to a Web page, an app page, another app, a document on a site or an email.
         

Procedure: How to insert an hyperlink

1. Copy and paste the URL of the link in the URL field.

Note: You can also select it from the  drop-down list.

2. Enter the hyperlink text in the Text field.

Note: If you do not select any text, then the hyperlink will be inserted as a URL or as an email address. To insert the hyperlink in an image, place your cursor on the image.

3. Select the Open in a new tab box to open the link in a new tab or window. Unselect the box to open the link in the current tab or window and replace the current page.

4. Click Insert.

5. Use the new icons to modify the properties of the hyperlink.

           : Open the link/Modify the link/Delete the link.</p>

Create a link to another app

1. Go to the App Gallery and click  next to the app you want.

2. In the graphic editor, click  in the toolbar.
         

3. Copy the launch URL of the relevant app.

4. Return to your app and open the text editor.

5. Click . Paste the launch URL of the app in the URL field.

Create a link to another page in the current app

1. Use the Page advanced tags by clicking .

Create a link to an email

1. Add the mailto instruction to the start of the link.

2. Enter the recipient's email address.

3. Specify the subject of the email message.

Modification of the properties of an hyperlink

Click the link: a contextual toolbar will appear.

		Select the Open in a new tab box and check that the hyperlink works correctly.
		Select the style of the hyperlink text: Green: Displays the text in green or blue. Thick: Displays the text in bold or regular font style.
		Modify the properties of the hyperlink. See the description above.
		Delete the hyperlink.

Managing images

 Insert image: Insert an image from the icon gallery.

Procedure: How to insert an image

1. Click .

2. Select the image you want.

3. Click Close.

Modification of the properties of an image displayed in the text editor

Note: Only for images that were uploaded manually to the icon gallery.

Click on the  Apps - All Menus.Apps.Apps - GUI.Apps - Text Editor.WebHome@filename a contextual toolbar will appear.

		Replace the current image. See the description of icons below.
		Remove the image displayed. Note: Only the current widget will be affected. The image will remain available in the app and will still be displayed for the other widgets.
		Define the layout of the image
		Undo the replacement of the image and return to the previous contextual toolbar
		Select the new image using the file explorer: You can click within the Drop image box and select the one you want in the file explorer. You can also click and drag the image from the file explorer to the Drop image box.
		Select the new image from the Internet. In a new window: Copy and paste the URL of the image in the http: field. * Click [ REPLACE ].
		Select the new image from those available in the app. Move the cursor over the image you want and click to insert. Note: You can also delete an image using . Caution: The deletion will affect all widgets using this image.

Background images

  Background image: Used to define the background graphical properties.

Procedure: How to define the background properties

1. Click .

2. Select the image you want from the icon gallery.

3. Click Close.

4. Define the properties of the image and its background.

• The background color is applied only if an image is selected.
   

Delete the image

• Click .

Properties of the background

BackgroundImageProperties