---
title: Dashboard Layout
slug: litmusedge/product-features/flows-manager/flow-canvas-dashboard/dashboard-layout
description: The dashboard layout tab allows you to organize dashboard elements and launch the Node-RED dashboard for review. 
docTags: 
createdAt: 2023-04-12T19:36:48.000Z
---

The dashboard layout tab allows you to organize dashboard elements and launch the Node-RED dashboard for review. 

From the **Layout** tab, you can add tabs and links, as well as launch the Node-RED Dashboard where you can review your dashboard.

Use the Dashboard nodes on the Node Palette to add to your layout.

The Dashboard offers easy drag-and-drop dashboard construction. The following table shows the elements used to create a dashboard.

| **Dashboard Element** | **Description**                                                                                                                            |
| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
| Tab                   | A dashboard can have multiple tabs, which enable navigation to different pages.                                                            |
| Group                 | Use a group as a building block to organize display nodes on a page. In a web UI context, this grouping is often referred to as a portlet. |
| Nodes                 | Drag Dashboard Nodes onto the Canvas and designate the tab and group to which the nodes belong.                                            |

An example of basic flow dashboard elements is shown below.

::Image[]{src="https://api.archbee.com/api/optimize/SSUUxKZUk9bFTEPNn_6Zo/e1yIF47FFoLxkc4_AevFD_dashboard-elements.png" size="80" width="619" height="363" position="center" caption="Examples of basic flow dashboard elements." showCaption="true"}

:::hint{type="warning"}
**Caution**: The **+ tab**, **+ link**, **+ group**, and **edit **tabs in the dashboard layout view are visible only when you mouse over the tab / group row.
:::

# Navigate to the Dashboard Layout Tab

Navigate to the Dashboard Layout tab in order to configure various layout settings related to the Node-RED dashboard layout.

**To navigate to the Dashboard Layout tab:**

1. Log in to Litmus Edge.
2. From the Navigation panel, select **Flows Manager**.
   The Overview pane appears.
3. Click the **Expand **icon next to a selected Flow.
   The selected Flow view opens in a separate browser tab.
4. Click the **Menu **icon, select **View > Dashboard,** and then drag the **Sidebar **up from the bottom of the canvas.
   The Layout tab appears by default.

# Add a Dashboard Tab

You can add a dashboard tab from the Dashboard Layout tab.

**To add a dashboard tab:**

1. Navigate to the Dashboard Layout tab.
2. Click **+ tab**.
   A new tab appears in the *Tabs & Links* box.
   ![](https://api.archbee.com/api/optimize/SSUUxKZUk9bFTEPNn_6Zo/dvxnoIN3b5DkfcUJkjd1M_qcnszy4pgspnebjcnhsntflows-dashboard-layout-with-tab.png)
3. Click **Deploy**.
   The Layout is saved.


# Rename a Dashboard Tab

You can rename a dashboard tab from the Dashboard Layout tab.

**To rename a dashboard tab:**

1. Navigate to the Dashboard Layout tab.
2. Hover over a selected tab and click **Edit**.
   The *Edit dashboard tab node* pane appears.
   ::Image[]{src="https://api.archbee.com/api/optimize/SSUUxKZUk9bFTEPNn_6Zo/TNfdx-GZ1cJyV1iT_cQ9T_2023-09-0611-16-51.png" size="80" width="508" height="480" position="center" caption="Edit dashboard tab node pane" showCaption="true"}
3. Enter a new name in the *Name* field, and then click **Update**.
4. Click **Deploy**.

# Modify a Tab Icon

You can modify a dashboard tab icon from the Dashboard Layout tab.

Tab icons can be modified by selecting alternate icons from these sources:

- Material Design Icons
- Font Awesome Icons
- Weather icon

**To modify a dashboard tab icon:**

1. Navigate to the Dashboard Layout tab.
2. Hover over a selected tab and click **Edit**.
   The *Edit dashboard tab node* pane appears.
3. Enter the name of the icon in the *Icon *field, and then click **Update**. For example, `check_circle`, or `home`. 
4. Click **Deploy**.

:::hint{type="success"}
**Tip**: The Icon field can be a Material Design icon (e.g. 'check', 'close') or a Font Awesome icon (e.g. 'fa-fire'), or a Weather icon (e.g. 'wi-wu-sunny').

You can use the full set of google material icons if you add 'mi-' to the icon name. e.g. 'mi-videogame\_asset'.
:::

# Remove a Dashboard Tab

You can remove a dashboard tab from the Dashboard Layout tab.

**To remove a dashboard tab:**

1. Navigate to the Dashboard Layout tab.
2. Hover over a selected tab and click **Edit**.
   The *Edit dashboard tab node* pane appears.
   ::Image[]{src="https://api.archbee.com/api/optimize/SSUUxKZUk9bFTEPNn_6Zo/As2EOYvwtByck5VIxM_CG_emphasizing-delete-button-2023-09-0611-16-51.png" size="80" width="508" height="480" position="center" showCaption="false"}
3. Click **Delete**.
4. Click **Deploy**.

# Add a Group to a Dashboard Tab

You can add a group to a dashboard tab from the Dashboard Layout tab.

**To add a group to a dashboard tab:**

1. Navigate to the Dashboard Layout tab.
2. Hover over a selected tab and click **+ Group**.
   ![](https://api.archbee.com/api/optimize/SSUUxKZUk9bFTEPNn_6Zo/ZOltsjyBlHGbRGc1325gC_2023-09-0613-10-46.png "Hover over the tab to view these options.")
3. Click **Deploy**.

# Modify a Dashboard Group

You can add a dashboard group from the Dashboard Layout tab.

**To modify a dashboard group:**

1. Navigate to the Dashboard Layout tab.
2. Hover over a selected group and click **Edit**.
3. Hover over a selected group and click **Edit**.
   The *Edit dashboard group node* pane appears.
   ::Image[]{src="https://api.archbee.com/api/optimize/SSUUxKZUk9bFTEPNn_6Zo/5drQ2G00L01suq2HCFC3O_2023-09-0615-23-50.png" size="80" width="508" height="406" position="center" caption="Edit dashboard group node" showCaption="true"}
4. Modify the group name, tab, class or width and then click **Update**.
5. Click **Deploy**.

# Remove a Dashboard Group

You can remove a dashboard group from the Dashboard Layout tab.

**To remove a dashboard group:**

1. Navigate to the Dashboard Layout tab.
2. Hover over a selected group and click **Edit**.
   The *Edit dashboard group node* pane appears.
3. Click **Delete**.
4. Click **Deploy**.

::Image[]{src="https://api.archbee.com/api/optimize/SSUUxKZUk9bFTEPNn_6Zo/LLISXMiNz9Z0tQfZlJmAB_image.png" size="80" width="508" height="406" position="center" caption="Delete button" showCaption="true"}