Customizing the user interface by using CSS styles

You can customize much of the IBM® Counter Fraud Management application user interface, such as CSS styles, which properties are displayed, and the order of the properties. Most customization can be completed with the Style Configuration administration page in the ICFM application, but your site might decide to use SQL and CSS files.

About this task

Part of the user interface configuration uses SQL. For example, you use SQL statements to configure the order of properties, the date format, and property stereotypes. Other styling changes require changes to the CSS, such as color, style, font size, and icons. The Styles.sql file defines the styles for the cfm_default default context. You can copy this code segment into a new SQL file to update the default context or add new styles for your custom contexts.

Important: Whenever you create business objects, you must update your custom SQL file to define the styles for the new objects or define the objects to display with the Style Configuration administration page.

To configure a part of the existing user interface, you use the user interface component name. If you are configuring a custom widget, use the component name of the custom widget. For example, business objects that are displayed in the Card view, Map view, Network Graph view, or Relationships view are part of the cfm.LogicalObjects component.

It is a best practice to package your custom SQL, CSS, and JSON in a web project and then deploy the EAR file to the ICFM profile in WebSphere® Application Server. After you deploy the EAR file, you must regenerate the HTTP plug-in. For more information, refer to your application development tool and WebSphere Application Server documentation.

Procedure

  1. Create a copy of the style definition SQL file /icfminstall/cfm20_install/installs/production/cfm20/application/db/UI/Styles.sql. For example, copy the file to the MyStyles.sql file in your custom web project.
  2. Edit the styles and properties in the MyStyles.sql file as needed. For example, if you are replacing existing styles, add appropriate DELETE, INSERT, or UPDATE statements for the components you need to change.
    Tip: You can also export styles for a specific fraud context from the user interface to a SQL file and edit that file as needed, then run the SQL insert commands from that file.
  3. Run the SQL commands for your style updates. For example, run MyStyles.sql.
  4. Create a custom EAR file with your custom code, including CSS, JS, and SQL files.
    Note: Packaging the SQL file into the EAR file does not execute the SQL statements. You must run the SQL commands separately.
  5. Deploy the EAR file to the ICFM profile in WebSphere Application Server.
    Attention: On the Map modules to servers page, select the WebSphere:cell=CoreCell,node=CoreWebNode,server=CoreWebServer server for your module and then click Apply. Click Next to review the summary of changes and then click Finish. Click Save to save to the master configuration.
  6. Regenerate the WebSphere Application Server plug-in:
    1. Log in to the WebSphere Application Server administrative console by using http://icfm_core_server:9060/admin (single-server environment), or http://ibm_analytics_server:9060/admin (three-server environment).
    2. Click Environment > Update global Web server plug-in configuration.
    3. Click Overwrite to generate a new plug-in configuration file.
    4. Click Servers > Server Types > Web servers.
    5. Select CoreWebServer and then click Generate Plug-in to generate the WebSphere plug-in.
    6. Select CoreWebServer and then click Propagate Plug-in to propagate the WebSphere plug-in to the CoreWebServer plug-in configuration directory.
    7. Select CoreWebServer and then click Stop to stop the web server.
    8. Select CoreWebServer and then click Start to start the web server.
    9. Click Servers > Server Types > WebSphere application servers.
    10. Restart WebSphere Application Server where you deployed the EAR file.
  7. To prevent an administrator from overriding your configuration files, ensure that the Use only CSS styles check box is selected in the Style Configuration page in the ICFM application. Unless this check box is selected in the Investigations and Business Objects components, the settings in the Style Configuration page are used.