YAO abstracts common function modules into widgets, describes differences through YAO DSL, and quickly replicates various functions. During development, if you develop a similar function module, you need to copy and paste the existing functions and replace the differences in batches.

YAO has a built-in set of Widgets covering most of the common functions of application development.

Widget supports customization. When the service starts, the application engine parses it into a set of API interfaces and a set of handlers according to the widget logic. This article describes how to use JavaScript scripts to add widgets.

Related tutorials: [Use YAO Widget to build a cloud table] (../Tutorial/Use YAO Widget To Create A Cloud Table)

Design the DSL structure according to the business logic features. In this example, the differences between different tables are table fields, searchers, and table names.

Example:

{
  "name": "TEST",
  "decription": "A TEST DYFORM",
  "columns": [
    {
      "title": "First Name",
      "name": "name",
      "type": "input",
      "search": true,
      "props": {
        "placeholder": "Please input your first name"
      }
    },
    {
      "title": "Amount",
      "name": "amount",
      "type": "input",
      "search": true,
      "props": {
        "placeholder": "Please input amount"
      }
    },
    {
      "title": "Description",
      "name": "desc",
      "type": "textArea",
      "props": {
        "placeholder": "Please input Description"
      }
    }
  ]
}

Take dyform as an example to create a widget:

cd /your/project/root
mkdir -p widgets/dyform

# create widget file
touch widgets/dyform/widget.json # Widget basic information
touch widgets/dyform/compile.js # dyform DSL compiler
touch widgets/dyform/process.js # dyform handler
touch widgets/dyform/export.js # dyform exports built-in widget definitions

Tip: YAO custom widgets are placed in the widgets directory, which needs to be created manually.

Use an editor to open dyform/widget.json and fill in the basic information of the dyform widget

{
  "label": "Dynamic Form",
  "description": "A form widget. users can design forms online",
  "version": "0.1.0",
  "root": "dyforms",
  "extension": ".form.json",
  "modules": ["Models", "Tables"]
}

Field Description:

Write dyform/process.js script, implement Model, Table process, convert custom DSL into YAO data model widget and table widget.

Write the Export function, declare the process to be exported, View source

function Export() {
  return { Model: "Model", Table: "Table" };
}

Implement Model & Table process logic

Tip: It is recommended to use the yao run command to debug the process, refer to the source code comment documentation.

Write dyform/export.js script, implement Models, Tables functions, export as YAO model & table widgets.

In the dyforms folder, add the xxx.form.json file and write the dyform DSL description file to quickly create a set of form management modules, form APIs, form processes and model processes.

Use the yao migrate command to create the data table structure, the yao start command to start the service, and log in to the management interface to use the table management function. Routing address: http://127.0.0.1:5099/xiang/table/dyform.xxx