The graphic editor is the tool used for designing Service Apps apps. It is used to:

• Access the following libraries:
  • The data source library providing the means of access to sources of data, e.g. databases, files, websites, third-party products. Certain data sources require the prior configuration of connectors.
  • The widget and custom widget library providing all graphic components for displaying data and for defining the visual aspect of the app.

• Configure and define the behavior of objects in the Properties Inspector.
• Test the app based on the device, e.g. smartphone, tablet, PC screen, etc.

Characteristics of apps

Each app can:

• Be associated with a theme that defines its style guide.
• Be divided into pages to group information.
• Contain public pages, i.e. pages accessible to all users, and private pages, i.e. pages that contain data requiring user authentication.  See Public mode.
• Be designed to run in responsive mode, where the display will automatically be adapted to the device on which the app is run, e.g. PC, smartphone or tablet. 
• Be exported from a test environment in order to import it to the production environment. 

Notes

• When an app displays Service Manager data:
  • Data is displayed in the language of the logged-in user.
  • Numerical values are restricted to the default domain of the logged-in user.

• Widgets using dynamic data sources are automatically refreshed each time the graphic editor is opened and each time the page is redisplayed.

• Deployment of apps:
  • To deploy an app, you send users a link to the app which can be a direct URL or a shortcut (recommended).
  • Parameters can be passed in the app URL in order to apply a filter or view, or to access specific records directly.  See Exposed properties.

• The version management functionality allows you to switch to an earlier version of the app at any time.

Caution

• Responsive mode cannot adapt to browser and screen resolution when users use the zoom functionality in an app. As the positioning of objects is fixed and defined in pixels and the display area remains unchanged, horizontal or vertical scroll bars may appear.
  • Service Apps templates are designed to be displayed correctly without any scroll bars up to a certain zoom level.
  • When creating a new app, you should anticipate the zoom level users may require on their screens and define widgets accordingly so as to eliminate the need for scroll bars.

Best Practice

• Use the template library that provides a set of apps that are ready to use, downloadable and easily customizable.
• Use themes to define the style guide of your apps.
• Use CSS variables to modify your Service Apps style guide quickly. They enable you to automatically load graphic properties, such as color or font size, in the widgets used by all of your apps.

• We strongly recommend that you create a restore point using  prior to modification because modifications cannot be canceled or undone.

• To enable an app to run without a parameter, using a URL, specify the default values in the exposed properties.

• In execute mode, users can click  to access all of their apps. They will automatically be loaded when an app is run. To ensure optimal performance, if you do not want all of these apps to be loaded, you can hide the icon  in the Show App List property in the general properties.

Version management

Version history

• You can access this using  in the toolbar.  See the description.
• It contains the following:
  • Manually created restore points in the history. Limited in number.
  • Automatic backups performed each time the app is opened in the graphic editor. The backup file name contains the following text, Saved before editing by {Connected_User}.
  • Manual backups performed via . Their names contain the following text, Saved by {Connected_User}.

• The name of each backup will show the creation date and time.
• Versions that have not been manually deleted are stored as long as the app is not deleted.
   

System backups

• These are performed automatically by the system based on a specific frequency. 
• They do not appear in the version history.
   

Rollback to an earlier version

• You can rollback to an earlier version of the app at any time by selecting the version you want in the history.
• In the event of an unexpected shutdown of the system or app, the system will recover the last version of the app. This may be the last backup performed automatically by the system or the last manual backup.

Access

In the App Gallery, click  in the app toolbar.

Description of the graphic editor

The screen is divided into four zones:

• (1) Toolbar
• (2) Objects pane, used to access all app objects, e.g. pages, widgets or data sources
• (3) Properties Inspector, specific to each object
• (4) Design pane, a workspace for defining the layout of widgets
        

Toolbar

: Used to close the graphic editor and return to the App Gallery.


: Used to display the general properties of the app.

Click to see the properties

