The Text Editor of Service Apps: Advanced Tags

Last modified on 2022/05/28 10:53

Page tag

Used to open another page in the app by clicking a hyperlink or action button. 

Notes

  • You can use the Page widget if you want users to open the page using an action button.
  • Click Apps - Text Editor - Hyperlink icon.png to insert a link to a Web page, to another app or to an email.

Procedure: How to insert a link / button opening a page

Step 1: Opening the Page tag.

1. Place the cursor where the hyperlink or action button should be inserted.

2. Click Apps - Text Editor - Advanced tags icon.png and select the Page category.

  • Click the Page Link sub-category to open the app page in the current tab or window and replace the current page.
  • Click the Page Popup sub-category to open the app page in a popup window.
             Apps - Text Editor - Advanced tags Page - Page popup.png  Apps - Text Editor - Advanced tags Page - Page link.png
     

Step 2: Specifying the information.

1. Enter the fields related to the page to open.

  • Select page: Name of the app page you want to display.
  • Link title: Hyperlink or action button text.
  • Modal title: Title of the popup window.
  • Choose button type: Method for opening the link. It can be a hyperlink (Link option) or an action button(Button option).

2. (optional) Define specific colors for action buttons.

  • Background Color: Background color of the action button.
  • Background Color On Hover: Background color of the action button when the cursor moves over it.
  • Text Color: Color of the text displayed in the action button.
  • Text Color On Hover: Color of text in the action button when the cursor moves over it.

3. Click Apps - Add icon.png.
The hyperlink or action button will be inserted in the text editor.
 

Step 3: Closing the tags editor.

1. Click Apps - Text Editor - Advanced tags icon.png.
The dedicated pane will be closed. You return to the text editor.

 

Data Picker tag

Used to insert data source values (value of a column or a cell, result of a statistical calculation).

Notes

  • Data from Service Manager are displayed in rich text format within the Data Picker (this allows to display formatting options using tags). If you want to work on raw data without any type of text formatting, you must use the Plain Text function instead of the Field function.

    example  #[FIELD('TABLE.COLUMN')]#  ==>  #[PLAINTEXT('TABLE.COLUMN')]#

Note: For security reasons, the Plain Text function does not appear in the Data Picker functionalities. You must insert it using the HTML code editor in the text editor. Open url.png See the procedure.

Procedure: How to use the Data Picker

Step 1: Opening the Data Picker tag.

1. Place the cursor where the data source column should be inserted.

2. Click Apps - Text Editor - Advanced tags icon.png and select the Data Picker category.
The list of data source columns will appear.
         Apps - Text Editor - Advanced tags Data Picker.png
 

Step 2: Specifying the information.

1. Select the data source column you want.

2. Select the value you want to insert.

  • Cell value: Used to display the value of the current record.
    • If you want to display the value of a specific record, you should select it from the #Row drop-down list.
  • Special link tags: Used to indicate the type of column to insert. A HTML tag is automatically inserted.
    • Image tag: Column defining an image.
      tag: <img src="#[FIELD('xxxxxxx')]#" class="fr-draggable">
    • Mailto tag: Column defining a link to emails.
      tag: <tel:#[FIELD('xxxxxxx')]#>
    • Tel tag: Column defining a phone number.
      tag: <mailto:#[FIELD('xxxxxxx')]#>
    • Skype tag: Column defining a Skype address.
      tag: <skype:#[FIELD('xxxxxxx')]#>
  • Statistical aggregate functions: Available depending on the column or record you selected in the data source.
    • Max: Returns the maximum value of the column/record.
    • Min: Returns the minimum value of the column/record.
    • Average: Returns the average value of the column/record.
    • Sum: Returns the sum of the values in the column/record.
    • Count: Counts the number of values in the column/record.
  • Decimals to show: For numeric values, select the number of decimal places.

3. Click Apps - Add icon.png.
 The corresponding instructions will be inserted in the text editor. Open url.png See the description.
 

Step 3: Closing the tags editor.

1. Click Apps - Text Editor - Advanced tags icon.png.
The dedicated pane will be closed. You return to the text editor.
 

Step 4 (optional): Completing the HTML code for images.

