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


and add the following under “var obj” declaration:

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



Add View to App Configuration:

Edit the flle


and add

DoSomethingView: "org/forgerock/openidm/ui/user/DoSomethingView",

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



Add JS View handler to main.js:


Edit the file


and add

to the list of required requirements.


Create the html page:

Create a new html page


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


to the destination folder and use it as a template.

Create the JS handler for the html page:

Create a new JS file


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


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

define("org/forgerock/openidm/ui/user/DoSomethingView", [

], 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.