Configure basic information and the device panel-Link Living-阿里云帮助中心

The IoT Platform provides a workbench for you to develop device panels. A well-designed app panel that matches your product's features can greatly improve the end-user experience.

Prerequisites

You have created a product in the console. For more information, see Create a product.

You have configured an app on the Human-Computer Interaction page. For more information, see Human-computer interaction overview.

Background information

The platform supports the following methods for configuring a device panel for your app:

For common product categories, such as lights, switches, and sockets, you can use the panel templates provided by the platform.
You can customize the interface by dragging and dropping functional controls in the device interface workbench.
You can upload a custom panel. Develop a panel using the device panel software development kit (SDK), and then upload it according to the specifications. For more information, see How to upload a custom panel.

Note

Currently, only the Cloud Intelligence App and Tmall Genie App support custom panel uploads. Proprietary apps do not support this feature.

Log on to the IoT Platform console.
Choose Basic Configuration > Device Panel.
Click Select Panel or Change Panel.
- When you open the Device Panel page for the first time, click Select Panel. The following figure shows an example.
- For a product that already has a panel, click Change Panel. The following figure shows an example.
Click Create Panel and select Blank Panel or New from Template from the drop-down list.
- Select Blank Panel
  If no panel templates are available for the product category, or if the existing templates are not suitable, click Blank Panel to go to the panel editor and generate a panel by dragging and dropping controls.
  Custom panels are highly flexible and are not limited by the functional definitions of a device. The drag-and-drop method simplifies development. For more information, see the App Panel Development tutorials.
- Select New from Template
  If panel templates are available for the product category, click New from Template to use an existing template.
  For example, the following figure shows the panel templates that the platform provides for the light category.
(Optional) If the selected panel template is not suitable or does not match your product's features, click Edit Panel to modify the current panel. For more information, see the Best Practices documentation for the relevant product category.

Note
If the theme panel is empty, this may be because no theme panels are configured for this category. Contact business or technical support to add one. Alternatively, you can use theme panels from other categories as a reference and click Blank Panel to create a custom panel.
(Optional) If you still cannot find a suitable panel, click Upload Custom Panel to upload a custom panel that you developed.

You can upload custom-developed panels that meet the platform's specifications. After a panel is uploaded, it must be reviewed and approved by the platform before it can be used. For more information, see How to upload a custom panel.
After you configure the panel for the product, you can use different apps to scan a QR code and preview the product interface.
- Preview the device panel using the Tmall Genie App
  After you configure the panel for the product, go to the Panel Preview/Debug page and select Tmall Genie App. Click Log on to Taobao Account, and then use the Tmall Genie App to scan the QR code under For Preview Interface to preview the product interface.
- Preview the device panel using the Cloud Intelligence App or a proprietary app
  Go to the Panel Preview/Debug page and select Cloud Intelligence & Proprietary App. Use the Cloud Intelligence App or your proprietary app to scan the QR code under For Preview Interface to preview the product interface.

Call a configured panel from a proprietary app

To call a configured panel from your proprietary app, you must first integrate the panel plugin by completing the following steps.

Go to Human-Computer Interaction. In the Select Interaction Terminal section, hover over Controllable with Proprietary App. In the dialog box that appears for your proprietary app, click Configure.
(Optional) If you have not created a proprietary app in the current project, click Create in the Select Interaction Terminal section. For more information, see Create a proprietary app.
On the Associated Products page of your proprietary app, turn on the switch for the product. For more information, see Set associated products.
On the SDK and Plugins page of your proprietary app, select the Plugins tab. Click Generate Code for the Device Panel.
In the dialog box that appears, click Copy and paste the code into your proprietary app project.
For more information about how to integrate the panel plugin, see Plugin usage guide.