• Apps Icon tab: Used to upload the icon associated with the app in the App Gallery.

Tab	Display in the App Gallery

• Click to select the image.
• To crop the
  • Move the cursor over the image and click .
  • Click and drag to select the zone you want to keep.
  • Click Crop Image.

    

• Apps Header tab: In execute mode, this indicates whether or not the app title bar should display a title (Name option) or a logo (Logo option).
  • Name option: The title displayed is taken from the Display Name field.
  • Logo option: Click to upload the logo.

  Use an image whose aspect ratio has a landscape orientation for an optimal display of the logo. Note: Images will automatically be compressed when displayed to ensure optimal system performance.

Tab	Display in the title bar
	Name option Logo option

• Favicon tab: Used to select the icon displayed in the tab bar of the Web browser or as a shortcut on the Desktop.
  • The image is automatically uploaded in different resolutions to adapt its display to different devices.
  • The appropriate resolution is automatically selected when users run the app on their device or install the shortcut on their Desktop.

Tab	Display
	In the title bar On the Desktop (shortcut) See How to create a shortcut to an app on a smartphone or PC.

• Click to select the image.
• Click to delete all downloaded resolutions.

• To select a different image for a given resolution:
  • Move the cursor over the resolution you want to modify.
  • Click and select the image you want.

: Used to indicate that the image in the resolution is different from the original one. : Used to return to the original image in the selected resolution.

• Name: Name of the app displayed in the App Gallery.

• Display Name: Name of the app displayed in the title bar in execute mode.

• Theme: Theme of the app that defines its style guide, e.g. background color, borders, fonts, etc.
  • Modifications are automatically reflected in the Design pane.
  • You can define a specific configuration for the page or widget using the Theme category properties.

• Description: Short description of the app displayed in the App Gallery.

• Choose an execution context: Name of the current execution context indicating the database used by the app.
  • Execution contexts are defined in connectors.
  • If the execution context is not specified and if aliases were defined for data sources, then the app will run using the default values of these aliases.

• This application never disconnects: Indicates if the account should disconnect automatically after a specified idle time (box is not checked) or if it should remain connected all the time (box is checked).

  For security reasons, we recommend that you restrict the use of this option to apps displayed on screens such as those used in the Service Desk operations center or for announcements in public places. You should not use the option for apps where logged-in users can create or manipulate data because they may not be the ones running the app.

OptionsShow

• Show Main Toolbar: In execute mode, this indicates if the app title bar should be displayed (box is checked) or not (box is not checked).

• Show App List (Note: Only when the Show Main Toolbar property is enabled): In execute mode, this indicates whether the  icon (list of apps that users can access) is displayed (box is checked) or not (box is not checked).

Properties	Display in execute mode
Show Main Toolbar: Box is checked Show App List: Box is checked
Show Main Toolbar: Box is checked Show App List: Box is not checked
Show Main Toolbar: Box is not checked Show App List: Box is checked or box is not checked

• Choose a public User: User whose profile is Public associated with the app.
  • When a user is selected, you can define public pages, i.e. pages accessible to all users, and private pages, i.e. pages that contain data requiring user authentication. See Public mode.
  • Click to remove the Public user from the app and make it private.

• Help Link: URL of the help page associated with the app.
  • Click and specify the URL.
  • In execute mode, the icon will appear in the app title bar.

• Exposed Properties: Used to access exposed properties.   See the description.
  • These are parameters that can be passed in the app URL in order to apply a filter or view, or to access specific records directly.
  • Note: The QR code does not take exposed properties into consideration. This enables it to be valid at all times.

: Used to list app pages. 

• Select one of them to view its contents in the Design pane.
• To display the page properties, click  to select the page in the Objects pane.
   

: Used to share the app by sharing its URL, QR code or export file. Note: To run the app using its URL, the user platform login information is required. 

Click to see the properties

: Used to save the app.

• The version is added to the version history.  See Version management.

