Sun Identity Manager Deployment Guide

Chapter 7 Private Labeling of Identity Manager

This chapter identifies the basic components you will need to rebrand the Identity Manager interface to match your company’s intranet or corporate style guidelines. Private labeling is the customization of the interface to meet these corporate guidelines.

Private Labeling Tasks

There are several general categories of private labeling tasks:

Changing default header content by incorporating your corporate logo, changing default text, and altering colors in both the User and Administrator interfaces.
Changing display fonts and component colors throughout the application through the use of a style sheet located in styles\customStyle.css.
Changing default text throughout the application by creating your own message catalog.
Changing Identity Manager behavior on commonly used pages by editing the System Configuration object. These tasks, which include disabling the Forgot Your Password? button, are frequently performed by users while rebranding the product interface.

Architectural Features

Private labeling includes editing the components listed in the following table.

Table 7–1 Customizable Components


Component	Interface
`$WSHOME/styles/customStyle.css`	Administrator and User
`$WSHOME/WEB-INF/lib/idmcommon.jar`	Administrator and User
`$WSHOME/user/userFooter_beforeFirstTableRowTag.jsp`	User Interface
`$WSHOME/user/userFooter_beforeEndBodyTag.jsp`	User Interface
`$WSHOME/user/userFooter_beforeLastEndTableRowTag.jsp`	User Interface
`$WSHOME/includes/bodyEnd_beforeFirstTableRowTag.jsp`	Administrator Interface
`$WSHOME/includes/bodyEnd_beforeEndBodyTag.jsp`	Administrator Interface
`$WSHOME/includes/bodyEnd_beforeLastEndTableRowTag.jsp`	Administrator Interface
`$WSHOME/index_quickLinks.jsp`	Administrator and User

Style Sheets

Four style sheets affect the display characteristics of text in the product interface:

lockhart.css. Contains Sun corporate interface styles for web applications.
style.css. Defines the display attributes of pages throughout both interfaces. This file also controls the images contained in the headers.
customStyle.css. Contains any changes to the default settings contained in style.css. and lockhart.css. Settings in this file override the settings in style.css and lockhart.css. Customers should not edit the preceding files, but instead put their customizations into customStyle.css.
Styles-Help.css. Defines style classes used in online help and pop-up help (i-Help).

Default Text

Default text occurs throughout the product interface in the following:

Form titles, subtitles, buttons, odd and even rows, section heads
General text
Warning messages
Navigation button text, including both available and selected navigation buttons
Table header/body text

Text Attributes

Display attributes include

title: font-family, font-size, font-weight, color
button: text-alignment, background-color
text: same as title, text-decoration, white-space

Default Style Settings

The $WSHOME/styles/style.css and lockhart.css files contains default style settings. Do not edit these files.

Customized File

The customStyle.css file contains customizations and is not overwritten during product upgrades. Settings defined there will override the default settings in style.css and lockhart.css. Include all your customizations in customStyle.css.

JSP Files

Several JSP files contain the default settings for headers: userHeader.jsp, bodyEnd.jsp, and bodyStart.jsp. Do not edit these files. Instead, to preserve your customizations during product upgrade, edit only the JSPs listed in Architectural Features.

WPMessages_en.properties File

The $WSHOME/WEB-INF/lib/idmcommon.jar file contains the message catalog entries that you can extract into a WPMessages_en.properties file for editing.

Customizing Headers

Customization tasks are identical for both interfaces, although you must edit different files.

Note –

Avoid editing any .jsp file other than the specified files. If you must edit one, first back up the .jsp to a safe location before copying, editing, and renaming it.

Changing Header Appearance

The most typical labeling tasks involve

Changing the image referenced in the header section of the page from the default Sun logo to corporate standards. Replace or remove images by editing customStyle.css.
Suppressing the Identity Manager logo.
Using corporate internal look and feel guidelines, specifically borders, header, and background colors.
Changing “logged in as ...” text. You cannot change this through .jsps. You can edit a custom message catalog. See Changing Default Information Displayed in the Identity Manager User Interface Home Page.

Customizing Identity Manager Pages

Typical customizations include:

Creating a custom message catalog
Customizing the home page
Changing Default Strings in the Identity Manager User Interface Home Page

Creating a Custom Message Catalog

You must create a custom message catalog to override any string that is defined in the default message catalog. For example, if you want to rename Identity Manager, you must create a custom catalog and change the following definition:

