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.
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.
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 |
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 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
Display attributes include
title: font-family, font-size, font-weight, color
button: text-alignment, background-color
text: same as title, text-decoration, white-space
The $WSHOME/styles/style.css and lockhart.css files contains default style settings. Do not edit these files.
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.
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.
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.
Customization tasks are identical for both interfaces, although you must edit different files.
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.
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.
Typical customizations include:
Creating a custom message catalog
Changing Default Strings in the Identity Manager User Interface Home Page
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.
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.
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.
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.
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> |
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;
You can now replace the product name string in the browser title bar with a localizable string of your choice.
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.
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
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.
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).
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.
To edit, copy from styles.css and paste into customStyle.css. Then, modify the selected setting in customStyle.css.
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;
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
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; } |
For best results, create logo images between 50 and 60 pixels high.
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; } |
This section describes how to customize the Identity Manager 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.
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.
* 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; |
. .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 } |
.tablehdr { background-image: url(../images/other/dot.gif); background-repeat: repeat-x; background-position: left bottom; background-color: #9999CC; } |
.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.
To see the changes without rebooting your server or browser, perform a Ctrl-Refresh on a page.
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.
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.
<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> |
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). |
<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> |