Child pages
  • OpenIDM 3.1 - How to add a new custom UI page

Versions Compared


  • This line was added.
  • This line was removed.
  • Formatting was changed.

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 four 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:


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



Add View to App Configuration:

Edit the flle


and add

Code Block


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

Code Block
to the list of required requirements.


Create the html page:

Create a new html page


which includes the




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:

Code Block
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.html/". You should be able to find the UI page.