PRODUCT_NAME=Identity Manager

The following entries also control the display of the product name:

LIGHTHOUSE_DISPLAY_NAME=[PRODUCT_NAME]
LIGHTHOUSE_TYPE_DISPLAY_NAME=[PRODUCT_NAME]
LIGHTHOUSE_DEFAULT_POLICY=Default [PRODUCT_NAME] Account Policy

See Chapter 8, Customizing Message Catalogs for detailed information about creating a message catalog.

Customizing the Home Page

Adding a List of Quick Links

A typical customization to the home page involves adding a custom list of links to tasks or resources that users frequently access in your environment. These quick links offer a shortcut through the product interface to frequent destinations.

To Add a Listof Quick Links

Add links to the list in index_quickLinks.jsp.

Uncomment the list section by removing the surrounding <%-- and --%> tags.

Save the file. You do not need to restart your application server.

Changing the Default “Logged in as” Text

To Change the Default Text

Imported the following XML file:

<?xml version=’1.0’ encoding=’UTF-8’?>
<!DOCTYPE Configuration PUBLIC ’waveset.dtd’ ’waveset.dtd’>
<Configuration name=’AltMsgCatalog’>
  <Extension>
    <CustomCatalog id=’AltMsgCatalog’ enabled=’true’>
      <MessageSet language=’en’ country=’US’>
        <Msg id=’UI_BROWSER_TITLE_PROD_NAME_OVERRIDE’>Override Name</Msg>
      </MessageSet>
    </CustomCatalog>
  </Extension>
</Configuration>

Add the following line to the System Configuration object within the <Configuration><Extension><Object> element:
<Attribute name=’customMessageCatalog’ value=’AltMsgCatalog’/>

Add the following line:

<msg id=’UI_NAV_FOOT_LOG’>mytext{0}</msg>

Save change and restart your application server.

Changing Page Title and Subtitle

To change the default Login page title and subtitle and welcome message, change the following entries in the custom message catalog:

UI_LOGIN_TITLE
UI_LOGIN_TITLE_TO_RESOURCE
UI_LOGIN_WELCOME2

To change this text, follow the procedure for extracting and editing the WPMessages_en.properties file detailed in Changing the Default “Logged in as” Text.

The following text lists the default message catalog settings:

UI_LOGIN_IN_PROGRESS_TITLE=Log In (In Progress) 
UI_LOGIN_CHALLENGE=Enter Your {0} Password 
UI_LOGIN_CHALLENGE_INFO=You are required to enter the password you logged into 
[PRODUCT_NAME] with before the requested action can be completed. 
UI_LOGIN_TITLE_LONG=[PRODUCT_NAME] LogIn 
UI_LOGIN_WELCOME=Welcome to the Sun [PRODUCT_NAME] system. Enter the requested 
information, and then click <b>Login</b>. 
UI_LOGIN_WELCOME2=Welcome to the Sun [PRODUCT_NAME] system. Enter your user ID and 
password, and then click <b>Login</b>. If you can’t remember your password, click 
<b>Forgot Your Password?</b> 
UI_LOGIN_TITLE=Log In UI_LOGIN_TITLE_TO_RESOURCE=Log In to <b>{0}</b>

Changing Background Image on the Login Page

You can change the background image by editing customStyle.css as follows:

div#loginFormDiv {
   background:
url(.../images/other/login-backimage2.jpg)
no-repeat;
     margin-left: -10px;
     padding: 0px 0px 280px;
    height: 435px;

Customizing the Browser Title Bar

You can now replace the product name string in the browser title bar with a localizable string of your choice.

To Replace the Product Name String

Import the following XML file:

<?xml version=’1.0’ encoding=’UTF-8’?>
<!DOCTYPE Configuration PUBLIC ’waveset.dtd’ ’waveset.dtd’>
<Configuration name=’AltMsgCatalog’>
  <Extension>
    <CustomCatalog id=’AltMsgCatalog’ enabled=’true’>
      <MessageSet language=’en’ country=’US’>
        <Msg id=’UI_BROWSER_TITLE_PROD_NAME_OVERRIDE’>Override Name</Msg>
      </MessageSet>
    </CustomCatalog>
  </Extension>
</Configuration>

