Quantcast
Viewing all articles
Browse latest Browse all 54

OIM 11g R2 UI Customization Tips and Tricks

Introduction

OIM 11g R2 provides OIM Developers with the means to implement very sophisticated and functional rich customization to the Out-of-the-Box User Interface. These customizations are capable of surviving the installation of patches, which means that when the OIM installation is patched, the UI customizations don’t have to be re-applied. The customizations are stored as metatada in MDS (Meta Data Store), and it is applied on top of the standard user interface at run-time. This article presents a few techniques to implement customizations that go a little beyond the capabilities of Web Composer; but still are within the scope of OIM’s MDS.

On a recent post by Daniel Gralewski, a customization for the Catalog was presented. The purpose of such customization was to filter the resources already provisioned to a user from the results of a catalog search. In a follow up question, one of our readers asked if the search screen could be customized to add a drop down box that can be used to trigger a predefined search in the catalog. This post describes the way in which this could be accomplished.

Main Article

The customization will provide the functionality to accomplish the following:

Allow users to select one item from a drop down list of level 1 categories, and based on that selection a second drop-down list is populated.The items in the first drop-down box represent Applications.The items in the second drop-down box represent Application Modules of the selected Application.Once an Application Module is selected from the second drop-down list, the catalog search is performed to retrieve the Application Roles associated to the selected Application Module.

The configuration

As described above, there is a relationship between the items in the first drop-down box and the items from the second drop-down. This relationship is created using user-defined tags configured for each catalog item. The relationship between all the elements in this sample implementation are as follows:
  • Application Customer Channel (CCH)
    • Application Modules
      • Online Billing (OLB)
        • Admin Agent Role (AAR)
        • Audit Agent Role (AUAR)
        • Promotion Agent Role (PAR)
      • Customer Support (CSUPP)
        • Support Agent Role (SAR)
        • Support Manager Role (SMR)
      • Products and Services (PANDS)
        • User Role (USRR)
        • Admin Role (ADMR)
      • Marketing (MKT)
        • Campaign Manager Role (CMGR)
        • Product Manager Role (PMGR)
Applications are categorized as:
  • Enterprise Application (Tagged as: EnterpriseApp)
  • Organization Application (Tagged as: OrgApplication).
  • Application Modules are tagged as AppModule.
  • Application Roles are tagged as AppRole.
The following table shows the Resource Hierarchy for the Application shown above:
Resource Name
Category
Tags
Customer Channel
ApplicationInstance
OrgApplication
Online Billing
ApplicationInstance
AppModule, CCH, OLB
Customer Support
ApplicationInstance
AppModule, CCH, CSUPP
Products and Services
ApplicationInstance
AppModule, CCH, PANDS
Marketing
ApplicationInstance
AppModule, CCH, MKT
Admin Agent Role
Role
AppRole, OLB
Audit Agent Role
Role
AppRole, OLB
Promotion Agent Role
Role
AppRole, OLB
User Role
Role
AppRole, PANDS
Admin Role
Role
AppRole, PANDS
Support Agent Role
Role
AppRole, CSUPP
Support Manager Role
Role
AppRole, CSUPP
Campaign Manager Role
Role
AppRole, MKT
Product Manager Role
Role
AppRole, MKT

Based on the Tagging and Categorization shown above the following search can be used to retrieve the Organization Applications available to the logged in user’s organization:

Image may be NSFW.
Clik here to view.
Java code for Catalog Search on OrgApplication tag

The results are placed in a List variable called orgApplications. Now in order to display them in the first drop down box the following code creates the list of SelectItem elements for the drop down box.

 

Image may be NSFW.
Clik here to view.
Catalog Search Results parsing code

Then I will show you how to connect that to the actual drop down box on the screen. As you can see in the code fragment above, the SelectItem instances are built with the Catalog Entity Display Name as the SelectItem’s label and the EntityName as the value. The following table lists the entity names of the ApplicationInstances defined in this example:

 

Entity Name
Entity Display Name
Category
CCH
Customer Channel
ApplicationInstance (OrgApplication)
OLB
On Line Billing
ApplicationInstance (AppModule)
CSUPP
Customer Support
ApplicationInstance (AppModule)
PANDS
Products and Services
ApplicationInstance (AppModule)
MKT
Marketing
ApplicationInstance (AppModule)
Follow the steps below to populate the drop-down boxes according to the hierarchy above:
  • Log-in to the Identity Self Service console
  • Create a Sandbox and activate it.
  • Open the Catalog screen
  • Click Customize and select ‘Source’ view.
  • Add the Drop Down box to the screen, see example below:

The text box where catalog search criteria used to be typed in has been made invisible.

After adding the drop-down list to the screen, open the properties for the Group Layout Container and switch to the Child Components tab. Re-order the components as needed. See the picture below:

Add an element ‘UISelectItems’ to the Drop-Down box component, by selecting the drop down box and pressing the Add Content button.

Unfortunately, the Web Composer does not allow manipulating the UISelectItems properties, so in order to attach the list of items displayed by the drop-down box, an export of the sand box is required. Once exported, edit the metadata file for the catalogSearch page as shown next:

 

Set the ‘value’ property of the selectItems tag to #{CatalogTFManager.filterBox1List}. This is a property of the managed been CatalogTFManager part of the custom code required for this customization, as shown in the following picture:

 

The drop-down box displays Organization Published and Global Scoped Applications. The ‘filterBox1List’ property will contain an aggregated list of Applications (Organization and Global Scope). The code presented in the listing below performs these operations:

Set the ‘valueChangeListener’ property of the selectOneChoice tag to ‘#{CatalogTFManager.selectedApplicationChanged}’. This method is invoked when users make a selection on the drop-down box. Inside this method, the list of associated application modules is calculated and attached to the second drop-down list. It creates the ‘filterBox2List’ list of SelectItems which is attached to the second drop-down box using the ‘value’ property of the ‘selectItems’ tag of the second ‘selectOneChoice’ tag.


Set the value of ‘valueChangedListener’ property of the second ‘selectOneChoice’ tag to ‘#{CatalogTFManager.selectedAppModuleChanged}’. This will detect when a selection is made on the second drop-down box. The selecteAppModuleChanged method populates the value of the Search Expression input box that was hidden from the UI. When the user presses the button to start the search, the value in the Search Expression input is evaluated by the internal managed beans to extract the application roles associated to the selected Application Module.

 

The same customizations performed on searchCatalog.jsff.xml file need to be added to the catalogResult.jsff.xml file shown in the following listing:

Summary

Here is the list of steps to implement this customization:
  • Create a Sandbox and activate it.
  • Open the Catalog page and do the following:
    • Add two SelectOneChoice components to the page with their corresponding SelectItems subcomponent.
    • Remove the Visible flag from the InputText field for the search expression (this is part of the out of the box interface)
    • Create the Managed Beans for the logic of the Catalog screen and deploy your library. These beans will be responsible for:
      • Execute the required Catalog Searches.
      • Creating Lists of Values (Initially or based on selections from other list boxes).
      • Respond to UI events like selection changes or button clicks.
    • After the library has been successfully deployed, add bindings to the UI components (via composer) to tie the UI components on both pages of the Catalog Task Flow to member variables in the Managed Beans. This is required to control how UI components will be rendered according to the application’s state (like enabling/disabling buttons or links, or extracting the current multiple selections from the search results table).
    • Publish your Sandbox and test.
This article is part of the OIM 11g Academy Series.

Viewing all articles
Browse latest Browse all 54

Trending Articles