Lab 20: UI Customization

Transcription

1 Lab 20: UI Customization Note: Please view the PDF version as 150% for the clearest display of the screenshots. 1. Introduction In this lab, you will customize various aspects of the user interfaces available in Oracle Identity Manager. 1.1 Working with Menus and Tabs Identity Administration o Add panel and links Self Service console - Add a blank Custom ADF Tab (using a jsff file) Self Service console - Add a custom ADF Tab with some OIM functionality (build jar from JDev project) 1.2 Branding Customization (text, logo, logo mouse over) Login Page Identity Administration Unauthenticated Self-Service Authenticated Self Service Advanced Administration 1.3 Renaming Button Labels Identity Administration Other Consoles (unauthenticated self service, authenticated Self Service, and Advanced Administration) 1.4 Style Sheet Modifications Creating Custom Skins and Overriding Style Sheets

2 Contents 1. Working with Menus and Tabs 2. Branding Customization for Administration Console (text, logo, logo mouse over) 3. Branding Customization for Self Service Console (text, logo, logo mouse over) 4. Renaming Button Labels 5. Style Sheet Modifications Important Note: For the customizations you make to take effect, you must clear both the cache for the Oracle Identity Manager Server (the Server cache) and the cache for the Web browser (the Browser cache). To clear the Server cache: Open a Terminal. To do so, right-click the Desktop and select Open Terminal from the popup menu that appears. Navigate to the /odrive/oracle/oim11g_mwh/user_projects/domains/ oim_11g_domain/servers/oim_server1/tmp directory. Clear all files in this directory. To clear the Browser cache: Open a Web browser. Click the Tools menu. Then, click Clear Private Data from the menu that appears. In the Clear Private Data window, click Clear Private Data Now. 2.1 Working with Menus and Tabs Identity Administration - Add panel and links Purpose: Our customer seems to have a custom client app which lets the administrators create, modify and delete users, roles and auth policies. For that reason customer wants to limit the OIM Administration console to be used for only Search users and roles but still let them do all operations on Organizations. In this section we will add a panel called Search Users and Roles with links to do advanced search of Users and Roles. We will

3 remove (hide) the Users, Roles and Authorization Policy panels in the process. Steps: That is how the Identity Administration Console Welcome Page looks like by default We would like to get this screen instead:

4 1. Create a working area under the home directory to copy IdentityTaskFlow.jar from your installation and extract it using jar or unzip (you can sftp this file from the host to do it locally). 2. Start JDeveloper and create an ADF application (File -> New -> General -> Applications -> Fusion Web Application (ADF))

5 3. Name the application IdentityTaskFlowApp and click on Finish.

6 4. Leave JDeveloper for a moment and back to the Linux file system using for example the File Browser tool (Applications -> System Tools), create a folder named src in /home/oracle/jdeveloper/mywork/identitytaskflowapp/viewcontroller

7 5. Copy the content of the temporary folder (uicust) into this folder (unselect IdentityTaskFlow.jar)

8 6. Copy the images folder from ViewController -> src into ViewController -> public_html 7. Back in JDeveloper, Right-Click on ViewController, select Project Properties -> Technology Scope and check that the following technologies have been selected:

9 8. Open in JDeveloper, ViewController -> Application Sources-> taskflow.adminwelcome -> adminwelcome.jsff You should get the following screen (if not click of the refresh icon of the jsff window):