Using the Identity Manager IDE, load the System Configuration object for editing. Add the following line inside the <Configuration><Extension><Object> element:
<Attribute name=’customMessageCatalog’ value=’AltMsgCatalog’/>

Also in the System Configuration object, you must change ui.web.browserTitleProdNameOverride to true.

Save this change to the System Configuration object, and restart your application server.

Changing Default Information Displayed in the Identity Manager User Interface Home Page

The Identity Manager User Interface home page provides a “dashboard” area that summarizes basic information about the logged-in account, including the default strings listed in the following table.

All attributes belong to the ui.web.user.dashboard object.

Table 7–2 Default Settings of ui.web.user.dashboard Object


Default Configuration Object Setting	Description
`displayLoginFailures`	Displays the number of unsuccessful password or authentication question login attempts if a maximum login attempts value has been configured in an account’s account policy.
`displayPasswordExpirationWarning`	Displays messages related to password expiration if password policy is applied to an account.
`displayApprovals` `displayAttestationReviews` `displayOtherWorkItems` `displayRemediations`	Enable the display of the following work item types for all users: Approvals, Attestations, Remediations, and Other. Note: Even if the configuration object is true for a particular type, the interface string may not appear based on the permissions granted to a user for his account.
`displayRequests`	Specifies the number of outstanding requests for role, group, or resource updates for an account
`displayDelegations`	Displays a string that indicates that the user has defined an approval delegation. Options include enabled or disabled.

By default, the value of the preceding configuration objects is set to true, and these strings will appear in the Identity Manager User Interface. To suppress the display of any string, set it to false in the System Configuration object.

You can edit the System Configuration object through the Identity Manager IDE. For general information about the System Configuration object, see Chapter 10, Editing Configuration Objects

Changing the Appearance of the User Interface Navigation Menus

In the Identity Manager User Interface, the horizontal navigation bar is driven by the End User Navigation User form in enduser.xml. The userHeader.jsp, which is included in all Identity Manager User Interface pages, includes another JSP named menuStart.jsp. This JSP accesses two system configuration objects:

ui.web.user.showMenu. Toggles the display of the navigation menu on and off. The default value is true.
ui.web.user.menuLayout. Determines whether the menu is rendered as a horizontal navigation bar with tabs (the default value is horizontal) or as a vertical tree menu (vertical).

The CSS style classes that determine how the menu is rendered are defined in style.css.

Note –

If you implement custom JavaScript functions in the end user navigation bar (tabs), you must use endUserNavigation to reference that form (for example, document.forms['endUserNavigation'].elements).

Changing Font Characteristics

Display attributes typically specify the following basic font display characteristics.

Table 7–3 Font-related Display Characteristics


