The Theme Editor of Apps


Each app in the App Gallery is made up of content (all objects displayed on screen) and a container for the layout and graphic style of these objects. To standardize all of these elements, e.g. pages, widgets, menu elements or charts, you can create themes and define a style guide applicable to all related apps. This enables you to define the background color, text color, font style and size, header and footer characteristics and borders.

  • You create themes in a specific graphic editor.
  • The import/export functionality enables you to export themes from a test environment and import them to a production environment.
  • By default, properties defined at higher levels are inherited by lower levels. You can modify each property in its specific context. Open url.png See the principles of inheritance.

Notes

  • The behavior of certain properties may vary depending on the Web browser.
  • The theme editor uses a template app that enables users to preview the visual aspect of objects.
    • The app is not modified.
    • By default, the last app configured will be displayed.
  • Only users whose profile is Theme Designer have the right to create themes and can access the theme editor.
  • You cannot use the theme editor to modify the properties of images.
  • Only published themes can be used in apps.
  • When you modify a published theme, apps using this theme will automatically be updated and the modifications will affect all properties in the app that have not been defined for a specific context.
  • You can export themes in the theme editor. You can import themes in the App Gallery.


PropertiesInherit

Principles of inheritance for graphic properties

  • The default values of properties in a theme are initially those defined in the standard stylesheet shipped with the Product name - ev sas.png setup, i.e. the Foundation CSS stylesheet.
  • By default, properties defined at higher levels are inherited by lower levels 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 associated with 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 Product name - ev sas.png standard stylesheet, i.e. the Foundation CSS stylesheet

  • Most properties have an Inherit checkbox.
Inheritance (the box is checked) Specific context (the 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) where the property was defined and the property value are displayed when the mouse 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 documentation icon EN.png  An app contains the Incidents dashboard whose widgets inherit the colors defined for the theme. The Major Incidents widget title is highlighted for the background color and the text color because these properties are not inherited.
         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:

  • The toolbar (1), used to define the general properties of the theme.
  • The Objects pane (2), used to manage themes.
  • The Preview pane (3), used to preview the current theme when it is applied to objects.
  • The Properties Inspector (4), a contextual menu specific to each theme object, used to configure and define its visual aspect on screen.
             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

  • Name: Name of the theme.
  • Based On (Note: Only when you create a new theme): Name of the theme used as a template.
    • The list of themes is defined by Logo - EasyVista.png. You cannot create new ones.
  • Published: Used to indicate if the theme is published and can be used in all apps (Published Padlock open icon.png option) or if it can only be accessed by the theme creator (Private Padlock close icon.png option - this is usually a theme under construction).
  • 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.
  • Users table: List of all users whose profile is Theme Designer.
    • Select the Apps - Theme designer Profile.png box for each user authorized to edit the current theme.

Best Practice icon.png  You should use the filter area above the table to search quickly the users.

  • [ OK ] : Used to save changes made to the general properties of the theme. The name of the theme is displayed in the theme editor toolbar.
     

EVApps - GUI - Save icon.png : Used to save the theme.
 

Preview On: List of apps in the App Gallery.

  • Select the app in which you want to preview the objects.
  • 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 exit the platform.
  • Click the photo or name: Used to access the user's personal information.
             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.
    • System Message: Language used to display error and system messages.
    • Customer: User account on the Product name - ev sas.png platform.
    • Current Password: Current password of the logged-in user. To modify it, enter the new password in the New field and confirm it in the Confirm new Password field.
       
    • [ MANAGE MY EXTERNAL ACCOUNTS ] (Note: Only if users can access services with OAuth 2.0 authentication using their own accounts): This enables logged-in users to manage their personal accounts for accessing services (third-party products) with OAuth 2.0 authentication. Note: You can define the services configured for connectors using the account defined in the connector.

          Example documentation icon EN.png  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.
      • 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 Product name - ev sas.png 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 this information is used by an Product name - ev sas.png app, a message will appear. If you confirm the deletion, users of the app must once again log in manually.


 

Objects pane

Apps - Current theme icon.png: Used to switch to edit mode for the current theme. The Properties Inspector will automatically be refreshed.

Apps - Manage themes icon.png : Used to display the list of themes. 

  • Click a theme to display it in the Preview pane and open the Properties Inspector. Note: Themes are preceded by the associated icon and arranged by category.
             Apps - Theme Editor - Manage Themes.png
  • Display the contextual menu of the theme you want by moving the mouse over it and then click v.
    • Download icon.png Export theme: Used to export the theme in a compressed file (.tar.gz format). Note: The exported theme can then be imported in the App Gallery.
    • Apps - Edit icon.png Edit theme (or click the label 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 : Used to create a new theme. The properties window will automatically open.

 

Preview pane

This is the space where you can preview the current theme by displaying a page from the template app where the theme was applied.

  • Click a widget to define the graphic properties to be applied to all widgets of the same type using the Properties Inspector.

 

Properties Inspector

This is used to define the graphic properties of each object used by the template app, i.e. pages and types of widget

  • Properties are specific to the selected object.
  • The Preview pane is automatically refreshed each time properties are modified.
     
Page Type of widget
Access:
  • Click Apps - Current theme icon.png in the Objects pane and select the Application tab.
Access:
  • Click the type of widget you want in the Preview pane.

    or

  • You can also click Apps - Current theme icon.png in the Objects pane and select the Widgets tab. Open the category of the widget type and select the one you want.

Open url.png   See Graphic properties of pages

EVApps - Theme Editor - Inspector Properties Page.png

Open url.png   See Graphic properties of widget types

EVApps - Theme Editor - Inspector Properties Widget type.png

  • Properties are grouped by section.
  • You can access tools specific to the selected object.
    • The Color Picker: Apps - Color Picker icon Off.png in a Color property
    • To reset a property to its default value: Reset properties icon.png

Procedure: How to use the theme editor

1. Click Apps - Gallery - Theme design icon.png in the App Gallery toolbar to open the theme editor.

2. To create a theme:

  • Click Apps - Add theme icon.png in the Objects pane.
  • Specify the general properties of the theme and click [ OK ].

    Best Practice icon.png  You should use a model to create the theme. Select it in the Based On list.

  • Select the tab containing the graphic properties of the object you want to modify in 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.

3. To modify or delete a theme:

  • Click Apps - Manage themes icon.png in the Objects pane.
  • Display the contextual menu of the theme you want by moving the mouse over it and then click v.
    • Click Apps - Edit icon.png Edit theme to modify its properties.
    • Click Apps - Delete icon.png Delete theme to delete it.

4. To associate a theme with an app:

  • You must first publish the theme.
    • Click Apps - Application properties icon.png in the editor toolbar.
    • In the general properties of the theme, select the Published box. The theme will become available in the theme library and can be associated with apps.
  • Associate the theme with the app you want.
    • Open the app you want in the App Gallery in edit mode by clicking Apps - Application properties icon.png in the app toolbar. The graphic editor will appear.
    • Display the general properties of the app by clicking Apps - Application properties icon.png and select the theme you want from the Theme drop-down list (Note: The theme will be available in the category in which it was saved).

5. To export a theme:

  • Display the contextual menu of the theme you want by moving the mouse over it and then click v.
  • Click Download icon.png Export theme.
Tags:
Last modified by Unknown User on 2017/09/12 14:25
Created by Administrator XWiki on 2016/01/20 18:22

Shortcuts

Recent Updates

Haven't been here in a while? Here's what changed recently:

-   Product name - ev itsm.png
-   Product name - ev sas.png

Interesting Content

Quick Call
SCCM Distribution
Actions
Reporting Tools
Purge of archives

Powered by XWiki ©, EasyVista 2017