The Theme Editor of Service Apps

Last modified on 2022/11/08 13:22

Apps - Theme editor overview.png

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:

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. Open url.png See User management.
  • Only published themes (public themes) can be used in apps. Open url.png See the procedure.
  • Most properties have an Inherit checkbox. This is used to manage inherited or context-specific graphic properties. Open url.png 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.
EVApps - Graphic Properties - Inherit.png

(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.

Properties Inherit - Inherit property.png

The property is defined for a specific context and has priority over any property defined at a higher level.

Properties- Inherit - Specific context property.png

  • The name of the property is grayed out.
  • The name of the property is highlighted in blue.
  • The context (e.g. theme or page) of the property and the property value are displayed when the cursor moves over the checkbox. Several items of information may be shown if the property was defined at different levels, e.g. for the theme as well as for the page.

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.
         EVApps - Graphic Properties - Example Inherit 1.png

Description of the theme editor

Access: In the App Gallery, click Apps - Gallery - Theme design icon.png 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
             EVApps - Theme Editor.png

Toolbar

     EVApps - Theme Editor - Toolbar.png

EVApps - GUI - Close Application icon.png: Used to close the theme editor and return to the App Gallery.


Apps - Application properties icon.png : Used to display the general properties of the theme.
         EVApps - Theme Editor - Properties.png

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 Padlock open icon.png) or if it is currently being designed and can only be accessed by the theme creator (Private option Padlock close icon.png).
  • Category: Category in which the theme is saved. Click [ + ] to add a new one.
  • Icon: Icon associated with the theme. You can click Wheel icon.png 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 Apps - Theme designer Profile.png box to authorize users to edit the current theme.
Best Practice icon.png To run a quick search for users, use the filter above the table.

EVApps - GUI - Save icon.png : 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

Apps - Authentication zone.png: User information zone. 

  • Apps - Logout icon.png: Used to close the platform.
  • Click the photo or name: Used to open the user information zone.

EVApps - Gallery - User Profile.png

  • Name, Email: Name and email address of the logged-in user. To associate a photo, click Apps - Upload icon.png.
  • 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.

EVApps - Gallery - User Profile - Manage external resources.png

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

Apps - Current theme icon.png Current Theme: Used to display the current theme.
 

Apps - Manage themes icon.png 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.
             Apps - Theme Editor - Manage Themes.png
  • To display the contextual menu of each theme, move the cursor over the name and click v.
    • Download icon.png Export theme: Used to export the theme in a compressed file (.tar.gz format). Note: You can import it in the App Gallery.
    • Apps - Edit icon.png 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.
    • Apps - Delete icon.png Delete theme: Used to delete the theme. Note: If this theme is used in an app, a message will appear.
       

Apps - Add theme icon.png Add Theme: Used to create a new theme.  Open url.png See the procedure

 

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.
     

   Example documentation icon EN.png  Properties Inspector for widgets
         EVApps - Theme Editor - Inspector Properties Widget type.png

Access based on the type of object

Tools accessible in the widget properties

  • Color Picker: Apps - Color Picker icon Off.png For the Color property
  • Used to reset a property to its default value: Reset properties icon.png

Procedure

How to create a theme

Step 1: Create a new theme.

1. Click Apps - Gallery - Theme design icon.png Theme Design in the App Gallery toolbar.

2. Click Apps - Add theme icon.png 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 Wheel icon.png 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 Apps - Manage themes icon.png 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.

         Theme Editor - Tabs inspector properties.png

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 EVApps - GUI - Close Application icon.png in the toolbar to close the theme editor.

Modify a theme

  • Click Apps - Manage themes icon.png 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 Apps - Manage themes icon.png Themes in the Objects pane.
  • Move the cursor over the name of the theme and click v.
    The contextual menu will appear.
  • Click Apps - Delete icon.png Delete theme.

How to associate a theme with an app

Step 1: Publish the theme.

1. Click Apps - Gallery - Theme design icon.png Theme Design in the App Gallery toolbar.

2. Click Apps - Manage themes icon.png Themes in the Objects pane.

3. Select the theme you want.
The Preview pane will display the layout of the objects configured.

4. Click Apps - Application properties icon.png 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 EVApps - GUI - Close Application icon.png in the toolbar to close the theme editor.
You will return to the App Gallery.

2. Click Apps - Application properties icon.png 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.

Tags:
Powered by XWiki © EasyVista 2022