Device Management (Pro)

Step 1: Add the component

1. Create a web application. For more information, see Create a web application.

2. In the web application editor, click the component icon on the far left.

3. In the search box above the component list on the left, enter Device Management (Pro) and drag the component to the canvas.

   For more information about adding components, see Add a component.

   Note

   • If you are using this component for the first time, you must complete the service authorization in Step 2.
   • If you have already authorized this component, you can proceed to Step 3 to configure its styles.

   Select the added Device Management (Pro) component. The Authorize button and a refresh icon appear at the bottom of the properties panel on the right.

Step 2: Enable service authorization

In the Style panel on the right, click Authorize. The RAM console automatically creates a service-linked role to manage IoT devices. The details are as follows:

• Service name: studio-component.linkanalytics.aliyuncs.com
• Role name: AliyunServiceRoleForIoTStudioComponent
• Role permission policy name: AliyunServiceRolePolicyForIoTStudioComponent
• Permission description: Allows the Device Management (Pro) component to access your IoT cloud resources. This permission lets you query and manage IoT devices.

After service authorization is complete, the configuration items appear in the Style panel.

You can also delete the automatically created service-linked role based on your business requirements. After the role is deleted, you can no longer use this component.

For more information about service-linked roles, see Service-linked roles.

Step 3: Configure styles

1. Optional: In the Style panel on the right, click Device Management above the Global Style section.
   For more device information, see the Devices page in your project. In the component's Style panel, click the Device Management link to open the device management page in IoT Platform. This page displays device statistics (such as total, activated, and online counts) and lets you add devices.
2. Configure the component's display settings based on the following table.

   Parameter	Description
   Global Style	Set the global font and background color.
   Table Title	Specify whether to display the table title and configure its appearance.
   Device Status and Operations	Set the colors for device status indicators, the enable switch, action text, and various list checkboxes.
   Action Button	Set the background color, border color, and text color for action buttons in different states.
   Header Text	Set the background and text display effects for the table header.
   Content Text
   Row or Column Style	Set the display effects for rows or columns.
   Table Body Outer Border	Specify whether to display the outer border of the table and configure its appearance.
   Pagination	Specify whether to display the pagination control and configure its appearance. If you enable pagination, the number of rows per page can be set from 1 to 200. If pagination is disabled and the data exceeds the table's height, you can scroll to view all data. If you select the freeze first row checkbox, the table header remains fixed at the top during scrolling.
   Filter	Configure the filter items that are available for display and search at runtime (all items are selected by default). You can also set the corresponding text color, icon color, and background color.

3. Adjust the component's position on the page. For more information about general component style settings, see Configure styles.

(Optional) Preview and use

Click the Preview button in the upper-right corner of the page to debug the component.

You can perform the following tasks in preview mode or in the published application.

FAQ

Q: What should I do if the service authorization for the component fails?

Possible cause: You are logged in as a RAM user who does not have permission to create service-linked roles.

Solution: Log in with an Alibaba Cloud account or a user with administrative privileges, and then choose one of the following methods to authorize the component.

• Go to the current web application page and click Authorize to complete the authorization directly.
• Grant the current RAM user a custom permission policy that includes the CreateServiceLinkedRole action. Then, log in again as the RAM user to complete the component authorization.

  For more information, see Create a custom permission policy and Manage RAM user permissions.

  The content of the custom permission policy is as follows.

  {
      "Statement": [
          {
              "Effect": "Allow",
              "Action": "ram:CreateServiceLinkedRole", 
              "Resource": "*",
              "Condition": {
                  "StringEquals": {
                      "ram:ServiceName": "studio-component.linkanalytics.aliyuncs.com"
                  }
              }
          }
      ],
      "Version": "1"
  }