# Device Hierarchy Graph

In this widget, you will be able to graphically view the hierarchy of a device within the organization.

## How it works

{{< staticImage "ux/DeviceHierarchy/Widget/DeviceHierarchydWidget.png" "Asset related" >}}

You will be able to view its communication modules, related assets, and its topology.

You can choose between displaying:

- provisioned values
- collected values
- both types of values

### Communications Module

{{< staticImage "ux/DeviceHierarchy/Widget/CommunicationModules.png" "Communications module" >}}

In this view, you will be able to see the communication modules available on the device.

By clicking on the device card, you can:

- view pre-configured information in the widget
- perform actions on the device

### Related

{{< staticImage "ux/DeviceHierarchy/Widget/RelatedAssets.png" "Communications module" >}}

In this view, you can see the assets related to the device.

By clicking on either the device card or the asset cards, you can:

- view pre-configured information in the widget
- perform actions on the device or asset

### Topology

{{< staticImage "ux/DeviceHierarchy/Widget/Topology.png" "Topology" >}}

In this view, you can see the topology of the device.

A panel will be available to indicate the relationships between different entities.

### Widget Menu

{{< staticImage "ux/DeviceHierarchy/Widget/MenuActionList.png" "Menu action list" >}}

The following actions can be performed:

- **Open device information:** Opens a temporary dashboard with the device information
- **Edit:** Opens the device wizard
- **Generate QR:** Generates a QR code that will provide basic information about the device
- **Execute operation:** Opens an operation execution wizard to perform an operation on the device
{{% ux-widget-menu-actions %}}

## Configuration

{{< staticImage "ux/DeviceHierarchy/Configuration/ConfDeviceHierarchy.png" "Configuration" >}}

{{% ux-widget-configuration %}}

{{< staticImage "ux/DeviceHierarchy/Configuration/ConfDeviceHierarchyGeneral.png" "General" >}}

- **Entity key:** Device to display
- **View:** Default view to display
- **Relations type:** Type of values to display: collected, provisioned, or both

### Popup

{{< staticImage "ux/DeviceHierarchy/Configuration/ConfDeviceHierarchyPopup.png" "Popup" >}}

You can configure the information to display in the popup that appears when clicking on the cards displayed in the widget, selecting values from the available data streams.

### Visualization

{{< staticImage "ux/DeviceHierarchy/Configuration/ConfDeviceHierarchyVisualization.png" "Visualization" >}}

You can configure certain elements of the graphs displayed in the widget:

- **Background color**
- **Hide details header panel:** Removes the menu that allows changing the type of visualization as well as the type of value to display.
- **Provision elements color**
- **Collection elements color**

{{% children sort="weight" depth="10" %}}

---