Tutorial: Customize the operator dashboard and manage devices in Azure IoT Central

In this tutorial, as a builder learn how to customize the operator dashboard in your Azure IoT Central in-store analytics application. Application operators can use the customized dashboard to run the application and manage the attached devices.

In this tutorial, you learn how to:

  • Change the dashboard name
  • Customize image tiles on the dashboard
  • Arrange tiles to modify the layout
  • Add telemetry tiles to display conditions
  • Add property tiles to display device details
  • Add command tiles to run commands

Prerequisites

The builder should complete the tutorial to create the Azure IoT Central in-store analytics application and add devices:

Change the dashboard name

To customize the operator dashboard, you have to edit the default dashboard in your application. Also, you can create additional new dashboards. The first step to customize the dashboard in your application is to change the name.

  1. Navigate to the Azure IoT Central application manager website.

  2. Open the condition monitoring application that you created in the Create an in-store analytics application in Azure IoT Central tutorial.

  3. Select Edit on the dashboard toolbar. In edit mode, you can customize the appearance, layout, and content of the dashboard.

    Azure IoT Central edit dashboard

  4. Optionally, hide the left pane. Hiding the left pane gives you a larger working area for editing the dashboard.

  5. Enter a friendly name for your dashboard in Dashboard name. This tutorial uses a fictional company named Contoso, and the example dashboard name is Contoso dashboard.

  6. Select Save. Your changes are saved to the dashboard and edit mode is disabled.

    Azure IoT Central change dashboard name

Customize image tiles on the dashboard

An Azure IoT Central application dashboard consists of one or more tiles. A tile is a rectangular container for displaying content on a dashboard. You associate various types of content with tiles, and you drag, drop, and resize tiles to customize a dashboard layout. There are several types of tiles for displaying content. Image tiles contain images, and you can add a URL that enables users to click the image. Label tiles display plain text. Markdown tiles contain formatted content and let you set an image, a URL, a title, and markdown code that renders as HTML. Telemetry, property, or command tiles display device-specific data.

In this section, you learn how to customize image tiles on the dashboard.

To customize the image tile that displays a brand image on the dashboard:

  1. Select Edit on the dashboard toolbar.

  2. Select Configure on the image tile that displays the Northwind brand image.

    Azure IoT Central edit brand image

  3. Change the Title. The title appears when a user hovers over the image.

  4. Select Image. A dialog opens and enables you to upload a custom image.

  5. Optionally, specify a URL for the image.

  6. Select Update configuration. The Update configuration button saves changes to the dashboard and leaves edit mode enabled.

    Azure IoT Central save brand image

  7. Optionally, select Configure on the tile titled Documentation, and specify a URL for support content.

To customize the image tile that displays a map of the sensor zones in the store:

  1. Select Configure on the image tile that displays the default store zone map.

  2. Select Image, and use the dialog to upload a custom image of a store zone map.

  3. Select Update configuration.

    Azure IoT Central save store map

    The example Contoso store map shows four zones: two checkout zones, a zone for apparel and personal care, and a zone for groceries and deli. In this tutorial, you'll associate sensors with these zones to provide telemetry.

    Azure IoT Central store zones

  4. Select Save.

Arrange tiles to modify the layout

A key step in customizing a dashboard is to rearrange the tiles to create a useful view. Application operators use the dashboard to visualize device telemetry, manage devices, and monitor conditions in a store. Azure IoT Central simplifies the application builder task of creating a dashboard. The dashboard edit mode enables you to quickly add, move, resize, and delete tiles. The In-store analytics - checkout application template also simplifies the task of creating a dashboard. It provides a working dashboard layout, with sensors connected, and tiles that display checkout line counts and environmental conditions.

In this section, you rearrange the dashboard in the In-store analytics - checkout application template to create a custom layout.

To remove tiles that you don't plan to use in your application:

  1. Select Edit on the dashboard toolbar.

  2. Select X Delete to remove the following tiles: Back to all zones, Visit store dashboard, Wait time, and all three tiles associated with Checkout 3. The Contoso store dashboard doesn't use these tiles.

    Azure IoT Central delete tiles

  3. Scroll to bring the remaining dashboard tiles into view.

  4. Select X Delete to remove the following tiles: Warm-up checkout zone, Cool-down checkout zone, Occupancy sensor settings, Thermostat sensor settings, and Environment conditions.

    Azure IoT Central delete remaining tiles

  5. Select Save. Removing unused tiles frees up space in the edit page, and simplifies the dashboard view for operators.

  6. View your changes to the dashboard.

    Azure IoT Central after deleting tiles

