---
title: Customizing UI form fields
description: You can customize the form field for a given attribute.
component: pingdirectory
version: 11.0
page_id: pingdirectory:delegated_admin_application_guide:pd_da_customize_ui_form_fields
canonical_url: https://docs.pingidentity.com/pingdirectory/11.0/delegated_admin_application_guide/pd_da_customize_ui_form_fields.html
revdate: September 13, 2023
section_ids:
  about-this-task: About this task
  steps: Steps
  example: Example:
  example-2: Example:
  example-3: Example:
  next-steps: Next steps
---

# 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.