Customize OpenAM Registration Page

This topic has 3 replies, 2 voices, and was last updated 5 years, 11 months ago by Andrew Potter.

  • Author
    Posts
  • #11436
     buddhadeb.das
    Participant

    Hi All,
    Request you to kindly provide me pointers on how to update the OpenAM registration page to include more fields during the registration process.

    At present the default registration flow require user to enter email and click on submit. OpenAM sends user a registration mail to users email, User needs to click on the link to continue the login process, once the user clicks on the link user lands on the OpenAM registration page where user enters details like username, First Name, Last Name and Password to register an account.

    My requirement is to have additional fields like date of birth, Zipcode etc on the openAM registration page. Can you please provider me pointers on how to go about customizing the openAM registration page to include the additional fields.

    Thanks,
    Buddhadeb

    #11807
     Andrew Potter
    Participant

    I’m assuming you’re using the new self-service capability in OpenAM13…

    First, you may want to do this section 4.1 to ensure the attributes are known to OpenAM, exist in the OpenDJ schema, and are editable by users:
    https://backstage.forgerock.com/#!/docs/openam/13/dev-guide#sec-custom-attr

    Then you’ll need to modify the HTML template associated with the ‘stage’ in the registration process.
    The template you’re after will be :
    XUI/templates/user/process/registration/userDetails-initial.html
    Copy/paste an existing form-group div block for an attribute and modify it to suit your new attribute.
    e.g. to add ‘description’:

        <div class="form-group">
            <label class="sr-only separator" for="input-sn">
                <span>{{t 'common.user.description'}}</span>
            </label>
            <input type="text" placeholder="{{t 'common.user.description'}}" id="input-description" name="user.description" class="form-control input-lg" />
        </div>

    Note this uses the translation capability, so you may also need to modify the translation.json file to display the placeholder/name the ‘span’ correctly. You may find the attributes you want are already defined there!

    You’ll probably also want to follow the advice here. It’s not specific to self-service registration but worth heeding:
    https://backstage.forgerock.com/#!/docs/openam/13/install-guide#xui-customizing-layout

    And, finally, you’ll need to permit the new attributes to be used during self-service creation which you do from the ‘User Self Service’ service configuration for the realm.

    Depending on your caching strategy you might need to restart OpenAM and clear browser cache for changes to take effect.

    #15010
     buddhadeb.das
    Participant

    Hello @andrew-potter,

    I have followed your guidance and added new fields in the XUI/templates/user/process/registration/userDetails-initial.html and i was successful.
    So now the next task is to put some validation checks on this page.I have figured out that we can use the data-validator attribute in the input tag to include new checks .example :-
    <div class=”form-group”>
    <label class=”sr-only separator” for=”input-password”>
    <span>{{t ‘common.user.password’}}</span>
    </label>
    <input type=”password” placeholder=”{{t ‘common.user.password’}}” id=”input-password” name=”user.userPassword” class=”form-control input-lg”
    data-validation-dependents=”input-confirmPassword” data-validator-event=”keyup”
    data-validator=”required minLength atLeastXNumbers atLeastXCapitalLetters atLeastXLowerLetters” minLength=”10″ atLeastXNumbers=”1″ atLeastXCapitalLetters=”1″ atLeastXLowerLetters=”1″/>
    </div>
    The Data validator functions are defined in a java script file CommonValidators.js located at XUI\config\validators\

    I am able to add the existing validation checks(functions) present in CommonValidators.js to userDetails-initial.html, however when i try to create a new function in CommonValidators.js it is not taking into effect.
    I did some investigation using a browser debugger and and see that the old CommonValidators.js is being used,I have tried redeploying the OpenAM war file but did not help.

    Please let me know if you have any pointers on how to solve this issue.

    Thanks,
    Buddhadeb

    #15019
     Andrew Potter
    Participant

    I’m guessing as I’ve not tried it, but the first that springs to mind is that it might be cached somewhere.
    Browser cache is most obvious – have you cleared that? Do you have any other caching enabled…tomcat? gateways? etc??
    See also the discussion about the advanced server property here: https://backstage.forgerock.com/docs/openam/13/install-guide#chap-custom-ui

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

©2022 ForgeRock - we provide an identity and access platform to secure every online relationship for the enterprise market, educational sector and even entire countries. Click to view our privacy policy and terms of use.

Log in with your credentials

Forgot your details?