How To
ForgeRock Identity Platform
Does not apply to Identity Cloud

How do I change the display properties for a User Profile field in the Self-Service UI in IDM 5.x and 6?

Last updated Apr 8, 2021

The purpose of this article is to provide information on changing the display properties for a User Profile field in the Self-Service UI in IDM. For example, you might want to make the First Name and Last Name fields read-only, or the Username field editable.


Changing the display properties for a field

Note

The information in this article does not apply to IDM 6.5 and later because the End User UI is now based on the Vue JavaScript framework instead of XUI. See ForgeRock/end-user-ui: Identity Management (End User) for further information on customizing this UI.

You can change the display properties for a User Profile field using the UserProfileTemplate.html file (located in the /path/to/idm/ui/selfservice/default/templates/user directory). You should copy this template to the /path/to/idm/ui/selfservice/extension/templates/user directory as detailed in Integrator's Guide › Customizing a UI Template and then update the readonly property as needed.

This article covers the following two common use cases:

Note

These changes should be dynamic and do not require you to restart the IDM instance; if you do not see your changes straight away, you should clear your browser cache.

Making the First Name and Last Name fields read-only

You can make the First Name and Last Name fields read-only as follows:

  1. Create a new /path/to/idm/ui/selfservice/extension/templates/user directory if it does not already exist.
  2. Copy the UserProfileTemplate.html file (located in the /path/to/idm/ui/selfservice/default/templates/user directory) to the /path/to/idm/ui/selfservice/extension/templates/user directory.
  3. Edit the new UserProfileTemplate.html file in the /path/to/idm/ui/selfservice/extension/templates/user directory and add the readonly=true property to the givenName and sn fields. The updated fields would look like this in the UserProfileTemplate.html file: {{#givenName}} {{> form/_basicInput property="givenName" label="common.user.givenName" readonly=true}} {{/givenName}} {{#sn}} {{> form/_basicInput property="sn" label="common.user.sn" readonly=true}} {{/sn}}

Making the Username field editable

You can make the Username field editable as follows:

  1. Create a new /path/to/idm/ui/selfservice/extension/templates/user directory if it does not already exist.
  2. Copy the UserProfileTemplate.html file (located in the /path/to/idm/ui/selfservice/default/templates/user directory) to the /path/to/idm/ui/selfservice/extension/templates/user directory.
  3. Edit the new UserProfileTemplate.html file in the /path/to/idm/ui/selfservice/extension/templates/user directory and change both the readonly=true properties to readonly=false for the userName field (this field is listed twice). The updated section would look like this in the UserProfileTemplate.html file: {{#userName}} {{> form/_basicInput property="userName" label="common.user.username" readonly=false}} {{/userName}} {{#username}} {{> form/_basicInput property="username" label="common.user.username" readonly=false}} {{/username}}

See Also

How do I add a new custom UI page in IDM 5.x and 6?

How do I add drop-down list controls to the Admin UI in IDM (All versions)?

Integrator's Guide › Customizing a UI Template

Related Training

ForgeRock Identity Management Core Concepts (IDM-400)

Related Issue Tracker IDs

N/A


Copyright and Trademarks Copyright © 2021 ForgeRock, all rights reserved.