Display Attribute	Description
family	For example, Helvetica or Arial
size	Specified in point size (for example, 14 point)
weight	Unspecified indicates normal weight. When specified, typically bold
color	Typically specified as black (title -- font-family, font-size, font-weight, color

Certain components can be further defined by additional characteristics. For example, buttons can be defined with a background color. The alignment of the text and button label is another characteristic.

Editing Font Characteristics

To edit, copy from styles.css and paste into customStyle.css. Then, modify the selected setting in customStyle.css.

Example Entry

The following entry represents the default settings for each page title:

.title {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16pt;
    font-weight: bold;
    color: C;

Sample Labeling Exercises

The following example illustrates how to suppress the Identity Manager logo and reference a custom image in the masthead of the page. Consult the example files located in the sample/rebranding directory.

Changing product name
Changing masthead colors
Changing navigation tab colors
Changing Identity Manager behavior on commonly used pages

Replacing the Identity Manager Logo with a Custom Logo

To change the logo in the Administrator or User interfaces, copy the following snippets from styles/style.css into customStyle.css and replace the Identity Manager logo image with your .image file:

td.MstTdLogo {
    width: 31px;
    height: 55px;
    background: url(../images/other/logo.jpg) no-repeat 5px;
}

td.MstTdTtlProdNam {
    background: url(../images/other/xyz_masthead.jpg) no-repeat 10px 30px;
    padding:10px 10px 0px 10px;
    vertical-align:top;
    white-space:nowrap;
    height: 75px;
    width: 350px;
}

Note –

For best results, create logo images between 50 and 60 pixels high.

Changing Masthead Appearance

To Change the Appearance of Identity Manager

Edit the styles/customStyle.css file.

Copy the following sections from styles.css into customStyle.css and modify as appropriate.

MstDiv {background-image:url(../images/other/dot.gif);background-repeat:repeat-x;
background-position:left top;background-color:#000033}
.MstTblEnd {background: url(../images/other/dot.gif);background-color: #666;height: 1px;}
td.MstTblEndImg {
    background-color: #666;
    height: 1px;
    background: url(../images/other/dot.gif);
    font-size:1px;
}
td.MstTdLogo {
    width: 31px;
    height: 55px;
    background: url(../images/other/logo.jpg) no-repeat 5px;
}
td.MstTdSep {
    width: 1px;
    height: 61px;
    background: url(../images/other/dot.gif) no-repeat center;
}
td.MstTdTtlProdNam {
    background: url(../images/other/xyz_masthead.jpg) no-repeat 10px 30px;
    padding:10px 10px 0px 10px;
    vertical-align:top;
    white-space:nowrap;
    height: 75px;
    width: 350px;
}

Changing Navigation Tabs

This section describes how to customize the Identity Manager navigation bar.

Customizing the Identity Manager User Interface Navigation Bar

The Identity Manager User Interface implements a second XPRESS form that contains the navigation bar. This means that the rendered page has two <FORM> tags, each with a different name attribute:

<form name="endUserNavigation">

and

<form name="mainform">

When you insert JavaScript code into the Identity Manager User Interface navigation bar, be sure that you are referring the correct form. To do so, use the name attribute to specify which <FORM> tag you want to reference: document.mainform or document.endUserNavigation.

Customizing Navigation Links

Copy and edit the following code to customize the navigation links across the top of the page. Change the background-color to an appropriate color.

Example 7–1 Customizing Navigation Links

* LEVEL 1 TABS */
.TabLvl1Div {
	background-image:url(../images/other/dot.gif);
	background-repeat:repeat-x;
	background-position:left bottom;
	background-color:#333366;
	padding:6px 10px 0px;
} 
a.TabLvl1Lnk:link, a.TabLvl1Lnk:visited  {
	display:block;
	padding:4px 10px 3px;
	font: bold 0.95em sans-serif;
	color:#FFF;
	text-decoration:none;
	text-align:center;
}
table.TabLvl1Tbl td {
	background-image:url(../images/other/dot.gif);
	background-repeat:repeat-x;
	background-position:left top;
	background-color:#666699;
	border:solid 1px #aba1b5;
}
table.TabLvl1Tbl td.TabLvl1TblSelTd {
	background-color:#9999CC;
	background-image:url(../images/other/dot.gif);
	background-repeat:repeat-x;
	background-position:left bottom;
	border-bottom:none;

Changing Tab Panel Tabs

Example 7–2 Changing Tab Panel Tabs Identity Manager

.
.TabLvl2Div {
	background-image:url(../images/other/dot.gif);
	background-repeat:repeat-x;
	background-position:left bottom;
	background-color:#9999CC;
	padding:6px 0px 0px 10px
}
a.TabLvl2Lnk:link, a.TabLvl2Lnk:visited{
	display:block;
	padding:3px 6px 2px;
	font: 0.8em sans-serif;
	color:#333;
	text-decoration:none;
	text-align:center;
}
table.TabLvl2Tbl div.TabLvl2SelTxt {
	display:block;
	padding:3px 6px 2px;
	font: 0.8em sans-serif;
	color:#333;
	font-weight:normal;
	text-align:center;
}
table.TabLvl2Tbl td {
	background-image:url(../images/other/dot.gif);
	background-repeat:repeat-x;
	background-position:left top;
	background-color:#CCCCFF;
	border:solid 1px #aba1b5;
}
table.TabLvl2Tbl td.TabLvl2TblSelTd {
	border-bottom:none;
	background-image:url(../images/other/dot.gif);
	background-repeat:repeat-x;
	background-position:left bottom;
	background-color:#FFF;
	border-left:solid 1px #aba1b5;
	border-right:solid 1px #aba1b5;
	border-top:solid 1px #aba1b5;

table.Tab2TblNew td {
background-image:url(../images/other/dot.gif);
background-repeat:repeat-x;
background-position:left top;
background-color:#CCCCFF;
border:solid 1px #8f989f
}
table.Tab2TblNew td.Tab2TblSelTd {
border-bottom:none;
background-image:url(../images/other/dot.gif);
background-repeat:repeat-x;
background-position:left bottom;
background-color:#FFF;
border-left:solid 1px #8f989f;
border-right:solid 1px #8f989f;
border-top:solid 1px #8f989f
}

Changing Sorting Table Header

.tablehdr {
    background-image: url(../images/other/dot.gif);
    background-repeat: repeat-x;
    background-position: left bottom;
    background-color: #9999CC;
}

Changing User / Resource Table Component

Example 7–3 Changing User / Resource Table Component

.tablesorthdr {
    /*background-color: #BEC7CC;*/
	background-image:url(../images/other/dot.gif);
	background-repeat:repeat-x;
	background-position:left bottom;
	background-color:#CCCCFF;
	border:solid 1px #aba1b5;
}

.treeContentLayout {
    background-color: #9999CC;
}

.treeBaseRow {
    padding-top: 0px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 0px;
    background-color: #fff;
    border-left: solid 1px #8F989F;
    border-right: solid 1px #8F989F;
    border-bottom: solid 1px #8F989F;
}

.treeButtonCell {
    background-image:url(../images/other/dot.gif);
    background-color:#666699;
    color: #fff;
}

}

.treeMastHeadRow {
    background-color: #333366;
}

.treeMastHeadRow {
    background-color: #333366;
}

.treeMastHeadText {
    background-color: #333366;
    background-image: url(../images/other/dot.gif);
}

You can customize many other options (including text style and size, alignment, and the colors and configurations of other objects) by following the same procedures.

Note –

To see the changes without rebooting your server or browser, perform a Ctrl-Refresh on a page.

Changing Identity Manager Behavior on Commonly Used Pages

You can customize many commonly altered properties of the User or Administrator interfaces can by editing the System Configuration object. The attribute <Attribute name=’ui’> and its subobjects control the product interface. Modifying the attributes under this attribute can change the behavior of Identity Manager.

Miscellaneous Modifications: Admin Section of File

The admin section of System Configuration object file contains several attributes that are related to the Administrator Interface.

To disable the Forgot Your Password? button on the Administrator login page, set disableForgotPassword to true.
Setting supressHostName to true will suppress the display of the hostname for processes on the Task Details page.

Example 7–4 Modifying the Admin Section of a File

<Attribute name=’admin’> 
   <Object> 
      <Attribute name=’disableForgotPassword’> 
         <Boolean>false</Boolean> 
      </Attribute> 
      <Attribute name=’workflowResults’> 
         <Object> 
            <Attribute name=’suppressHostName’> 
               <Boolean>false</Boolean> 
            </Attribute> 
         </Object> 
      </Attribute> 
   </Object> 
</Attribute>

Miscellaneous Changes: User Section of the File

The user section of the System Configuration object file includes options for the User Interface.

Disable the Forgot Your Password? button by setting disableForgotPassword to true.

The workflowResults attribute contains attributes for customizing the display of workflows for non-administrative users, as indicated below.

Table 7–4 Attributes for Customizing Workflows for Non-Administrative Users


Attribute	Description
`anonSuppressReports`	Controls whether the workflow diagram is displayed in the anonymous user workflow status pages (`anonProcessStatus.jsp`).
`suppressHostName`	Controls whether the hostname is included in workflow status pages for end-users (`processStatus.jsp`).
`suppressReports`	Controls whether workflow diagrams is displayed to all non-anonymous users (`processStatus.jsp`).

Example 7–5 Customizing Workflows for Non-Administrative Users

<Attribute name=’user’> 
   <Object> 
      <Attribute name=’disableForgotPassword’> 
         <Boolean>false</Boolean> 
      </Attribute> 
      <Attribute name=’workflowResults’> 
         <Object> 
            <Attribute name=’anonSuppressReports’> 
               <Boolean>false</Boolean> 
            </Attribute> 
            <Attribute name=’suppressHostName’> 
               <Boolean>false</Boolean> 
            </Attribute> 
            <Attribute name=’suppressReports’> 
               <Boolean>false</Boolean> 
            </Attribute> 
         </Object> 
      </Attribute> 
   </Object> 
</Attribute>

To block the display of password and authentication question answers, set obfuscateAnswers to true. This setting causes answers to be displayed as asterisks in both the Administrator Interface and User Interface.

<Attribute name="obfuscateAnswers">
   <Boolean>true</Boolean>
</Attribute>