10 9. Customization of the top left panel: 9.1. Click on the title (#{...users} to select the Panel.

11 9.2. On the Property Inspector (Bottom Right of JDeveloper) change the text property to Search Users and Roles : Verify that this update gets reflected in the Design screen: 9.3. Select in the Structure screen (Bottom Left) the second horizontal panelgrouplayout of the panelbox Search Users and Roles :

12 9.4. Press Delete Select and copy in the Role panelbox the horizontal panelgrouplayout related to Advanced Roles Search :

13 9.6. Back to the Search users and roles panelbox paste the panelgrouplayout The result should be: 9.7. Drag and drop a Panel Group Layout from the Component Palette (Right Top) on the vertical panelgrouplayout of the panelbox Search Users and Roles :

14 9.8. In the Property Inspector screen (Bottom Right) select horizontal for the Layout:

15 9.9. Still having selected the new horizontal panelgrouplayout, click on Go Link in the Component Palette -> ADF Faces -> Common Components: In the Property Inspector enter: Text = Link to Oracle.com Destination = shortdesc=oracle's homepage TargetFrame = new

16 9.11. Change the destination to reflect the screenshot (click on Source at the bottom of the AdminWelcome.jsff window): Click on Save 10. Customization of the top right panel: Click on #{...roles_tab_text} and press Delete Repeat the same for #{...authorization_policies_header_text} The screen should look like: Click on Save

17 11. Redeploy the modified ADF Faces Back in a terminal window, go to the ViewController/src folder (cd ~/jdeveloper/mywork/identitytaskflowapp/viewcontroller/src) Recreate the jar in the ViewController/src folder (remove the IdentityTaskFlow.jar if it is still there): jar -cvf IdentityTaskFlow.jar * Push back the jar in /odrive/oracle/oim11g_mwh/oracle_idm1/server/apps/oim.ear/admin.war/web- INF/lib Stop and start OIM Server Check that the links on the Welcome page of the Administration tab are functioning: 2.1 Working with Menus and Tabs

18 2.1.1 Self-Service console - Add a blank custom ADF tab Purpose: in this section, we will add a custom ADF tab to OIM Self-Service page called Authentication. Steps: 2.1. Create an application in JDeveloper (File -> New -> Generic Application) named iam-consoles-faces (leave the Project Name to Project1: we won't use this project but create a new one based on a war file). Create a war file on the host system: o Open a terminal window and go to the iam-consoles-faces.war folder cd /odrive/oracle/oim11g_mwh/oracle_idm1/server/apps/oim.ear/iam-consoles-faces.war o Use the jar utility to create the war file jar -cvf iam-consoles-faces.war * If you want to use locally JDeveloper sftp this war file on a local drive. Create a project in the JDeveloper application iam-consoles-faces o Select File -> New -> Projects -> Project from WAR File

19 Project Name = iam-consoles-faces

20

21 Select the war file Click on Finish. You can delete Project1. o Create a new page: right-click pagefragments (in Web Content), select New and Web Tier -> JSF -> JSF Page Fragment

22 o Name the file custom.jsff. Make sure Blank Page option is selected at Initial Page Layout and Content section. Click OK o Drag and drop a Panel Stretch Layout from the ADF Faces Layout Component Panel in the custom.jsff design window o Click on the top area in the custom.jsff design screen and then on Panel Header in the Component Palette -> ADF Faces -> Layout top right screen. o In the Source, delete the text for the panelheader o In the Structure window (Bottom Left), select Panel Header facets -> context

23 o o In the Component Palette screen, click on Output Text in ADF Faces -> Common Components and enter Authentication for the Value of the text field Add a Separator (from ADF Faces -> Layout) in the Legend facet The Structure should look like

24

25 The Design window like

26 And the Source

27 o Click on Save o Edit faces-config-self.xml in WEB-INF o Click on Overview

28 o Add a new Managed Bean (top +): Bean Name = custompage Class = Self$OperationAction Package= oracle.iam.consoles.faces.backing.self Scope = application Generate Class if it Does Not Exist = unchecked Enter at first oracle.iam.consoles.faces.backing.self and then add $OperationAction in the Property Inspector: o Add 2 Managed Properties (lower +) Name = id Class = java.lang.string Value = customization_page

29 Name = pageurl Class = java.lang.string Value =../pagefragments/custom.jsff o A d d i n Change the existing primaryoperationsmap Managed Bean with the following values: From: Key = #{welcomeoperation.id} Value = #{welcomeoperation} To: Key = #{custompage.id} Value = #{custompage}

30 C l i c k o n S a v o C Copy from ~/jdeveloper/mywork/iam-consoles-faces/iam-consoles-faces/public_html/web-inf/lib, iamconsoles-faces.jar into a temporary folder o Extract the jar there with the command: jar -xvf iam-consoles-faces.jar o Delete the jar in the temporary folder o Edit in this temporary folder oracle/iam/consoles/faces/resources, Self.properties file o Add the following two lines at the end of the file: customization_page.text=authentication customization_page.shortdesc=authentication Description o In the temporary folder (cd../../../../..) re-create the jar: jar -cvf iam-consoles-faces.jar *

31 o Replace the previous jar (located in ~/jdeveloper/mywork/iam-consoles-faces/iam-consolesfaces/public_html/web-inf/lib) by this one. You can check that you have the right file in Jdeveloper open the file in there (Web Content -> WEB-INF -> lib -> iam-consoles-faces.jar -> Self.properties): Push back the JDeveloper folders to OIM Server o Rename the folder iam-consoles-faces.war to iam-consoles-faces.war.bak (in /odrive/oracle/oim11g_mwh/oracle_idm1/server/apps/oim.ear/) cd /odrive/oracle/oim11g_mwh/oracle_idm1/server/apps/oim.ear mv iam-consoles-faces.war iam-consoles-faces.war.bak o Create iam-consoles-faces.war folder o If you have worked locally, sftp (you can zip at first just to upload one file) or copy (if you have used jdeveloper in the virtual machine) in there all the content of the public_html folder of the iam-consoles-faces jdeveloper project folder (~/jdeveloper/mywork/iam-consoles-faces/iam-consoles-faces/public_html). o Stop the OIM Server o Drop all the files in /odrive/oracle/oim11g_mwh/user_projects/domains/ oim11g_domain/servers/oim_server1/tmp o Restart OIM Server

32 o Login to the OIM console and open the Self-Service page:

33 2.1.3 Self Service console - Add a Custom ADF Tab with some OIM functionality Purpose: Steps: In this section we will add a custom ADF tab to OIM Self-Service page called Authentication. Under this Authentication tab, we will add one panel and in this panel we will have 2 sub-tabs Attributes and Password. Attribute tab present some basic attributes that can be updated by the user. Password sub-tab let users change their password. This example will show you to create a simple user profile page in regular ADF, using the data for the currently logged in user. The custom ADF tab is created as an ADF Declarative Component Library. The example described is available as a sample JDeveloper project. This project can be used as a starting point for other ADF custom tab development. The project is available for this lab as self_service_adf_tabs.zip in /odrive/dummydata/uicust_files. This project is already built and adflibcustomtabs1.jar file is present in deploy directory of the project which we will directly use for the lab. 1. Make a new working directory. Copy the project zip file and unzip it 2. Locate the jar file that we will use in this lab.

34 3. 4. Copy this jar file as shown cp adflibcustomtabs1.jar /odrive/oracle/oim11g_mwh/oracle_idm1/server/apps/oim.ear/iam-consolesfaces.war/web-inf/lib/ 5. Update Self.jspx There is a bug in the Self Service console Self.jspx file that needs to be fixed for custom ADF tabs to display correctly. This bug will be fixed in the PS1 release, so following is temporary workaround Edit /odrive/oracle/oim11g_mwh/oracle_idm1/server/apps/oim.ear/iam-consoles-faces.war/pages/self.jspx and Change <af:panelstretchlayout id="content_wrapper"> to <af:panelstretchlayout id="content_wrapper" topheight="auto">

35 6. Add customization page to faces-config-self.xml (located in WEB-INF): cd /odrive/oracle/oim11g_mwh/oracle_idm1/server/apps/oim.ear/iam-consoles-faces.war/web-inf Note that we had added this bean already in a previous section. So the value we have to change here is: Replace <value>../pagefragments/custom.jsff</value> with <value>/examples/myprofile.jspx</value> 7. Still in the faces-config-self.xml file, add the custom pages to the primaryoperationsmap Note that we did this already in previous section, so nothing needs to be done. 8. Edit Self.properties to define tab names

36 Again this was previously done, so no need to do it again. 9. Stop the OIM Server 10. Drop all the files in /odrive/oracle/oim11g_mwh/user_projects/domains/ oim11g_domain/servers/oim_server1/tmp 11. Restart OIM Server 12. Check about the result.

37

38 2.2 Branding Customization for Administration Console (text, logo, logo mouse over) Purpose: In this practice, you customize the look and feel of the Oracle Identity Manager Identity Administration Console (or brand the console). This includes: o Modifying the text that appears in the header banner of the console. This text is known as branding text. Specifically, you change the branding text of this console from Identity Administration to Identity Provisioning System. o Adding a logo to the console. For this practice, replace the Oracle Corporation logo with the logo for ACME Capital (or ACME INC.). ACME INC. is the company for which you are an administrator. This logo is represented by the acme_capital2.png file. o Changing the mouseover text associated with the logo. Specifically, replace the Oracle mouseover text with text for your company (ACME INC). Note: A mouseover refers to a GUI event that is raised when a user moves or "hovers" the cursor over a particular area of the GUI (for this example, the logo on the Oracle Identity Manager 11g page or console) Modifying Branding Text 1. Shut down the Oracle Identity Manager Server, all Oracle Identity Manager Web-based consoles, and the Oracle Identity Manager Design Console. 2. Open a Terminal. To do so, right-click the Desktop and select Open Terminal from the popup menu that appears. 3. Navigate to the /odrive/oracle/oim11g_mwh/oracle_idm1/server/apps/oim.ear/admin.war/web-inf/lib directory. 4. Create a folder titled backups in this directory. This folder contains a copy of all files you are to modify for this subpractice. Important: Before modifying any file, back it up. The file you edit corresponds to a type of customization to perform with a console. For example, by editing the IdentityUIBundle_en.properties file, you change the branding text for the Oracle Identity Manager Identity Administration Console.

39 5. Copy the IdentityTaskFlow.jar file, which resides in the /odrive/oracle/oim11g_mwh/oracle_idm1/server/apps/oim.ear/admin.war/web-inf/lib directory. 6. Paste this file into the backups folder. 7. Navigate to the backups folder. At the prompt, enter jar -xf IdentityTaskFlow.jar Note: You are extracting the IdentityTaskFlow.jar file because you have to modify the IdentityUIBundle_en.properties file, which is contained in the jar file. By editing the IdentityTaskFlow.jar file, you change the branding text for the Oracle Identity Manager Identity Administration Console. Also, by entering x and f as arguments, you are forcing Java (f) to extract (x) the contents contained in the IdentityTaskFlow.jar file. Important: If you cannot extract the jar file, make sure you set the PATH environment variable to point to the folder where the Java JDK resides. For example, if the Java JDK is located in the /odrive/oracle/oim11g_mwh/jdk160_18/bin directory, enter the following at the prompt: PATH=$PATH:/odrive/oracle/oim11g_MWH/jdk160_18/bin 8. Using a text editor, open the IdentityUIBundle_en.properties file, found in the backups/oracle/iam/identitytaskflow/resources/ directory. Note: This directory appears after you extract the contents of the IdentityTaskFlow.jar file. 9. Locate the following string of text: admin_branding_text=identity Administration 10. Change the value of the admin_branding_text parameter to Identity Provisioning System.

40 Your file should resemble the following screenshot: 11. Save your changes to the IdentityUIBundle_en.properties file. Close the file. 12. Navigate to the backups directory. At the prompt, enter: rm IdentityTaskFlow.jar jar -cf IdentityTaskFlow.jar *

41 Note: By entering c as an argument, you are forcing Java to create (c) a new IdentityTaskFlow.jar file. This file contains the modifications you made to the IdentityUIBundle_en.properties file. 13. Navigate to the /odrive/oracle/oim11g_mwh/oracle_idm1/server/apps/oim.ear/admin.war/web-inf/lib directory. Replace the unedited IdentityTaskFlow.jar file with the modified file. 14. Restart Oracle Identity Manager Server and the Oracle Identity Manager Identity Administration Console. The Home page of this console appears. The header banner of this console is changed from Identity Administration to Identity Provisioning System.

42 2.2.2 Adding a Logo Shut down the Oracle Identity Manager Server and the Oracle Identity Manager Identity Administration Console. Open a Terminal. Copy the acme_captial2.png file from /odrive/dummydata/lab 20, which represents the logo, to the /odrive/oracle/oim11g_mwh/oracle_idm1/server/apps/oim.ear/iam-consoles-faces.war/images directory. Note: The images directory is the place where all graphics files for the Oracle Identity Manager Web-based consoles are to be stored (including the logo you are to add). Using a text editor, open the Admin.jspx file, located in the /odrive/oracle/oim11g_mwh/oracle_idm1/server/apps/oim.ear/admin.war/pages directory. Locate the following line of code: <af:document title= #{resui.window_title_text} theme= dark id= d1 > Below this line of code, add the following lines of code: <af:resource type="css">.mycustombrandinglogo { background-image:url('/oim/images/acme_capital2.png'); background-position:center; background-repeat:repeat-n; display:block; height:3.5em; width:119px; } </af:resource>

43 Your file should resemble the following screenshot: Locate the following line of code: <af:pagetemplate viewid="/templates/idmshell.jspx" value="#{bindings.pagetemplatebinding}" id="pt1"> Below this line of code, add the following line of code: <f:attribute name="brandinglogocls" value="mycustombrandinglogo"/>

44 Your file should resemble the following screenshot:

45 Save your changes to the Admin.jspx file. Close the file. Restart Oracle Identity Manager Server and the Oracle Identity Manager Identity Administration Console. The logo, represented by the acme_capital2.png file, appears in the Home page of this console.

46 2.2.3 Changing the Logo Mouseover Text Shut down the Oracle Identity Manager Server and the Identity Administration Console. Open a Terminal. Navigate to the /odrive/oracle/oim11g_mwh/oracle_idm1/modules/oracle.idm.uishell_ directory. Create a folder titled backups in this directory. Note: The backups folder contains the contents of the oracle.idm.uishell.war file, which you are going to extract in Step 7 of this procedure. Copy the oracle.idm.uishell.war file, which resides in the /odrive/oracle/oim11g_mwh/oracle_idm1/modules/ oracle.idm.uishell_ directory. Paste this file into the backups folder. Navigate to the backups folder. At the prompt, enter: jar xf oracle.idm.uishell.war Navigate to the backups/web-inf/lib directory. Note: This directory appears after you extract the contents of the oracle.idm.uishell.war file. Create a folder titled backups2 in this directory. Note: The backups2 folder contains a copy of all files you are to modify for this subpractice. Copy the oracle-idm-uishell.jar file, which resides in the backups/web-inf/lib directory. Paste this file into the backups2 folder. Navigate to the backups2 folder. At the prompt, enter jar -xf oracle-idm-uishell.jar Navigate to the backups2/templates directory. Note: This directory appears after you extract the contents of the oracle-idm-uishell.jar file. Using a text editor, open the IdmShell.jspx file, found in the backups2/templates directory.

47 Locate the following line of code: af:spacer shortdesc="oracle" Replace the Oracle mouseover text with mouseover text for your company (ACME INC).

48 Your file should resemble the following screenshot:

49 Save your changes to the IdmShell.jspx file. Close the file. Using a text editor, open the IdmSignIn.jspx file, found in the backups2/templates directory. Locate the following line of code: af:spacer id="logo" shortdesc="oracle" Replace the Oracle mouseover text with mouseover text for your company (ACME INC).

50 Your file should resemble the following screenshot:

51 Save your changes to the IdmSignIn.jspx file. Close the file. Delete IdmShell.jspx~ and IdmSignIn.jspx Navigate to the backups2 directory. At the prompt, enter: rm oracle-idm-uishell.jar jar -cf oracle-idm-uishell.jar * Navigate to the backups/web-inf/lib directory. Replace the unedited oracle-idm-uishell.jar file with the modified file. Delete the backups2 directory (rm -rf backups2) Navigate to the backups directory. At the prompt, enter: rm oracle.idm.uishell.war jar -cmf META-INF/MANIFEST.MF oracle.idm.uishell.war * Note: The MANIFEST.MF file is created whenever a war file is created. This file contains information about the war file, such as the file s build number and version number. By entering m as an argument, you are forcing Java to keep the details that exist in the original MANIFEST.MF file (that is, you are not overwriting the file). Oracle Identity Manager requires this information to use the contents in the oracle.idm.uishell.war file. Navigate to the /odrive/oracle/oim11g_mwh/oracle_idm1/modules/oracle.idm.uishell_ directory. Replace the unedited oracle.idm.uishell.war file with the modified file. Delete the backups directory.

52 Restart Oracle Identity Manager Server and the Identity Administration Console. The Home page of this console appears. The mouseover text of Oracle, which is associated with the logo, is now replaced with the mouseover text you specified in Step 16 and Step 20 of this procedure (ACME INC). Important: If the mouseover text for the logo on the Home page of the Identity Administration Console does not change (that is, it still appears as Oracle), complete the following steps: 1. On the Oracle WebLogic Server Administration Console Home page, click the Deployments link. 2. On the Summary of Deployments page, locate the enterprise application titled oim ( ). 3. Stop this application (Force Stop Now). By doing so, the status of this application changes from Active to Prepared. 4. Shut down the Oracle Identity Manager Server and the Identity Administration Console. 5. Open a Terminal. 6. Navigate to the /odrive/oracle/oim11g_mwh/oracle_idm1 directory. 7. Create a folder titled IDMShell in this directory.

53 8. Copy the oracle.idm.uishell.war file, which resides in the /odrive/oracle/oim11g_mwh/oracle_idm1/modules/oracle.idm.uishell_ directory. 9. Paste this file into the IDMShell folder. 10. On the Summary of Deployments page of Oracle WebLogic Server, locate the library titled oracle.idm.uishell(11.1.1,11.1.1). 11. Delete this library a) Click on Lock & Edit b) Check oracle.idm.uishell library c) Click on Delete d) Click on Activate Changes

