> 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/processes/process-steps/process-step-settings/process-step-layouts.md).

# Process Step Layouts

The Process Step Layout functionality provides the ability to customize the Layout tab's user interface on a step-by-step basis. To configure:

{% stepper %}
{% step %}

## Open the process designer

Open the process designer ("Open Diagram" button) for the desired process and click on a Process Step (1).
{% endstep %}

{% step %}

## Expand User Interface settings

Expand the ["User Interface" section](/processes/process-steps/process-step-settings/user-interface.md) (2) of [Step Settings](/processes/process-steps/process-step-settings.md).
{% endstep %}

{% step %}

## Choose a layout type

Choose the desired layout type (3).
{% endstep %}

{% step %}

## Save the process

Save the process.
{% endstep %}
{% endstepper %}

![](/files/9dd39c5876bf89ddd7e3bfdbe5e155dea33e54db)

The following layout types are available:

* Standard (default)
* Work-Relay Form
* Visualforce Page
* Lightning Component

## Standard

![](/files/eb056e5337911239bd2d2e004bf4d026022bc5d6)

The Standard layout displays the process Data Source object record details, using the page layout configured in Salesforce Setup.

Two Layout Modes are available:

* **Edit** - the page layout will be rendered in Edit mode.
* **View** - the page layout will be rendered in View mode.

## Work-Relay Form

The Work-Relay Form layout will display a custom [Work-Relay form](/forms/basics/introduction.md). Select the desired Work-Relay form (4).

![](/files/e1c8b2b8feaebcb34ea2342c0b41026b72bc5f85)

Starting release 8.0, you can specify the Layout Value Type (5) to determine which Work-Relay Form to display. The options are:

* **Static** - the selected Work-Relay Form (as in the above screenshot) will be displayed for all users.
* **Formula** - the Form displayed will be determined dynamically, based on the Work-Relay Form formula (6). The formula entered must return a Form ID. This allows for a different Form to be displayed for different situations.

![](/files/9212e359c60259dc9a15d0f89aff65f118b4c056)

For example: Assume an Admin would like to display a different Form depending upon a Case record's Case Type value: Electrical, Mechanical, and and all others. The formula could look like this: `FORMULA[CASE({Case.Type}, 'Electrical', 'FormId1', 'Mechanical', 'FormId2','FormId3')]` (where FormId1, FormId2, and FormId3 are Salesforce record IDs for the desired Forms). The Step Layouts for different records will be different Forms:

![](/files/c8c93435f1207f9028947a25fbe9126db57f1903)

### Layout modes (7)

* **Edit** - the Form will allow data to be edited.
* **View** - the Form will be displayed in read-only mode.
* **Dynamic** - displays the Form in either 'View' or 'Edit' mode, depending on user permissions granted. The Step Assignee and Process Admins will see the Form in 'Edit' mode, while 'View' mode will be used for all other users.
* **Formula** - Starting release 8.0, this mode displays the Form in the mode returned by the defined Layout Mode formula (8). The formula must return one of the three Layout Modes defined above: View, Edit, or Dynamic.

![](/files/658235fb95b2586de9c80e3fe1605876de18c712)

### Layout parameters (9)

Click the "edit" link to open the configuration screen (10). Set the parameter name and value for each parameter you wish to pass to the form.

![](/files/70afd9a432d13b790755363c7cffaed8a836f458)

Parameters can be accessed on the Form using the {$FormParameters} context object (e.g., the Parameter from the screenshot above will be available as the `{$FormParameters.startDate}` merge field).

Process variables can be accessed in the form builder using the {$Variables} context object. For example, a process variable named 'endDate' will be available on the form as the `{$Variables.endDate}` merge field.

{% hint style="info" %}
By default, the following parameters are available on a Form:

* `{$FormParameters.taskId}` - The record ID of the current cursor.
* `{$FormParameters.formId}` - The record ID of the form.
* `{$FormParameters.id}` - The record ID of the context record.
  {% endhint %}

## Visualforce Page

Allows a Visualforce page, specified in the VF Page field (11), to be displayed as the step layout.

![](/files/8e12e6bdb9c814d0ff718d6ba829ed0e6e862fdf)

If desired, click the "edit" (12) link to specify Layout Parameters (13). Set the Parameter Name and Value for each parameter you wish to pass to the Visualforce Page.

![](/files/e947e2dbd64f4763717d15cb6a53ef22371a52f7)

For example, the Parameter in the screenshot above passes the Process Instance Start Date value to the Visualforce Page.

{% hint style="info" %}
By default, the context record ID is passed to the Visualforce Page as a Parameter named 'id'. E.g., if the process context record is an Account, the Account record Id will be available on the Visualforce Page as the `{$CurrentPage.parameters.id}` merge field by default.
{% endhint %}

## Lightning Component

Allows a Lightning Component (14) to be displayed as the step layout and pass parameters (15), if desired.

![](/files/55033f5b2b75eba4508209fa18dcd6d628208d04)

For example, the Parameter in the screenshot below sets the value of the **showPopUp** component global attribute.

![](/files/3d7b2d93f030110e744b701a680cd70d7badf680)

{% hint style="info" %}
To use a Lightning Component as the step layout, its access type should be set to "Global." All required component attributes should be also global.

Currently, only string parameters can be passed as Lightning Component parameters.
{% endhint %}