1. Open the HTML code editor via Apps - Text Editor - Html Editor icon.png.

2. Surround the instruction #[FIELD('Image')]# with the < img src="..." > tag.

2. Add the HTML height and width attributes to define the size of the image.

example  < img src="#[FIELD('Image')]#" height="150" width="100" /" >


Step 5 (optional): Completing the HTML code for using Plain Text function.

1. Open the HTML code editor via Apps - Text Editor - Html Editor icon.png.

2. Replace the instruction #[FIELD('TABLE.COLUMN')]# with the instruction #[PLAINTEXT('TABLE.COLUMN')]#.

          Apps - Text Editor - Data Picker - PlainText function.png

Instructions inserted in the text editor

  • For a data source column: #[FIELD('ColumnName')]#
  • For a specific data source cell: #[CELL(x,y),DIGITS ( n)]#  ==> Cell at the intersection of row x and column y (Note: Numbering starts at 0), followed by the number of decimal places (DIGITS n).

    example  The cell selected is at the intersection of row 2 and column 6 without any decimals ==> #[CELL(1,5),DIGITS(0)]#

  • For a cell with a statistical aggregate function:
    • #[FunctionName_COLUMN( x),DIGITS ( n)]# ==> Function is applied to column x, followed by the number of decimal places.
    • #[FunctionName_ROW( x),DIGITS ( n)]# ==> Function is applied to record x, followed by the number of decimal places.

example 

  • The average value is selected from column 2 with 2 decimal places ==> #[AVERAGE_COLUMN(1),DIGITS(2)]#
  • The sum of values is selected from record 1 without any decimals ==> #SUM_ROW(1),DIGITS(0)]#

 

Workflow tag

Used to insert command buttons for approving or completing actions linked to incidents or service requests without opening Service Manager.
         Apps - Text Editor - Advanced tags Workflow - detail.png

Notes

  • Depending on the type of action, you can configure three command buttons. These are the buttons displayed in Service Manager when the Finish wizard is run, i.e. Accept, Reject, Information Request. Open url.png See the List of action types.
  • Command buttons can be inserted in a Data Viewer widget in any mode,List, Tile, or Form.

Enter a user comment on a validation action

  • By default, the Accept, Reject, Information Request command buttons require users to enter a reason for the answer.
             Apps - Text Editor - Advanced tags Workflow - Rejected comment.png
  • An acceptation, rejection or information request questionnaire can also be displayed in Service Manager in a worfklow approval step for the incident or service request.
  • To avoid asking users to enter their comment twice, you can hide the Comment field in your Service Apps app via the Hide Default Fields property of each button type.
  • The configuration of the command button applies to all Approval actions.

Caution

  • If you disable the rejection comment functionality on a Reject command button in your Service Apps app, users may be able to reject actions inadvertently or to omit entering a rejection comment. To avoid this, perform the following steps in Service Manager:
    • Add a step to manage rejection in incident or service request workflows that contain an approval step.
    • Associate a questionnaire to enable users to enter a reason for the rejection.
               Apps - Text Editor - Advanced tags Workflow - Workflow with rejected step.png
    • Configure the step to manage rejection in all incident or service request workflows that contain an approval step.

Procedure: How to insert command buttons for approving or completing actions

Step 1: Open the Workflow tag.

1. Go to the widget pointing to the data source linked to the AM_ACTION table. 

2. Click Apps - Edit Html icon.png to open the text editor  in the ...Cell Format property of a Data Viewer widget (Tile, List or Form) or in the HTML Code property of a Secured HTML widget.

3. Place the cursor at the spot where you want to insert the command buttons.

4. Click Apps - Text Editor - Advanced tags icon.png and select the Workflow category.
         Apps - Text Editor - Advanced tags Workflow.png
 

Step 2: Add the command buttons.

1. Specify the information for the three buttons.

  • Hide Button: Used to indicate if the command button is hidden (box is checked) or displayed (box is not checked).
  • Custom Label: Name of the command button.
    • Labels can be translated into different languages.
    • Default values: Accept, Information Request, Reject.

