IFREEQ Docs
  • Introduction
  • Update Log
  • General Knowledge
    • About IoT
    • Electricity
      • Plug & socket types around the world
        • Power plug & outlet Types A & B
        • Power plug & outlet Type C
        • Power plug & outlet Type D
        • Power plug & outlet Type E
        • Power plug & outlet Type F (Schuko)
        • Power plug & outlet Type G
        • Power plug & outlet Type H
        • Power plug & outlet Type I
        • Power plug & outlet Type J
        • Power plug & outlet Type K
        • Power plug & outlet Type L
        • Power plug & outlet Type M
        • Power plug & outlet Type N
        • Power plug & outlet Type O
      • Full list: Plug, socket & voltage by country
      • Map showing the spread of the different plug types worldwide
      • Useful information for travellers
      • History of domestic electricity
        • Why isn’t there a universal standard electric plug?
        • Why isn’t there a standard voltage around the world?
      • Three-phase electric power (industrial applications only)
    • Certifications
    • Home Automation Brand
    • Home Automation Catalog
    • Industry Term
    • Network Term
    • The Third-party Control
      • AliGenie
      • Amazon Alexa
        • FAQs About Amazon Alexa
      • DuerOS
        • FAQs About DuerOS
      • Google Assistant
        • FAQs About Google Assistant
      • Home Assistant
        • FAQs About Home Assistant
      • HomeKit
        • FAQs About Homekit
      • IFTTT
      • Xiao AI
      • Yandex Alice
        • FAQs About Yandex Alice
  • Developer
    • Introduction
      • What is Tuya Smart?
      • What does Tuya do?
      • Tuya Smart Cloud Platform Overview
      • Advantages
      • Terms
      • Limits
    • Quick Start
    • Configure in Platform
      • Create Products
      • Function Definition
        • Overview
        • Standard Functions
        • Custom Functions
        • Cloud Functions
      • Design App UI
      • Configure Hardware
      • Cloud Configuration
        • Introduction
        • Upgrade Firmwares
        • Set up Multilingual UI
        • Manage Alarms
        • Configure Network for Devices
        • Enable Toggles on App
        • Automate the Smart Devices
      • Mass Production
    • Device Development
      • Access Mode MCU
        • MCU Access Guide
        • Wi-Fi General Solution
          • Wi-Fi Module MCU Development Overview
          • Hardware Design Reference Wi-Fi
          • Software Reference Wi-Fi
            • Tuya Cloud Universal Serial Port Access Protocol
            • Overview of migrating Tuya's MCU SDK
        • Wi-Fi Power Off Fast Connect Device Solution
          • Overview
        • Zigbee General Solution
          • Overview
          • Software development
            • Tuya Zigbee module UART communication protocol
          • Hardware Design
        • BLE General Solution
          • BLE Module MCU Development Overview
          • BLE Hardware Design
        • NB-IoT General Solution
          • NB-IoT Development Guide
          • Introduction to NB Module - NM1
      • Access Mode SoC
        • SoC Development Overview
        • Lighting
          • Guidance
          • Design
          • Test
        • Electrician
          • Guidance
          • Design
          • Test
      • Access Mode Link
        • Wi-Fi Chip SDK
          • Tuya Wi-Fi SDK Reference
          • Development Environment Setup When Using Tuya Wi-Fi SDK
        • BLE Chip SDK
          • TUYA BLE SDK User Guide
        • Zigbee Chip SDK
          • TUYA Zigbee SDK Document
      • Cloud Mode
        • Wi-Fi&BT Dual Mode Module
        • Wi-Fi Module
        • Bluetooth Module
        • Zigbee Module
        • Sub-G Module
      • Tuya Development Boards
      • Access Mode Simmulator
        • Module Debugging Assistant Instruction
      • Embedded License
        • Embedded open source license
    • Smart Product Solution
      • Gateway
        • MCU Access
        • Link SDK Access
        • PCB Details
      • HouseHold
        • Cleaner Robot
        • Air Conditioner
      • IPC
      • Lock
        • BLE Lock
        • Wi-Fi Lock
        • Zigbee Lock
      • Remote Control
      • Voice Product
        • Domestic Voice Speaker Solution
        • Domestic Voice Infrared SoC Solution
        • Overseas Voice Solution
        • Design Reference Materials - Alexa Module
        • Design Reference Materials - Domestic Voice Module
    • Firmware
      • S8E
  • FAQs
    • Device Development
      • Cloud Module
        • Wi-Fi Module
        • Zigbee Module
        • BLE Module
        • GPRS Module
        • NB-IoT Module
        • Dual-mode Module
        • Other Module Issues
      • Access Mode SoC
      • MCU Access Mode
        • Wi-Fi General Solution
        • Zigbee General Solution
        • BLE General Solution
          • BLE Single-point Solution
          • BLE Mesh General Solution
          • Other Issues of BLE Solution
        • NB-IoT General Solution
        • Other Issues of MCU Access Mode
      • Module SDK Development
        • BLE Chip SDK(single point)
        • Linux General SDK
        • NB-IoT Chip SDK
        • Wi-Fi Chip SDK
        • Others about Module SDK
      • Other Issues of Device Development
    • Smart Product Solution
      • Electrical
        • Outlet
        • Scenario Switch
        • Switch
      • Lighting
        • Wi-Fi Lighting
        • Zigbee Lighting
        • Bluetooth Lighting
        • Other Issues of Lighting
      • Lock
        • BLE Lock
        • NB-IoT Lock
        • Wi-Fi Lock
        • Zigbee Lock
        • Other Issues of Lock
      • Sensor
      • Gateway
        • BLE Gateway
        • Wireless Gateway
        • Zigbee Gateway
        • Other Issues of Gateway
      • IPC
      • Infrared Products
        • Infrared remote control
        • Infrared Capability Introduction
        • Infrared Code Library
      • Sweeper
      • Household Appliances
      • Pet Supplier
      • BLE Mesh Typical Solution
        • BLE Mesh Lighting Solution
        • BLE Mesh Electrical Solution
        • BLE Mesh Sensor Solution
        • BLE Mesh General Solution
    • Products
      • Electric
        • Smart Switch
        • Smart Plug
        • Curtain Controller
      • Lighting
      • Security
        • E202/203 Smart Lock
    • More
  • Links
    • ifreeq.cn
    • ifreeq.com
    • AIoT Expo
    • Official Store