: Used to open the app version history.  See Version management.

Click to see the properties

: Used to access the connectors used by the app to configure the connection parameters to app data sources.

• Note: You can also define connectors in the App Gallery. They will be available to all apps.
   

 and : In the Design pane, this enables you to toggle between a display in design mode and Wysiwyg mode. In design mode, toolbars are shown for each row and each widget. In Wysiwyg mode, all toolbars are hidden. Note: The current display mode is represented by a blue icon.

Display in design mode	Display in Wysiwyg mode

: Used to access responsive mode. This overrides the default properties of each widget based on the type of device on which the app is run, e.g. smartphone, tablet, PC screen, high definition PC screen, high-end flat-screen TV.  See the description.

• The graphic editor will display a new toolbar.
• Click  to return to the graphic editor in standard mode.
   

: Used to run the app in a new Web browser tab.

AuthenticationZone

Objects pane

The Objects pane is used to manage app objects such as pages, data sources, and widgets.

 Pages: Used to access the list of pages in the app.

• Click  to open the Properties Inspector (graphic properties of the page) and display the contents of the page in the Design pane.

• List of tools
  •  Create a new page.
  •  Show or hide pages in execute mode.
  • Manage public  pages and private  pages.  See Public mode.
  •  Delete and duplicate pages using the contextual menu.
  •  Arrange the order of pages.
          
     

 Add Widgets: Used to create widgets for the selected page using the widget types defined in the library.
       See How to add a widget to an app.

• List of tools
  •  Search and filter types of widgets and custom widgets by name.
  •  Open the contextual help page specific to the type of widget.
          
     

 Widgets: Used to access the list of widgets and custom widgets for the selected page, arranged by category.

• Click the name of a widget to open the Properties Inspector and view its contents in the Design pane.
• Widgets are identified by icons that display their type.

• List of tools
  •  Search and filter widgets and custom widgets by name.
  •  Duplicate widgets. New widgets are displayed in the Design pane below the widget used as a template.
  •  Delete widgets in the page.
          
     

 Add Data Sources: Used to create app data sources using one of the data source types defined in the library.

• List of tools
  •  Open the help page specific to the data source library.
  •  Search and filter types of data sources by name.
          
     

 Data Sources: Used to access the list of app data sources, arranged by category.

• Click one of the data source names to open the Properties Inspector.
• Data sources are identified by icons that display their type.
• Data sources pointing to an alias appear in bold.

• List of tools
  •  Search and filter data sources by name.
  •  View the number of times the data source is used in the app and display the list of widgets when the cursor is moved over the counter.
  •  Duplicate data sources. Note: Except for composite data sources.
  •  Delete data sources in the app.
          
     

 Global Style: Used to access a single CSS style sheet for the entire app.  See the description

• Click the section to display the field for specifying CSS code.
          

Design pane

The Design pane is a workspace used to define the layout of app widgets. The pane is automatically refreshed each time the properties of objects are modified, e.g. page, data source or widget.
      
 

• The workspace is divided into rows, each virtually separated into a maximum of 12 columns of equal width.
      
• You define the layout using Layout widgets.
• Depending on the size of the device (e.g. PC screen, smartphone, tablet or TV), a widget can occupy all 12 columns (one whole row) or several widgets can be displayed in the same row.
   

Principles of use

• You can view the layout of widgets when you move the cursor over them.
  • Green dotted borders are used for objects in the row or column.
  • Green borders are used for objects.

Row		Column		Widget

• You can move each widget.
  • Move the cursor over the object to display .
  • Click and drag the object to its new position. Note: The positions available will appear in green with the words Drop a Layout Widget Here.
          
     

• You can modify the height of a widget.
  • Move the cursor over the bottom of the object and display .
  • Click the object and move up or down to adjust the height.
          

• Each row, column and widget has a contextual menu for performing different actions.
  • Move the cursor over the object bar.
  • Click .
          
     

Description of contextual menu options

• Create Custom Widget: Used to create a new custom widget using objects in the selected row or column.
   See the procedure.

• Delete Row / Delete Column: Used to delete the selected row or column.
  • All widgets in the row or column will be deleted in the Design pane.
  • They will remain available in the widget library of the app.
     
• Copy widget: Used to duplicate the selected widget.
  • It will have the same name followed by the word, (Copy).
          
  • The new widget will appear in the Design pane below the widget used as a template.
  • It will open directly in edit mode.
     
• Remove widget: Used to delete the selected widget in the Design pane.
  • The widget will remain available in the widget library of the app.
     
• Stack on Small (default display mode): Used to position widgets automatically based on the type of device, e.g. smartphone, tablet, PC screen, etc.
  • Widgets are automatically placed in a row. If the screen width is too small, they are stacked on top of each other.
     
• Single row on small: Used to force widgets to be placed in a single row.
  • Widgets will be kept together regardless of the width of the device screen.
     

Stack on Small option		Single row on small option
Display on a PC		Display on a PC
Display on a smartphone (Android or iPhone)		Display on a smartphone (Android or iPhone)

Properties Inspector

The Properties Inspector is used to configure each object used in the app, e.g. page, data source or widget. The Design pane is automatically refreshed each time properties are modified.

• Properties are specific to each type of object.
• They are grouped by category.
  • Content category: Fundamental properties required for the object to work.
  • Data category: Configuration properties for the data source used by the widget.
  • Chart and Chart Label -/- Legend categories: Properties related to the display of charts in the Dashboards widget (e.g. legend, labels or axis color).
  • Theme category: Graphic properties related to the widget or page (e.g. border, background color or font color). Note: Properties defined at higher levels are inherited by lower levels. You can modify each object in its specific context.  See the principles of inheritance.
     

Access based on the type of object

• Page: Click Pages in the Objects pane and click  next to the page.
   

• Data source:
  • Click Data Sources in the Objects pane and select the name of the data source.
    or
  • In a widget linked to a date source: Click  next to the Content > Data Source field.
     

• Widget:
  • Click the widget in the Design pane.
    or
  • Click Widgets in the Objects pane and select the name of the widget.
     

Tools accessible in the widget properties

• Text editor:  For the Label, Header/Footer and HTML Code properties.
• Color Picker:  For the Color property.
• Icon gallery:  For the Icon property. Also accessible in the text editor.

Procedures

How to use the graphic editor

Step 1: Open the graphic editor.

1. Go to the App Gallery.

2. Click  in the app toolbar.
  

Step 2: Add and configure the data sources in the app.

1. Define the connectors required for EasyVista, EasyVista KPI, MS SQL Server, and REST (Connector) data sources.

2. Click Add Data Source in the Objects pane and select the type of data source.

Step 3: Add and configure widgets in the current page.

1. Define the layout of app objects using Layout widgets.

• Click Add Widget in the Objects pane.
• Click and drag one of the widgets from the Layout category , , , ,  to the Design pane.
  Note: The positions available will appear in green with the words Drop a Layout Widget Here.
        

2. Position and configure the widgets used in the current page.

• Click Add Widget in the Objects pane.
• Click and drag the type of widget or custom widget to one of the positions you defined earlier in the Design pane.
          ==>  

• Specify the properties of each widget in the Properties Inspector.
  Modifications will automatically be saved and displayed in the Design pane.

3. Used to add other app pages.

• Click .

   or

• Duplicate an existing page by clicking  > Duplicate.

4. Add and configure all widgets in the new page.
 

Step 4: Create and configure the other app pages.

1. Click Pages in the Objects pane and click .

Note: You can duplicate an existing page with all of its widgets already configured and correctly placed. To do this, click  > Duplicate.

2. Add and configure all widgets in the new page.

Step 5: Define the layout of the app page.

1. Select the page you want from the drop-down list .

Configuration in responsive mode

• Click .
•  See the procedure.
   

2. Display the properties of the widgets to be modified.

• Click the widget in the Design pane.
  The Properties Inspector will automatically be refreshed.

   or

• Click Widgets in the Objects pane and click the widget name.
  The Properties Inspector and the Design pane will automatically be refreshed.
   

Adjust the widget height

• Specify the Theme > Widget Height property.

   or

• Place the cursor at the bottom of the widget in the Design pane.
• Move the gray bar up or down to adjust its height.
        
   

Move a widget

• Place the cursor over the widget to be moved in the Design pane.
  The cursor will change to .
        

• Drag the object to the position you want.
          ==>

Delete a widget

• Click Widgets in the Objects pane.
• Click  next to the widget.

   or

• Move the cursor over the widget in the Design pane.
• Click  > Remove widget.
        
   

Delete a column

• Move the cursor over the column in the Design pane.
• Click  > Delete Column.
         
    

Step 6 (optional): Manage public and private app pages.

    See Public mode.

1. Click  > Choose a public User to associate a user whose profile is Public with the app.

2. Click  in the Objects pane.

3. Specify the type of access for each page.
 Note: The home page will always be a public page.

• Click  to make a page private.
• Click  to make a page public.

The modifications will automatically be saved.
 

Step 7: Test the app.

1. Click  to run the app.

The app will appear in a new Web browser tab.

2. Check the visual layout of objects and the workability of the app.
 

Preview in Wysiwyg mode in the Design pane

• Click  to switch to Wysiwyg mode.
  All object toolbars will be hidden.

• Click  to return to design mode.

How to create an app

         See Best practices for creating apps.

Step 1: Create a new app

You can create an app using one of the three following methods.

• Using a template from the library.
• Using an app with no content.
• Using an existing app.

Step 1.a: Create the app using a template from the library.

         See the list of templates.

1. Click Create App in the App Gallery toolbar.

The template library will appear.
      

2. Select the template you want.

The description of the template, its last modification date and latest version date will appear in the right pane.

3. Import reports attached to the template to Service Manager.

• Click Reports.
  The appropriate template wiki page will be opened.

• Download the batch of reports.
• Import the files to Service Manager by selecting Administration > Import/Export > Import in the menu.

4. Return to Service Apps.

5. Click Create This App.

Step 1.b: Create the new app using an app with no content.

1. Click Create App in the App Gallery toolbar.

The template library will appear.

2. Click .

The general properties of the app will appear.

3. Specify the information.

4. Click OK.

The graphic editor will appear.

5. Use the editor to create, place and define all app objects.

      See the procedure.

Step 1.c: Create the new app using an existing app.

1. Click  in the toolbar of the app you want to duplicate.

2. (optional) Click  to rename the new app.

3. Use the editor to create, place and define all app objects.

      See the procedure.
 

Step 2: Test the app.

1. Click .

The app will appear in a new Web browser tab.

2. Check the visual layout of objects and the workability of the app.
 

Step 3: Define access rights to the app.

1. Click  to return to the App Gallery.

Note: The app will automatically be saved.

2. Click  in the app toolbar.

3. Assign access rights to the relevant users or teams.

• Select the relevant users or teams.
  Note: If you select a team, the access rights you define will apply to all of the users in the team.

• Select the access rights to assign.

  UserApplicationsRights

  •  Admin: Users are authorized to administer the app but cannot modify or run it.
  • Edit: Users are authorized to access the graphic editor to edit the app.
  • Execute: Users are authorized to run the app but cannot modify it.

• Click OK.
   

Step 4: Send the new app to users.

1. Create a shortcut to the new app by clicking Create Shortcut in the App Gallery toolbar.

The shortcut will appear at the top of the App Gallery with the  icon.

2. Click  in the shortcut toolbar.

3. Copy the QR code or link displayed in Share application URL.