--- title: Configure and Assign Views and Layouts Using the Modern Page Designer (cloned) slug: neurons-for-itsm/admin-user-help/enu/latest/configure-and-assign-views-and-layouts-using-the-modern-page-designer-cloned docTags: createdAt: 2026-07-14T19:16:39.877Z --- **Role:**Administrator **Prerequisites**: - Administrator access is required. - The global constant **EnableNova** must be set to **True**. You can use the **Modern Page Designer** to create and assign role-based layouts for any **business object**. In this procedure, we use the **Incident** business object as an example use case. You will configure a **layout**, add a **view** (**Data grid**, **Kanban** or **Gallery View**), and publish a data grid layout. ::::ExpandableHeading{isOpen="true"} ## Steps to create a Ivanti Service Management Portfolio UI V3 ### Enable the Modern Designer 1. Log in to Neurons for ITSM as an Administrator. 2. From the Configuration Console, click **Build** > **Global Constants**. ::Image[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/LKIjLBr3LXhiKDmmh2sDh_enable-global-constant.png" position="flex-start" size="60" width="1900" height="621" initialPath="Images/Enable Global Constant.png" githubPath="Admin-User/Content/Working with the Analyst/Images/Enable Global Constant.png" darkWidth="1900" darkHeight="621" showCaption="false" indent="3"} 3. Search for the global constant **EnableNova**. - If the constant exists, set the value to **True**. - If the constant does not exist: - Select :inlineImage[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/Kk6U1f72OrL1qkjtKSRmS_add-icon.png" alt caption size="10" width="15" height="15"}**Add**. - In the **Name** field, enter **EnableNova**. - In the **Value** field, enter **True**. - In the **Type** field, select **Boolean** form the dropdown. - Select **Save**. 4. Select **Save**. :::hint{type="info"} When you enable the global constant **EnableNova**, table widgets in the **Dashboard UI v2 workspace** display the **Ivanti Service Management Portfolio UI V3 Data Grid**. This behavior applies to all dashboards, both existing and new, in the Dashboard UI v2 workspace. ::: ### Launch the Modern Page Designer 1. Navigate 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/HBLMemgrOUEmshKK9v7Eq_add-new-layout.png" position="flex-start" size="80" width="1900" height="876" initialPath="Images/Add New Layout.png" githubPath="Admin-User/Content/Working with the Analyst/Images/Add New Layout.png" darkWidth="1900" darkHeight="876" showCaption="false"} 4. When prompted, select **Try Modern Designer**. ::Image[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/W2U3k8fsjDFNEzajo7JKH_try-modern-designer.png" position="flex-start" size="80" width="616" height="275" initialPath="Images/Try Modern Designer.png" githubPath="Admin-User/Content/Working with the Analyst/Images/Try Modern Designer.png" darkWidth="616" darkHeight="275" showCaption="false" indent="1"} The application displays an onboarding dialog box : ::Image[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/u69kHSjcnEJJB3zkZ662p_modern-designer-dailog-box-tour.png" position="flex-start" size="80" width="1895" height="1028" initialPath="Images/Modern Designer Dailog box tour.png" githubPath="Admin-User/Content/Working with the Analyst/Images/Modern Designer Dailog box tour.png" darkWidth="1895" darkHeight="1028" showCaption="false" indent="1"} An onboarding dialog box appears; you can **Start** or **Skip** the walkthrough. Select **Do not show again** to hide it in future sessions. ### Modern Page Designer Home Page The designer page is divided into three sections: ::Image[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/OfHz50V7mnkUG3b0w8ASz_designer-home-pages.png" position="flex-start" size="80" width="1907" height="991" initialPath="Images/Designer Home Pages.png" githubPath="Admin-User/Content/Working with the Analyst/Images/Designer Home Pages.png" darkWidth="1907" darkHeight="991" showCaption="false" indent="1"} - **At the top:** Select the business object from the dropdown list. - **Left pane:** - **Layout:** Use the **ellipsis (⋮)** next to the layout dropdown to **Edit**, **Clone**, **Delete**, or **Add new** layouts. - **Views:** Use the **ellipsis (⋮)** next to the Views dropdown to **Add new** or **Manage** views. - **Center pane:** Displays **Create a new layout to begin**. - **Right pane (Configure):** The right pane properties appears only after a column is selected from the data grid. ::Image[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/9yq9_Y_ovgr80YxJJxl_u_right-configure-pane.png" position="flex-start" size="80" width="1935" height="1055" initialPath="Images/Right configure Pane.png" githubPath="Admin-User/Content/Working with the Analyst/Images/Right configure Pane.png" darkWidth="1935" darkHeight="1055" showCaption="false"} ### Create a New Layout 1. In the **Layout** dropdown, select the **ellipsis (⋮)** and then select **Add New**. ::Image[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/I-uwMwnjgQjJF70cGnk1o_edit-layout.png" position="flex-start" size="80" width="1668" height="858" initialPath="Images/Edit Layout.png" githubPath="Admin-User/Content/Working with the Analyst/Images/Edit Layout.png" darkWidth="1668" darkHeight="858" showCaption="false" indent="1"} 2. In the **Create layout** dialog box: | Field | Description | | ----------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | User Type | Select the **Self Service** checkbox to make the Nova layout available in Self Service. For more information, see [Configuring-Modern-Layouts-for-Form-Offerings](#). | | Display Name | A unique name for this layout. | | Enable Simple Search | Makes the simple search text box visible on the workspace. Also known as full-text search, this searches all full-text indexed fields. See [About the Different Search Types](docId:9m-AN_-q_I_w5g-n07A13) for more information on how this works. | | Use Type Ahead Search | Enables type ahead search. This option invokes a panel listing the results of what the user types into the search box, allowing them to click one of the results. | | Search all full-text indexed fields | Only searches in full-text indexed fields. This option is checked by default and enables you to use Partial word results. | | Partial word results | Shows partial word results in the **Type Ahead** panel and the results list. | | Search primary display fields only | Limits the search to only the primary display field (as opposed to all full-text indexed fields). Use this option only if the search freezes due to an excessive number of records. Note that the results from this search option will be different from the list results. | | Do not sort | Disables automatically sorted results. By default, **Type Ahead** search results are sorted in ascending alphabetical-numeric order. This might cause a slow-down in getting search results. | | Show Saved Search Link | Shows the saved search link (see [Using a Saved Search](docId\:vwINWjbF5BrJccIoREsMm)). | | Enable Saved Search | Shows the list of saved searches with this layout. | 3. Select **Save**. ### Create a New View 1. In the **Views** dropdown, select the **ellipsis (⋮)** and then select **Add New**. The **Create new view** dialog appears. ::Image[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/N46HHMzwG9l3zZcRZwM5Y_create-a-new-view.png" position="flex-start" size="80" width="1911" height="947" initialPath="Images/Create a New View.png" githubPath="Admin-User/Content/Working with the Analyst/Images/Create a New View.png" darkWidth="1911" darkHeight="947" showCaption="false" indent="1"} 2. From the **View** type dropdown, select one of the following: - **Data grid** - **Kanban** - **Gallery View** 3. Optionally, select the checkbox **Use existing data grids** to base the view on a previously created data grid. 4. In **View name**, enter a descriptive (e.g., Grid, Kanban or Gallery) name for the view. 5. **Under Navigation to other views:** - Select the checkbox **Use form view from existing layout** to reuse a form layout. - From the **On request to create new object** dropdown, select the view to display when creating a new object. - From the **On request to edit existing object** dropdown, select the view to display when editing an existing object. 6. Select **Save** to continue to the **Properties** tab. 7. On the **Properties** tab, configure the following fields: :::hint{type="info"} If you select **Use existing data grids** in the **Select View Type** tab, the **Properties** tab automatically populates with the settings from the selected data grid. You can review and modify them as needed. ::: | Field | Description | Values | | ---------------- | ----------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Name | Internal name for the data grid or Kanban view. | Free text | | Description | Optional description of the view. | Free text | | Style | UI style applied to the view. | Default | | Workspace paging | Number of records per page in the workspace. | 0, 10, 15, 25, 50, 100 | | Dashboard paging | Number of records per page in dashboard widgets. | 0, 10, 15, 25, 50, 100 | | Dialog paging | Number of records per page in dialogs. | 0, 10, 15, 25, 50, 100 | | Search paging | Number of records per page in search results. | 0, 10, 15, 25, 50, 100 | | Sort column | Column used for default sorting. | Any available field. | | Sort order | Order applied to the sort column. | Ascending, Descending | | Group by | Field used to group data. | Any available field. | | Open in new tab | Whether the view opens in a new tab. | Yes, No | | Go to | Object opened when a row is clicked. | This Object, AlternateContactLink, ClosingEscLink, Customer, EntityLink, GRCRiskLink, HRCaseLink, KnowledgeLink, MasterIncidentLink, nrn\_ClusterIncidentLink, nrn\_CorrelatedIncidentLink, OrgUnitLink, ProblemLink | | Permissions | These permissions are set internally and are not configurable by the Administrator. | Update or Delete | 8. Select **Save**. ### Edit a layout Use the Edit layout dialog box to change a layout's user type, display name, and search configuration. The Permission settings are set internally for more information see [Control Edit Permissions (Soft Lock via System Mode)](docId\:rdOCcBl8NkAffesyfzFsI). **To edit a layout** 1. In the left pane, under **Layout**, select the layout you want to edit from the dropdown. 2. Next to the **Layout** list, select the **ellipsis (⋮)**, and then select **Edit** from the dropdown. ::Image[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/tpBZQ-cBc9arvQta0Hzwb_edit-layout-dropdown.png" position="flex-start" size="80" width="1668" height="862" initialPath="Images/Edit Layout dropdown.png" githubPath="Admin-User/Content/Working with the Analyst/Images/Edit Layout dropdown.png" darkWidth="1668" darkHeight="862" showCaption="false"} ::Image[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/I-uwMwnjgQjJF70cGnk1o_edit-layout.png" position="flex-start" size="80" width="1668" height="858" initialPath="Images/Edit Layout.png" githubPath="Admin-User/Content/Working with the Analyst/Images/Edit Layout.png" darkWidth="1668" darkHeight="858" showCaption="false" indent="1"} :::hint{type="info"} The options menu also contains **Clone**, **Delete**, **Add new**, and **Migrate classic layouts**. ::: | Field | Description | | ----------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | User Type | Select the **Self Service** checkbox to make the Nova layout available in **Self Service**. For more information on **Self Service** **Form Offering**, see [Configuring-Modern-Layouts-for-Form-Offerings](#). | | Display Name | A unique name for this layout. | | Enable Simple Search | Makes the simple search text box visible on the workspace. Also known as full-text search, this searches all full-text indexed fields. See [About the Different Search Types](docId:9m-AN_-q_I_w5g-n07A13) for more information on how this works. | | Use Type Ahead Search | Enables type ahead search. This option invokes a panel listing the results of what the user types into the search box, allowing them to click one of the results. | | Search all full-text indexed fields | Only searches in full-text indexed fields. This option is checked by default and enables you to use Partial word results. | | Partial word results | Shows partial word results in the **Type Ahead** panel and the results list. | | Search primary display fields only | Limits the search to only the primary display field (as opposed to all full-text indexed fields). Use this option only if the search freezes due to an excessive number of records. Note that the results from this search option will be different from the list results. | | Do not sort | Disables automatically sorted results. By default, **Type Ahead** search results are sorted in ascending alphabetical-numeric order. This might cause a slow-down in getting search results. | | Show Saved Search Link | Shows the saved search link (see [Using a Saved Search](docId\:vwINWjbF5BrJccIoREsMm)). | | Enable Saved Search | Shows the list of saved searches with this layout. | 3. Select **Save**. ### Edit a View You can edit an existing view to modify its configuration, including child business object mappings for Group business objects. 1. In the **Views** dropdown, select an existing view. 2. Select the **ellipsis (⋮)** and then select **Edit** from the dropdown. ::Image[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/h-V-ktYuFx1wO5n7T0Lq4_edit-view.png" position="flex-start" size="80" width="1327" height="678" initialPath="Images/Edit View.png" githubPath="Admin-User/Content/Working with the Analyst/Images/Edit View.png" darkWidth="1327" darkHeight="678" showCaption="false" indent="1"} ::Image[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/9qm5XML_vuF5W7oB6wIQV_edit-view-dialog-box.png" position="flex-start" size="80" width="1326" height="677" initialPath="Images/Edit View dialog box.png" githubPath="Admin-User/Content/Working with the Analyst/Images/Edit View dialog box.png" darkWidth="1326" darkHeight="677" showCaption="false" indent="1"} The **Edit View** dialog appears. 3. On the **Select view type** tab, in the **View type** list, select the view type 4. In the **View name** box, type a name for the view. 5. Navigation to other views: You can modify the following settings: - (Optional) Select the checkbox **Use form view from existing layout** to reuse a form layout. - From the **On request to create new object** dropdown, select the view to display when creating a new object. - From the **On request to edit existing object** dropdown, select the view to display when editing an existing object. 6. Expand **List of business objects**, and then select the business objects for the view. :::hint{type="info"} To configure form views, see [Configure Form Views Using the Modern Page Designer](docId\:yUW3HVJ6etENNz9ZNgP8r). ::: ### Configure Child Business Object Mappings (Group Business Objects Only) When the parent business object is a **Group BO** (**Business Object**), the Edit view dialog for an existing view displays a collapsed **List of business objects \*** section below, navigation to other views. To configure child business object form view mappings\: 1. Expand the **List of business objects \*** section. The section auto-populates with one row per child member business object. ::Image[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/XVfzpWmj6nl0ZajkEh2gy_list-of-business-object.png" position="flex-start" size="80" width="1322" height="682" initialPath="Images/List of Business Object.png" githubPath="Admin-User/Content/Working with the Analyst/Images/List of Business Object.png" darkWidth="1322" darkHeight="682" showCaption="false" indent="1"} Each row displays the following columns\: | Column | Description | | --------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | | Business objects | The name of the child member business object. | | On request to create new object | Select the form view to display when a user creates a new object for this child business object. Defaults to **not set**. | | On request to edit existing object | Select the form view to display when a user edits an existing object for this child business object. Defaults to **not set**. | 2. For each child business object, select the appropriate form view from the **On request to create new object** and **On request to edit existing object** dropdowns. :::hint{type="info"} The dropdowns display the available form views from the respective child business objects. ::: 3. Click **Save**. 4. Select **Save and publish** to apply the changes to the layout. 5. Navigate to **Configure** > **Users and Permissions** > **Roles and Permissions** to [Assign the New Layout to a Role](docId:5l_cpoDUAA63kd6ptF55o). 6. Reload the **Home page**. 7. Navigate to the workspace for the Group business object. 8. Open a record belonging to a child business object. The application displays the form view that you configured for that child business object in the **List of business objects \*** section. :::hint{type="info"} This also applies to migrated layouts. When you migrate a classic layout and configure child business object form view mappings using the Edit view dialog, the configured form views are displayed when you open the corresponding child business object records in the workspace. ::: ### Manage Views 1. In the **Views** dropdown, select **Manage views**. ::Image[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/0_qxDwq1jYsAIdo50-PKo_manage-views.png" position="flex-start" size="80" width="1913" height="956" initialPath="Images/Manage Views.png" githubPath="Admin-User/Content/Working with the Analyst/Images/Manage Views.png" darkWidth="1913" darkHeight="956" showCaption="false" indent="1"} 2. In the **Manage views** dialog: - Use the toggle under **Status** to enable or disable the view. - From **Select data grid view**, select the view to use (e.g., Demo Grid). - From **Select Kanban view**, select the view to use for Kanban display. - From **Select Gallery view**, select the view to use for Gallery display. - In the **Initial view** column, select the **Radio** button for the view you want to set as the **Initial view**. :::hint{type="info"} When the **Select data grid view** type is selected as **(e.g., Demo Grid)** grid, you must select the Initial view radio button. If you do not select this option, the data grid will not appear in the new **Ivanti Service Management Portfolio UI V3** page. ::: 3. Select **Save**. ### Configure the data grid 1. In the **Layout** list, select the required layout (for example, Demo Layout). 2. In the **Views** list, select the required view (for example, Demo Grid). ::Image[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/uujkkBkTrw-sLj4AiDUia_configure-data-grid.png" position="flex-start" size="80" width="1904" height="952" initialPath="Images/Configure Data Grid.png" githubPath="Admin-User/Content/Working with the Analyst/Images/Configure Data Grid.png" darkWidth="1904" darkHeight="952" showCaption="false" indent="1"} 3. Select **Configure data grid**. ::Image[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/hMmCd-bWIqDxR3yw8yGQ2_to-configure-the-data-grid.png" position="flex-start" size="80" width="1908" height="954" initialPath="Images/To Configure the data grid.png" githubPath="Admin-User/Content/Working with the Analyst/Images/To Configure the data grid.png" darkWidth="1908" darkHeight="954" showCaption="false" indent="1"} 4. In Available fields (left pane) under the **Incident** business object in the **fields** pane, select the required fields. - Select the checkboxes for the fields you want in the grid. 5. Select **Add selected** to add the fields to the grid. - The columns appear in the center pane. 6. In the center pane, verify the displayed grid: - Columns such as **Accuracy**, **Actual Service**, **ActualCategory** 7. **Column configuration options** When you select a column in the grid, the **Configure pane** opens on the right. You can set the following properties: | Field | Description | Values | | ----------------- | ------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Field title | Display name of the column. | Free text | | Width | Column width. | Free text (numeric) | | Field | Field in the business object. | Displays the selected column. | | Hidden Expression | Expression used to hide the column.
Boolean | Boolean, ƒ(x) expression editor | | Style | UI style for the column. | Select Open **Highlighter style** list or Open **Expression editor** from the dropdown.
When you configure a style for a column, you can choose from two options:
- **Fixed styles:** The **Highlighter Styles** dialog lists predefined, out-of-the-box styles. Each row shows the style name (for example, **AUSparkButton**, **AUSparkField**, **AUSparkFormBackground**) and a style preview so you can see how it will look when applied. The list is long, so not all styles are documented here.
:inlineImage[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/Ddi_GUPvNBroes2wLJnxJ_style-highlighter.png" alt caption size="80" width="1904" height="949"}
- **Custom styles:** The ƒ(x) **Expression editor** lets you define a conditional style expression. The editor includes tools grouped under **Incident** (business object fields), **Functions** (logic functions), **Time Zones**, and **Styles**. Use this option to apply conditional formatting. For example, you can highlight rows where the Priority field equals 1.
:inlineImage[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/_qxl_IiWA6kBfb34SlcQV_expression-editor.png" alt caption size="80" width="1905" height="952"} | | Renderer | How the value is rendered/aligned. | Left Aligned, Number, Right Aligned, Size | | Image | To render an image. | ƒ(x) expression editor | | Hyperlink | Whether the column shows as a hyperlink. | Yes, No | | Goto | Object to navigate to when hyperlink is selected. | This Object (default) | | Sortable | Allow column to be sortable. | Toggle: On or Off | | Grouping | Allow data grouping by this column. | Toggle: On or Off | | Word wrap | Wraps text in the column. | Toggle: On or Off | | Initially hidden | Hides the column by default. | Toggle: On or Off | | Allow tooltip | Shows tooltips on hover. | Toggle: On or Off | | Remove column | To remove the column from the grid. | Action button | 8. (Optional) To change the order of the columns, select **Reorder columns** and arrange the columns as needed. ::Image[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/BQ3q73RyAJgJ6tcFIRvLR_reorder-columns.png" position="flex-start" size="80" width="1896" height="1033" initialPath="Images/Reorder Columns.png" githubPath="Admin-User/Content/Working with the Analyst/Images/Reorder Columns.png" darkWidth="1896" darkHeight="1033" showCaption="false" indent="1"} 9. Select **Save**. ### Configure toolbar for data grid After you configure the grid columns, you can edit the toolbar to control which tools and actions appear to end users. 1. In the grid, select **Configure toolbar**. ::Image[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/z9eWvqZdKwKDF8kL8sZbQ_change-toolbar.png" position="flex-start" size="80" width="1911" height="1045" initialPath="Images/Change Toolbar.png" githubPath="Admin-User/Content/Working with the Analyst/Images/Change Toolbar.png" darkWidth="1911" darkHeight="1045" showCaption="false" indent="1"} 2. The **Toolbar editor** opens. ::Image[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/KmyNrmRCm1INly_SuZSij_change-toolbar-window.png" position="flex-start" size="80" width="1902" height="1035" initialPath="Images/Change toolbar window.png" githubPath="Admin-User/Content/Working with the Analyst/Images/Change toolbar window.png" darkWidth="1902" darkHeight="1035" showCaption="false" indent="1"} 3. The **Toolbar editor** includes the following sections and controls: The **Toolbar Editor** is available for **Data Grid**, **Kanban**, and **Gallery** views. You can use it to configure which tools and actions appear to end users in the workspace toolbar. | 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. Tools are displayed under the **Left section** or **Right section**, depending on where you place them.
Each tool in this list 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. Select the icon to open the **Toolbar Editor** for that specific tool. From here, you can:
:inlineImage[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/n7KY7D7vVQgn2koqOKw8j_tool-pencil-icon.png" alt caption size="80" width="1282" height="951"}
:inlineImage[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/eJb9IMl3N2o6E7jfV-_Tg_tool-editor.png" alt caption size="80" width="1293" height="947"}
Modify the **Action** associated with the tool.
- Choose a **Button** type, **Icon and Text**, **Text only**, or **Icon only**.
- Update the **Text label** and **Tooltip** displayed in the toolbar.
- Define **Arguments** or **Shortcuts**, if applicable.
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.
:inlineImage[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/U-4-nuwAbDk7EraeKu1D-_toolbar-editor.png" alt caption size="80" width="1162" height="941"} | | 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.
:inlineImage[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/Yf_nz8uUmw7EBefQvgX1E_toolbar-editor1.png" alt caption size="80" width="1153" height="926"} | | 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**. | | Up and down arrows | Change the order of tools in the Selected tool list. | | Ok | Saves changes made in the **Toolbar editor** and closes the window. | | Cancel | Closes the **Toolbar editor** without saving changes. | 4. Select **Save and publish** to apply the changes to the grid. 5. Back on the grid page, do one of the following: - Select **Preview** to review the updates before publishing. - Select **Save and publish** to apply the changes to the grid. 6. Reload the **Home** page. - Verify that the **Ivanti Service Management Portfolio UI V3** opens. - Use the theme icon in the top-right corner to toggle between **Light mode** and **Dark mode**. ::Image[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/VFnh-k4pIekSAcSNzE1lU_light-mode-or-dark-mode.png" position="flex-start" size="80" width="1900" height="944" initialPath="Images/Light mode or Dark Mode.png" githubPath="Admin-User/Content/Working with the Analyst/Images/Light mode or Dark Mode.png" darkWidth="1900" darkHeight="944" showCaption="false" indent="1"} :::Paragraph{listStyleType="disc" indent="2"} Navigate to the **Incident** workspace. The application displays the new data grid configured using the Modern Page Designer. ::: ::Image[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/L2mb8wdRgwRZsHWjV83HZ_incident-workspace-in-new-ui.png" position="flex-start" size="80" width="1919" height="952" initialPath="Images/Incident Workspace in New UI.png" githubPath="Admin-User/Content/Working with the Analyst/Images/Incident Workspace in New UI.png" darkWidth="1919" darkHeight="952" showCaption="false" indent="1"} :::Paragraph{listStyleType="disc" indent="2"} To return to the **Modern Page Designer** and make changes, select **Configure**. ::: :::: ::::ExpandableHeading{isOpen="true"} ## Configure Kanban View 1. In the **Layout** list, select the required layout (for example, Demo Layout). 2. In the **Views** list, select the required view (for example, Kanban). ::Image[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/47SXATxbjEVCSy3Uafg10_configure-kanban.png" position="flex-start" size="80" width="1650" height="761" initialPath="Images/Configure Kanban.png" githubPath="Admin-User/Content/Working with the Analyst/Images/Configure Kanban.png" darkWidth="1650" darkHeight="761" showCaption="false" indent="1"} 3. Select **Configure Kanban board**. ::Image[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/A9XipLNaz6LNxGIINIOgD_kanban-board.png" position="flex-start" size="80" width="1657" height="758" initialPath="Images/Kanban Board.png" githubPath="Admin-User/Content/Working with the Analyst/Images/Kanban Board.png" darkWidth="1657" darkHeight="758" showCaption="false"} 4. In **Columns configuration**, from **Select field**, choose the field used to group cards (for example, **Status**). ::Image[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/ctMPi88fknDfk3LtDVW5P_columns-configuration.png" position="flex-start" size="80" width="1652" height="822" initialPath="Images/Columns Configuration.png" githubPath="Admin-User/Content/Working with the Analyst/Images/Columns Configuration.png" darkWidth="1652" darkHeight="822" showCaption="false" indent="1"} :::hint{type="info"} **Prerequisite:** The field selected for **Columns configuration** must use a pick list that contains unique values. ::: 1. **Define columns:** - Enter a **Column name** (for example, **Open**, **Close**, **Wait**). - Select a **Color**. - From **Select field values**, assign values to each column. :::Paragraph{indent="4"} Example: ::: :::Paragraph{listStyleType="disc" indent="4"} **Open:** Logged, Active ::: :::Paragraph{listStyleType="disc" indent="4"} **Close:** Resolved, Closed ::: :::Paragraph{listStyleType="disc" indent="4"} **Wait:** Waiting for Customer, Waiting for 3rd Party, Waiting for Resolution ::: 2. Select **Add column** to include more lanes as needed. 3. Select **OK**. 4. Open the **Card configuration** tab. ::Image[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/i-hBli6xcgVjk-U2YEyrW_card-configuration.png" position="flex-start" size="80" width="1647" height="822" initialPath="Images/Card Configuration.png" githubPath="Admin-User/Content/Working with the Analyst/Images/Card Configuration.png" darkWidth="1647" darkHeight="822" showCaption="false" indent="1"} 5. From **Available fields**, drag fields to the **Selected fields** area. - Example fields: **Priority**, **Status**, **Incident ID**, **Owner**, **Category**, **Impact**, **Summary**, **Customer Name**. 6. From the **Template** dropdown, select a card style: - **Default template** - **Minimal template** - **Classic template** 7. Select the Edit :inlineImage[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/B10eHHM3HGnwp7czdXYZE_edit-icon1.png" alt caption size="10" width="19" height="19"}icon next to a field to configure its properties. The **Configure **pane opens on the right. 8. Select **OK**. ### Manage Views 1. From the **Views** dropdown, select **Manage views**. 2. In the **Manage views** dialog: - Enable the Kanban Views you created (for example, Incident Kanban). - (Optional) Set it as the **Initial view.** 3. Select **Save**. ### Verify the Kanban Layout 1. Reload the **Home** page. 2. Navigate to the **Incident** workspace. 3. Verify that the Kanban board opens in the **Ivanti Service Management Portfolio UI V3** with the configured columns and cards. ::Image[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/_Eh4xVblzcQDQmQaQWzq0_kanban-view.png" position="flex-start" size="80" width="1651" height="813" initialPath="Images/Kanban View.png" githubPath="Admin-User/Content/Working with the Analyst/Images/Kanban View.png" darkWidth="1651" darkHeight="813" showCaption="false" indent="1"} :::Paragraph{listStyleType="disc" indent="2"} Example: **Open**, **Wait**, **Close** lanes with cards displaying **Incident ID**, **Priority**, and **Status**. ::: :::: ::::ExpandableHeading{isOpen="true"} ## Configure Gallery View 1. In the **Layout** list, select the required layout (for example, Demo Layout). 2. In the **Views** list, select the required view (for example, Gallery View). ::Image[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/JJKv7Kb2X211awHxWeP9i_gallery-view.png" position="flex-start" size="80" width="1917" height="1043" initialPath="Images/Gallery View.png" githubPath="Admin-User/Content/Working with the Analyst/Images/Gallery View.png" darkWidth="1917" darkHeight="1043" showCaption="false" indent="1"} 3. Select **Configure Gallery View**. ::Image[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/PnLyjaPmtZFDk02JKmhCX_configure-gallery-view.png" position="flex-start" size="80" width="1922" height="1041" initialPath="Images/Configure Gallery View.png" githubPath="Admin-User/Content/Working with the Analyst/Images/Configure Gallery View.png" darkWidth="1922" darkHeight="1041" showCaption="false"} :::Paragraph{listRestartPolite="4" indent="1"} ::: :::Paragraph{indent="1"} Drag the fields into the **Selected Fields** area. ::: ::Image[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/jayuu67PL7cyZPPezbyUZ_configuration-gallery-view.png" position="flex-start" size="80" width="1917" height="1038" initialPath="Images/Configuration Gallery View.png" githubPath="Admin-User/Content/Working with the Analyst/Images/Configuration Gallery View.png" darkWidth="1917" darkHeight="1038" showCaption="false" indent="1"} 4. In the **Available Fields** pane, select the fields you want to display. 5. From the **Template** dropdown, choose one of the following templates: | Field | Description | | ------------------- | ----------------------------------------------------------- | | Single Row Detailed | Displays up to Six fields in a single, full-width row. | | Single Row Compact | Displays up to three fields in a minimal single-row layout. | | Card Detailed | Displays up to eight fields in a detailed card layout. | | Card Compact | Displays up to five fields in a compact card layout. | 6. Use the **Preview icons** at the top to review the layout in different device modes: - **Desktop** - **Mobile** ::Image[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/tlllRH4xeb4NYYTtNyuIp_card-preview.png" position="flex-start" size="80" width="1906" height="1041" initialPath="Images/Card preview.png" githubPath="Admin-User/Content/Working with the Analyst/Images/Card preview.png" darkWidth="1906" darkHeight="1041" showCaption="false"} :::hint{type="info"} The **Desktop** and **Mobile** preview options are available only for **Row** templates. ::: 7. Select the Edit :inlineImage[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/B10eHHM3HGnwp7czdXYZE_edit-icon1.png" alt caption size="10" width="19" height="19"} icon next to a field to configure its properties. The **Configure ** pane opens on the right. 8. Select **Save** to apply the configuration. ### Manage Gallery View In the **Views** list, select the **ellipsis (⋮)** and then select **Manage Views**. ::Image[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/Zm7_9sD1L9cc0ft3iruk7_gallery-view-radio-button-option.png" position="flex-start" size="36" width="358" height="252" initialPath="Images/Gallery View Radio button option.png" githubPath="Admin-User/Content/Working with the Analyst/Images/Gallery View Radio button option.png" darkWidth="358" darkHeight="252" showCaption="false" indent="1"} 1. In the **Manage Views** dialog box: - Use the **Status** toggle to enable the **Gallery view**. - From Select **Gallery view**, choose the view you created (for example, Gallery View). - Use the **Initial View** radio button to set the Gallery view as the default workspace view. 2. Select **Save**. 3. Select **Save and publish** to apply the changes. 4. Reload the **Home** page. :::: :::ExpandableHeading{isOpen="true"} ## Clone Layouts and Views in the Modern Page Designer The **Clone** option lets you duplicate existing layouts and views without recreating them manually. When you clone a layout or view, all its **properties**, **configurations**, and any **associated elements** such as views, fields, and toolbar settings are copied to the new item. This helps you reuse complex configurations for different roles or use cases without rebuilding them from scratch. ### Clone a Layout 1. In the **Modern Page Designer**, open the required **Business Object** (for example, Incident). 2. In the **Layout** dropdown, select the **ellipsis(⋮)** menu. ::Image[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/9Cf6TY58-3zXImIliuknl_clone-option.png" position="flex-start" size="80" width="1900" height="1040" initialPath="Images/Clone option.png" githubPath="Admin-User/Content/Working with the Analyst/Images/Clone option.png" darkWidth="1900" darkHeight="1040" showCaption="false" indent="1"} 3. Select **Clone**. ::Image[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/2ec2k8VXSJbpON0qM_486_dialog-box-for-clone.png" position="flex-start" size="80" width="1907" height="1037" initialPath="Images/Dialog box for Clone.png" githubPath="Admin-User/Content/Working with the Analyst/Images/Dialog box for Clone.png" darkWidth="1907" darkHeight="1037" showCaption="false" indent="1"} The **Clone layout** dialog box appears. 4. In the **Display name** field, review or update the layout name. - By default, the cloned layout name appears as **\(clone)**. 5. Update any required configurations in the cloned layout. 6. Select **Save and publish** to apply the changes. ### Clone a View 1. In the **Views** dropdown, select the **ellipsis (⋮)** menu next to the view name. ::Image[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/r6M4RlZ5sQB7WipNWPBYu_views-clone.png" position="flex-start" size="80" width="1907" height="1040" initialPath="Images/Views clone.png" githubPath="Admin-User/Content/Working with the Analyst/Images/Views clone.png" darkWidth="1907" darkHeight="1040" showCaption="false" indent="1"} 2. Select **Clone**, the **Clone** view dialog box appears. ::Image[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/_woMw9w5iwk9YJYFSYZKq_dialog-box-for-views-clone.png" position="flex-start" size="80" width="1897" height="1042" initialPath="Images/Dialog box for Views Clone.png" githubPath="Admin-User/Content/Working with the Analyst/Images/Dialog box for Views Clone.png" darkWidth="1897" darkHeight="1042" showCaption="false" indent="1"} 3. In the **Display name** field, review or update the name. - By default, the cloned view name appears as **\(clone)**. 4. Select **Clone**. - The cloned view appears in the **Views** list. - All properties and configurations of the original view such as columns, field settings, and toolbar definitions are copied automatically. 5. Update any required configurations in the cloned view. 6. Select **Save and publish**. ::: ::::ExpandableHeading ## Control Edit Permissions (Soft Lock via System Mode) ### You need to contact support to enable System Mode :::hint{type="info"} You need to contact support to enable System Mode. ::: 1. Sign in to **Admin UI**. ::Image[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/OWZorU8k4EGB4Md7MwLUA_soft-lock-logging-in-system-mode.png" position="flex-start" size="80" width="970" height="455" initialPath="Images/Soft lock logging in System Mode.png" githubPath="Admin-User/Content/Working with the Analyst/Images/Soft lock logging in System Mode.png" darkWidth="970" darkHeight="455" showCaption="false" indent="1"} 2. Go to **Settings** and select **System mode**. (screenshot shows the System mode link on the right panel.) ::Image[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/t3jiZdvrwlfwWJyfhPB72_system-mode.png" position="flex-start" size="80" width="972" height="465" initialPath="Images/System Mode.png" githubPath="Admin-User/Content/Working with the Analyst/Images/System Mode.png" darkWidth="972" darkHeight="465" showCaption="false" indent="1"} 3. In the **System Mode** dialog, enter your credentials and select **Authenticate**. ### Set Permissions on a Layout 1. Open **Modern Page Designer**. 2. In **Layout**, select the **ellipsis (⋮)** and then select **Edit**. 3. In the **Edit layout** dialog, go to **Permissions**. 4. Select the check boxes: ::Image[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/8gkZGZ-T8rccL24u2Ba-__permission-option.png" position="flex-start" size="80" width="977" height="455" initialPath="Images/Permission option.png" githubPath="Admin-User/Content/Working with the Analyst/Images/Permission option.png" darkWidth="977" darkHeight="455" showCaption="false" indent="1"} :::Paragraph{listStyleType="disc" indent="2"} **Update** (allow edits) ::: :::Paragraph{listStyleType="disc" indent="2"} **Delete** (allow delete) ::: 5. Select **Save** (and **Save and publish**). ### Set Permissions on Views 1. Open **Modern Page Designer**. 2. In **Views**, select the **ellipsis (⋮)** next to the view and then select **Edit**. 3. In the **Edit** dialog, go to Permissions and set **Update / Delete** as needed. 4. Select **Save** (and **Save and publish**). :::hint{type="info"} When permissions restrict updates on a view, only the **Field title** is editable; other settings are not editable. ::: :::: :::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 ## (Optional) Configure UI Exceptions for the Role After assigning the layout to the role, configure the role to use the new UI version. **Configure an UI exception for the role** 1. In the **Configuration Console**, go to **Build** > **User Interface Styles** > **Style Editor**. ::Image[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/X2TIW8mEyss6c9IrvvzGw_add-new-exception.png" position="flex-start" size="80" width="1902" height="949" initialPath="Images/Add New Exception.png" githubPath="Admin-User/Content/Working with the Analyst/Images/Add New Exception.png" darkWidth="1902" darkHeight="949" showCaption="false" indent="1"} 2. Select **Add exception**. ::Image[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/R9rc9xouC2dyw00-3gGOd_role-selection.png" position="flex-start" size="29" width="292" height="252" initialPath="Images/Role selection.png" githubPath="Admin-User/Content/Working with the Analyst/Images/Role selection.png" darkWidth="292" darkHeight="252" showCaption="false" indent="1"} 3. In the **Role** list, select the role **Administrator**. 4. In the **UI** list, select **UI v3**. 5. Select **Save**. ::: ::::ExpandableHeading ## Manage Saved Filters in the Modern Page Designer Saved Filters are supported in Modern Page Designer, providing the same management capabilities that were previously available in the Ivanti Service Management Portfolio UI V3. You can manage saved filters directly from the Modern Page Designer, without switching to the user workspace. ### Access saved filters in the Modern Page Designer 1. Open the **Modern Page Designer**. 2. In the **Layout** list, select the required layout (for example, Demo Layout). 3. In the **Views** list, select the required view (for example, Demo Grid). 4. Select a business object (for example, **Incident**). 5. In the Configure pane, select **Saved filters**. ::Image[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/mOM32DHvc2hzoZU1wvMxb_saved-filter-in-modern-page-designer-new.png" position="flex-start" size="80" width="1908" height="954" initialPath="Images/Saved filter IN MODERN PAGE DESIGNER new.png" githubPath="Admin-User/Content/Working with the Analyst/Images/Saved filter IN MODERN PAGE DESIGNER new.png" darkWidth="1908" darkHeight="954" showCaption="false" indent="1"} 6. Select **Edit saved filters**. - The Edit saved filters page opens. ### Edit saved filters page The **Edit saved filters** page displays a list of saved filters for the selected business object. ::Image[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/FFEhHWfzhYDRRqMFwHf47_edit-page-saved-filter-in-modern-page-designer.png" position="flex-start" size="80" width="1909" height="949" initialPath="Images/Edit page saved filter in modern page designer.png" githubPath="Admin-User/Content/Working with the Analyst/Images/Edit page saved filter in modern page designer.png" darkWidth="1909" darkHeight="949" showCaption="false" indent="1"} **Page controls** **Below mentioned are the Edit saved filter page controls,** - **Create new:** Creates a new saved filter. ::Image[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/QOGEa_kpWt57k9KaMdfIN_create-new-saved-filters-in-modern-page-designer.png" position="flex-start" size="80" width="1904" height="952" initialPath="Images/Create new saved filters in modern page designer.png" githubPath="Admin-User/Content/Working with the Analyst/Images/Create new saved filters in modern page designer.png" darkWidth="1904" darkHeight="952" showCaption="false" indent="1"} - **Add to favorite:** Marks selected filters as favorites. ::Image[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/jevSJtTB9RFNEj8a37h-0_mark-search-as-favourite.png" position="flex-start" size="80" width="1907" height="946" initialPath="Images/Mark search as favourite.png" githubPath="Admin-User/Content/Working with the Analyst/Images/Mark search as favourite.png" darkWidth="1907" darkHeight="946" showCaption="false" indent="1"} - **Filter by keyword:** Searches saved filters by name. - **Pagination controls:** Located at the bottom of the page. Use these to change the number of filters displayed per page (**10**, **25**, **50**, or **100**) and navigate between pages. **Saved Filters page** The Saved Filters page displays the following columns: | Field | Description | | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------ | | Is favorite | Indicates whether the filter is marked as a favorite. A star icon shows that the filter appears under **Favorites** in the **Saved filters** dropdown. | | Filter name | Displays the name of the saved filter. Select the filter name to view or edit its configuration. | | Available to roles | Lists the roles that can access the saved filter. | | Published to | Indicates whether the filter is published to specific teams. | | Actions | Provides additional options for the filter, such as **Export to Excel**, **Email**, **Edit**, **Clone**, **Dependency** and **Delete**. | **Actions menu** Each saved filter includes an **Actions (⋮)** menu with the following options: - **Export to Microsoft Excel:** Exports the saved filter details to an Excel file. - **Email to yourself:** Sends the saved filter details to your email address. - **Edit:** Opens the saved filter for modification. - **Clone:** Creates a copy of the selected saved filter. - **Dependency** The Dependency action shows where a saved filter is used in the application. To view dependencies: - Select the **Actions (⋮)** menu for a saved filter. - Select **Dependency**. A dialog opens listing where the saved filter is referenced: ::Image[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/N83sObc2HYnn704Ov7OlJ_dependency-in-saved-filter.png" position="flex-start" size="80" width="1907" height="949" initialPath="Images/Dependency in saved filter.png" githubPath="Admin-User/Content/Working with the Analyst/Images/Dependency in saved filter.png" darkWidth="1907" darkHeight="949" showCaption="false" indent="1"} This helps you understand the impact of editing or deleting a saved filter. - **Delete:** Removes the saved filter. These actions allow you to manage saved filters directly from the Modern Page Designer. ### Create and Edit Saved Filter The create and edit saved filter dialog box displays the following: **Creating and Editing Saved Filters** - Select **Create New** to create a **New saved filter** dialog box opens. ::Image[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/QOGEa_kpWt57k9KaMdfIN_create-new-saved-filters-in-modern-page-designer.png" position="flex-start" size="80" width="1904" height="952" initialPath="Images/Create new saved filters in modern page designer.png" githubPath="Admin-User/Content/Working with the Analyst/Images/Create new saved filters in modern page designer.png" darkWidth="1904" darkHeight="952" showCaption="false"} - The filter editor includes three tabs: 1. **Filter** - In the **Filter** tab, define the conditions for the filter: - Use the dropdowns to select fields, operators, and values. - Use AND or OR to Delete multiple conditions. - Select **Save** or **Cancel** to clear the fields. 2. **Sorting** - In the **Sort** tab, choose the field to sort by from the **Sort by** dropdown. - Select the sort order: **Ascending** or **Descending**. - Select **Save** or **Cancel** to clear the fields. 3. **Settings:** - Use this tab to configure filter properties. - **Filter name:** Enter a unique name for the filter. - **Category:** Select a category (default is Saved Search). - **Publish to roles:** Select roles that can access this filter. - **Publish to teams:** Select teams that can access this filter. - Filters published to teams appear between **Favorites** and **All** in the **Saved filters** dropdown. - **Default for role:** Choose whether the filter should be the default for selected roles. - **Personal default:** Checkbox to mark the filter as your personal default. - **Add to favorite searches:** Checkbox to mark the filter as a favorite for quick access. - **Permissions:** These permissions are set internally and are not configurable by the Administrator. - Select **Save** or **Cancel** to clear the fields. - **Hidden saved filters** The Hidden saved filters dialog displays the following: - The **Hidden** option controls the visibility of a saved filter. ::Image[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/IRKgGIKJu3fZwpCNNPDE1_expression-editor-in-modern-page-designer.png" position="flex-start" size="80" width="947" height="563" initialPath="Images/Expression Editor in modern page designer.png" githubPath="Admin-User/Content/Working with the Analyst/Images/Expression Editor in modern page designer.png" darkWidth="947" darkHeight="563" showCaption="false"} :::Paragraph{indent="4"} **ƒ(x) (expression)** values: ::: :::Paragraph{listStyleType="disc" indent="5"} **Yes** ::: :::Paragraph{listStyleType="disc" indent="5"} **No** ::: :::hint{type="info" indent="5"} - When a saved filter is hidden, it is not visible in the end user workspace. - Hidden takes precedence over all other settings, including role defaults, personal defaults, and publishing. - For more information about saved searches, refer [Using Search](docId\:X_pckJHiyVYdgx4mj54lb). ::: :::: ::::ExpandableHeading ## Configure advanced expressions for filter criteria When you create or edit a saved filter, you can define **advanced expressions** to control how filter conditions are evaluated. From the **Filter** tab of the **Edit saved filter** dialog, select the **expression (ƒx)** icon next to a filter condition to open the **Expression editor**. ::Image[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/_cpAaaxtjt0RFRkbqZ7cu_expression-editor-for-page-designer.png" position="flex-start" size="80" width="1906" height="950" initialPath="Images/Expression Editor for page designer.png" githubPath="Admin-User/Content/Working with the Analyst/Images/Expression Editor for page designer.png" darkWidth="1906" darkHeight="950" showCaption="false" indent="1"} **Expression editor** :::Paragraph{listStyleType="disc" indent="2"} Use the **Expression editor** to build advanced filter logic using supported fields, functions, and date/time expressions. ::: ::Image[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/mFo5dcrOBItkgtpQUjghD_editor-expression.png" position="flex-start" size="80" width="1907" height="949" initialPath="Images/Editor Expression.png" githubPath="Admin-User/Content/Working with the Analyst/Images/Editor Expression.png" darkWidth="1907" darkHeight="949" showCaption="false"} - The editor provides the following tools: - **Incident**: Business object fields available for filtering. - **Functions:** Built-in functions (for example, date and time functions). - **Time Zones:** Time zone aware functions for date comparisons. - Select **OK** to apply the expression and return to the saved filter editor. :::: ::::ExpandableHeading ## Configure filter searches in the Modern Page Designer Filter search configuration that was previously configured in the Configuration Console (Classic UI) is available in the Modern Page Designer for a business object Table (grid) view. You configure filter categories and filter criteria directly in the layout designer. The configured filters appear in the Filter by menu in the workspace table view. The Modern Page Designer also includes a Filter by search box in the Configure panel to locate filters during configuration. **Open filter configuration** 1. Go to **Settings** > **Build**. 2. Open the required business object (for example, **Incident**). 3. Select a **Layout**. 4. Select a **View** (for example, **Grid** view). 5. Select **Filter by** in the preview toolbar. The Configure panel appears. ### Show or hide filter categories In the Configure panel, enable or disable categories: ::Image[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/DyMh8QHa332LZygPQp51Q_fliter-by-option-in-page-designer.png" position="flex-start" size="80" width="1919" height="940" initialPath="Images/Fliter by option in Page Designer.png" githubPath="Admin-User/Content/Working with the Analyst/Images/Fliter by option in Page Designer.png" darkWidth="1919" darkHeight="940" showCaption="false"} - **Status** - **Priority** - **Assignment** - **Created Date** - **Respond By** - **Resolve By** - **More Options** Turn a toggle **ON** to display the category in the workspace filter menu. Turn a toggle **OFF** to hide the category. ### Find a filter Enter text in the Filter by search box in the Configure panel. ::Image[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/jo00Cwckn9jUVVR9pZdLV_filter-search-option-1.png" position="flex-start" size="80" width="1912" height="946" initialPath="Images/Filter Search option 1.png" githubPath="Admin-User/Content/Working with the Analyst/Images/Filter Search option 1.png" darkWidth="1912" darkHeight="946" showCaption="false" indent="1"} The list displays only the filter categories and values that match the entered text, making it easier to locate and enable or disable a specific filter in the configuration list. This search does not filter or update the configuration details displayed in the middle pane. ### Edit filter definitions Select **Edit** filter. ::Image[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/CIRFK2SNdm5f1G05oReyq_select-edit-filter.png" position="flex-start" size="80" width="1905" height="947" initialPath="Images/Select Edit Filter.png" githubPath="Admin-User/Content/Working with the Analyst/Images/Select Edit Filter.png" darkWidth="1905" darkHeight="947" showCaption="false" indent="1"} The filter editor opens. ::Image[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/Py7wvT4ZoJWZYaelVw2UG_filter-editor-space.png" position="flex-start" size="80" width="1909" height="946" initialPath="Images/Filter Editor space.png" githubPath="Admin-User/Content/Working with the Analyst/Images/Filter Editor space.png" darkWidth="1909" darkHeight="946" showCaption="false" indent="1"} ::Image[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/MR_RzSDzg1MIER99jRJZd_edit-delete-and-add-option.png" position="flex-start" size="80" width="1911" height="947" initialPath="Images/Edit delete and Add option.png" githubPath="Admin-User/Content/Working with the Analyst/Images/Edit delete and Add option.png" darkWidth="1911" darkHeight="947" showCaption="false" indent="1"} From this page you can **add**, **edit**, or **delete** filter categories. ### Add a filter ::Image[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/gOVs6eO-u_LB1UMwc03FM_add-new-filter-option.png" position="flex-start" size="80" width="1907" height="945" initialPath="Images/Add new filter option.png" githubPath="Admin-User/Content/Working with the Analyst/Images/Add new filter option.png" darkWidth="1907" darkHeight="945" showCaption="false" indent="1"} 1. Select **Add new filter**. 2. Enter the filter name in the **Filter name** field. 3. Enter **Filter help** (tooltip text). 4. Enter the appropriate role in the **Roles** field. 5. Specify the appropriate team in the **Teams** field 6. Select **Save**. :::hint{type="info"} If you configure a filter with roles or teams conditions, the filter is not visible in the Classic interface. ::: ### Configure filter criteria ::Image[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/kOdqqfd_pCzvDNum9YZ9f_add-new-criteria-option.png" position="flex-start" size="80" width="1906" height="947" initialPath="Images/Add New Criteria option.png" githubPath="Admin-User/Content/Working with the Analyst/Images/Add New Criteria option.png" darkWidth="1906" darkHeight="947" showCaption="false" indent="1"} 1. Expand a filter category. 2. Select **Add new criteria**. 3. Enter **Criteria name**. 4. Select a **Control**: - **None** - **Calendar** - **Checkbox** - **Pick List** - **Textbox** 5. Select **Save**. ### Edit or Delete criteria 1. Expand a filter category. 2. Click :inlineImage[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/sKM_3E0QUsoY2AZVdIJPz_edit-icon.png" alt caption size="10" width="19" height="19"}**Edit** or :inlineImage[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/QVmJSR6kLOnUJIPjG_ghS_delete-section-icon.png" alt caption size="10" width="14" height="16"}**Delete** a value using the action icons. 3. Change S**how by default** if required. 4. Select **Save**(and **Save and publish**). :::: ::::ExpandableHeading{isOpen="true"} ## Migrate Classic Layouts to Modern Page Designer You can migrate existing classic layouts of a business object to the Modern Page Designer. The migration process converts the selected classic layout to a modern layout while preserving its configuration. :::hint{type="info"} If you want to use the migrated layout in **Self Service**, open the layout in **Edit layout**, and then, under **User Type**, select the **Self Service** check box to make the Nova layout available in **Self Service**. For more information, see [Edit a Layout](docId:5l_cpoDUAA63kd6ptF55o). For more information on **Self Service** **Form Offering**, see [Configuring-Modern-Layouts-for-Form-Offerings](#). ::: ### Migrate a Classic Layout 1. In the **Modern Page Designer**, select the required business object (for example, **Incident**). ::Image[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/YoHJaV3Vp2b7-mPG6chyv_select-business-object.png" position="flex-start" size="80" width="1813" height="969" initialPath="Images/Select Business Object.png" githubPath="Admin-User/Content/Working with the Analyst/Images/Select Business Object.png" darkWidth="1813" darkHeight="969" showCaption="false" indent="1"} 2. Select **Migrate classic layouts** option from either of the following locations: - The **Layout** action menu. - The **Migrate classic layouts** button displayed in the page designer area. ::Image[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/XFykB7tRysXDuj1BrR438_migrate-classic-layout.png" position="flex-start" size="80" width="1809" height="970" initialPath="Images/Migrate Classic layout.png" githubPath="Admin-User/Content/Working with the Analyst/Images/Migrate Classic layout.png" darkWidth="1809" darkHeight="970" showCaption="false"} - The **Migrate classic layouts** option appears in the **Layout** action menu **ellipsis (⋮)** only when a layout is selected in the **Layout** field. ::Image[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/5-ImBLN8po_6KjTeX0Wy-_layout-option-in-the-layout-action-menu.png" position="flex-start" size="80" width="1812" height="968" initialPath="Images/Layout option in the layout action menu.png" githubPath="Admin-User/Content/Working with the Analyst/Images/Layout option in the layout action menu.png" darkWidth="1812" darkHeight="968" showCaption="false"} 3. The **Migrate classic layouts** dialog opens. ::Image[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/LQ3LxZi4NuiXQH1Fdi7Wn_migrate-classic-layout-dialog.png" position="flex-start" size="80" width="1817" height="959" initialPath="Images/Migrate classic layout dialog.png" githubPath="Admin-User/Content/Working with the Analyst/Images/Migrate classic layout dialog.png" darkWidth="1817" darkHeight="959" showCaption="false"} :::hint{type="info" indent="1"} Currently, you can migrate layouts from only one **Business Object** at a time. Select the correct **Business Object** and click **Migrate classic layouts**. ::: 4. Click **Next**. 5. Select the layout that you want to migrate. ::Image[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/aVsjFVKKg-m-A6-Taxckq_select-layout.png" position="flex-start" size="80" width="1815" height="963" initialPath="Images/Select Layout.png" githubPath="Admin-User/Content/Working with the Analyst/Images/Select Layout.png" darkWidth="1815" darkHeight="963" showCaption="false" indent="1"} :::hint{type="info" indent="1"} - Some **FRS** layouts are disabled and cannot be migrated in non-system mode. - If you log in using [System mode](docId:5l_cpoDUAA63kd6ptF55o), these layouts become available for migration. ::: 6. Click **Next**. 7. Review & Confirm, review the selected **Business Object** and **Layout**. ::Image[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/-jjTvMkftmH68Esl8wiL__start-migration.png" position="flex-start" size="80" width="1817" height="964" initialPath="Images/Start Migration.png" githubPath="Admin-User/Content/Working with the Analyst/Images/Start Migration.png" darkWidth="1817" darkHeight="964" showCaption="false" indent="1"} 8. Click **Start Migration**. 9. After the migration completes, a notification appears confirming that the layout was **Migration successful**. ::Image[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/tPTl3xnfEvhsLqxPdpSzZ_migration-successful.png" position="flex-start" size="80" width="1803" height="966" initialPath="Images/Migration successful.png" githubPath="Admin-User/Content/Working with the Analyst/Images/Migration successful.png" darkWidth="1803" darkHeight="966" showCaption="false" indent="1"} 10. You can migrate the same layout multiple times. Each time you migrate the layout, the count increases by one, so you can distinguish between the migrated versions. For example, the second migration of an Incident layout is named Incident\_Layout\_Migrated\_2. ::Image[]{src="https://api.archbee.com/api/optimize/parib0MC3hVoUNdfQdnac/sLDq4XFYFdXp-1tlApFOv_image.png" size="80" isUploading="false" width="716" height="579" darkWidth="716" darkHeight="579" showCaption="false"} **Example:** {{business\_object\_name\}\}\_Layout\_Migrated\_{{count\}\} :::hint{type="info"} When you migrate a classic (V1) layout that includes Preview Forms mappings for a Group business object, the migration produces a V3 view with the equivalent data preserved in child business object mappings. No data is lost during migration. You can verify and modify the migrated mappings by editing the existing view and expanding the **List of business objects \*** section. ::: ::::