Customize the page header

The Identity Service Center user interface has a header at the top of the page. The header provides menus used to navigate to tasks that the user is authorized to perform. The page header can be customized in various ways to meet the needs of the organization.

We must have read and write access to the customizable files and the directories where they are maintained. See Location of Identity Service Center customizable files and Customization of Identity Service Center files for details about where these files are located. Contact the system administrator if we do not have the necessary permissions.

The Identity Service Center page header is divided into two areas. The upper portion is the primary header. It displays the product name and the current user, as well as the Home and Log Out shortcuts, the header logo, and the Help menu. The lower portion is the secondary header. It displays a product image, the name of the active task, and menus of tasks the user is authorized to perform. We can customize the appearance of the page header to suit your needs..

The task menus on the page header adapt to the user's authorized views so that only tasks the user is allowed to perform are shown. We can customize the organization of tasks in the page header menus. The ISIM admin console is used to manage view definitions by:

• Assign tasks to views.

• Associate groups with those views.
• Manage the members of the groups.

IBM provides a set of ready-to-use Service Center tasks. We can also create custom tasks to launch our own web applications from the Identity Service Center user interface. Both the tasks provided by IBM and your custom tasks can be displayed in the page header menus. However, the method of customizing the appearance and organization of tasks is different for each of these types of tasks. Use the following sections to work with the configuration files or the configuration properties from the IBM Security Identity Manager virtual appliance console:

• To edit, download or upload, a custom file, see Manage custom files.

• To edit or upload a property file, see Manage the server properties.

1. Optional: Customize the product name in the primary area of the page header or the home page name in the secondary area of the page header:

   1. If you did not already do so, make a custom copy of the nls/headerLabel.properties file.

   2. Open the custom copy of the nls/headerLabel.properties file in a text editor.
   3. Modify these properties to suit your needs.

      identityManager

      Specify the custom text to display for the product name field.

      SVCENTER_HOMEPAGE

      Specify the custom text to display for the home page name.

2. Optional: We can customize the logo that is displayed in the primary area of the page header by using either of these methods.

   • Create a custom image file in PNG format with the same name as the image provided by IBM, headerLogo.png. Place the image file in the images folder of your customizable files. The custom image is used in place of the headerLogo.png image provided by IBM.
   • If you did not already do so, make a custom copy of the config/UIconfig.properties file. Create a custom image in any image format with any file name, for example customLogo.jpg. Place the image file in the images folder of your customizable files. Edit the custom copy of the config/UIconfig.properties file. Change the value of the HEADER_LOGO_IMAGE property to specify the name of your custom image, such as customLogo.jpg. Save the file.

3. Optional: We can customize the alternate text for the header logo in the primary area of the page header. The alternate text is displayed when the user's browser is set to not show images. Screen readers for visually impaired users also read the alternate text to indicate what the image represents.

   1. If you did not already do so, make a custom copy of the nls/headerLabel.properties file.

   2. Open the custom copy of the nls/headerLabel.properties file in a text editor.
   3. Modify the value of the headerLogoAltText property to define the alternate text for the header logo.

4. Optional: We can customize the image that is displayed in the secondary area of the page header, by using either of the following ways:

   • Create a custom image file in PNG format with the same name as the image provided by IBM, identity.png. Place the image file in the images folder of your customizable files. The custom image is used in place of the identity.png image provided by IBM.

   • If you did not already do so, make a custom copy of the config/HeaderMenu.json file. Create a custom image file in any image format and with any file name, for example customIcon.jpg. Place the image file in the images folder of your customizable files. Edit the custom copy of the config/HeaderMenu.json file. Change the value of the secondaryIcon field to specify the location and name of your custom image, such as custom/ui/images/customIcon.jpg. Save the file.

5. Optional: Customize the appearance and organization of the tasks provided by IBM in the page header menus.

   The config/HeaderMenu.json file defines the appearance and organization of the page header menus. The contents of this file are maintained in JavaScript Object Notation (JSON) format, which is a way of representing structured data. The text labels for the drop-down menus and the task names in the menus are defined in the nls/headerLabel.properties file. . The secondaryNavigation section of the config/HeaderMenu.json file contains a menus subsection.

    "secondaryNavigation": {
           . . . 
           "menus": [
               . . . 
           ]        
       } 

   Each area in this menus subsection describes one of the menus in the secondary area of the page header.

   {
     "labelKey": "manageAccess",
     "icon": "custom/ui/images/header/tab_RequestAccess.png",
   	 "menuItemIcon":"/itim/ui/custom/ui/images/header/dd_requestAccess.png",
     "menuItems": [
           {
               "actionId": "SVCENTER_REQUEST_ACCESS"
           }    ]
   },

   labelKey

   Name of the property in the nls/headerLabel.properties file whose value is displayed for the menu. To customize the labels for the menus and tasks, if you did not previously complete this task, make a custom copy of the nls/headerLabel.properties file. Find the corresponding property from the config/HeaderMenu.json, such as manageAccess, in the custom nls/headerLabel.properties file. Change the value. If a menu contains only a single task, the labelKey for the menu is not used. That task is displayed on the page header instead of a drop-down menu with a single menu item.

   icon

   Specifies an icon that is displayed at the left corner of the task header.

   menuItemIcon

   Specifies an icon that is displayed for each of the tasks in the menu.

   menuItems

   Defines the list of tasks displayed in the menu.

   actionId

   Name of the property in the nls/headerLabel.properties file whose value is displayed for the task. To customize the label for a task, if you did not previously complete this task, make a custom copy of the nls/headerLabel.properties file. Find the corresponding property from the config/HeaderMenu.json, such as SVCENTER_REQUEST_ACCESS, in the custom nls/headerLabel.properties file. Change the value.

   To change the organization of the menus and the tasks in each menu:

   1. If you did not previously complete this task, make a custom copy of the config/HeaderMenu.json file.

   2. Open the custom copy of the config/HeaderMenu.json file in a text editor.

   3. Edit the menus subsection of the secondaryNavigation section of the file.
   4. Move the menu sections so that they are in the order we want them to be displayed on the page header.
   5. Add or move tasks in the menuItems subsection so that they are in the order we want them to be displayed in the drop-down menu.
   6. Save the file.

6. Optional: Customize the appearance and organization of custom tasks in the page header menus. The IBM Security Identity Manager administration console can be used to create custom tasks to launch our own web applications. To create these custom tasks, the administrator specifies parameters that define the appearance of the task, such as:
   • Label
   • Description
   • Page header menu in which the custom task is displayed
   For information about creating custom tasks, see View management.

The appearance of the page header is changed to reflect your customizations.

In a managed-cluster environment, we must wait until after the configuration is synchronized to the application servers in the cluster. For information about synchronizing, see Synchronizing a member node with a primary node. Log in to the Identity Service Center and verify the home page reflects the customizations that you made.

Parent topic: Identity Service Center user interface customization