54 12. From the Terminal, navigate to the /odrive/oracle/oim11g_mwh/user_projects/domains/oim11g_domain/servers/oim_server1/tmp/_wl_user directory. 13. Delete the oracle.idm.uishell folder (rm -rf oracle.idm.uishell) that resides in this directory. 14. On the Summary of Deployments page of Oracle WebLogic Server, reinstall the oracle.idm.uishell(11.1.1,11.1.1) library. To do so: a) Click Install (after clicking on Lock & Edit). b) Verify that /odrive/oracle/oim11g_mwh/oracle_idm1/idmshell/oracle.idm.uishell.war appears in the Path field. Select the oracle.idm.uishell.war option. Click Next. c) Select the Install this deployment as a library option. Click Next. d) Select the oim_server1 check box. Click Next. e) Click Finish and on Activate Changes. Verify that the oracle.idm.uishell(11.1.1,11.1.1) library appears on the Summary of Deployments page and that it has a status of New. 15. Restart the Oracle Identity Manager Server and the Identity Administration Console. 16. On the Summary of Deployments page of Oracle WebLogic Server, locate the enterprise application titled oim ( ). 17. Start this application. By doing so, the status of this application changes from Prepared to Active. In addition, the Health column displays a status of OK and contains a green check mark.

55 2.3 Branding Customization for Self Service Console (text, logo, logo mouse over) Purpose: Steps: In this practice, you brand the Oracle Identity Manager Self Service Console. This includes: o Modifying the text that appears in the header banner of the console (the branding text). Specifically, you change the branding text of this console from Identity Manager Self Service to Identity Provisioning System Self Service. o Adding a logo to the console. For this practice, replace the Oracle Corporation logo with the logo for ACME Capital (or ACME INC.). ACME INC. is the company for which you are an administrator. This logo is represented by the acme_capital2.png file. o Changing the mouseover text associated with the logo. Specifically, replace the Oracle mouseover text with text for your company (ACME INC.) Modifying Branding Text 2. Shut down the Oracle Identity Manager Server and the Oracle Identity Manager Identity Administration Console. 3. Open a Terminal. 4. Navigate to the /odrive/oracle/oim11g_mwh/oracle_idm1/server/apps/oim.ear/iam-consoles-faces.war/web- INF/lib directory. 5. Create a folder titled backups in this directory. This folder contains a copy of all files you are to modify for this subpractice. 6. Copy the iam-consoles-faces.jar file, which resides in the /odrive/oracle/oim11g_mwh/oracle_idm1/server/apps/oim.ear/iam-consoles-faces.war/web-inf/lib directory. 7. Paste this file into the backups folder. 8. Navigate to the backups folder. At the prompt, enter

