The Theme Editor of Service Apps
The theme editor enables you to design style guides for apps using themes.
- Each theme can be associated with a group of apps. It is used to define the graphic properties of objects such as pages or widgets used by the apps, e.g. background color, text color, font size and style, header and footer characteristics, borders, etc.
- Once a modification is made to a theme property, it will automatically be propagated to all apps associated with this theme. This only applies to all properties in the app that have not been defined for a specific context.
- You can preview the visual aspect of each theme for all apps in the App Gallery.
You can define the graphic properties of a theme in two different places:
- The Application tab is used to define and apply the same properties to all pages in apps associated with the theme.
See the description of properties. - The Widgets tab is used to define properties for each type of widget. See the description of properties.
Examples
The Oxygen theme is applied to certain Service Apps templates. All apps installed using one of these templates will therefore have the same visual aspect, e.g.Change Manager, Mobile Support Tech, etc.
Notes
- Only users whose profile is Theme Designer can access the theme editor. See User management.
- Only published themes (public themes) can be used in apps. See the procedure.
- Most properties have an Inherit checkbox. This is used to manage inherited or context-specific graphic properties. See the principles of inheritance.
- The app in the preview is not modified.
- You cannot use the theme editor to modify the properties of images.
- You can export themes in the theme editor. You can import them in the App Gallery.
Caution
- The behavior of certain properties may vary depending on the Web browser.
PropertiesInherit
Principles of inheritance and context-specific for graphic properties
- The default values of properties in a theme are those defined in the standard stylesheet shipped with the Service Apps setup, i.e. the Foundation CSS stylesheet.
- Inherited properties values are the values defined at higher level according to the following hierarchy.
 |
(1) Specific configuration defined for the widget in the app (2) In its absence, specific configuration defined for the type of widget in the theme related to the app (3) In its absence, specific configuration defined for all widgets in the app page (4) In its absence, specific configuration defined for all widgets in the theme associated with the app (5) In its absence, configuration of the Service Apps standard stylesheet, i.e. the Foundation CSS stylesheet |
- The Inherit box, used to manage inherited or context-specific properties, is found next to most properties.
| Inherit (box is checked) | Context-specific (box is not checked) | |
|---|---|---|
|
The property is inherited from a higher level.
|
The property is defined for a specific context and has priority over any property defined at a higher level.
|
|
|
|
example An app contains the Incidents dashboard whose widgets inherit the colors defined for the theme. The title in the Major Incidents widget is highlighted as regards the background color and the text color because these properties are context-specific.
Description of the theme editor
Access: In the App Gallery, click 
in the toolbar.
The screen is divided into four zones:
- (1) Toolbar
- (2) Objects pane, used to manage themes
- (3) Preview pane, used to display the effect of theme properties on objects
- (4) Properties Inspector, specific to each object of the theme
Toolbar
: Used to close the theme editor and return to the App Gallery.
: Used to display the general properties of the theme.
See the description of properties.
- Name: Name of the theme.
- Based On (Note: Only when creating a new theme): Name of the theme used as a template.
- The list of themes is defined by EasyVista. You cannot add new ones.
- Published: Used to indicate if the theme is public and can be used in all apps (Published option
) or if it is currently being designed and can only be accessed by the theme creator (Private option 
).
- Category: Category in which the theme is saved. Click [ + ] to add a new one.
- Icon: Icon associated with the theme. You can click
to select it in the icon gallery or enter its URL.
- Icon Color: Color of the icon associated with the theme.
- Table of users: List of users whose profile is Theme Designer.
- Select the
box to authorize users to edit the current theme.
- Select the
To run a quick search for users, use the filter above the table.
: Used to save the theme.
Preview On: List of apps in the App Gallery.
- Select one of them to preview the visual aspect of objects after applying the theme.
- If the app contains several pages, select the one you want from the drop-down list.
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
Current Theme: Used to display the current theme.
Themes: Used to access the list of themes, arranged by category.
- Click the name of the theme to open the Properties Inspector and display the layout of objects in the Preview pane.
- Each theme is preceded by an icon selected in the general properties.
- To display the contextual menu of each theme, move the cursor over the name and click v.
Export theme: Used to export the theme in a compressed file (.tar.gz format). Note: You can import it in the App Gallery.
Edit theme (or click the name of the theme): Used to modify the theme using the Properties Inspector. Note: If this theme is used in an app, a message will appear.- Delete theme: Used to delete the theme. Note: If this theme is used in an app, a message will appear.
Add Theme: Used to create a new theme. See the procedure
- The Properties window of the theme will automatically open.
Preview pane
The Preview pane is used to view the effects of the theme on the selected page of the template for each type of widget.
- When a graphic property is modified for one of the widgets in the template, the modification will automatically be propagated to all widgets of the same type using the theme.
Properties Inspector
This is used to define the graphic properties of each object used by the template, i.e. pages and types of widget.
- Properties are specific to each type of object.
- They are grouped by category.
- The Preview pane is automatically refreshed each time properties are modified.
Properties Inspector for widgets
Access based on the type of object
- Page. See the properties of apps in the theme editor.
- Click Current Theme in the Objects pane and select the Application tab.
- Click
- Widget. See the properties of widget types in the theme editor.
- Click the widget in the Preview pane.
or - Click Current Theme in the Objects pane and select the Widgets tab.
- Click the widget in the Preview pane.
Tools accessible in the widget properties
- Color Picker:
For the Color property - Used to reset a property to its default value:
Procedure
How to create a theme
Step 1: Create a new theme.
1. Click Theme Design in the App Gallery toolbar.
2. Click Add Theme in the Objects pane.
3. Specify the general properties of the theme.
(optional)
- Select the theme you want to use as a template from the Based On list.
- Select the category to which the new theme should belong. Click [ + ] to create a new one.
- You can click to select the icon associated with the theme in the icon gallery or enter its URL in the Icon field. For SVG images, select its background color in the Icon Color field.
5. Click OK.
- The name of the new theme is displayed in the theme editor toolbar.
- If you selected a template, the new theme will inherit all of the template's properties.
- The new theme will be added to the theme library in the selected category. You can click Themes to access it in the Objects pane. The icon you selected will appear before its name.
Step 2: Select the app for previewing the theme.
1. Select the app for previewing the visual aspect of the theme from the Preview On list in the toolbar.
2. (optional) Select the app page.
The Preview pane will automatically be refreshed.
Step 3: Define the properties of the theme.
1. Click the tab corresponding to the properties you want to configure at the top of the Properties Inspector.
- Application: Properties applicable to all pages in apps associated with the theme.
- Widget: Properties applicable to all widgets of a given type in all apps associated with the theme.
2. Go to the relevant sections in the Properties Inspector.
3. Modify the properties you want.
The Preview pane is automatically refreshed each time properties are modified.
Step 4: Return to the App Gallery.
1. Click in the toolbar to close the theme editor.
Modify a theme
- Click Themes in the Objects pane.
- Select the theme you want.
Note: If this theme is used in an app, a message will appear.
The Preview pane will display the layout of the objects configured.
- Make the required modifications in the Properties Inspector.
The modifications will automatically be propagated to all apps using the theme.
Delete a theme
- Click Themes in the Objects pane.
- Move the cursor over the name of the theme and click v.
The contextual menu will appear.
- Click Delete theme.
How to associate a theme with an app
Step 1: Publish the theme.
1. Click Theme Design in the App Gallery toolbar.
2. Click Themes in the Objects pane.
3. Select the theme you want.
The Preview pane will display the layout of the objects configured.
4. Click in the toolbar to display the general properties of the theme.
Note: If this theme is used in an app, a message will appear.
5. Check the Published box.
6. Click OK.
The theme will become available in the theme library and can be used by all apps.
Step 2: Associate the theme with an app.
1. Click in the toolbar to close the theme editor.
You will return to the App Gallery.
2. Click in the app toolbar to display the general properties of the app.
3. Select the theme you just published from the Theme list.
4. Click OK.
The layout defined in the theme will be applied to all objects in the app.
5. Repeat the procedure for all apps to be associated with the theme.