Customizing the page header

The Identity Manager Service Center user interface has a header at the top of the page. The header provides menus that are 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 your organization.

Before you begin

You must have read and write access to the customizable files and the directories where they are maintained. See Location of Identity Manager Service Center customizable files and Customizing Identity Manager Service Center files (Software stack ) for specific details about where these files are located. Contact your system administrator if you do not have the necessary permissions.

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: You 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 that is 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: You 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: You 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 that is 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 that are 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

   Specifies the 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.

   Note: 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 that are displayed in the menu.

   actionId

   Specifies the 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 that you 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 that you 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 Verify Identity Governance administration console can be used to create custom tasks to launch your 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.