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

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

Version 1 Next »

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.


  1. 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: ["/",""]


  2. Add View to App Configuration:

    Edit the flle


    and add

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

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



  3. Add JS View handler to main.js:

    Edit the file


    and add

    to the list of required requirements.

  4. Create the html page:

    Create a new html page


    which includes the activation form with required fields. You can start by copying the UserRegistration page


    to the destination folder and use it as a template.

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

  • No labels