--- title: Configure Form Views Using the Modern Page Designer slug: neurons-for-itsm/admin-user-help/enu/latest/yUW3-configure-form-views-using-the-modern-page-designer createdAt: 2026-07-31T13:26:34.000Z --- **Role:**Administrator **Prerequisites**: - Administrator access is required. - The global constant **EnableNova** must be set to **True**. You use a **Form view** to build the record detail and data-entry form for a business object. A form view belongs to the **Detail page** view type. You build each form view through a three-step process you add sections, add content blocks, and then add controls. This procedure uses the Incident business object as an example. The **Create new view** dialog groups view types into two categories. Select a view type under **Detail page** (Form view) or under **List page** (Data grid, Kanban, or Gallery view). :::hint{type="info"} To configure layouts and views under **List page**, see [Configure and Assign Views and Layouts Using the Modern Page Designer](docId:0pUY-SDKXlgoGrq-17tq9). If you set a control's **Control Type** to **Object Matching Control** and select the **Self Service** checkbox when creating a layout in the **Ivanti Service Management Portfolio UI V3** displays the control as a text field. For more information on **Self Service** **Form Offering**, see [Configuring-Modern-Layouts-for-Form-Offerings](#). ::: ## Create a Form View 1. In the **Views** dropdown, select the **ellipsis (⋮)**, and then select **Add New**. ::Image[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/s4ICKDy9sAmcuzHxKg4bp_add-new-option-for-form-view.png" position="flex-start" size="80" width="1332" height="652" initialPath="Images/Add new option for Form View.png" githubPath="Admin-User/Content/Working with the Analyst/Images/Add new option for Form View.png" darkWidth="1332" darkHeight="652" showCaption="false" indent="1"} :::Paragraph{indent="1"} The **Create new view** dialog appears on the **Select view type** tab. ::: 2. From the **View type** dropdown, under **Detail page**, select **Form view**. ::Image[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/yvJUmuEvsw02MTc74i3eA_form-view-view-type.png" position="flex-start" size="80" width="1330" height="632" initialPath="Images/Form View View type.png" githubPath="Admin-User/Content/Working with the Analyst/Images/Form View View type.png" darkWidth="1330" darkHeight="632" showCaption="false"} 3. (Optional) Select the **Use existing Form view** checkbox to base the new view on a previously created form view. 4. In **View name**, enter a descriptive name for the view. 5. Under **Navigation to other views - after saving object, show**, select the view to display after a user saves the object. 6. Click **Save** to continue to the **Properties** tab. ### Configure Form View Properties On the **Properties** tab, configure the following fields. ::Image[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/2OZUApYbOzWTAUEpQgCgw_form-view-properties-tab.png" position="flex-start" size="80" width="1332" height="626" initialPath="Images/Form View Properties tab.png" githubPath="Admin-User/Content/Working with the Analyst/Images/Form View Properties tab.png" darkWidth="1332" darkHeight="626" showCaption="false" indent="1"} | Field | Description | | ---------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- | | Name | The internal name of the form view. | | Description | An optional description of the form view. | | **Advanced Settings** | | | Enable object view auditing | Records audit entries when users open the form view. | | Enable next/previous buttons on the search bar | Displays next and previous navigation buttons on the search bar so that users can move between records. | | Enable smart fill on repetitive input of some values | Suggests previously entered values when a user repeats input on a field. | | Enable cost management | Activates cost management for the form view. Select **Edit cost settings** to configure the cost options. | | Enable matching panel | Displays the matching panel on the form. Select **Select Object Matching** to choose the object matching configuration. | 7. Click **Save**. ### The Form View Workspace After you save the form view properties, the designer opens. The workspace contains the following areas. ::Image[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/yEqaZidHxelPp5IFhjQ1X_form-view-workspace.png" position="flex-start" size="80" width="1327" height="631" initialPath="Images/Form View Workspace.png" githubPath="Admin-User/Content/Working with the Analyst/Images/Form View Workspace.png" darkWidth="1327" darkHeight="631" showCaption="false"} | Field | Description | | -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Left pane | Contains the Layout and Views dropdowns and the three build steps: **Step 1: Sections**, **Step 2: Content blocks**, and **Step 3: Controls**. | | Center pane | Displays the form as you build it. By default, an empty form with a single column is available. | | Configure pane | Displays the properties of the item you select on the Center pane. The fields in this pane change depending on whether you select a section, a content block, or a control. | | Show control borders | Displays borders for the forms when you select the checkbox. | | Preview | Previews the changes you make in the Modern Page Designer. | | Save and Publish | Applies the form view to the layout. | ### Default State of a New Form View When the designer opens, the center pane displays an empty form with a single column by default. You do not need to add this form. The Configure pane on the right displays the properties of this default form, and you can configure it immediately. When you select the default form on the canvas, the **Manage cells** button appears above it. Use Manage cells to change the cell layout of the form. See Manage the Cells in a Content Block. ::Image[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/AOtdZQp0-GPnLDmuk-gIO_form-view-manage-cell.png" position="flex-start" size="80" width="1325" height="633" initialPath="Images/Form view Manage cell.png" githubPath="Admin-User/Content/Working with the Analyst/Images/Form view Manage cell.png" darkWidth="1325" darkHeight="633" showCaption="false" indent="1"} Use **Step 1**, **Step 2**, and **Step 3** in the left pane to add further sections, content blocks, and controls to the form view ### Build a Form View After you create a form view, build it from top to bottom: add a section, add a content block to the section, and then add controls to the content block. ### Step 1: Add and Configure Sections 1. In the left pane, expand **Step 1: Sections**. 2. Select a section layout from the available layouts. ::Image[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/qpq_X1xKuButoap0ClerA_step-1-in-form-view.png" position="flex-start" size="80" width="1323" height="630" initialPath="Images/Step 1 in form view.png" githubPath="Admin-User/Content/Working with the Analyst/Images/Step 1 in form view.png" darkWidth="1323" darkHeight="630" showCaption="false" indent="1"} Drag drop the section to the center pane. 3. Select the section, and then configure it in the **Configure** properties section. | Field | Description | | ---------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Name | The display name of the section. | | Number of columns | The column layout of the section. Select one of the following values: **1 column section, 2 column section, 3 column section, 2 column section (small – large)**, or **2 column section (large – small).** | | Background color | The background color applied to the section. Select a color from the palette. | | **Mobile view** | | | Hide on mobile devices | Hides the section on mobile devices when you turn the toggle on. Use this option to control which sections appear in responsive layouts. | | Remove | Removes the section from the form view. | ### Step 2: Add Content Blocks 1. In the left pane, expand **Step 2: Content blocks**. ::Image[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/ZlFETOwNByEID6-3b_4JH_step-2-form-view.png" position="flex-start" size="80" width="1340" height="643" initialPath="Images/Step 2 form view.png" githubPath="Admin-User/Content/Working with the Analyst/Images/Step 2 form view.png" darkWidth="1340" darkHeight="643" showCaption="false" indent="1"} 2. Drag a content block into the section. Select one of the following block types: - **Form** - **Data grid** - **HTML ** :::hint{type="info"} **Data grid** and **HTML** will be available in the future releases. ::: 3. (Optional) Select Manage cells on the content block to adjust the cell layout. ### Step 3: Add and Configure Controls 1. In the left pane, expand **Step 3: Controls**. ::Image[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/8CEmjbhwdDG0P0EFV2tpd_step-3-form-view.png" position="flex-start" size="80" width="1337" height="640" initialPath="Images/Step 3 form view.png" githubPath="Admin-User/Content/Working with the Analyst/Images/Step 3 form view.png" darkWidth="1337" darkHeight="640" showCaption="false" indent="1"} The **Available controls** pane appears. 2. (Optional) In the **Search** box, enter a control name to locate a control. 3. Locate the control under one of the following groups: - **Incident** > Expand **Fields** to add a business object field, or expand **Relationships** to add a related field. - **Other** > Add a non-field control, such as **Label**, **Picture**, **Response target**, **Command button**, or **Cancel button** etc. :::hint{type="info"} For more information refer [Form Controls](#) and ::: 4. Drag the control into a cell in the content block. 5. Select the control to open the **Configure** pane (also called the Properties panel), and then set the control's properties. 6. Click **Save and publish** to apply the form view to the layout. 7. Navigate to **Configure** > **Users and Permissions** > **Roles and Permissions** to [Assign the New Layout to a Role](docId\:f0PR0cXKA6hTo8aAISNfV). 8. Reload the **Home page**. ### Manage the Cells in a Content Block Use Manage cells to edit the cell layout of a content block. 1. Select the **Form**. The **Manage cells** button appears above the form. ::Image[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/AOtdZQp0-GPnLDmuk-gIO_form-view-manage-cell.png" position="flex-start" size="80" width="1325" height="633" initialPath="Images/Form view Manage cell.png" githubPath="Admin-User/Content/Working with the Analyst/Images/Form view Manage cell.png" darkWidth="1325" darkHeight="633" showCaption="false" indent="1"} 2. Select **Manage cells**. The cell editing options appear. ::Image[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/MG_heV18mbm9F_AX0DZIF_form-view-manage-cell-settings.png" position="flex-start" size="80" width="1330" height="622" initialPath="Images/Form view manage cell settings.png" githubPath="Admin-User/Content/Working with the Analyst/Images/Form view manage cell settings.png" darkWidth="1330" darkHeight="622" showCaption="false" indent="1"} 3. Select the cell you want to change, and then select one of the following options. | Field | Description | | ---------------- | ------------------------------------------------------------------------------------------------------------------------------- | | Insert on top | Inserts a row above the selected cell. | | Insert on bottom | Inserts a row below the selected cell. | | Insert on left | Inserts a column to the left of the selected cell. | | Insert on right | Inserts a column to the right of the selected cell. | | Delete | Deletes a row or a column from the form view. | | Merge | Merges the selected cells into a single cell. Hold the Ctrl key, select each cell you want to merge, and then select **Merge**. | | Split | Splits the selected form. | | Close | Closes the cell editing options. | ### Control Types In the **Available controls** pane, controls come from three groups: **Fields**, **Relationships**, and **Other**. How a control behaves and which properties appear in the **Configure** pane depend on which group the control comes from. - **Fields:** The business object's own fields (for example, the Incident fields). When you drag a field onto the form, the application wires the control to that field. Each field has a predefined data type, and the field's data type determines the available control types and the properties shown in the **Configure** pane. - **Relationships:** A list of related business objects and their fields. Select a field from a related business object when you want to use that relationship. - **Other:** A predefined list of form controls organized by type. These controls are not linked to a field, so their properties start empty and you configure them yourself. See [Other Form Controls](#) below. For a field-based control, you set the control type in the **Control type** dropdown in the **Configure** pane. The available control types depend on the field's data type: ::Image[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/egtXo5adnTOw5QTIexNBE_form-view-control-types.png" position="flex-start" size="80" width="1337" height="635" initialPath="Images/Form view control types.png" githubPath="Admin-User/Content/Working with the Analyst/Images/Form view control types.png" darkWidth="1337" darkHeight="635" showCaption="false" indent="1"} :::hint{type="info"} The fields and field types available in the Modern Page Designer work in the same way as the fields and field types in the Classic UI. The difference in the Modern Page Designer is that you can edit multiple forms. For more information on individual field types, see the [Creating a Form.](#) ::: :::ExpandableHeading ## Text field Captures text input on a field. The following properties are transcribed from the Text field Configure panel (Category field). Where a description is not shown in the panel, it is marked below. The following components are available when you build a form view. Each component opens its own set of properties in the **Configure** pane. | Property | Description | | ------------------ | -------------------------------------------------------------------------------------------------------------------- | | Control Type | Text field | | Edit mask | Select the mask from the dropdown **None**, **MAC Address**, **IP Address**, **US Phone**, **ZIP code**, **Custom**. | | Editable | Determines whether users can edit the field. Select **Yes** or **No**. | | Field Name | The business object field bound to this control. This value is read-only. | | Height | The control height (lines). | | Label | The text to appear on the field or control label. | | Label Expression | An expression to apply to this label, if needed. | | Label Position | The placement of the label relative to the field. | | Label Style Rule | An expression to be applied to this style, if needed. | | Read-only Rule | An expression that determines when the field is read-only. | | Required Rule | An expression that determines when the field requires a value. | | Searchable | Determines whether users can edit the field. Select **Yes** or **No**. | | Style | See Using Highlighter Styles. | | Style Rule | See About Using Expressions in Styles. | | Tab Index | The order in which users can tab into this field. | | Visible Expression | Accepts the expression $(true) to make the control visible, or $(false) to hide it from the user. | | Width | The control width (ems). | ::: :::ExpandableHeading ## Read-only text field Displays a field's value as read-only text. The following properties are those visible in the **Read-only text field** Configure panel The following components are available when you build a form view. Each component opens its own set of properties in the **Configure** pane. | Property | Description | | ------------------ | ------------------------------------------------------------------------------------------------- | | Control Type | Read-only text field | | Field Name | The business object field bound to this control. This value is read-only. | | Height | The control height (lines). | | Label | The text to appear on the field or control label. | | Label Expression | An expression to apply to this label, if needed. | | Label Position | The placement of the label relative to the field. | | Label Style Rule | An expression to be applied to this style, if needed. | | Read-only Rule | An expression that determines when the field is read-only. | | Required Rule | An expression that determines when the field requires a value. | | Style | See Using Highlighter Styles. | | Style Rule | See About Using Expressions in Styles. | | Tab Index | The order in which users can tab into this field. | | Visible Expression | Accepts the expression $(true) to make the control visible, or $(false) to hide it from the user. | | Width | The control width (ems). | ::: :::ExpandableHeading ## Radio button Displays a field's value as read-only text. The following properties are those visible in the **Radio button** Configure panel The following components are available when you build a form view. Each component opens its own set of properties in the **Configure** pane. | Property | Description | | ------------------ | ------------------------------------------------------------------------------------------------- | | Control Type | Radio button | | Field Name | The business object field bound to this control. This value is read-only. | | Horizontal Layout | The layout can be selected from the dropdown. | | Height | The control height (lines). | | Label | The text to appear on the field or control label. | | Label Expression | An expression to apply to this label, if needed. | | Label Position | The placement of the label relative to the field. | | Label Style Rule | An expression to be applied to this style, if needed. | | Read-only Rule | An expression that determines when the field is read-only. | | Required Rule | An expression that determines when the field requires a value. | | Style | See Using Highlighter Styles. | | Style Rule | See About Using Expressions in Styles. | | Tab Index | The order in which users can tab into this field. | | Visible Expression | Accepts the expression $(true) to make the control visible, or $(false) to hide it from the user. | | Width | The control width (ems). | ::: :::ExpandableHeading ## Number Captures numeric input on a field. The following properties are transcribed from the **Number Configure** panel The following components are available when you build a form view. Each component opens its own set of properties in the **Configure** pane. | Property | Description | | ------------------ | ----------------------------------------------------------------------------------------------------------------------- | | Control Type | Number | | Decimal precision | The number of digits to display after the decimal point. Enter a number to set how many decimal places the field shows. | | Edit mask | Select the mask from the dropdown **None**, **MAC Address**, **IP Address**, **US Phone**, **ZIP code**, **Custom**. | | Editable | Determines whether users can edit the field. Select **Yes** or **No**. | | Field Name | The business object field bound to this control. This value is read-only. | | Height | The control height (lines). | | Label | The text to appear on the field or control label. | | Label Expression | An expression to apply to this label, if needed. | | Label Position | The placement of the label relative to the field. | | Label Style Rule | An expression to be applied to this style, if needed. | | Read-only Rule | An expression that determines when the field is read-only. | | Required Rule | An expression that determines when the field requires a value. | | Searchable | Determines whether users can edit the field. Select **Yes** or **No**. | | Style | See Using Highlighter Styles. | | Style Rule | See About Using Expressions in Styles. | | Tab Index | The order in which users can tab into this field. | | Visible Expression | Accepts the expression $(true) to make the control visible, or $(false) to hide it from the user. | | Width | The control width (ems). | ::: :::ExpandableHeading ## Check box Renders a boolean field as a checkbox. The following properties are transcribed from the Check box Configure panel (VIP field). The following components are available when you build a form view. Each component opens its own set of properties in the **Configure** pane. | Property | Description | | ------------------ | ------------------------------------------------------------------------------------------------- | | Control Type | Check box | | Field Name | The business object field bound to this control. | | Height | The control height (lines). | | Label | The text to appear on the field or control label. | | Label Expression | An expression to apply to this label, if needed. | | Label Position | The placement of the label relative to the field. | | Label Style Rule | An expression to be applied to this style, if needed. | | Read-only Rule | An expression that determines when the field is read-only. | | Required Rule | An expression that determines when the field requires a value. | | Style | See Using Highlighter Styles. | | Style Rule | See About Using Expressions in Styles. | | Tab Index | The order in which users can tab into this field. | | Visible Expression | Accepts the expression $(true) to make the control visible, or $(false) to hide it from the user. | | Width | The control width (ems). | ::: :::ExpandableHeading ## Email Captures and validates an email address. Add a text field control, and then select **Email** from the **Control type** dropdown in the **Configure** pane. Displays a fixed text string on the form. Use this control to show informational or instructional text that does not change with the record. | Property | Description | | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Control Type | Email | | Field Name | The business object field bound to this control. | | Height | The control height (lines). | | Label | The text to appear on the field label. | | Label Expression | An expression to apply to this label, if needed. For example, on the **KnowledgeSelfService** form, the following expression has been added to the **Details** cells: **$(("Article ID: " + KnowledgeNumber))**. This adds the label **Article ID** to the label and the Knowledge Base number assigned to this record. | | Label Style Rule | An expression to be applied to this style, if needed. You can define what existing style (bold, header, etc.) to apply to a control based on a condition. | | Style | See [Using Highlighter Styles](docId\:eaLZqHhX4c-_6SP-xMVRf). | | Style Rule | See [About Using Expressions in Styles](docId\:elLMerq8EvcXvIOQlGH32). | | Tab Index | The order in which users can tab into this field. | | Visible Expression | Accepts the expression $(true) to make the expression control visible, or $(false) to hide it from the user. | | Width | The control width (ems). | ::: :::ExpandableHeading ## Configure a Link Field Control in the Modern Page Designer A **Link Field** lets you view data from a related business object within the current business object. For example, the Incident business object uses link fields such as **Customer**, **Org/Acct**, and **Employee** to display data from those objects. You need to select **Link Field** control under the **Control type** in the **Configure** pane. You can use link fields to refer to related objects. Link fields are associated with relationships and provide an alternate form of reference. To access a related object through a link field, use the relationship specifier. Use this specifier only from the business object that contains the link field; you cannot reference remote link fields. ### Add a Link Field Control 1. Open the required form view in the Modern Page Designer. 2. In the left pane, expand **Step 3: Controls**. 3. Under **Incident**, expand **Fields**, and then locate the link field you want to add (for example, Customer or Organization Unit). 4. Drag the field into a cell in the content block. 5. Select the control to open the **Configure** pane. In **Control type**, select **Link field** from the dropdown. 6. Set the properties described in the following table. 7. Select **Save and publish** to apply the form view to the layout. ### Link Field Properties Configure the following properties in the **Configure** pane. | Property | Description | | -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | | Control Type | Link field. | | Disable Add Action | Determines whether the **Add new** action is unavailable on the rendered control. Select **Yes** to hide Add new, or **No** to allow it. | | Disabled Expression | An expression that determines when the control is disabled. | | Display Field | The field from the linked object that appears as the display value in the control (for example, Display Name). | | Do not sort autocomplete result | Determines whether the application leaves the type-ahead (autocomplete) results unsorted. | | Editable | Determines whether users can edit the field. Select Yes or No. | | Field Name | The business object field bound to this control (for example, ProfileLink). This value is read-only. | | Filter Expression | An expression that filters the records returned during lookup and advanced search. | | Grid Name | The data grid used to display records in the lookup and advanced search. | | Height | The control height (lines). | | Hierarchical Picker | Determines whether the lookup opens the Hierarchical Picker for a linked object organized in a parent-child hierarchy. Select **Yes** or **No**. | | Label | The text to appear on the field label. | | Label Expression | An expression to apply to this label, if needed. | | Label Position | The placement of the label relative to the field (for example, On the left). | | Label Style Rule | An expression that applies a style to the label based on a condition. | | Link Relationship | The relationship that defines the linked business object (for example, IncidentAssociatedCustomer). | | Read-only Rule | An expression that determines when the field is read-only. | | Required Rule | An expression that determines when the field requires a value. | | Style | The style applied to the control. See Using Highlighter Styles. | | Style Rule | An expression that applies a style based on a condition. See About Using Expressions in Styles. | | Tab Index | The order in which users can tab into this field. | | Use like search for autocomplete | Determines whether autocomplete uses a partial-match ("like") search. Select Yes or No. | | Visible Expression | Accepts the expression $(true) to make the control visible, or $(false) to hide it from the user. | | Width | The control width (ems). | ::: :::ExpandableHeading ## Date, Date and Time, and Time In the **Fields** workspace, this is displayed as one of the following: - **Date**: Date only - **Time**: Time only - **Date/Time**: Date and time only | Property | Description | | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Control Type | Date picker is the control type applied to the field. | | Edit mask | Select the mask from the dropdown **None**, **MAC Address**, **IP Address**, **US Phone**, **ZIP code**, **Custom** | | Field name | The business object field bound to this control. This value is read-only. | | Height | The control height (lines). | | Label | The text to appear on the field or control label. | | Label expression | An expression to apply to this label, if needed. | | Label position | The placement of the label relative to the field. | | Label style rule | An expression to be applied to this style, if needed. You can define which existing style (for example, bold or header) to apply to a control based on a condition. | | Read-only rule | An expression that determines when the field is read-only. | | Required rule | An expression that determines when the field requires a value. | | Style | The style applied to the control. See Using Highlighter Styles. | | Style rule | An expression that applies a style based on a condition. See About Using Expressions in Styles. | | Tab index | The order in which users can tab into this field. | | Visible expression | Accepts the expression $(true) to make the control visible, or $(false) to hide it from the user. | | Width | The control width (ems). | ::: ### Other Form Controls The following controls come from the **Other** group in the Available controls pane. They are not linked to a field, so you configure their properties yourself. Each control opens its own set of properties in the **Configure** pane. :::ExpandableHeading ## Label Adds a static or dynamic label to a form. | Property | Description | | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Control Type | Label | | Height | The control height (lines). | | Label | The text to appear on the field or control label. | | Label Expression | An expression to apply to this label, if needed. For example, on the **KnowledgeSelfService** form, the following expression has been added to the **Details** cells: **$(("Article ID: " + KnowledgeNumber))**. This adds the label **Article ID** to the label and the Knowledge Base number assigned to this record. | | Label Style Rule | An expression to be applied to this style, if needed. You can define what existing style (bold, header, etc.) to apply to a control based on a condition. | | Style | See [Using Highlighter Styles](docId\:eaLZqHhX4c-_6SP-xMVRf). | | Style Rule | See [About Using Expressions in Styles](docId\:elLMerq8EvcXvIOQlGH32). | | Tab Index | The order in which users can tab into this field. | | Visible Expression | Accepts the expression $(true) to make the expression control visible, or $(false) to hide it from the user. | | Width | The control width (ems). | ::: :::ExpandableHeading ## Attachments Allows attachments to be added, listed, and viewed on the form. | Property | Description | | ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Allow editing file name | Select **Yes** to allow users to edit the file name, or **No** to prevent users from editing the file name. | | Can add | Specifies if users can add attachments to the record. | | Can delete | Specifies if users can delete attachments from the record. | | Can paste | Specifies if users can paste content from the clipboard as an attachment. | | Enable to add URL | Select **Yes** to show the **Add URL** button in extended mode, which lets users add URL-based attachments. The New URL attachment function appears in the **Details** tab. | | Field 1 | An optional metadata field displayed below the file name on each attachment. Select one of the following: **Created By**, **Created Date Time**, **Last Modified Date Time**, or **Attachment Size**. | | Field 2 | A second optional metadata field displayed below the file name on each attachment. Select one of the following: **Created By**, **Created Date Time**, **Last Modified Date Time**, or **Attachment Size**. | | Control Type | Attachments | | Height | The control height (lines). | | Label | The text to appear on the field or control label. | | Label Expression | An expression to apply to this label, if needed. For example, on the KnowledgeSelfService form, the following expression has been added to the **Details** cells: **$(("Article ID: " + KnowledgeNumber))**. This adds the label **Article ID** to the label and the Knowledge Base number assigned to this record. | | Label Position | The label position. | | Label Style Rule | The field label style. Choose a style or enter an expression. | | Max files | Specifies the maximum number of files allowed to be attached to a record. For example, to have no more than ten files be attached, enter **10**. Enter at least **1** to enable file upload. | | Max files per upload | Specifies the maximum number of pending (not yet saved) attachments. The application disables upload once this limit is reached. | | Max Height | Optional. The maximum height (in pixels) of the control. | | Max single file size | Specifies the maximum size of a single file, in the unit set by the **Size** in property. | | Max summary files size | Specifies the maximum combined size of all attachments on the record, in the unit set by the **Size in** property. | | Min Height | Optional. The minimum height (in pixels) of the control. | | Relationship | The related field. Choose from the drop-down list. | | Size in | How to measure the size. Choose either **KB** or **MB**. | | Style | See [Using Highlighter Styles](docId\:eaLZqHhX4c-_6SP-xMVRf). | | Style Rule | See [About Using Expressions in Styles](docId\:elLMerq8EvcXvIOQlGH32). | | Tab Index | The order in which users can tab into this field. | | Visible Expression | Accepts the expression $(true) to make the expression control visible, or $(false) to hide it from the user. | | Width | The control width (ems). | ::: ::::ExpandableHeading ## Response Target and Progress Bar Shows incident response time in relation to target response time. The states are: - **blank**: The incident record has been created recently. Response window still open. - **met**: Response was on time. - **breached**: No response, or late. | Property | Description | | ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------- | | Breach DateTime | Enter the value for the breach date and time. | | Breach Passed | Enter the value for the breach passed date and time. | | Clock State | Enter the value for the clock state. | | Control Type | Response target | | Height | The control height (lines). | | Label Style Rule | An expression to be applied to this style, if needed. You can define what existing style (bold, header, etc.) to apply to a control based on a condition. | | Label Width | Enter a value for the label width. | | Start Date | Enter a value for the start date of the response. | | Style | See [Using Highlighter Styles](docId\:eaLZqHhX4c-_6SP-xMVRf). | | Style Rule | See [About Using Expressions in Styles](docId\:elLMerq8EvcXvIOQlGH32). | | Tab Index | The order in which users can tab into this field. | | Visible Expression | Accepts the expression $(true) to make the expression control visible, or $(false) to hide it from the user. | | Width | The control width (ems). | :::ExpandableHeading ## Progress Bar Define a progress bar for tracking purposes. For example, you can add a progress bar to track escalations for an incident. | Property | Description | | ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------- | | 1st Esc DateTime | Enter an expression for the first escalation date and time. For example, enter **$(\[link\:ResolutionEscLink]L1DateTime)**. | | 1st Esc Enabled | Empty. | | 1st Esc Passed | Enter an expression for when the first escalation has passed. For example, enter **$(\[link\:ResolutionEscLink]L1Passed)**. | | 2nd Esc DateTime | Enter an expression for the second escalation date and time. For example, enter **$(\[link\:ResolutionEscLink]L2DateTime)**. | | 2nd Esc Enabled | Empty. | | 2nd Esc Passed | Enter an expression for when the second escalation has passed. For example, enter **$(\[link\:ResolutionEscLink]L2Passed)**. | | 3rd Esc DateTime | Enter an expression for the third escalation date and time. For example, enter **$(\[link\:ResolutionEscLink]L3DateTime)**. | | 3rd Esc Enabled | Empty. | | 3rd Esc Passed | Enter an expression for when the third escalation has passed. For example, enter **$(\[link\:ResolutionEscLink]L3Passed)**. | | Breach DateTime | Enter an expression for the escalation breach date and time. For example, enter **$(\[link\:ResolutionEscLink]BreachDateTime)**. | | Breach Passed | Enter an expression for when the escalation breach has passed. For example, enter **$(\[link\:ResolutionEscLink]BreachPassed)**. | | Clock State | Enter an expression for the clock state. For example, enter **$(\[link\:ResolutionEscLink]ClockState)**. | | Control Type | Color bar indicator | | Height | The control height (lines). | | Label Style Rule | An expression to be applied to this style, if needed. You can define what existing style (bold, header, etc.) to apply to a control based on a condition. | | Label Width | Enter the number of pixels for the width of the label. | | Start Date | Enter the start date. | | Style | See [Using Highlighter Styles](#). | | Style Rule | See [About Using Expressions in Styles](#). | | Tab Index | The order in which users can tab into this field. | | Visible Expression | Accepts the expression $(true) to make the expression control visible, or $(false) to hide it from the user. | | Width | The control width (ems). | ::: :::: :::ExpandableHeading ## Picture Add images to the form, such as buttons or company logos. | Property | Description | | ------------------ | ------------------------------------------------------------------------------------------------------------ | | Control Type | Image | | Image | An image to associate with this control. | | Visible Expression | Accepts the expression $(true) to make the expression control visible, or $(false) to hide it from the user. | ::: ::::ExpandableHeading ## Configuring Command Buttons in Forms views You can configure a form to include **Command buttons** for executing commands such as Quick Actions or predefined system actions. The Command button control is available in the Angular-based form designer and provides functionality similar to the Classic UI. To configure a Command button in a form view 1. Go to **Build** > **Business Objects**, and select the **Incident** business object. 2. Select the **Layouts** tab. 3. Select **Add New Layout**. ::Image[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/gjEb6tPzpi0Kp3WcTIYtt_add-layout-for-form-view.png" position="flex-start" size="80" width="1332" height="666" initialPath="Images/Add Layout for Form View.png" githubPath="Admin-User/Content/Working with the Analyst/Images/Add Layout for Form View.png" darkWidth="1332" darkHeight="666" showCaption="false" indent="1"} 4. When prompted, select **Try Modern Designer**. 5. In the **Layout** list, select the required layout. 6. In the **Views** list, select the required form view. 7. In the form designer, select **Step 3: Controls**. ::Image[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/pdI3xBQjQpihNnXKFt-j0_step-3-form-view-for-command-button.png" position="flex-start" size="80" width="1325" height="647" initialPath="Images/Step 3 form view for command button.png" githubPath="Admin-User/Content/Working with the Analyst/Images/Step 3 form view for command button.png" darkWidth="1325" darkHeight="647" showCaption="false" indent="1"} 8. Expand the **Other section**. ::Image[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/Vnx4SLeOLadk68gZ1pL1d_command-button-form-view.png" position="flex-start" size="80" width="1332" height="633" initialPath="Images/Command button Form View.png" githubPath="Admin-User/Content/Working with the Analyst/Images/Command button Form View.png" darkWidth="1332" darkHeight="633" showCaption="false" indent="1"} 9. Scroll to locate the **Command button** control. 10. Drag the Command button and drop it in the required section of the form. 11. Select the button that you added, and then configure it in the **Configure** panel. **Command Button** 1. **Select an Action** 2. In the **Configure** panel, select the **Action** dropdown. ::Image[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/z1ZDZhc42BNzYfWHFtp-F_configure-pane-action-type.png" position="flex-start" size="80" width="1335" height="640" initialPath="Images/Configure pane Action type.png" githubPath="Admin-User/Content/Working with the Analyst/Images/Configure pane Action type.png" darkWidth="1335" darkHeight="640" showCaption="false" indent="1"} 3. In the **Select action** dialog box: ::Image[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/oUcEPSdhGMYHBOPqeFEQm_form-action-as-action-type.png" position="flex-start" size="80" width="1328" height="626" initialPath="Images/Form action as action type.png" githubPath="Admin-User/Content/Working with the Analyst/Images/Form action as action type.png" darkWidth="1328" darkHeight="626" showCaption="false" indent="1"} :::Paragraph{listStyleType="disc" indent="2"} Expand the required category and select **Form Actions**. ::: :::Paragraph{listStyleType="disc" indent="2"} The list displays all available Quick Actions and predefined commands. ::: 4. Select the required action (You can select predefined commands such as **Save** and **Reload** for **Refresh**, available under categories such as **Form Actions**.). ::Image[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/sDGItoYurQztM11BDnfdZ_save-reload-refresh.png" position="flex-start" size="80" width="1331" height="632" initialPath="Images/Save reload refresh.png" githubPath="Admin-User/Content/Working with the Analyst/Images/Save reload refresh.png" darkWidth="1331" darkHeight="632" showCaption="false" indent="1"} 3. Click **Select** to confirm. :::hint{type="info"} - The Action list includes all configured **Quick Actions** and system commands. - Ensure that the required actions are available before associating them with a Command button. ::: The Button executes a specific command, such as running a report or a quick action. In the **Configure** panel you can configure the button. | Property | Description | | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Action | Choose a quick action to be performed when a user clicks the button. | | Causes Validation | Specifies whether the button triggers validation before executing the action. Select **Yes** to validate the form before execution, or **No** to execute the action without validation.
:inlineImage[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/RaBHouvlrR_m2WDS6jgAU_causes-validation-in-configure-pane.png" alt caption size="80" width="1332" height="628"} | | Control Type | User interface command button. | | Disabled Expression | Create an expression, or choose from the drop-down list. | | Height | The control height (lines). | | Image | An image to associate with this control. | | Label | The text to appear on the field or control label. | | Label Expression | An expression to apply to this label, if needed. For example, on the **KnowledgeSelfService** form, the following expression has been added to the **Details** cells: **$(("Article ID: " + KnowledgeNumber))**. This adds the label **Article ID** to the label and the Knowledge Base number assigned to this record. | | Quick Action | Choose a quick action from the drop down list. | | Quick Action | Choose a quick action from the drop-down list. | | Style | See [Using Highlighter Styles](docId\:eaLZqHhX4c-_6SP-xMVRf). | | Style Rule | See [About Using Expressions in Styles](docId\:elLMerq8EvcXvIOQlGH32). | | Tab Index | The order in which users can tab into this field. | | Visible Expression | Accepts the expression $(true) to make the expression control visible, or $(false) to hide it from the user. | | Width | The control width (ems). | :::: :::ExpandableHeading ## Cancel Button The Cancel button is available as an out-of-the-box (OOTB) control. ::Image[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/Q17fHkVqJtnsAJuu9Y8yh_cancel-button.png" position="flex-start" size="80" width="1326" height="633" initialPath="Images/Cancel Button.png" githubPath="Admin-User/Content/Working with the Analyst/Images/Cancel Button.png" darkWidth="1326" darkHeight="633" showCaption="false" indent="1"} - When a user selects **Cancel**, the system cancels the current operation and navigates back to the list view from the form view. - If the form contains unsaved changes, the system displays a confirmation prompt. Adds a **Cancel** button to the form. In the **Configure** panel you can configure the button. | Property | Description | | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Control Type | Cancel Button | | Height | The control height (lines). | | Image | An image to associate with this control. | | Label | Cancel | | Label Expression | An expression to apply to this label, if needed. For example, on the **KnowledgeSelfService** form, the following expression has been added to the **Details** cells: **$(("Article ID: " + KnowledgeNumber))**. This adds the label **Article ID** to the label and the Knowledge Base number assigned to this record. | | Style | See [Using Highlighter Styles](docId\:eaLZqHhX4c-_6SP-xMVRf). | | Style Rule | See [About Using Expressions in Styles](docId\:elLMerq8EvcXvIOQlGH32). | | Tab Index | The order in which users can tab into this field. | | Visible Expression | Accepts the expression $(true) to make the expression control visible, or $(false) to hide it from the user. | | Width | The control width (ems). | ::: :::ExpandableHeading ## Assign the New Layout to a Role After you create a layout (for example, Demo Layout) and a list view (for example, Grid View, Kanban View or Gallery View), assign the layout to a role so that users with that role can access it in the Incident workspace. 1. In the Configuration Console, go to **Configure** > **Users and Permissions** > **Roles and Permissions**. ::Image[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/KOYkocwc5gQVKRB1lhKwS_user-role-and-permissionns.png" position="flex-start" size="80" width="1908" height="956" initialPath="Images/User Role and permissionns.png" githubPath="Admin-User/Content/Working with the Analyst/Images/User Role and permissionns.png" darkWidth="1908" darkHeight="956" showCaption="false" indent="1"} 2. In the **Roles and Permissions** list, select **Admin**. 3. Select the **Top Level Tabs** tab. ::Image[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/eh4oZITJ0U34YNNwuiS5Y_top-level-tab.png" position="flex-start" size="80" width="1910" height="947" initialPath="Images/Top level tab.png" githubPath="Admin-User/Content/Working with the Analyst/Images/Top level tab.png" darkWidth="1910" darkHeight="947" showCaption="false" indent="1"} 4. In the list of tabs, select the **Incident** workspace. 5. In the **Layout** list, select the layout you created. For example, select Demo Layout. ::Image[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/ndrM0L3iogiAwAJ_SOQNw_select-demo-layout.png" position="flex-start" size="80" width="1905" height="942" initialPath="Images/Select Demo Layout.png" githubPath="Admin-User/Content/Working with the Analyst/Images/Select Demo Layout.png" darkWidth="1905" darkHeight="942" showCaption="false" indent="1"} 6. Select **Save**. ::: ::::ExpandableHeading ## Configure a Child Form Panel for a Group Business Object A child form panel is an embedded **Form** content block that you add to a form view and configure in the **Configure** pane (also called the properties panel). When the form view belongs to a Group business object, you add one child form panel for each member business object and bind each panel to that member's form, so that the correct member form appears based on the record you open. The behavior specific to Group business objects is that you select the Group business object in the **Relationship(s)** list, and then select the member business object in the **Business object** list before you choose the existing panel. In this example, the **OrderCAR** layout is associated with the **Car** Group business object through the **OrderCARAssocCar** relationship. The Car Group business object has three member business objects such as **ElectricCar**, **GasCar**, and **HybridCar** and each member has its own form. :::hint{type="info"} Currently, only the **Group business object** is supported in the **Relationship(s)** list. The member business object relationships (for example, **Car.ElectricCar**, **Car.GasCar**, and **Car.HybridCar**) appear in the list but are not currently supported. Select the **Group business object** relationship (for example, **Car** (via **OrderCARAssocCar**)). This procedure applies only to Group business objects. It also applies to migrated layouts. ::: ### To configure a child form panel for a member business object 1. Open the Group business object form view in the Modern Page Designer. 2. In the left pane, expand **Step 1: Sections**. 3. Select a section layout from the available layouts. 4. Drag the section to the center pane. ::Image[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/XOO4U8uFv2_dIuG2wg_FL_sections-for-form-view.png" position="flex-start" size="80" width="1671" height="790" initialPath="Images/Sections for FORM VIEW.png" githubPath="Admin-User/Content/Working with the Analyst/Images/Sections for FORM VIEW.png" darkWidth="1671" darkHeight="790" showCaption="false" indent="1"} 5. Select the section to open the **Configure** pane. 6. In the **Select type** list, select the section display type: - **Single view:** Displays the section as a standard, single section. - **Horizontal tab:** Displays the section as a horizontal tab. In the center pane, the section appears as a tab; select the add (+) icon next to the tab to add more tabs. ::Image[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/q2zez5u0CmWzywVg7NsSG_horizontal-tab-form-view.png" position="flex-start" size="80" width="1671" height="790" initialPath="Images/horizontal tab Form View.png" githubPath="Admin-User/Content/Working with the Analyst/Images/horizontal tab Form View.png" darkWidth="1671" darkHeight="790" showCaption="false" indent="1"} Section properties (Configure pane) | Property | Description | | ----------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Select type | The section display type. Select **Single view** for a standard section, or **Horizontal tab** to display the section as a horizontal tab. When you select **Horizontal tab**, the section appears as a tab in the center pane, and you can add more tabs with the add (:inlineImage[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/iA42m8Y4Twd8e6-_7vsEE_add-icon.png" alt caption size="10" width="15" height="15"}) icon. | | Name | The display name of the section. | | Number of columns | The column layout of the section. Select one of the following values: **1 column section**, **2 column section**, **3 column section**, **2 column section** (**small-large**), or **2 column section** (**large - small**). | | Background color | The background color applied to the section. Select a color from the palette. | | Mobile view: Hide on mobile devices | Hides the section on mobile devices when you turn the toggle on. Use this option to control which sections appear in responsive layouts. | | Remove | Removes the section from the form view. | 7. In the left pane, expand **Step 2: Content blocks**. 8. Drag a **Form** content block into the section. An empty content block appears in the center pane. 9. Select the content block to open the **Configure** pane. 10. In the **Relationship(s)** list, select the Group business object (for example, **Car** (via **OrderCARAssocCar**)). Do not select a member business object relationship; these are not currently supported. 11. In the **Business object list**, select the member business object whose form you want to embed. The list contains three member business objects (**Car.ElectricCar**, **Car.GasCar**, and **Car.HybridCar**). select one of the members (for example, **Car.ElectricCar**) 12. Select **Use existing** radio button. 13. In the **Select existing panel** list, select the member's form (for example, **ElectricCarForm**). After you select the **business object** and **Use existing**, this list is populated with the forms already created for that business object. ::Image[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/-RCwKPUsBSNxl5w3VNS-i_child-form-view.png" position="flex-start" size="80" width="1377" height="656" initialPath="Images/Child Form View.png" githubPath="Admin-User/Content/Working with the Analyst/Images/Child Form View.png" darkWidth="1377" darkHeight="656" showCaption="false" indent="1"} 14. (Optional) Configure the remaining panel properties in the **Configure** pane, as described in **Child form panel properties**. 15. Repeat steps 3 through 10 for each member business object. For example, **Car.GasCar** to **GasCarFormView** and **Car.HybridCar** to **HybridCarFormView**. ::Image[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/WuGc13fezZz82IqBgmQQb_child-form-2.png" position="flex-start" size="80" width="1385" height="659" initialPath="Images/Child FOrm 2.png" githubPath="Admin-User/Content/Working with the Analyst/Images/Child FOrm 2.png" darkWidth="1385" darkHeight="659" showCaption="false" indent="1"} ::Image[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/IKwBgosCySasUV84rdgm2_child-form-3.png" position="flex-start" size="80" width="1385" height="655" initialPath="Images/Child Form 3.png" githubPath="Admin-User/Content/Working with the Analyst/Images/Child Form 3.png" darkWidth="1385" darkHeight="655" showCaption="false" indent="1"} 16. Click **Save and publish**. 17. Navigate to **Configure** > **Users and Permissions** > **Roles and Permissions** to [Assign the New Layout to a Role](docId\:f0PR0cXKA6hTo8aAISNfV). 18. Reload the **Home page**. ::Image[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/hDNwFpXojPAF-2Yh5QgjZ_home-page-child-form-view.png" position="flex-start" size="80" width="1367" height="610" initialPath="Images/Home page Child Form View.png" githubPath="Admin-User/Content/Working with the Analyst/Images/Home page Child Form View.png" darkWidth="1367" darkHeight="610" showCaption="false" indent="1"} After you publish the layout, the form view displays the child form panel that matches the record you open. For example, opening an electric car record displays the **ElectricCarForm** panel with its fields (**BatteryCapacity\_kWh, MaxRange\_Miles,** and **ChargingPlugType**), a gas car record displays the **GasCarFormView** panel, and a hybrid car record displays the **HybridCarFormView** panel. ### Child form panel properties (Configure pane) The **Configure** pane displays the following properties for a child form panel, listed in the order they appear in the pane. | Property | Description | | ------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | Business object | The member business object whose form the panel displays. The list contains the parent Group business object and its member business objects (for example, **Car**, **Car.ElectricCar**, **Car.GasCar**, and **Car.HybridCar**). Select one of the member business objects. | | Create new / Use existing | Select **Use existing** to embed a form that already exists for the selected business object, or **Create new** to create a new panel. | | Select existing panel | The existing form to embed (for example, **ElectricCarForm**, **GasCarFormView** and **HybridCarFormView**). Available when you select **Use existing**. After you select the business object, this list is populated with the forms already created for that business object. | | Relationship(s) | The relationship that links the panel to the business object. Currently, only the Group business object is supported (for example, **Car** (via **OrderCARAssocCar**)). Member business object relationships appear in the list but are not currently supported. | | Object | The business object that the embedded panel displays (for example, **Car**). This value is read-only. | | Hidden expression | An expression that determines when the panel is hidden. | | Initially visible | An expression that determines whether the panel is visible when the form first opens. For example, **False** hides the panel initially. | | Default style | The default style applied to the panel. | | Section toolbar: Display toolbar area | Select this check box to show a toolbar for the child form. For more information see [Configure the Toolbar for a Form View](docId\:f0PR0cXKA6hTo8aAISNfV). | | Default cell margins | The default margins applied to the panel's cells. | | Mobile View: Hide on mobile view | Hides the panel on mobile devices when you turn the toggle on. | | Permission | The **Update** and **Delete** permissions for the panel. For more information see [Configure and Assign Views and Layouts Using the Modern Page Designer](docId:0pUY-SDKXlgoGrq-17tq9). | The following buttons appear at the bottom of the **Configure** pane: | Property | Description | | ------------ | ------------------------------------------------ | | Save content | Saves the child form panel configuration. | | Remove | Removes the child form panel from the form view. | :::: ::::ExpandableHeading ## Configure the Toolbar for a Form View After you configure a form view (detail page), you can edit the toolbar to control which tools and actions appear to end users. :::hint{type="info"} On a form view, all toolbar tools appear on the right side of the toolbar. Unlike the Data Grid, Kanban, and Gallery views, the form view toolbar does not support left and right placement. If you select the **Self Service** checkbox when you create the layout, the form view toolbar appears at the bottom of the form. For more information on **Self Service** **Form Offering**, see [Configuring-Modern-Layouts-for-Form-Offerings](#). ::: ### Open the Toolbar Editor 1. Open the **Form view** in the **Modern Page Designer**. ::Image[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/UA8yqiroQ-qFVAm1aGzMK_form-view.png" position="flex-start" size="80" width="1323" height="633" initialPath="Images/Form view.png" githubPath="Admin-User/Content/Working with the Analyst/Images/Form view.png" darkWidth="1323" darkHeight="633" showCaption="false"} 1. Select the toolbar at the top of the form. ::Image[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/fbFi_mDMEZ-ShZHV6rtsc_form-view-toolbar.png" position="flex-start" size="80" width="1327" height="636" initialPath="Images/Form view toolbar.png" githubPath="Admin-User/Content/Working with the Analyst/Images/Form view toolbar.png" darkWidth="1327" darkHeight="636" showCaption="false"} The **Configure** pane displays the current tool/menu list. Each tool includes an **Edit** :inlineImage[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/B10eHHM3HGnwp7czdXYZE_edit-icon1.png" alt caption size="10" width="19" height="19"} icon. 3. To configure an individual tool, select its **Edit** :inlineImage[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/B10eHHM3HGnwp7czdXYZE_edit-icon1.png" alt caption size="10" width="19" height="19"} icon. 4. To add or remove tools, select **Edit toolbar**. ::Image[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/F8Z7Vi40ls1_JC-OsvvUd_tool-editor-form-view.png" position="flex-start" size="80" width="1328" height="630" initialPath="Images/Tool editor form view.png" githubPath="Admin-User/Content/Working with the Analyst/Images/Tool editor form view.png" darkWidth="1328" darkHeight="630" showCaption="false"} The **Toolbar editor** opens. ### Toolbar Editor Fields and Controls The Toolbar editor includes the following sections and controls. | Field | Description | | ---------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Preview | Shows how the toolbar will appear to end users. Updates automatically as you add, remove, or reorder tools. | | Overall tool list | Lists all available tools you can add to the toolbar. Use the **Search box** to locate a tool. Filter the list using the **Special buttons**, **Commands**, and **Actions** check boxes. | | Selected tool list | Displays the tools currently assigned to the toolbar.
When you finish editing, select **OK** to save your changes and return to the main **Toolbar Editor** window. | | Left section / Right section | Define the placement of tools in the toolbar. Use the arrow controls to move tools from the Overall tool list into either section. | | Up and down arrows | Change the order of tools in the Selected tool list. | | Select all | In the **Selected tool list**, use this checkbox to select every tool at once. This is useful if you want to remove all tools. | | Delete | Removes selected tools from the **Selected tool list**. The tools return to the **Overall tool list**. | | Arrow controls | Move tools between the **Overall tool list** and the **Selected tool list**. | | Ok | Saves changes made in the **Toolbar editor** and closes the window. | | Cancel | Closes the **Toolbar editor** without saving changes. | ### Add, Remove, and Reorder Tools 1. In the **Overall tool list**, select the tool you want to add. 2. Use the arrow controls to move the tool into the **Selected tool list**. To remove a tool, select it in the Selected tool list and use the arrow controls to move it back to the Overall tool list. 3. To delete a tool, select it in the Selected tool list, and then select **Delete**. To delete all tools, select **Select all**, and then select **Delete**. 4. Use the up and down arrows to change the order of the tools in the Selected tool list. 5. Click **OK** to save your changes and close the Toolbar editor. ### Configure panel You configure the Form panel in the Configure pane. | Field | Description | | -------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- | | Create new / Use existing | Select the radio button to use existing to embed an existing panel, or Create new one. | | Select existing panel | The existing panel to embed in the form (for example, Problem.DataEntry). Available when you select Use existing. | | Relationship(s) | The relationship that links the from panel to the other form's view business object. | | Object | The business object that the embedded panel displays (for example, Problem). | | Hidden expression | An expression that determines when the panel is hidden. | | Initially visible | An expression that determines whether the panel is visible when the form first opens. For example, False hides the panel initially. | | Default style | The default style applied to the panel. | | Section toolbar – Display toolbar area | Select this checkbox to show a toolbar for the child form. | | Default cell margins | The default margins applied to the panel's cells (for example, 0; 0; 0; 0;). | | Mobile View – Hide on mobile view | Hides the panel on mobile devices when you turn the toggle on. | | Permission | The Update and Delete permissions for the panel. | ### Configure a Toolbar for a Child Form An embedded child form (a panel added to the form view) can have its own toolbar, separate from the main form view toolbar. 1. In the **Modern Page Designer**, select the embedded child form panel. 2. In the **Configure pane**, confirm that **Relationship(s)** is not set to **To Itself**. 3. Under **Section toolbar**, select the **Display toolbar area** checkbox. A toolbar appears for the child form. Unlike the main form view toolbar, which is right-aligned only, the child form toolbar supports both a **Left section** and a **Right section**. Use the arrow controls in the Toolbar editor to place tools into either section. :::hint{type="info"} You can add a toolbar to the child form only when you select a specific relationship from the dropdown in **Relationship(s)**. ::: ### Publish and Assign the Layout 1. On the form view page, do one of the following: - Select **Preview** to review the updates before publishing. - Select **Save and publish** to apply the changes. 2. Navigate to **Configure > Users and Permissions > Roles and Permissions** to [Assign the New Layout to a Role](docId\:f0PR0cXKA6hTo8aAISNfV). 3. Reload the **Home page**. 4. Navigate to the Incident workspace. The application displays the form view with the configured toolbar. ::Image[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/kGm7UTsQD866MuUyE_kEn_tooleditor-in-ui.png" position="flex-start" size="80" width="1322" height="582" initialPath="Images/Tooleditor in UI.png" githubPath="Admin-User/Content/Working with the Analyst/Images/Tooleditor in UI.png" darkWidth="1322" darkHeight="582" showCaption="false"} In the **ellipsis (⋮)** menu to access more toolbar actions. ::Image[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/PhNkbEGByCfW377F8fTOe_tool-editor-dropdown.png" position="flex-start" size="80" width="1332" height="572" initialPath="Images/Tool editor dropdown.png" githubPath="Admin-User/Content/Working with the Analyst/Images/Tool editor dropdown.png" darkWidth="1332" darkHeight="572" showCaption="false"} To return to the list view, select the back arrow (**To List View**). ::Image[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/nVcSLqiNF9mBryX4L2F8Q_back-to-list-view-from-form-view.png" position="flex-start" size="80" width="1330" height="570" initialPath="Images/Back to list view from form view.png" githubPath="Admin-User/Content/Working with the Analyst/Images/Back to list view from form view.png" darkWidth="1330" darkHeight="570" showCaption="false"} In the **ellipsis (⋮)** menu, select **More** to access additional quick actions, grouped into categories. ::Image[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/PhNkbEGByCfW377F8fTOe_tool-editor-dropdown.png" position="flex-start" size="80" width="1332" height="572" initialPath="Images/Tool editor dropdown.png" githubPath="Admin-User/Content/Working with the Analyst/Images/Tool editor dropdown.png" darkWidth="1332" darkHeight="572" showCaption="false"} :::: :::hint{type="info"} - For information about how users add, rename, download, and delete attachments in the application, see [About the "Other" Form Controls](docId\:FxFq9tHrWZIreNpI8YGNP) and [Working with Attachment Types](docId\:F2BRlKzLiGLkWD1PioVDv). - **HTML** tags are stripped from a control's **Label Expression**. If you need a label that renders **HTML** tags, use the following workaround: - Remove the label expression from the **Attachment** or any other control. - From the **Other** section, drag a **Label** control and drop it above the text field (or any other control). - In the **Label** control, enter the label expression with the HTML tags. - The **Label** control also provides a **Wrapping** option, where you can select **Wrap**, **Overflow**, or **Truncate**. :::