Powered by GitBook
On this page
  • Fixed templates
  • Custom templates
  • Code-free UI creation templates
  • How do I use a code-free UI creation template?
  • Development and debugging templates

Was this helpful?

  1. Developer
  2. Configure in Platform

Design App UI

PreviousCloud FunctionsNextConfigure Hardware

Last updated 4 years ago

Was this helpful?

Tuya provides different UI templates for the App control panel, including fixed, custom, code-free UI creation, and development and debugging templates.

During product creation, you can select an App UI template and edit the template on the App UI Design page. Each template supports different configurations. For details, see the template description or scan the QR code by using the Tuya Smart App to experience each of them on your mobile phone. Then, determine which template is suitable for your product.

If you want to use another template, click Change. Other supported UI templates are displayed. Select a UI template and click Ok. To try the template, use the Tuya Smart App to scan the QR code.

Tuya provides the following types of UI templates:

  • Fixed templates

  • Custom templates

  • Code-free UI creation templates

  • Development and debugging templates

Fixed templates

Different types of templates are provided for different products. Based on configuration of standard functions (enabled or disabled), fixed templates can produce different function display patterns on App UIs.

Select a template suitable for your product after reading the template description and trying templates on your mobile phone. If any functions are not displayed, verify or replace the template.

Custom templates

After selecting a custom template, you can click Edit to customize UI elements, such as the background, theme color, and font color, and click Save.

Code-free UI creation templates

By using a code-free UI creation template, you can freely configure App UIs. You can select module shapes, icons, and background images for different data points (DPs), drag and sort DPs, and change the UI style.

After selecting a code-free UI creation template, you can click Edit to enter the UI configuration page.

How do I use a code-free UI creation template?

A shaped module is configured for each product function. Currently, Tuya provides large, medium, and small module styles, which can be automatically adopted to function types by the system. Command delivery and reporting vary by function.

  • Background selection: The background affects the overall tone of App UIs.

  • Switch setting: You can set a Boolean type DP as a switch. The switch is used as the product's main switch and is displayed in the lower part of the UI. This function is optional.

  • Style setting and sorting of DPs: Styles and sorting of DPs can be customized. Currently, large, medium, and small modules are provided for DPs.

  • Large module: You can change the background image and icon.

  • Medium module: You can change the icon.

  • Small module: You can change the icon.

After editing a code-free UI creation template, you need to save the settings and scan the QR code to view the effect.

Development and debugging templates

When you use a development and debugging template, you can view communication logs. After you select a development and debugging template, click Next to enter the Hardware Debug page.

Click Virtual Device Debugging Test and use the Tuya Smart App to scan the QR code to perform online debugging.

On the virtual panel page, you can view communication logs. When your product is being debugged, you can use a development and debugging template for testing. A development and debugging template allows you to display all product functions and function types. However, it is not recommended to release the template to users.

Design App UI
Design App UI
Design App UI