2. Click Apps - Add icon.png.
The #[EZVTAG-ACTIONS... ]# instruction will automatically be inserted in the text editor.
 

Step 3: Close the text editor.

1. Click Apps - Text Editor - Advanced tags icon.png and click OK.

  • The text editor will close.
  • The command button labels are updated dynamically in execute mode based on the action type.

EasyVista tags

Document Upload tag

Used to insert an action button for uploading documents.
         Apps - Text Editor - Advanced tags EasyVista - Upload detail.png

Notes

  • The name of the button is identical to the one in Service Manager.

Procedure: How to insert a button for uploading documents

Step 1: Opening the EasyVista > Document Upload tag.

1. Place the cursor where the button should be inserted.

2. Click Apps - Text Editor - Advanced tags icon.png and select the EasyVista > Document Upload category.
         Apps - Text Editor - Advanced tags EasyVista.png
 

Step 2: Inserting the button.

1. Click Apps - Add icon.png.
The #[EZVTAG-UPLOAD_DOC]# instruction will be inserted in the text editor.
 

Step 3: Closing the tags editor.

1. Click Apps - Text Editor - Advanced tags icon.png.
The dedicated pane will be closed. You return to the text editor.

New Request tag

Used to add a command button to generate a new service request or change request without opening Service Manager. Any associated questionnaire will automatically open.

Examples

  • From the list of current incidents, display the button to generate a change request related to the selected incident.
  • From the entries in the service catalog, display the button to generate a service request associated with the selected entry.
             Apps - Text Editor - Advanced tags EasyVista - New request detail.png

Procedure: How to insert a button for generating a request

Step 1: Opening the EasyVista > New Request tag.

1. Place the cursor where the button should be inserted.

2. Click Apps - Text Editor - Advanced tags icon.png and select the EasyVista > New Request category.
 

Step 2: Specifying the information.

1. Enter the button name in the Button Label field.

  • You must not use special characters such as < > ‘ / etc.
             Apps - Text Editor - Advanced tags EasyVista - New request Properties.png

2. Define the the graphic properties of the button via the Style tab.

         Apps - Text Editor - Advanced tags EasyVista - New request Style.png  New request - Button - Style properties.png

  • (1) Background Color: Background color of the button.
  • (2) Text Color: Color of the button text.
  • (3) Background Color on Hover: Background color of the button when the cursor moves over it.
  • (4) Text Color on Hover: Color of the button text when the cursor moves over it.
  • Font Size: Font size.
  • (5) Border Radius: Radius applied to define more or less rounded corners for the button.
     

3. (optional) Specify the information that have not been updated when creating the request in Service Manager, via the Properties tab.
         Apps - Text Editor - Advanced tags EasyVista - New request - Properties selected.png

  • Service: Entry in the Service Request Catalog or Change Catalog.
    • Once you have selected the catalog entry, click Add Parameter.
    • If the command button is placed in a widget pointing to the Service Request Catalog, the field will be grayed out. The current catalog entry is automatically selected (CATALOG_GUID) and cannot be modified.
  • Destination field (SD_REQUEST): Destination field in the SD_REQUEST table.
    • Select the destination field from among the key fields, fields associated with the key, AVAILABLE_FIELD_... fields and E_xxx fields displayed.
  • Parameter type: Source of the information to be stored in the destination field. The elements to be specified will depend on the type of parameter.
    • Field: The source is a data source field linked to the widget.
      • Select the relevant field from the Column list which displays all authorized fields.
      • If the destination field is a key field, select the primary key of the source table from the Column list (PK field).
          
    • Other Data Sources: The source is another app data source field.
      • Select the relevant field from the Data Source list which displays all app data sources.
      • Next, select the data source field from the Column list which displays all authorized data source fields.
         
    • Tag: The source is a dedicated tag.
      • Select the relevant tag from the Select tag list which contains predefined values.
      • Note: You cannot create new tags. These are defined by EasyVista.
         
    • Value: The source is a value.
      • Enter the alphanumeric value in the Enter value field.

4. Click + Add.
The new parameter will appear at the bottom of the screen with a different color code for each drop-down list.
         Apps - Text Editor - Advanced tags EasyVista - New request - Parameter added.png

  • Move the cursor over the color key to see the details.
  • Click Delete icon.png to delete the parameter.

