> For the complete documentation index, see [llms.txt](https://docs.work-relay.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.work-relay.com/forms/form-components/list-and-related-list.md).

# List and related list

## Adding columns to the list

* Click the list component on the canvas (1).
* On the **Settings** subtab, choose the field to add as a column using the **View** picklist (2).
* Click the **+** icon to add the column to the list (3).

{% hint style="info" %}
Users can use the following objects to set list column names: Form Source Object, `$User`, `$System`, `$Variables`, `$Form`.
{% endhint %}

* Repeat the previous two steps to add additional columns.

{% hint style="info" %}
Lookup field columns display links in the List/Related List component.
{% endhint %}

* Save your changes.

![](/files/76155d1cddbac20462a817d9cb18cc7d6ff874bb)

## Component properties

![](/files/96341104a755ea5272fec5137217ba3d579dd780)

* [**Hidden fields**](#hidden-fields)
* **Order By** — By default, the list is ordered by the column added first. Use the **Order By** picklist to choose another column.
* **Default Page Size** — If the default 25 records per page is not enough, choose a new value in **Default Page Size**.
* **Conditions** — See below.
* **Max Height** — Limit the height of the component by providing a value in px.
* **Show on Edit Page** — Displays the list in form Edit mode.
* **Show on View Page** — Displays the list in form View mode.
* **Ignore Permissions** — Loads all available records to the list, including those not available due to user permissions.
* **Show Checkboxes** — Displays a checkbox next to each list item. Available for the List component only.
* **Disable Spinner** — Forces the list not to show standard spinners while data is loading.
* **Inline Edit** — Allows the user to perform [inline edit](/forms/form-components/list-and-related-list.md#inline-edit) on a list component.

## Hidden fields

This feature allows you to specify a list of fields that will not be visible in the List or Related List but will be available for use in form actions, events, and so on.

* Select the listSelect the list on the canvas.
* Click the **Settings** icon next to the **Hidden fields** field to show a popup with the fields list (4).
* Add the necessary fields and click **Apply**.

![](/files/885a6a297805938a8ff6b4bd8cbdb9399d2d5ebe)

* These fields become unavailable for selection in the basic fields picklist (2).
* Fields already selected as list columns become unavailable for selection in the **Additional Fields** popup. Remove them from the columns list first.

## List conditions

You can define List/Related List filters using the Conditions feature.

* Click the list component on the canvas.
* Click the **Settings** button (5) on **Conditions**.
* Provide filtering parameters.

Values should be passed in the format of a SOQL query `where` clause, using field API names and SOQL operators.

![](/files/92e1aa3c24e6b901a838715a3f79294267396c7b)

![](/files/43c05ba3a48a37483a5ff415e813b6eb1ffdd734)

Using the above condition limits records in the list to active accounts with a non-empty description.

## List actions

You can create new records from the List/Related List component and review and edit existing records. You can also change the default behavior of the View, Edit, Delete, and New buttons from the list actions settings.

For a List/Related List, its New, Edit, View, and Delete options can be overridden. When selecting a list, click the **Settings** icon (6) for any of the options.

![](/files/b66a866c3c790a99c909edc26be38821de2fbfea)

Here is an example of overriding the Edit option. After checking the **Override** checkbox (7), click **Add** (8) to add events.

![](/files/edce05e93d031dfde649d6e27fd9e71d15854469)

The **Event Settings** popup is shown. Configure the event type (9), add a handler (10), and select (11) a Navigate-type form action (12, see below) if you want to navigate the user to a layout other than the standard SF layout, which is the default behavior.

![](/files/24d5666d522d94895dc1657e7dd8e5ffa38bc551)

### Action parameters settings

Set up action parameters (9). You can pass row values to the action using the **Row** context object (13). After selecting the **Row** context object, choose the list column value to pass to the action. Row Id is always available for selection, even if it was not added as a list column.

In the example above, the account Id is passed to the form as the context object Id.

![](/files/46ffdd9cb6d6a26266f7863a8ca11d48206c38cb)

### Navigate action settings

![](/files/faf01fa681ad73ad6b4d52d6a3c3e35bf3821796)

## Custom list actions

Select the List/Related List component on the form (14), then click **Add New** (15) under the **Custom Actions** field.

Configure the custom action in the **Action Settings** popup (16).

![](/files/619e8fa6112163a81b94b0e0dd7f4d648c13e232)

The **Button Position** setting:

* **Header** buttons (17) are displayed above the list.
* **Record** buttons (18) are displayed as standard row actions.

![](/files/0805e19f7ad498fd658bc5ceabd00e1f917d999b)

![](/files/4c4b3286c4a81b00e1692ac8b136f7a82c98e0ae)

## List data provider

Data Provider allows you to populate lists with custom data collected in an Apex class.

**Create an Apex class that implements the `WR_BPM.FormBuilderService.FormBuilderApiInterface` interface.**

The class should have two public methods: `loadListData` and `loadLookupData`.

See the attached example:

{% file src="/files/yrGYcY3p3ue74gYzu0CR" %}

Click the list in the form (19). Select source type **Apex**, select the class created in the Dataprovider input, and provide conditions if needed.

![](/files/d5f68dde8692ef54578f3a690c981908819cab24)

For lists with Data Provider, users can pass parameters to the Apex class:

![](/files/1efecad5fbd3808429dd1a43a2141fdef9b28ea2)

{% hint style="info" %}
Object and columns specified for the list are replaced with the object and columns defined in the Data Provider class.
{% endhint %}

{% hint style="info" %}
List paging is implemented through the `hasNext` list property. If it is set to `true`, a **Show More** link is displayed under the list; otherwise, it is hidden. See `WR_DataProviderExamples.cls` attached above.
{% endhint %}

Attached is a form that can be placed in your organization along with the class attached above to see examples of using Data Provider.

{% file src="/files/A48Xd6GkBnvOYkZodmqe" %}

### FormService data provider

The built-in FormService data provider allows you to feed JSON data to the list. Using FormService Data Provider, you can build a list without interacting with the database or using Apex code, and manipulate data that is not stored anywhere.

Click the list (22) and select **FormService** in the Data Provider input. Configure **Parameters**.

![](/files/077eefccc678f9aabf54f9b17c3ba0e952161ff0)

Pass a JSON object to Parameters. The required properties are:

* `records` (25) — Array representing list rows.
* `columns` (26) — Array representing list columns.
* `actions` (27) — Object used to turn on specified list actions. When added, those actions can be overridden from List Actions settings.

![](/files/aae8d9c80fab1f512f5eb3567e006c010b5493c1)

Here is how the list looks:

![](/files/cb02280aed4c02da52e06288ad5c0f114406cfc9)

Below is an example form that can be uploaded to your organization:

{% file src="/files/GDn003y2lBtNFezoDnCU" %}

## Inline edit

Starting with 3.1, users can use the **Inline edit** feature for lists and related lists.

Select a list (28) to open its **Settings**. Check the **Inline Edit** checkbox (29).

![](/files/70629b5a307d81e06a09bd17267869b20a9f1a87)

The list is now editable. Hover over the cell you need to edit. Click it, type a new value (30), and click **OK** (31).

![](/files/0bfa592fa7a4bfa8245106d72da0d4c31a8c8235)

Click **Save** or **Cancel** to save changes or revert them to their initial values.

![](/files/4ae387037e15aa5294faf97279ab0cc855405dd3)

## Events

[List events](/forms/form-building/events.md#list-events)

## List validation rules

[List component validation rules](https://neostella.gitbook.io/work-relay-documentation/K6d8zoAI1M2x24Qd4SS2/forms/form-components/components-validation-rules#list-component)

## Conditional styles

List/Related List components have the following conditional style options:

* **hide**
* **show**

## Files related list

The **Fields** configuration allows you to specify which File Fields are shown when uploading or changing a file:

* Open the File Fields configuration popup.
* Add the necessary fields to the list.
* Select which field should be shown (32).
* Specify a default value for each field.
* Set whether each field is visible to the user.
* Set necessary fields as required.
* Set necessary fields as disabled.
* Change field order with the arrows, if needed.
* Apply changes.

![](/files/f95e9d63f4a2ecd2492a994990c9b71154a91506)

Clicking **New** on the **File** related list opens the file component:

![](/files/f3c55428c8b20eb5b4e089211d729ccb7a26faab)

You can customize the file component through fields parameter setup (33):

![](/files/0c2f50bca5620a62eec76e15731e19286c269bff)

The `fields` parameter should store JSON representing the list of fields to use on a component.

Each field should have a `fieldName` property storing the field API name. Other parameters are optional:

* `fieldLabel` — Label displayed next to the field.
* `fieldValue` — Value of the field.
* `visible` — Hides the field if set to `false`.
* `disabled` — Disables editing if set to `true`.

Below is an example setup of the `fields` parameter:

```json
[{"fieldName":"Description","fieldLabel":"File Description","fieldValue":"File description","disabled":"true"},{"fieldName":"Title","fieldLabel":"File Name","fieldValue":"Please enter File name"}]
```

The above setup results in the following:

![](/files/b7bd158d23bdd8fc383aa4081331d4ad079c1531)

## List source objects

The following Source Objects are available:

* **sObject** — Standard or custom Salesforce Object, as shown in the [adding columns to the list](#adding-columns-to-the-list) section above.
* **Apex** — Custom code that provides data. See the [list data provider](#list-data-provider) section above.
* **JSON** — You must provide a configuration for the list in JSON format, such as:

```json
{
  "orderBy":"column1",
  "records":[
    {"column1":"value1", "column2":"value2"},
    {"column1":"value3", "column2":"value4"}
  ],
  "columns":[
    {"name":"column1", "label":"Column 1", "sortable":true},
    {"name":"column2", "label":"Column 2", "sortable":false}
  ],
  "actions":{}
}
```

![](/files/e3e28a2ad2be64f533bb407ad35d508813b07298)

* **AWS S3** — A proper service integration source object. To set it:
  * Select Config (34). It must be created before, as described below.
  * Specify the AWS S3 account Bucket name (35) where files and folders are located.
  * Optionally specify the path to a particular Folder (36) in the Bucket.
  * Configure Filter (37) to limit the list to matching entries.
  * Select the type (38) of entries to show: files, folders, or all.

![](/files/291f999b14b24f681b6d424bc4ee2520f0d26fea)

To work with an AWS S3 account, create a correct and complete configuration for the AWS S3 list:

* Open the administration page.
* Go to **Custom Code** → **Custom Settings** (39).
* Click **Work Relay Config List** setting (40) to go to the proper Custom Setting Definition page (41).
* Click **Manage** (42) to open the list of its values (43).
* Click **New** (44) to create a new configuration, or click **Edit** at the necessary entry (45) to edit the current configuration.
* Enter the following data (46):
  * **Name** (mandatory) — Referenced in the system.
  * **Option1** — First AWS S3 key.
  * **Option2** — Second AWS S3 key.
  * **Option3** — Location provided by the Amazon service.
  * **Value** — The `AWS S3 Config` string exactly as shown. It must be set so the system recognizes it as a special configuration for AWS S3 integration in forms.
  * Other options should be empty.

![](/files/c6ac5157de3e9799e0e14a1347573a4436d23344)

![](/files/ed00f7134e67fb9068b781be84dadc411bafaa32)

![](/files/249539cd5ee5593be0780bf94114726757104dd4)

![](/files/1d4a45939bf8dfb7ab9f5668dbeae03e151257ae)