3 - Customize the Microsoft IoT Central operator's view

This tutorial shows you, as a builder, how to customize the operator's view of your application. When you make a change to the application as a builder, you can preview the operator's view in the Microsoft IoT Central application.

In this tutorial, you customize the application to display relevant information about the connected air conditioner device to an operator. Your customizations enable the operator to manage the air conditioner devices connected to the application.

In this tutorial, you learn how to:

  • Configure your device dashboard
  • Configure your device settings layout
  • Configure your device properties layout
  • Preview the device as an operator
  • Configure your default home page
  • Preview the default home page as an operator

Prerequisites

Before you begin, you should complete the two previous tutorials:

  1. Define a new device type in your Microsoft IoT Central application.
  2. Configure rules and actions for your device.

Configure your device dashboard

As a builder, you can define what information displays on a device dashboard. In the Define a new device type in your application tutorial, you added a line-chart and other information to the Connected Air Conditioner-1 dashboard.

  1. To view and modify the current Connected Air Conditioner-1 dashboard, you need to be in builder mode. To switch builder mode on, choose Builder Mode on the left navigation menu.

    Builder mode button

  2. To edit the Connected Air Conditioner device template, choose Explorer on the left navigation menu:

    Explorer page

  3. To start customizing your connected air conditioner device dashboard, select the Connected Air Conditioner (1.0.0) device template. Choose the Connected Air Conditioner-1 device you created in the Define a new device type in your application tutorial:

    Select the connected air conditioner device

    When you make a change to a device, such as Connected Air Conditioner-1, you make a change to the underlying template. For more information, see Create a new device template version.

  4. To edit the dashboard, choose Dashboard:

    Device template dashboard page

  5. To add a KPI tile to the dashboard, choose KPI:

    Add KPI

    To define the KPI, use the information in the following table:

    Setting Value
    Name Maximum temperature
    Measurement temperature
    Aggregation Maximum
    Time range Past 1 week
  6. Choose Save. You can now see the KPI tile on the dashboard:

    KPI tile

  7. To move or resize a tile on the dashboard, move the mouse pointer over the tile. You can drag the tile to a new location or resize it:

    Edit dashboard layout

Configure your settings layout

As a builder, you can also configure the operator's view of the device settings. An operator uses the device settings page to configure a device. For example, an operator uses the settings page to set the target temperature for the refrigerator.

  1. To edit the settings layout for your connected air conditioner, choose Settings:

    Settings page

  2. You can move and resize the settings tiles:

    Edit the settings layout

Note

In builder mode, you can't edit the values of the settings.

Configure your properties layout

In addition to the dashboard and settings, you can also configure the operator's view of the device properties. An operator uses the device properties page to manage device metadata. For example, an operator uses the properties page to view a device serial number or update contact details for the manufacturer.

  1. To edit the properties layout for your connected air conditioner, choose Properties:

    Properties page

  2. You can move and resize the properties fields:

    Edit the properties layout

Note

In builder mode, you can't edit the values of the properties.

Preview the connected air conditioner device as an operator

In builder mode, you can customize the dashboard, settings, and properties pages for an operator. If you switch builder mode off, you can view the application as an operator.

  1. To view your connected air conditioner device as an operator, you need to switch builder mode off. To switch builder mode off, choose Builder Mode on the left navigation menu.

    Switch builder mode off

  2. To update the serial number of this device, edit the value in the serial number tile and choose Save:

    Edit a property value

  3. To send a setting to your connected air conditioner, choose Settings, change a setting value in a tile, and choose Update:

    Send setting to device

    When the device acknowledges the new setting value, the setting shows as synced on the tile.

  4. As an operator, you can view the device dashboard as configured by the builder:

    Operator's view of the device dashboard

Configure the default home page

When a builder or operator signs in to a Microsoft IoT Central application, they see a home page. As a builder, you can configure the content of this home page to include the most useful and relevant content for an operator.

  1. To customize the default home page, switch builder mode on and then choose Home:

    Application Builder page

  2. To customize the home page, add tiles from the Library. Choose Link, and add details of your organization's web site. Then choose Save:

    Add link to home page

    Note

    You can also add links to pages within your Microsoft IoT Central application. For example, you could add a link to a device dashboard or settings page.

  3. Optionally, choose Image and upload an image to display on your home page. An image can have a URL that you navigate to when you click on it:

    Add image to home page

    To learn more, see How to prepare and upload images to your Microsoft IoT Central application.

Preview the default home page as an operator

To preview the home page as an operator, switch builder mode off in the left navigation menu:

Toggle builder mode

You can click on the link and image tiles to navigate to the URLs you set as a builder.

Next steps

In this tutorial, you learned how to customize the operator's view of the application.

  • Configure your device dashboard
  • Configure your device settings layout
  • Configure your device properties layout
  • Preview the device as an operator
  • Configure your default home page
  • Preview the default home page as an operator

Now that you have learned how to customize the operator's view of the application, the suggested next steps are to: