Service Apps - The Graphic Editor
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.
- 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.
- Move the cursor over the image and click
- 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.
Tab | Display in the title bar |
---|---|
![]() |
|
- 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 |
---|---|
![]() |
|
- 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.
![]() |
|
- 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.
- 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).
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 |
---|---|
|
![]() |
|
![]() |
|
![]() |
- 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.
- 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.
- 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.
- Click
- 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.
: 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.
- Add Backup: Used to create a restore point.
- Enter a meaningful description that will identify the changes made for this version.
- Next, click
.
- Available Backups: List of versions available for the app.
- (1) Restore points that were created manually.
- (2) Manual backups created via
.
- (3) Automatic backups created when the graphic editor is opened.
: Used to restore a version by returning to an earlier version of the app.
: Used to delete a version from the version history. Click Delete all to delete all versions.
: 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
: User information zone.
: Used to close the platform.
- Click the photo or name: Used to open the user information zone.
- Name, Email: Name and email address of the logged-in user. To associate a photo, click
.
- Language: Language used to display error and system messages.
Note: The properties below are inherited from the logged-in user's platform (in Windows, this is specified in the Control Panel > Regional and Language Options). You can, however, overwrite them.
- Date format: Format applied to dates.
- Time format: Format applied to time.
- Thousands separator: Character used to group thousands.
- Decimals separator: Character used to indicate the decimal symbol.
Manage my External Accounts: Used to logged-in users to manage their personal accounts for accessing services with OAuth 2.0 authentication.
Notes:
- Only if users can access services with OAuth 2.0 authentication using their own accounts.
- You can define the services configured for connectors using the account defined in the connector.example Connection to Tweeter:
- Corporate tweets ==> users automatically have access to corporate timelines using the account defined in the connector. This account does not appear in the list.
- Personal tweets ==> users must enter their own login information. The account appears in the list.
- Service: Name of the service (or third-party application).
- Visibility: Used to indicate if authentication is only for the logged-in user (Private) or for all users with access to the service via an Service Apps app (Public).
- Account: Account associated with the service.
: Used to delete the login information for the selected service.
- Click Remove All to delete the login information for all services.
- If the deleted information is used in an app, users of the app must once again log in manually.
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.
- Move the cursor over the object to display
- 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.
- Move the cursor over the bottom of the object and display
- 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.
- It will have the same name followed by the word, (Copy).
Remove widget: Used to delete the selected widget in the Design pane.
- The widget will remain available in the widget library of the app.
- 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.
- 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.
- 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.
example Properties Inspector for a widget
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.
- Click
- Widget:
- Click the widget in the Design pane.
or - Click
Widgets in the Objects pane and select the name of the widget.
- Click the widget in the Design pane.
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.
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.
- A new app will automatically be created using the template.
- It will appear in the Design pane of the graphic editor.
- All of the objects in the app will be initialized.
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.
- A new app will be created. It will have the same name followed by the word, (Copy).
- All of the objects in the template app will be duplicated.
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.