The Text Editor of Service Apps

Last modified on 2022/05/28 10:53

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)
             Apps - Text Editor.png

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
Apps - Text Editor - Example Border style.png
<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

         Apps - Text Editor - Toolbar.png

         Note: The icons below are grouped by functionality.

Document editing

Apps - Text Editor - Undo toolbar.png  Undo/Return to the last modification

Apps - Text Editor - Select all icon.png  Select all text 

Apps - Text Editor - Html Editor icon.png  HTML code editor: Used to toggle between the HTML code editor and the Wysiwyg preview.
         Apps - Text Editor - Html Editor detail.png

Apps - Text Editor - Full screen icon.png  Full screen: Used to switch from a minimized window to full screen mode.

Text formatting

Apps - Text Editor - Police toolbar.png  Bold/Italic/Underline/Strikethrough

Apps - Text Editor - Fonts and Color toolbar.png  Subscript/Superscript/Font/Font size/Text color

Apps - Text Editor - Text remove format icon.png  Cancel formatting: Select the formatted text and click the icon to clear text formatting.
 

Text presentation

Apps - Text Editor - Paragraph toolbar.png  Paragraph/Align text (Left/Center/Right/Justified)

Apps - Text Editor - Tabulation toolbar.png  Decrease indent/Increase indent (tab)
 

Enriched text

Apps - Text Editor - Bullets toolbar.png  Insert numbered list/Insert bullet list

Apps - Text Editor - Quote icon.png  Insert citation

Apps - Text Editor - Line icon.png  Insert horizontal line

Apps - Text Editor - Table icon.png  Insert table: Move the cursor to select the number of rows and columns you want.
    Apps - Text Editor - Table detail.png

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

Apps - Text Editor - Table toolbar.png

Apps - Text Editor - Table - Table header icon.png Define the header row of the table.
Apps - Text Editor - Table - Row icon.png 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.
Apps - Text Editor - Table - Column icon.png 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.
Apps - Text Editor - Table - Delete icon.png Delete the table.
Apps - Text Editor - Table - Cell icon.png 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.
Apps - Text Editor - Table - Style icon.png Define the table layout. Apps - Text Editor - Table - Style detail.png

Apps - Text Editor - Hyperlink icon.png  Insert a hyperlink

Hyperlinks can point to a Web page, an app page, another app, a document on a site or an email.
         Apps - Text Editor - Hyperlink detail.png

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

Note: You can also select it from the Apps - Text Editor - Image - Hyperlink Select icon.png 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.

         Apps - Text Editor - Image - Hyperlink toolbar.png  : Open the link/Modify the link/Delete the link.</p>

Create a link to another app

1. Go to the App Gallery and click Apps - Application properties icon.png next to the app you want.

2. In the graphic editor, click EVApps - GUI - Share icon.png in the toolbar.
         EVApps - GUI - Share Apps.png

3. Copy the launch URL of the relevant app.

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

5. Click Apps - Text Editor - Hyperlink icon.png. 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 Apps - Text Editor - Advanced tags icon.png.

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 

mailto:recipient_name@gmail.com?subject=Your incident I20161106&cc=recipient1_name@gmail.com
&ccc=recipient2_name@gmail.com&body=Your incident has been solved

Click the link: a contextual toolbar will appear.

Apps - Text Editor - Hyperlink toolbar.png

Apps - Text Editor - Hyperlink - Open icon.png Select the Open in a new tab box and check that the hyperlink works correctly.
Apps - Text Editor - Hyperlink - Style icon.png 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.
Apps - Text Editor - Hyperlink - Edit icon.png Modify the properties of the hyperlink. Open url.png See the description above. Apps - Text Editor - Hyperlink detail.png
Apps - Text Editor - Hyperlink - Unlink icon.png Delete the hyperlink.

 

Managing images

Apps - Text Editor - Image icon.png Insert image: Insert an image from the icon gallery.

Procedure: How to insert an image

1. Click Apps - Text Editor - Image icon.png.

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 Documentation.Service Apps - All Menus.Apps.Apps - GUI.Apps - Text Editor.WebHome@filename a contextual toolbar will appear.

Apps - Text Editor - Image contextual toolbar.png

Apps - Text Editor - Image - Replace icon.png Replace the current image. Open url.png See the description of icons below. Apps - Text Editor - Image toolbar.png
Apps - Text Editor - Image - Delete icon.png 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.
Apps - Text Editor - Image - Style icon.png Define the layout of the image Apps - Text Editor - Image - Style detail.png

Apps - Text Editor - Image toolbar.png

Apps - Text Editor - Image - Back icon.png Undo the replacement of the image and return to the previous contextual toolbar
Apps - Text Editor - Image - Select via Upload icon.png 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.
Apps - Text Editor - Image - Select via Hyperlink icon.png 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 ].
Apps - Text Editor - Image - Select via Hyperlink detail.png
Apps - Text Editor - Image - Select via Browse icon.png Select the new image from those available in the app.
  • Move the cursor over the image you want and click Apps - Text Editor - Image - Select via Browse Add icon.png to insert.
  • Note: You can also delete an image using Apps - Text Editor - Image - Select via Browse Delete icon.png. Caution: The deletion will affect all widgets using this image.
Apps - Text Editor - Image - Select via Browse detail.png

Best Practice icon.png To see the name of an image, open the HTML code editor using Apps - Text Editor - Html Editor icon.png and look for the name within the <img> tag, src attribute.
example  Apps - Text Editor - Image - Example name.png

Background images

Apps - Text Editor - Background image icon.png  Background image: Used to define the background graphical properties.

Procedure: How to define the background properties

1. Click Apps - Select image icon.png.

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 Apps - Delete icon.png.

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 - Repeat property - No Repeat.png

Image repeated horizontally and vertically

Image - Repeat property - Repeat.png

Image repeated horizontally

Image - Repeat property - Repeat x.png

Image repeated vertically

Image - Repeat property - Repeat y.png

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 - Size property - Initial.png

Image adjusted to fit the height of the background while locking its aspect ratio

Image - Size property - Scale to fit.png

Image resized to fit the the height and width of the entire background. Note: A part of the image may be cropped.

Image - Size property - Scale to cover.png

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

Background image - Opacity 02.png

Background image - Opacity 05.png

Background image - Opacity 09.png

Animations on hover/on touch

Apps - Text Editor - Hover Touch toolbar.png  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

Apps - Text Editor - Example hover Off.png

Apps - Text Editor - Example hover On.png

EndExampleHover
HTML code

Apps - Text Editor - Example hover Off - Code Html.png

Apps - Text Editor - Hover - Main Html icon.png - [ Main HTML ]

Apps - Text Editor - Example hover On - Code Html.png

Apps - Text Editor - Hover - Hover Html icon.png - [ Hover HTML ]

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:
    • Apps - Text Editor - Hover toolbar - Hover On.png : Used to define standard content and content on hover.
       
    • Apps - Text Editor - Hover toolbar - Touch devices On.png : 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 Apps - Edit Html icon.png using the HTML Code property of the widget.
The text editor will open in standard mode. The Apps - Text Editor - Hover - Main Html icon.png 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 Apps - Text Editor - Hover - Hover Html icon.png. 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 Apps - Text Editor - Hover - On touch icon.png. 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

Apps - Text Editor - Advanced tags icon.png  Tag management: Tags are grouped in several categories depending on the context.

    Open url.png See the description.

         Apps - Text Editor - Advanced tags detail.png

  • 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.
Tags:
Powered by XWiki © EasyVista 2022