56 jar -xf iam-consoles-faces.jar 9. Using a text editor, open the Self_en.properties file, found in the backups/oracle/iam/consoles/faces/resources directory. 10. Locate the following string of text: header_branding=identity Manager Self Service 11. Change the value of the header_branding parameter to Identity Provisioning System Self Service. Your file should resemble the following screenshot: 12. Save your changes to the Self_en.properties file. Close the file. 13. Navigate to the backups directory. At the prompt, enter: rm iam-consoles-faces.jar jar -cf iam-consoles-faces.jar * 14. Navigate to the /odrive/oracle/oim11g_mwh/oracle_idm1/server/apps/oim.ear/iam-consoles-faces.war/web- INF/lib directory. Replace the unedited iam-consoles-faces.jar file with the modified file.

57 15. Restart Oracle Identity Manager Server and the Oracle Identity Manager Self Service Console. The Home page of this console appears. The header banner of this console is changed from Identity Manager Self Service to Identity Provisioning System Self Service.

58 2.3.2 Adding a Logo 3. Shut down the Oracle Identity Manager Server and the Oracle Identity Manager Self Service Console. 4. Open a Terminal. 5. Using a text editor, open the Self.jspx file, located in the /odrive/oracle/oim11g_mwh/oracle_idm1/server/apps/oim.ear/iam-consoles-faces.war/pages directory. 6. Locate the following line of code: <f:facet name="metacontainer"> 7. Below this line of code, add the following lines of code: <af:resource type="css">.mycustombrandinglogo { background-image:url('/oim/images/acme_capital2.png'); background-position:center; background-repeat:repeat-n; display:block; height:3.5em; width:119px; } </af:resource>

