The Text Editor of Service Apps
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 or delete a table column.
|
||
![]() |
Delete the table. | ||
![]() |
Split and merge 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.
example
&ccc=recipient2_name@gmail.com&body=Your incident has been solved
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:
|
||
![]() |
Modify the properties of the hyperlink. ![]() |
![]() |
|
![]() |
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. ![]() |
![]() |
|
![]() |
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:
|
||
![]() |
Select the new image from the Internet. In a new window:
|
![]() |
|
![]() |
Select the new image from those available in the app.
|
![]() |
To see the name of an image, open the HTML code editor using
and look for the name within the <img> tag, src attribute.
example
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
Repeat: Used to define the way in which the image is repeated in the background.
no-repeat | repeat | repeat-x | repeat-y |
---|---|---|---|
Image not repeated |
Image repeated horizontally and vertically |
Image repeated horizontally |
Image repeated vertically |
The image is repeated as many times as required to cover the entire background. The last image is cropped if required. |
Size: Used to define the size of the image.
Initial size | Scale to fit | Scale to cover |
---|---|---|
Original size |
Image adjusted to fit the height of the background while locking its aspect ratio |
Image resized to fit the the height and width of the entire background. Note: A part of the image may be cropped. |
Position (H/V): Used to define the position of the image in the background.
- The first value defines the horizontal position of the image as regards the left, right or center.
- The second value defines the vertical position of the image as regards the top, bottom or center.
- If the image is repeated in the background (i.e. Repeat = repeat), then Position will have an impact on the layout of the repeated image.
Background Color: Used to define the background color of the image.
Opacity (0 - 1): Tool used to define the transparency of the background color. Selecting 0 means the background color will be completely transparent while 1 means it will be completely opaque.
Opacity = 0.2 | Opacity = 0.5 | Opacity = 0.9 |
---|---|---|
|
|
|
Animations on hover/on touch
Standard HTML code/On hover/On touch: Used to add animations that are run when the cursor hovers over an area or when the finger touches a specific area on a touchscreen.
ExampleHover
example You want to display a thumbnail containing a New request button when the cursor hovers over an image in the catalog.
Standard content | Content displayed on hover or on touch | |
---|---|---|
Display |
|
|
EndExampleHover
HTML code |
|
|
Notes
- The functionality is available when you enable the Enable HTML Hover and Enable HTML For Touch Devices properties in widgets where you can access the text editor via the HTML Code property, and in the Tile and List display modes in Data Viewer widgets.
- Once the properties have been enabled, the contextual toolbar will appear:
: Used to define standard content and content on hover.
: Used to define standard content and content on touch.
Procedure: How to implement the animations
Step 1: Selecting the widget animations.
1. Open the widget that supports animations on hover.
2. Select the properties you want.
Step 2: Defining the content of the animations.
1. Open the text editor via using the HTML Code property of the widget.
The text editor will open in standard mode. The icon is active and the text, [ Main HTML ], will appear to the right of the toolbar. Define the content to be displayed when the animation is inactive.
2. Define the displayed content when the animation is inactive.
- The Enable HTML Hover property is active (content of the area to be displayed on hover): Click
. The text, [ Hover HTML ], will appear to the right of the toolbar.
- Tthe Enable HTML For Touch Devices property is active (content of the area to be displayed on touch): Click
. The text, [ Touch HTML ], will appear to the right of the toolbar.
3. Click OK.
The text editor will be closed.
Step 3 (optionnal): Selecting the animation on hover.
Note: Only if the Enable Html Hover property in the widget is active.
1. Click the button found below the Choose Hover Transition property.
2. Select the type of animation you want using the dedicated editor.
Managing advanced tags
Tag management: Tags are grouped in several categories depending on the context.
See the description.
- Page tag: Used to open another page in the app by clicking a hyperlink or action button.
- Data Picker tag: Used to insert data source values (value of a column or a cell, result of a statistical calculation).
- Workflow tag: Used to add command buttons to the app, enabling you to validate or complete actions related to incidents or service requests without opening Service Manager.
- EasyVista tags
- Document Upload tag: Used to insert an action button for uploading documents.
- Embed Questionnaire tag: Used to insert an action button for creating a new service request containing all elements of the catalog entry, including questionnaires via a window.
- Status Notification tag: Used to display a green notification banner indicating the status of the created request.
- Star Rating tag: Used to display rating stars for knowledge base articles.