Configuration Guide for Studio

Last Updated on : 2020-06-19 06:22:45download

How to DIY UI panel?

Let us take the air purifier as an example to see how to DIY the UI panel you want based on our official template. Configuration Guide for Studio

Choose “official templates”

Tuya IoT platform offers many official templates for customers to choose from.You can find them in the second step (App Panel Design) when creating product in Tuya IoT platform.

  • If you do not have specific requirements on UI panel, you can directly use our existing templates without additional adjustment and configuration.

  • If you have customized requirement or the official templates do not meet your needs, you can choose an existing template, click “edit” and go to panel studio for more configuration. Configuration Guide for Studio


All the official templates can be configured and customized, which means that you can change the styles, colors, icons, characters, sequences etc as you like based on the current templates via panel studio.

Open panel studio editor

Choose one template that you want to use and click “edit”, enter panel studio to begin to DIY (After you enter the panel editor, you will see a function list in the left. These are the function dps of this PID).

In this page, you can use all the capabilities that the studio offers to DIY your panel. For example, draft the visual components on the left side to the panel canvas and select “Style”, “Attribute” to do configuration as you like. Configuration Guide for Studio


  1. When you are configuring the panel, you can click “preview”on the upper right corner in the studio and experience real-time change in you app.
  2. You can control the actual device using your DIY panel if you choose “real device preview”.

DIY your panel based on specific requirements

List all your panel customization requirements and start to configure.

  • 【Adjust Style】The brand color of our products is blue, so I want to highlight our brand color in the panel.

  • 【Adjust the order of functions】Align switch, wind speed, mode and child lock in a horizontal row instead of a vertical row.

  • 【Link Style】 Enable different modes to show diverse icons and texts.

  • 【Configure Overall rule】When a certain mode is activated, wind speed and child safety lock are disabled.

  • 【Set Up Cloud Function】Support certain functions to set timer; Allow users to directly go to app mall via link in app

Adjust Style

【Requirement】 The brand color of our products is blue, so I want to highlight our brand color in the panel.

  • Step 1:If you want blue as your theme color, please select color blue in "Theme Color" or you can directly enter the color value in the columns. Configuration Guide for Studio
  • Step 2: If you also want to change the font color and theme photo, you can select the animation component, choose photo in "default gallery" to replace the current one or upload photo to “my gallery” and use your own photo instead.

Adjust the Orders of Function

【Requirement】I want to align switch, wind speed, mode, child lock in one horizontal row.

  • Step 1:Select "switch" in “Function” in the left and drag its icon to the panel canvas. Configuration Guide for Studio

  • Step 2: Select component "Switch" and click “Add configuration” in “Attribute” to add three function buttons. (Click “Add configuration” for three times) Configuration Guide for Studio

  • Step 3:Choose any button, click “Set function or link”, select the functions you want to add from pop-up window (in this example, you need to choose “wind speed”, “mode” and “child lock” ) and then also select "icon" that you want to use in [Attribute]. Configuration Guide for Studio

  • Step 4: Remove the original "switch/ mode/ wind speed/ child lock" that you do not want from panel canvas. The effect is as follows: Configuration Guide for Studio


If you want to configure more about font colors, icons size, component backgrounds etc, you can try it out in “Style”.

Link Styles

【Requirement】When choosing different mode, the buttons can correspondingly show diverse icons and texts.

  • Step 1: Select "Mode" and find its configuration box in “Attribute”. Click “Style Linking”- “Add rule” and start to configure rules. Configuration Guide for Studio

  • Step 2: When configuring the rules, please use the logic "if...then...".  Here is an example: If "mode" is "automatic", then apply the automate icon and use "automatic" in "text" . Configuration Guide for Studio

  • Step 3: You can see in the pictures below that with different kinds of modes, the icons, texts also change. Configuration Guide for Studio

Overall Function Rules

【Requirements】When certain mode is activated, the wind speed and children lock are disabled.

  • Step 1: Click “Overall Rule” in the top of panel studio, choose “Add rule”, set up your rule and save it. Configuration Guide for Studio

Cloud Function: Timer

【Requirement】Allow certain functions to set timer. Configuration Guide for Studio

Cloud Function:Link

【Requirement】Through the link, app user can directly turn to other pages such as App Mall.
Configuration Guide for Studio

Panel Release

Greyscale Release

After the panel is configured, click “Release” to start greyscale release ( If you accidentally exit during greyscale release, you can return to the page by clicking IoT platform > Product Management > Choose the product that you are configuring > go to second step of configuration (App panel) > Edit ) Configuration Guide for Studio

  • Release content:Please make sure it is easy to understand so that it can be easily memorized and recognized.
  • Panel test account: You can only test the panel after you enter your account. It supports email address and mobile phone account. (Email address format is and phone number format is 86-xxx)


  • The purpose of grayscale release: After the panel is designed and configured, you can generate a test panel via greyscale release, which can be used to test the overall functions and app interaction (After the greyscale panel is released, current app users will not be affected.)

  • After the greyscale release is successful, you can share the QR code to your team member to test. Please use Tuya Smart to scan QR code.

  • The team members who want to test the UI panel need to register a Tuya Smart account first and the account needs to be added as a panel test account.

  • You can scan QR code to experience the panel via “visual device experience” and “actual device experience” (Tips: You can control actual device through the panel.)

  • If the QR code becomes invalid, you can click “release”and select “scan QR code to test” to scan the code again.

Official Release

After the greyscale relase is successful and the test is passed,you can click “release” to officially release the panel. The panel will be directly applied to the current product after it is officially released and the page will turn to “IoT Product - App panel”. You can see your DIY panel in your app. Configuration Guide for Studio

Your advice
Feedback effective questions, more chances to winsandwich development board and other small gifts
Your advice
Feedback effective questions, more chances to winsandwich development board and other small gifts