59 Your file should resemble the following screenshot: 8. Locate the following line of code: <!-- BRANDING BEGIN --> 9. Below this line of code, in the facet tag, add the following line of code: <f:attribute name="brandinglogocls" value="mycustombrandinglogo"/>

60 Your file should resemble the following screenshot: 10. Save your changes to the Self.jspx file. Close the file. 11. Restart Oracle Identity Manager Server and the Oracle Identity Manager Self Service Console. The logo, represented by the acme_capital2.png file, appears in the Home page of this console.

61 You may have to clear the Server cache: Open a Terminal. To do so, right-click the Desktop and select Open Terminal from the popup menu that appears. Navigate to the /odrive/oracle/oim11g_mwh/user_projects/domains/oim_11g_domain/servers/oim_server1/tmp directory. Delete all files in this directory.

62 2.3.3 Changing the Logo Mouseover Text Shut down the Oracle Identity Manager Server and the Oracle Identity Manager Self Service Console. Open a Terminal. Using a text editor, open the Self.jspx file, located in the /odrive/oracle/oim11g_mwh/oracle_idm1/server/apps/oim.ear/iam-consoles-faces.war/pages directory. Locate the following line of code: <f:attribute name="brandinglogocls" value="mycustombrandinglogo"/> Below this line of code, add the following line of code: <f:attribute name="brandinglogotext" value="acme INC"/>