After you remove unused tiles, rearrange the remaining tiles to create an organized layout. The new layout includes space for tiles you add in a later step.

To rearrange the remaining tiles:

  1. Select Edit.

  2. Select the Occupancy firmware tile and drag it to the right of the Occupancy battery tile.

  3. Select the Thermostat firmware tile and drag it to the right of the Thermostat battery tile.

  4. Select Save.

  5. View your layout changes.

    Azure IoT Central firmware battery tiles

Add telemetry tiles to display conditions

After you customize the dashboard layout, you're ready to add tiles to show telemetry. To create a telemetry tile, select a device template and device instance, then select device-specific telemetry to display in the tile. The In-store analytics - checkout application template includes several telemetry tiles in the dashboard. The four tiles in the two checkout zones display telemetry from the simulated occupancy sensor. The People traffic tile shows counts in the two checkout zones.

In this section, you add two more telemetry tiles to show environmental telemetry from the RuuviTag sensors you added in the Create an in-store analytics application in Azure IoT Central tutorial.

To add tiles to display environmental data from the RuuviTag sensors:

  1. Select Edit.

  2. Select RuuviTag in the Device template list.

  3. Select a Device instance of one of the two RuuviTag sensors. In the example Contoso store, select Zone 1 Ruuvi to create a telemetry tile for Zone 1.

  4. Select Relative humidity and temperature in the Telemetry list. These are the telemetry items that display for each zone on the tile.

  5. Select Combine.

    Azure IoT Central add RuuviTag tile 1

    A new tile appears to display combined humidity and temperature telemetry for the selected sensor.

  6. Select Configure on the new tile for the RuuviTag sensor.

  7. Change the Title to Zone 1 environment.

  8. Select Update configuration.

  9. Repeat the previous steps to create a tile for the second sensor instance. Set the Title to Zone 2 environment and then select Update configuration.

  10. Drag the tile titled Zone 2 environment below the Thermostat firmware tile.

  11. Drag the tile titled Zone 1 environment below the People traffic tile.

  12. Select Save. The dashboard displays zone telemetry in the two new tiles.

    Azure IoT Central all RuuviTag tiles

To edit the People traffic tile to show telemetry for only two checkout zones:

  1. Select Edit.

  2. Select Configure on the People traffic tile.

  3. In Telemetry select count 1, count 2, and count 3.

  4. Select Update configuration. It clears the existing configuration on the tile.

  5. Select Configure again on the People traffic tile.

  6. In Telemetry select count 1, and count 2.

  7. Select Update configuration.

  8. Select Save. The updated dashboard displays counts for only your two checkout zones, which are based on the simulated occupancy sensor.

    Azure IoT Central people traffic two lanes

Add property tiles to display device details

Application operators use the dashboard to manage devices, and monitor status. Add a tile for each RuuviTag to enable operators to view the software version.

To add a property tile for each RuuviTag:

  1. Select Edit.

  2. Select RuuviTag in the Device template list.

  3. Select a Device instance of one of the two RuuviTag sensors. In the example Contoso store, select Zone 1 Ruuvi to create a telemetry tile for Zone 1.

  4. Select Properties > Software version.

  5. Select Combine.

  6. Select Configure on the newly created tile titled Software version.

  7. Change the Title to Ruuvi 1 software version.

  8. Select Update configuration.

  9. Drag the tile titled Ruuv 1 software version below the Zone 1 environment tile.

  10. Repeat the previous steps to create a software version property tile for the second RuuviTag.

  11. Select Save.

    Azure IoT Central RuuviTag property tiles

Add command tiles to run commands

Application operators also use the dashboard to manage devices by running commands. You can add command tiles to the dashboard that will execute predefined commands on a device. In this section, you add a command tile to enable operators to reboot the Rigado gateway.

To add a command tile to reboot the gateway:

  1. Select Edit.

  2. Select C500 in the Device template list. It is the template for the Rigado C500 gateway.

  3. Select the gateway instance in Device instance.

  4. Select Command > Reboot and drag it into the dashboard beside the store map.

  5. Select Save.

  6. View your completed Contoso dashboard.

    Azure IoT Central complete dashboard customization

  7. Optionally, select the Reboot tile to run the reboot command on your gateway.

Next steps

In this tutorial, you learned how to:

  • Change the dashboard name
  • Customize image tiles on the dashboard
  • Arrange tiles to modify the layout
  • Add telemetry tiles to display conditions
  • Add property tiles to display device details
  • Add command tiles to run commands

Now that you've customized the dashboard in your Azure IoT Central in-store analytics application, here is the suggested next step: