Configuring Global Tenancy Theme

 

What are Themes?

Themes are used to customize the look and feel of the application, such as color, font style and color, background images, etc. You can create a configuration in Global Tenant which is inherited from all the Local Tenants. For more information, see Overview.

You can perform the following functions in Theme Configuration.

Configure Theme with Global Tenant

To Configure Theme with Global Tenant, perform the following steps:

  1. Navigate to Admin > Basic > Infrastructure > Themes > Theme Configuration. 
    The THEME CONFIGURATION page is displayed.

  2. Select the Global Tenant from the drop-down list and specify the Theme Name.


    Figure: Global Tenant Theme

  3. Select the required details from Theme Configuration and click SUBMIT.
    For more information about the fields on the THEME CONFIGURATION page, see Field Description


  4. The configured Theme is displayed on the THEME LIST page.

    Field Description

    The following table describes the fields on the THEME CONFIGURATION page:

    FieldDescription
    ThemeSelect the Tenant for which the Theme is configured.

    Theme Name

    Enter the name of the Theme.

    Active

    If selected, the Theme configuration becomes active.

    General Tab

    For more information on General tab, see General tab

    Top Panel Tab

    For more information on Top Panel Tab, see Top Panel Tab

    Left Tab

    For more information on Left Tab, see Left Tab

    Others Tab

    For more information on Others Tab, see Others Tab

    End User Dashboard Tab

    For more information on End User Dashboard Tab, see End User Dashboard Tab


    For more information on configuring Local Tenant, see Configuring Theme.

Preview or Edit the Theme with Global Tenant

You can preview and/or edit a Global Theme that you configured on the THEME CONFIGURATION page. For more information about configuring Themes, see Configuring Theme.

To Preview or Edit Theme:


  1. Navigate to Admin > Basic > Infrastructure > Themes > Theme List. 
    The THEME LIST page is displayed.

  2. On the FILTERS pop-up page, select a Global Tenant from the drop-down list.


    Figure: Global Tenant Theme

  3. In the Select Template section, hover the mouse pointer over a Theme template that you want to Preview or Edit.
    The EDIT and PREVIEW buttons are displayed on the selected template.


    Figure: THEME CONFIGURATION page: Edit and Preview Button


Preview Theme

The preview of the Application is displayed in the Preview section of the THEME CONFIGURATION page. You can view the appearance of the Application with the Theme that you configured.


Figure: THEME CONFIGURATION page - Previewing Theme

Editing Themes

The THEME CONFIGURATION page is displayed. Change the field values as per your requirement, and then click SUBMIT.

For more information about the fields on the THEME CONFIGURATION page, see Configuring Themes. The additional SCRIPTING section is available under the Generic tab while editing Themes.


Figure: THEME CONFIGURATION page - Editing Theme

Delink Theme

The delink function enables you to delink a Global Tenant Theme to a Local Tenant Theme. On creating a Global Tenant Theme, the created Tenant Theme displays in the Local Tenant Theme if it is pertaining to the same domain. You can perform the delink functionality in Local Tenant Theme. Themes created in Global Tenant Theme copied to Local Tenant Theme indicating with gray global icon corresponding to it as displayed in the following screen.


Figure: Theme List

To delink a Global Theme, perform the following steps:

  1. Navigate to Admin > Themes > Theme List.

  2. Select a Local Theme from the FILTERS list.
    The list of Theme displayed.


    Figure: Theme List

  3. Mouse-over on the Local Tenant Theme and click EDIT button.
    The THEME CONFIGURATION page displayed.


    Figure: Delink

  4. Click the DELINK button to delink the Local Tenant Theme. 

    A message displayed ‘By delinking Global Config, it will be converted to a Local Config, upon clicking Submit’ displayed on top of screen.

  5. Click SUBMIT to confirm the delink process.
    A successful message displayed.

    Scripting

    Click this icon to write your own Java Script, CSS, and HTML codes to customize the fields present on this page. For more information about Scripting, see Scripting.

    Note:
    On writing or editing the Global Theme script will inherit to all the Local Themes.




Generic Tab


Figure: Theme Configuration - Generic Tab


Logo & TitleDescription
Display LogoThe check box is selected by default. If you do not want the logo to be displayed throughout the Application, unselect the check box. This is the logo you have added in the Upload Logo field
Update Logo 

Upload a logo that you want to be displayed across the Application. The supported image formats are .gif,.jpeg,.jpg,.png,.bmp.


Figure: Theme Generic Tab - Upload Logo


Note

Notes:

  • In Global Theme on uploading an image, the image displayed corresponding to the field with cross mark. You can click the cross mark to delete the uploaded image.

  • When accessing the Global Theme configuration in Local Theme the Upload Image and Upload Favorite icon displayed with only cross mark.
