Child pages
  • OpenIDM 3.1 - How to add a new custom UI page
Skip to end of metadata
Go to start of metadata

OpenIDM UI provides configuration features which allow integrators to apply some level of quick customization of style and context. There are however cases where it becomes handy if one can add a new UI page with custom functionality to those already provided by the OOTB UI. Here are the five steps to do so, assuming a new UI page named "doSomething") is to be added under /openidmui/ for user access.

 

Create entry in UserRoutesConfig:

Edit the file

[OpenIDM_PATH]/ui/default/enduser/public/config/routes/UserRoutesConfig.js

and add the following under “var obj” declaration:

add-to-UserRoutesConfig.js
        "doSomething": {
           view: "DoSomethingView",
           url: /doSomething(\/[^\&]*)(\&.+)?/,
           pattern: "doSomething??",
           forceUpdate: true,
           argumentNames: ["realm", "additionalParameters"],
           defaults: ["/",""]
       },

 

 

Add View to App Configuration:

Edit the flle

[OpenIDM_PATH]/ui/default/enduser/public/config/AppConfiguration.js

and add

add-to-AppConfiguration.js
DoSomethingView: "org/forgerock/openidm/ui/user/DoSomethingView",

under obj.moduleDefinition.configuration for entry where obj.moduleDefinition.moduleClass equals

"org/forgerock/commons/ui/common/main/GenericRouteInterfaceMap"

 

Add JS View handler to main.js:

 

Edit the file

[OpenIDM_PATH]/ui/default/enduser/public/org/forgerock/openidm/ui/user/main.js

and add

add-to-main.js
"./DoSomethingView",
to the list of required requirements.

 

Create the html page:

Create a new html page

[OpenIDM_PATH]/ui/extension/templates/user/DoSomethingTemplate.html

which includes the required elements. You can start by copying the UserRegistration page

[OpenIDM_PATH]/ui/default/enduser/public/templates/user/UserRegistrationTemplate.html

to the destination folder and use it as a template.

Create the JS handler for the html page:

Create a new JS file

[OpenIDM_PATH]/ui/default/enduser/public/org/forgerock/openidm/ui/user/DoSomethingView.js

to handle functions such as input validation and form submission. Again, you can start from

[OpenIDM_PATH]/ui/default/enduser/public/org/forgerock/openidm/ui/user/UserRegistrationView.js

as a template and modify it as needed. The file may look like:
 

DoSomethingView.js
define("org/forgerock/openidm/ui/user/DoSomethingView", [
    "org/forgerock/commons/ui/common/main/AbstractView",
	"UserDelegate",
 ...


], function(AbstractView, userDelegate, ...) {

    var DoSomethingView = AbstractView.extend({
        template: "templates/user/DoSomethingTemplate.html",
        baseTemplate: "templates/common/MediumBaseTemplate.html",
        delegate: userDelegate,
        events: {
            "click input[type=submit]": "formSubmit",
            "onValidate": "onValidate",
			...
        },
		
		formSubmit: function () {
			...
		},
...
	}
	return new DoSomethingView();
});
 

 


That's it. Clear your browser cache and try accessing the "/openidmui/index.html#doSomething/". You should be able to find the UI page.