63 Your file should resemble the following screenshot:

64 Save your changes to the Self.jspx file. Close the file. Restart Oracle Identity Manager Server and the Oracle Identity Manager Self Service Console. The mouseover text of Oracle, which is associated with the logo, is now replaced with the mouseover text you specified in Step 5 of this procedure (ACME INC).

65 2.3 Renaming Button Labels Purpose: Steps: In this practice, you rename button text (or labels) in two consoles: the Identity Administration Console and the Self Service Console. Specifically, you learn how to change button labels in the following consoles: 12. For the Identity Administration console, you change the text in the Save and Cancel buttons to Submit and Clear. These buttons are located on the Create User page of the console. 13. For the Self Service console, you change the text in the Apply and Revert buttons to Submit and Cancel. These buttons are located on the Challenge Questions page of the console Identity Administration Console Shut down the Oracle Identity Manager Server and the Oracle Identity Manager Self Service Console. Open a Terminal. Navigate to the /odrive/oracle/oim11g_mwh/oracle_idm1/server/apps/oim.ear/admin.war/web-inf/lib/backups directory. Using a text editor, open the IdentityUIBundle_en.properties file, found in the /backups/oracle/iam/identitytaskflow/resources directory. Locate the following lines of code: ## Create User Taskflow properties save_action=save cancel_action=cancel

66 Note: You search for these lines of code because you are going to rename button labels on the Create User page of the Identity Administration console. Modify the values for the save_action and cancel_action parameters, as follows: Parameter Old Value New Value save_action Save Submit cancel_action Cancel Clear Note: By modifying the values for the save_action and cancel_action parameters, you are renaming the Save and Cancel buttons (to Submit and Clear). These buttons are located on the Create User page of the Identity Administration console.

67 Your file should resemble the following screenshot: Save your changes to the IdentityUIBundle_en.properties file. Close the file. Navigate to the backups directory. At the prompt, enter: rm IdentityTaskFlow.jar jar -cf IdentityTaskFlow.jar *

68 Navigate to the /odrive/oracle/oim11g_mwh/oracle_idm1/server/apps/oim.ear/admin.war/web-inf/lib directory. Replace the unedited IdentityTaskFlow.jar file with the modified file. Restart Oracle Identity Manager Server and the Oracle Identity Manager Identity Administration Console. The Home page of this console appears. Click the Create User link on the Identity Administration Console Home page. Your modifications to the IdentityUIBundle_en.properties file are reflected in this form. Specifically, you changed the text in the Save and Cancel buttons (to Submit and Clear).

69 2.3.2 Self Service Console Shut down the Oracle Identity Manager Server and the Oracle Identity Manager Identity Administration Console. Open a Terminal. Navigate to the /odrive/oracle/oim11g_mwh/oracle_idm1/server/apps/oim.ear/iam-consoles-faces.war/web- INF/lib directory. Create a folder titled backups2 in this directory. This folder contains a copy of all files you are to modify for this subpractice. Copy the OIMUI.jar file, which resides in the /odrive/oracle/oim11g_mwh/oracle_idm1/server/apps/oim.ear/iamconsoles-faces.war/ WEB-INF/lib directory. Paste this file into the backups2 folder. Navigate to the backups2 folder. At the prompt, enter jar -xf OIMUI.jar Using a text editor, open the Agent_en.properties file, found in the directory backups2/oracle/iam/selfservice/self/agentry/resources. Note: This directory appears after you extract the contents of the OIMUI.jar file. Locate the following lines of code: Intent[SECURITY_SAVE].name = Apply Intent[SECURITY_SAVE].description = Save challenge questions Intent[SECURITY_REVERT].name = Revert Intent[SECURITY_REVERT].description = Revert changes made for setting challenge questions Note: You search for these lines of code because you are going to rename button labels on the Challenge Questions page of the Authenticated Self Service console. Modify the values for the Intent[SECURITY_SAVE].name and Intent[SECURITY_REVERT].name parameters, as follows:

70 Parameter Old Value New Value Intent[SECURITY_SAVE].name Apply Submit Intent[SECURITY_REVERT].na me Revert Cancel Note: By modifying the values for the Intent[SECURITY_SAVE].name and Intent[SECURITY_REVERT].name parameters, you are renaming the Apply and Revert buttons (to Submit and Cancel). These buttons are located on the Challenge Questions page of the Authenticated Self Service console.

71 Your file should resemble the following screenshot: Save your changes to the Agent_en.properties file. Close the file. Navigate to the backups2 directory. At the prompt, enter: rm OIMUI.jar jar -cf OIMUI.jar *

72 Navigate to the /odrive/oracle/oim11g_mwh/ Oracle_IDM1/server/apps/oim.ear/iam-consoles-faces.war/WEB- INF/lib directory. Replace the unedited OIMUI.jar file with the modified file. Restart Oracle Identity Manager Server and the Oracle Identity Manager Self Service Console. The Home page of this console appears. Click the Profile tab on the Self Service Console Home page. The My Profile tab appears. Click the Security tab. Your modifications to the Agent_en.properties file are reflected in this form. Specifically, you changed the text in the Apply and Revert buttons (to Submit and Cancel). 2.4 Style Sheet Modifications Purpose: In this practice, you create custom skins and style sheets for two Oracle Identity Manager consoles: the Identity Administration Console and the Self Service Console. Oracle Identity Manager uses two techniques to customize the appearance of its Web-based consoles: style sheets

73 Steps: and skins. 3. Style sheets separate the presentation and content for a Web page. The code for the Web page contains the page's semantic content and structure, but does not define its visual layout (style). Instead, the style is defined in an external style sheet file using a style sheet language such as CSS. This design approach is identified as a "separation" because it overrides the antecedent methodology in which a page's code defined both style and structure. Style sheets for the Oracle Identity Manager Self Service Console are placed into the /odrive/oracle/oim11g_mwh/oracle_idm1/server/apps/oim.ear/iam-consoles-faces.war/skins/myskin directory. Note: The myskin folder does not exist. Therefore, you must create it and nest it within the /odrive/oracle/oim11g_mwh/oracle_idm1/server/apps/oim.ear/iam-consoles-faces.war/skins directory. Style sheets for the Oracle Identity Manager Identity Administration Console are placed into the /odrive/oracle/oim11g_mwh/oracle_idm1/server/apps/oim.ear/ admin.war/skins/myskin directory. Note: The skins/myskin folder does not exist. Therefore, you must create it and nest it within the /odrive/oracle/oim11g_mwh/oracle_idm1/server/apps/oim.ear/admin.war directory. 4. A skin refers to the appearance of an Oracle Identity Manager Web-based console; it gives the console a different look and feel. A skin changes the way the console appears when a user clicks a button, but does not change the behavior of the user interface. A change in the skin results in a change to the console s appearance only; it does not impact the console s functionality. New skins for the Self Service Console and the Identity Administration Console are created in the trinidadskins.xml file and registered in the trinidad-config.xml file. For the Self Service Console, these files are located in the /odrive/oracle/oim11g_mwh/oracle_idm1/server/apps/oim.ear/iam-consoles-faces.war/web-inf directory. For the Identity Administration Console, these files are located in the /odrive/oracle/oim11g_mwh/oracle_idm1/server/apps/oim.ear/ admin.war/web-inf directory.

74 2.4.1 Self Service Console Shut down the Oracle Identity Manager Server and the Oracle Identity Manager Self Service Console. Open a Terminal. Navigate to the /odrive/oracle/oim11g_mwh/oracle_idm1/server/apps/oim.ear/iam-consoles-faces.war/web-inf directory. Create a folder titled backups in this directory. This folder contains a copy of all files you are to modify for this subpractice. Copy the trinidad-skins.xml file and trinidad-config.xml files, which reside in the /odrive/oracle/oim11g_mwh/oracle_idm1/server/apps/oim.ear/iam-consoles-faces.war/web-inf directory. Paste these files into the backups folder. Open the trinidad-skins.xml file, found in the backups folder. Note: For this subpractice, you are defining a new skin for the Oracle Identity Manager Self Service Console. New skins for this console are created in the trinidad-skins.xml file. Locate the following line of code: <skins xmlns=" Below this line of code, add the following lines of code: <skin> <id>myskin.desktop</id> <family>myskin</family> <extends>fusion.desktop</extends> <render-kit-id>org.apache.myfaces.trinidad.desktop</render-kit-id> <style-sheet-name>skins/myskin/myskin.css</style-sheet-name> <bundle-name>oracle.iam.consoles.faces.resources.adfcomponentsmessagebundle</bundle-name> </skin>

75 Your file should resemble the following screenshot: Note: By adding these lines of code to the trinidad-skins.xml file, you are defining a new skin (myskin) for the Oracle Identity Manager Self Service Console. In addition, you are setting this skin to be the default skin for the console.

76 Save your changes to the trinidad-skins.xml file. Close the file. You created a new skin for the Oracle Identity Manager Self Service Console. You are ready to register the skin. New skins for the console are registered in the trinidad-config.xml file. Open the trinidad-config.xml file, found in the backups folder. Locate the following line of code: <skin-family>fusion</skin-family> Modify the value for the <skin-family> parameter, as follows: Parameter Old Value New Value <skin-family> fusion myskin Your file should resemble the following screenshot: Note: By changing the value for the <skin-family> parameter (from fusion to myskin), you are registering this skin. You defined this skin in the trinidad-skins.xml file.

77 Save your changes to the trinidad-config.xml file. Close the file. Navigate to the /odrive/oracle/oim11g_mwh/oracle_idm1/server/apps/oim.ear/iam-consoles-faces.war/web-inf directory. Replace the unedited trinidad-skins.xml file and trinidad-config.xml file with the modified files. You created and registered myskin, a new skin for the Oracle Identity Manager Self Service Console. You are ready to create a style sheet for this console. This style sheet (myskin.css) is used to override default elements for the Oracle Identity Manager Self Service Console, such as the console s background color, menu link color, and activity icon (located in the upper-right-hand corner of the console). Navigate to the /odrive/oracle/oim11g_mwh/oracle_idm1/server/apps/oim.ear/iam-consoles-faces.war/skins directory. Create a folder titled myskin in this directory. Note: This folder is to contain myskin.css, the style sheet for the Oracle Identity Manager Self Service Console. Copy the myskin.css file, which resides in the /odrive/dummydata/ Lab 20/sample_code_files/12_4/Self Service Console/myskin directory, after unzipping sample_code_files.zip. Paste this file into the /odrive/oracle/oim11g_mwh/oracle_idm1/server/apps/oim.ear/iam-consolesfaces.war/skins/myskin directory.

78 Restart Oracle Identity Manager Server and the Oracle Identity Manager Self Service Console. The appearance of this console is modified, and reflects the custom skin and style sheet you created for the console. These changes include the console s background color, menu link color, and activity icon (located in the upper-right-hand corner of the console).

79 2.4.2 Identity Administration Console 1. Shut down the Oracle Identity Manager Server and the Oracle Identity Manager Self Service Console. 2. Open a Terminal. 3. Copy the trinidad-skins.xml file, which resides in the /odrive/oracle/oim11g_mwh/oracle_idm1/server/apps/oim.ear/iam-consoles-faces.war/web-inf directory. 4. Paste this file into the /odrive/oracle/oim11g_mwh/oracle_idm1/server/apps/oim.ear/admin.war/web-inf directory. Note: The trinidad-skins.xml file contains the modifications you made to the file for the Oracle Identity Manager Self Service Console. These changes are also applicable for the Identity Administration Console. By copying the trinidad-skins.xml file, you create a new skin for the Oracle Identity Manager Identity Administration Console. You are ready to register the skin. New skins for this console are registered in the trinidad-config.xml file. 5. Create a folder titled backups in the /odrive/oracle/oim11g_mwh/oracle_idm1/server/apps/oim.ear/admin.war/web-inf directory. This folder contains a copy of all files you are to modify for this subpractice. 6. Copy the trinidad-config.xml file, which resides in the /odrive/oracle/oim11g_mwh/oracle_idm1/server/apps/oim.ear/admin.war/web-inf directory. 7. Paste this file into the backups folder. 8. Edit trinidad-config.xml file and locate the following line of code: <skin-family>fusion</skin-family> 9. Modify the value for the <skin-family> parameter, as follows: Parameter Old Value New Value <skin-family> fusion myskin

80 Your file should resemble the following screenshot: Note: By changing the value for the <skin-family> parameter (from fusion to myskin), you are registering this skin. You defined this skin in the trinidad-skins.xml file. 10. Save your changes to the trinidad-config.xml file. Close the file. 11. Navigate to the /odrive/oracle/oim11g_mwh/oracle_idm1/server/apps/oim.ear/admin.war/web-inf directory. Replace the unedited trinidad-config.xml file with the modified file. You created and registered myskin, a new skin for the Oracle Identity Manager Identity Administration Console. You are ready to use the myskin.css style sheet for this console. You created this style sheet for the Oracle Identity Manager Self Service Console. The myskin.css style sheet is used to override default elements for the Identity Administration Console, such as the console s background color, menu link color, and activity icon (located in the upper-right-hand corner of the console). 12. Navigate to the /odrive/oracle/oim11g_mwh/oracle_idm1/server/apps/oim.ear/admin.war directory.

81 13. Create a subfolder titled skins in this directory. 14. Navigate to the /odrive/oracle/oim11g_mwh/oracle_idm1/server/apps/oim.ear/admin.war/skins directory. 15. Create a subfolder titled myskin in this directory. Note: This folder is to contain myskin.css, the style sheet for the Oracle Identity Manager Identity Administration Console. 16. Copy the myskin.css file, which resides in the /odrive/oracle/oim11g_mwh/oracle_idm1/server/apps/oim.ear/iamconsoles-faces.war/skins/myskin directory. 17. Paste this file into the /odrive/oracle/oim11g_mwh/oracle_idm1/server/apps/oim.ear/admin.war/skins/myskin directory. 18. Restart Oracle Identity Manager Server and the Oracle Identity Manager Identity Administration Console. The appearance of this console is modified, and reflects the custom skin and style sheet you created for the console. These changes include the console s background color, menu link color, and activity icon (located in the upperright-hand corner of the console).

82 Conclusion In this lab, you accomplished the following: Learnt how to customize Administration console Learnt how to customize Self-Service console Product features that you have learnt UI Customization