5. (optional) Add other parameters via Add Parameter.

6. Click Apps - Add icon.png.
The command button will be added to the text editor.
 

Step 3: Closing the tags editor.

1. Click Apps - Text Editor - Advanced tags icon.png.
The dedicated pane will be closed. You return to the text editor.

Modification of the command button

  • Click the button in the text editor.
  • Click Apps - Text Editor - New request - Modify icon.png.
     

Modification of the name of the command button and the action

  • The name of the New Request button can be modified in the Label Button on the Store field in the Service Request Catalog.

Embed Questionnaire tag

This opens a window for creating a new service request containing all elements of the catalog entry, including questionnaires.
         Apps - Text Editor - Advanced tags EasyVista - Embed questionnaire detail.png

Procedure: How to insert a button for creating a request via a window

Step 1: Opening the EasyVista > Embed Questionnaire tag.

1. Place the cursor where the button should be inserted.

2. Click Apps - Text Editor - Advanced tags icon.png and select the EasyVista > Embed Questionnaire category.
         Apps - Text Editor - Advanced tags EasyVista.png
 

Step 2: Inserting the button.

1. Click Apps - Add icon.png.
The #[EZVTAG-NEW-REQUEST question="embed"]# instruction will be inserted in the text editor.
 

Step 3: Closing the tags editor.

1. Click Apps - Text Editor - Advanced tags icon.png.
The dedicated pane will be closed. You return to the text editor.

Status Notification tag

Used to display a green notification banner indicating the status of the created request.
         Apps - Text Editor - Advanced tags EasyVista - Status notification detail.png

Procedure: How to display a green notification banner

Step 1: Opening the EasyVista > Status Notification tag.

1. Place the cursor where the button should be inserted.

2. Click Apps - Text Editor - Advanced tags icon.png and select the EasyVista > Status Notification category.
         Apps - Text Editor - Advanced tags EasyVista.png
 

Step 2: Inserting the notification banner.

1. Click Apps - Add icon.png.
The #[EZVTAG-NEW-REQUEST-STATUS]# instruction will be inserted in the text editor.
 

Step 3: Closing the tags editor.

1. Click Apps - Text Editor - Advanced tags icon.png.
The dedicated pane will be closed. You return to the text editor.

Star Rating tag

Used to display rating stars for knowledge base articles.
         Apps - Text Editor - Advanced tags Star rating - detail.png

Notes

  • This tag is available only if the text editor is accessed from a widget linked to an EasyVista data source pointing to the knowledge base.

Procedure: How to display rating stars

Step 1: Opening the EasyVista > Star Rating tag.

1. Place the cursor where the button should be inserted.

2. Click Apps - Text Editor - Advanced tags icon.png and select the Star Rating category.
         Apps - Text Editor - Advanced tags Star rating.png
 

Step 2: Inserting the rating stars.

1. Click Apps - Add icon.png.
The #[DSTAG-star-rating ratingValue ="#[FIELD('...')]# instruction will be inserted in the text editor.

2. Enter the information.

  • Authorized modification: Used to indicate if the field contents are modifiable (box is checked) or if the field is available in read-only mode (box is not checked). If the field is modifiable, the update is performed in Service Manager.
     

Step 3: Closing the tags editor.

1. Click Apps - Text Editor - Advanced tags icon.png.
The dedicated pane will be closed. You return to the text editor.

Translation Tag...

This displays translated keywords in the app. Click one of the keywords to add it to any data entry field in a widget. Open url.png See the Translation editor.

         Active widget - Editor text - Translation advanced tag.png

Notes

  • Text in apps is listed in a CSV file that is encoded in UTF-8 to avoid any conflict with accents and special characters.
    Note:  The six main languages are managed by EasyVista. The supported languages are English, French, Portuguese, Spanish, German and Italian.
  • All templates available in the Service Apps library are automatically shipped with a multilingual file that lists all app keywords in the six main languages.

Procedure: How to translate an app

    Open url.png See the procedure.

Tags:
Powered by XWiki © EasyVista 2022