How To
ForgeRock Identity Platform
Does not apply to Identity Cloud

How do I add a new custom UI page in IDM 5.x and 6?

Last updated Apr 8, 2021

The purpose of this article is to provide information on adding a new custom UI page in IDM using the XUI. Custom UI pages can be used to extend the functionality in IDM.


4 readers recommend this article

Adding a new custom UI page

Note

The information in this article does not apply to IDM 6.5 and later because the End User UI is now based on the Vue JavaScript framework instead of XUI. See ForgeRock/end-user-ui: Identity Management (End User) for further information on customizing this UI.

The XUI in IDM uses require.js for modular JavaScript® loading, backbone.js for model/view binding and handlebars.js for templating.

The following steps demonstrate creating a page in the XUI that includes some sample text.

  1. Create a routes file to introduce a new route to your view, for example: /path/to/idm/ui/selfservice/default/config/routes/CustomIDMRoutesConfig.js And define a route in this file, for example: define("config/routes/CustomIDMRoutesConfig", [ ], function() {    var obj = {         "helloWorldView" : {             view: "org/forgerock/openidm/ui/custom/HelloWorldView",             role: "ui-admin",             url: "helloWorld/"         }     };     return obj; });
  2. Update the AppConfiguration.js file (located in the /path/to/idm/ui/selfservice/default/config/ directory) to add the new routes file to your Application Configuration; find the section that includes paths to the routes (~line 55) and add a new route: {"routes":"config/routes/CustomIDMRoutesConfig"}
  3. Create a view file, for example: /path/to/idm/ui/selfservice/default/org/forgerock/openidm/ui/custom/HelloWorldView.js And add your view code to this file, for example: define("org/forgerock/openidm/ui/custom/HelloWorldView", [    "org/forgerock/commons/ui/common/main/AbstractView",     "org/forgerock/commons/ui/common/main/Configuration",     "org/forgerock/commons/ui/common/util/UIUtils"  ], function(AbstractView) {     var HelloWorldView = AbstractView.extend({         template: "templates/custom/HelloWorld.html",         baseTemplate: "templates/common/MediumBaseTemplate.html",         events: {         }     });     return new HelloWorldView(); });
  4. Create a template file, for example: /path/to/idm/ui/selfservice/default/templates/custom/HelloWorld.html And add some sample text to this file: <h2>Hello World!</h2> <p> Some sample text. </p>

That's it. You should now be able to view the new view by navigating to #helloWorld/, for example:http://localhost:8080/#helloWorld/

See Also

How do I add drop-down list controls to the Admin UI in IDM (All versions)?

How do I change the display properties for a User Profile field in the Self-Service UI in IDM 5.x and 6?

Related Training

N/A

Related Issue Tracker IDs

N/A


Copyright and Trademarks Copyright © 2021 ForgeRock, all rights reserved.