PingDirectory

Customizing UI form fields

You can customize the form field for a given attribute.

About this task

Although you can customize the presentation completely, Delegated Admin provides example files to demonstrate the functionality and capabilities.

Because the example files most likely require modifications to address your specific needs, you should have a basic level of familiarity with HTML, CSS, and JavaScript when dealing with custom UI form fields.

The example files cover the following scenarios:

  • Single-selection lists, which allow users to select one item from multiple options

  • Check boxes, which can be customized so that one check box is dependent on the other

  • String fields with validation and error messages

  • Custom, user-friendly display of a JSON attribute, such as ubidEmailJSON

  • Multivalue string field, which allows users to enter multiple, comma-separated values

To set up Delegated Admin to use the custom HTML files and to display custom UI form fields:

Steps

  1. Go to PingDirectory/webapps/delegator/app/customAttributes.

  2. Use a text editor to open the relevant example HTML file, as shown in the following table.

    UI Form Field Example File

    Single selection list

    example-select.html

    Dependent check boxes

    example-dependent.html

    String field

    example-basic.html

    Custom display of a JSON attribute

    example-json.html

    Multivalue string field

    example-multivalue.html

  3. Make the appropriate modifications to the example file.

    For information about resizing and other custom capabilities, see the comments in PingDirectory/webapps/delegator/app/assets/iframe—​v1.js.

  4. Save the example file as a new file named attributeName.html.

    Example:

    For example, if you are setting up a custom attribute presentation for cn, name the file cn.html.

  5. Optional: For further clarity, create a directory under the customAttributes directory with the name of the resource endpoint of the REST resource types.

    Example:

    For example, because a users type exists with the endpoint usersEndpoint, you might place cn.html in a customAttributes/usersEndpoint/ directory.

    When locating the appropriate HTML file, Delegated Admin searches for the attribute name under the endpoint folder if one exists, and then searches under the customAttributes folder.

  6. In the PingDirectory server, set the attribute-presentation field for the Delegated Admin attribute to custom.

    Example:

    dsconfig set-delegated-admin-attribute-prop \
  --type-name users  \
  --attribute-type cn  \
  --set attribute-presentation:custom

Next steps

Browsers that attempt to aggressively cache HTML files often save and reuse outdated versions of those files. Because such browsers might not display changes that are made to an example HTML file, include the following <meta> tag in the head of each custom HTML file.

<meta http-equiv="Cache-Control" content="no-cache"/>

If your browser still doesn’t display the updated HTML file, try the following:

  • Clear the browser’s cache.

  • Use a private browsing window.

  • Try a different browser.