Adding support for custom themes with the web UI framework

The Web UI Framework allows you to define your own custom themes. For example, you can have different themes based on organization.

About this task

If the organization key (OrganizationKey) for user x is xyz, then you can define a new CSS file for this user as xyz.css. If that theme file exists, and the user is authenticated, the theme file will be loaded. If it does not exist, the application will look for xyz's primary organization (PrimaryOrganization) and load that organization's CSS file.

You can also add or modify these custom themes based on custom logic in the post authentication implementation.

For more information, refer to the Java™ API documentation for the ISCUIPostAuthenticationProvider interface in your installation directory.

The following chart shows how the theme file is determined:

Flow chart of customizing a web UI framework

To add support for custom theme files:

Procedure

  1. Set up your list of themes in an arrayList which will be added to the SCUITheme class. You can modify this arrayList if you have access to the SCUIContext class. The arrayList is created from the custom CSS file. For example:
    private ArrayList customThemesList = new ArrayList();
    public ArrayList getCustomThemesList() {
            return customThemesList;
    }
    public void addCustomThemes(String customTheme) {
            customThemesList.add(customTheme);
    }
    Include a reference to your arrayList in an implementation of the ISCUIPostAuthenticationProvider interface. All of the custom themes can be added using the addCustomThemes method. For example:
    public class SCUIPostAuthenticationProviderImpl implements 
           ISCUIPostAuthenticationProvider {
         public SCUISecurityResponse postAuthenticate(SCUIContext uiContext) {
         uiContext.getUserPreferences().getTheme().addAdditionalCSS(<CUSTOM_THEME>);
         return new SCUISecurityResponse();
         }
    }
    The custom CSS file name, along with the full path of the file, should be passed as the argument to the addCustomThemes method.
  2. Implement the interface and the array list as a third party JAR file to the application, using the install3rdparty.sh script.
  3. Define the CSS by either creating a new CSS or by overriding the existing CSS.