Upload Favorite Icon

Upload a favorite icon that you want to be displayed across the Application. Favorite icon is the image displayed on the web browser tab. The supported image formats are .ico,.gif,.jpg,.png.


Figure: Theme Generic Tab - Upload Favorite Icon


Note

Note:

On uploading an icon, the image displayed corresponding to the field with cross mark. You can click the cross mark to delete the uploaded icon.

Organization TitleSpecify your Organization Title.
FONT

Theme Font

Select the font that you want to appear on the Application.

Font SizeSelect the font size for the title of the page.
PAGE TITLE
Pick Color

Select the color that you want to appear on the title of a page.

Font SizeSelect the font size for the title of the page.


Top Panel Tab


Figure: THEME CONFIGURATION - Top Panel Page


BACKGROUND
Pick ColorSelect the color that you want to appear on the background of the top panel.
HEADER MENU
Pick Background ColorSelect the color that you want to appear on the background of the text of the top panel.
Pick Font/Icon Color

Select the color for the font/icons that are displayed on the top panel.

Font SizeSelect the font size for the font on the top panel.


Left Panel Tab


Figure: THEME CONFIGURATION- Left Panel tab


BACKGROUND

Pick Color

Select the color that you want to appear on the background of the left panel.
BORDER COLOR
Pick ColorSelect the color that you want to appear on the border of the left panel.
FONT
Pick ColorSelect the font color for the text on the left panel.
Font SizeSelect the font size for the font on the left panel.

Other Tab


Figure: THEME CONFIGURATION- Others Tab


SERVICE CATALOG CAROUSEL VIEW
Pick Background Color

Select Catalog tiles background color for carousel view.


Figure: Service Catalog: Carousel View

Pick Font ColorSelect the color for the fonts that you want to display on the Catalog tiles for carousel view.


End User Dashboard Tab


Figure: THEME CONFIGURATION-End User Dashboard tab


Field Description

Enable New Dashboard

Select the check box to enable New Dashboard page in place of the system default Dashboard.

Select Theme Layout

Select a theme layout that you want to configure. The following layout is the default selection:


Figure: Theme Layout: Default Selection


Upload Multiple Background Images

If selected, the user can upload multiple background images.

Note

The uploaded multiple background images change every time the page is refreshed. See the following background images.


Figure: User Dashboard – Background


Figure: User Dashboard - Background

Background ImageClick the Upload button and select a background image for the New End User Dashboard. The supported image formats are .gif,.jpeg,.jpg,.png,.bmp.
Background ColorSelect the color that you want to appear in the background of the Dashboard page.
Advanced Dashboard Background ColorSelect the color that you want to appear in the background of Advanced Dashboard page. This is applicable for first 3 Theme Layouts only.
Font ColorSelect the font color for the text on the Dashboard page.
Logo PositionSelect the Logo position from the drop-down list. You can select Top, Center, or Both.
Display Service Catalog
  • Select "Top 5 Used Service Catalogs" if you want to display the top five used Catalogs on the End User Dashboard.
  • Select "Select Service Catalogs Manually" if you want to select the Catalogs manually and display them on the End User Dashboard.
  • Select "Do Not Show Service Catalogs" if you do not want to display the Catalogs on the End User Dashboard.
Service CatalogsThis field is displayed only if you select "Select Service Catalogs Manually" in the Display Service Catalog drop-down. Select the required Service Catalogs from the drop-down list.
Show Log Issue/Request SearchIf selected, the Log Issue/Request search bar is displayed on the DASHBOARD page, where the users can search for a specific keyword and log an Incident or a Service Request.
Scripting
  • Specify the CSS code to customize the End User Dashboard themes, such as fonts, colors, etc. This customization can be done in addition to the regular Theme configuration.

  • By specifying JavaScript codes, you can customize and add the options as per the requirement on the End User Dashboard. This customization is available in addition to the regular theme configuration.

Note

Developer knowledge is required to use this feature.

By specifying JavaScript codes, you can customize and add the options as per the requirement on the End User Dashboard. This customization is available in addition to the regular theme configuration.

Note

Developer knowledge is required to use this feature.

CONFIGURE LINKSAdd/remove links that should be displayed on the End User Dashboard page.
SortClick the up and down arrows to sort the order.
Page

Select the page to be displayed on the End User Dashboard page.

Page TitleSpecify the selected page title

Page Description

Type in the description for the selected page.

Page Color

Select the color of the page label to be displayed on the End User Dashboard page.

ADD LINKS

Select the color of the page label to be displayed on the End User Dashboard page.

Delete

Click Delete icon to delete the record.