Customizing Themes

This topic includes an example that customizes the theme that Siebel Open UI displays in the client. It describes how to add a custom theme named Mobile Theme Gold that Siebel Open UI displays on a tablet.

The User Preferences - Behavior screen in the Siebel Mobile client allows the user to choose the theme that this client displays. Siebel Open UI comes predefined with one theme for the tablet and one theme for the phone, by default. It constrains the theme that the user can choose depending on whether the user uses a phone, tablet, or desktop computer.

To customize themes

1. Create a new style sheet named theme-gold.css. Save this new file in the following folder:

   AI_INSTALL_DIR\applicationcontainer_external\siebelwebroot\files\custom

   You can use any CSS file that includes your custom theme. You can also specify multiple CSS files. For this example, use theme-gold.css.

2. Add the new theme to the OUI_THEME_SELECTION list of values:

   1. Open Siebel Tools. Connect to the database that your Siebel Mobile application uses.

      For more information, see Using Siebel Tools.

   2. Click the Screens application-level menu, click System Administration, and then click List of Values.

   3. Right-click in the List of Values list, and then click New Record.

   4. Add the following value to the OUI_THEME_SELECTION list of values.

      Property	Value
      Type	OUI_THEME_SELECTION
      Display Value	Gold
      Language-Independent Code	GOLD_THEME The value that you specify must match the theme name that you define in the manifest. In this example, this name is GOLD_THEME.
      Parent LIC	NAVIGATION_TAB NAVIGATION_TREE NAVIGATION_SIDE

   5. For the new theme to be displayed only for desktop, then under Object Expression add a new record with Expression = Desktop and Level = 1. For the new theme to be displayed for all platforms (desktop, mobile, and so on), then under Object Expression add a new record with Expression = null and Level = 1.

3. Configure the manifest. For more information about how to do this step, see Adding Custom Manifest Expressions:

   1. Log in to a Siebel client with administrative privileges.

   2. Navigate to the Administration - Application screen, and then the Manifest Files view.

   3. Add the file that you created in Step 1.

      For this example, add the following file:

      files/custom/theme-gold.css

   4. Navigate to the Manifest Expressions view.

   5. In the Expressions list, add the following expression.

      Field	Value
      Name	GOLD_THEME
      Expression	LookupName (OUI_THEME_SELECTION, Preference ("Behavior","DefaultTheme")) = "GOLD_THEME" In this expression, LookupName is a method that converts the language-dependent name of the theme to the language-independent name of the theme. Siebel Open UI uses the language-independent name.

   6. Navigate to the Manifest Administration view.

   7. In the UI Objects list, specify the following object.

      Field	Value
      Type	Application This example configures Siebel Open UI to display your custom theme for the entire Siebel application. To specify this theme for a single object, see Customizing Themes for Other Objects.
      Usage Type	Theme
      Name	PLATFORM DEPENDENT

   8. In the Object Expression list, add the following subexpression.

      Field	Value
      Group Name	Leave empty.
      Expression	Gold Theme If you must add a theme to some other platform, such as a phone or desktop, then specify this other platform. For example, specify Phone instead of Tablet.
      Level	1
      Operator	Leave empty.
      Web Template Name	Leave empty.

   9. In the Files list, add the file that you created in Step 1.

      For this example, you add the following file:

      files/custom/theme-gold.css

      You can use the Sequence field to determine the sequence that Siebel Open UI uses when it downloads cascading style sheets.

4. Test your modifications:

   1. Login to the Siebel Open UI client.

   2. Click User Preferences, click Behavior, and then click Edit.

   3. Verify that the Theme field includes the Gold value.

   4. Click Gold, and then click Save.

   5. Log out of the Siebel Open UI client, and then log back in.

   6. Verify that the Siebel Open UI client displays Gold theme.