View [code example](#complete example)

Write a JSON page description and place it in `tables` In the directory, a set of interfaces for data list, data display and data editing can be realized.

In a similar way, it is also possible to describe the analytical chart interface (charts directory), the dashboard interface ( kanban directory) and data screen interface (screens directory).

For special pages, you can write HTML The page, placed in the ui directory, can be displayed as a stand-alone interface or embedded in the management system through an iframe.

The data table provides a set of RESTFul APIs, and the data management interface calls these APIs to realize functional interaction such as adding, deleting, modifying, and querying data forms.

The data table description file is a JSON text file named lowercase English letters <name>.tab.json

The data table document consists of basic table information, data model binding, business structure mapping table, field mapping table, filter mapping table, list page, edit page, batch insert page and detail page.

{
  "name": "Cloud Service Library",
  "version": "1.0.0",
  "bind": {},
  "apis": {},
  "columns": {},
  "filters": {},
  "list": {},
  "edit": {},
  "view": {},
  "insert": {}
}

{
  "name": "User",
  "title": "Trusted Cloud Cloud Service Library | Data Management",
  "decription": "trusted cloud cloud service library"
}

You can bind the data table to the data model by setting model and withs. After binding, the application engine will generate apis, columns and fliters configurations according to the data model definition. If you need special declarations, you can add special configuration information with the same key. You can also add fields in columns, fliters for rendering on each page.

{
  "bind": {
    "model": "service",
    "withs": {
      "manu": {
        "query": {
          "select": ["id", "name", "short_name", "status"]
        }
      },
      "kind": {
        "query": {
          "select": ["id", "name"]
        }
      }
    }
  }
}

The data table will provide interfaces such as adding, deleting, modifying and checking, and completing data management operations through these interfaces. For example, if the binding data model is set, the data management API will be automatically generated according to the model information. By setting the configuration information of the same key, the automatically generated API can be overwritten. The API input and output data structure must be consistent with the original interface.

{
  "apis": {
    "search": {
      "process": "models.service.Paginate",
      "guard": "bearer-jwt",
      "default": [
        {
          "withs": {
            "manu": {
              "query": {
                "select": ["id", "name", "short_name", "status"]
              }
            }
          }
        },
        null,
        15
      ]
    },
    "find": {
      "process": "models.service.Find",
      "default": [
        null,
        {
          "withs": {
            "manu": {
              "query": {
                "select": ["id", "name", "short_name", "status"]
              }
            }
          }
        }
      ]
    },
    "Management interface(key)": {
      "process": "process name",
      "guard": "-",
      "default": []
    }
  }
}

It is possible to set the presentation method of fields in list rendering (view), list editing (edit) and edit form (form). Fields can be added freely and can be used in the rendering settings of each page. For example, if the binding data model is set, the corresponding presentation is automatically generated according to the field name and field type of the data model, and the automatically generated presentation information can be overwritten by setting the configuration information of the same key. Field rendering mapping table, which can be read from the setting interface.

{
  "columns": {
    "name": {
      "label": "Service Name",
      "view": {
        "type": "label",
        "props": {
          "value": ":name"
        }
      },
      "edit": {
        "type": "input",
        "props": {
          "value": ":name"
        }
      },
      "form": {
        "type": "input",
        "props": {
          "value": ":name"
        }
      }
    },
    "manu.name": {
      "label": "Manufacturer name",
      "view": {
        "type": "label",
        "props": {
          "value": ":manu.name"
        }
      }
    },
    "Manufacturer": {
      "label": "Manufacturer",
      "view": {
        "name": "label",
        "props": {
          "value": ":manu.short_name"
        }
      },
      "edit": {
        "type": "select",
        "props": {
          "value": ":manu.id",
          "searchable": true,
          "remote": {
            "api": "/api/manu/get",
            "query": {
              "select": ["id", "name"],
              "keyword": "where_name_like"
            }
          }
        }
      }
    }
  }
}

You can add data query conditions to display by setting query filters. Query filters are freely added and can be used in listing page rendering settings. For example, if the binding data model is set, the corresponding configuration is automatically generated according to the data model index name and field information, and the automatically generated configuration information can be overwritten by setting the configuration information of the same key. Query filter mapping table, which can be read from the setting interface.

{
  "filters": {
    "Key words": {
      "label": "Keyword",
      "bind": "where.name.like",
      "input": {
        "type": "input",
        "props": {
          "placeholder": "Please enter a keyword"
        }
      }
    },
    "Manufacturer": {
      "label": "Manufacturer",
      "bind": "where.manu_id.in",
      "input": {
        "type": "select",
        "props": {
          "searchable": true,
          "multiple": true,
          "placeholder": "Please select the manufacturer",
          "remote": {
            "api": "/api/manu/get",
            "query": {
              "select": ["id", "name"],
              "keyword": "where.name.like",
              "limit": 500
            }
          }
        }
      }
    }
  }
}

.

{
  "list": {
    "primary": "id",
    "layout": {
      "columns": [
        { "name": "Service Name", "width": 6 },
        { "name": "Manufacturer", "width": 6 },
        { "name": "Service Type", "width": 4 }
      ],
      "filters": [
        { "name": "keyword", "width": 6 },
        { "name": "Manufacturer", "width": 6 }
      ]
    },
    "actions": {
      "create": {
        "type": "button",
        "props": {
          "label": "New Service"
        }
      },
      "view": {},
      "edit": {},
      "import": {},
      "update": {},
      "delete": {},
      "insert": {},
      "updateWhere": {},
      "deleteWhere": {},
      "updateSelect": {},
      "deleteSelect": {},
      "pagination": {
        "type": "",
        "props": {
          "pages": true,
          "prev": true,
          "next": true
        }
      },
      "setting": {}
    }
  }
}

{
  "edit": {
    "primary": "id",
    "layout": {
      "groups": [
        {
          "title": "Basic Information",
          "description": "",
          "columns": [
            { "name": "Service Name", "width": 6 },
            { "name": "Manufacturer", "width": 6 },
            { "name": "Service Type", "width": 6 },
            { "name": "state", "width": 6 },
            { "name": "rank", "width": 6 }
          ]
        },
        {
          "title": "Data Label",
          "description": "",
          "columns": ["Service Field", "Billing Method", "Industry Coverage"]
        }
      ]
    },
    "actions": {
      "cancel": {},
      "save": {
        "type": "button",
        "props": {
          "label": "Save"
        }
      },
      "delete": {}
    }
  }
}

Object Group data structure

Not implemented in this version

Not implemented in this version

{
  "type": "select",
  "props": {
    "value": "{{manu_id}}",
    "searchable": true,
    "remote": {
      "api": "/api/manu/get",
      "query": {
        "select": ["id", "name"],
        "keyword": "where.name.like"
      }
    }
  }
}

Using variables in properties (props)

CanIn properties (props), you can use {{field name}} or :field name to refer to the current record data, support using . to access Object or Array type data, such as {{ field name.foo.bar}}, {{fieldname.0.foo}}, :fieldname.foo.bar, :fieldname.0.foo

{
  "edit": {
    "primary": "id",
    "layout": {
      "groups": [
        {
          "title": "Data Label",
          "description": "",
          "columns": ["Service Field", "Billing Method", "Industry Coverage"]
        }
      ]
    },
    "actions": {
      "cancel": {},
      "save": {
        "type": "button",
        "props": {
          "label": "Save"
        }
      },
      "delete": {}
    }
  }
}

Table API input and output data can be processed using Hooks. Hooks are divided into two categories: before and after. Before hook, which runs before the API call, can be used to process incoming parameters, and after hook, which runs after the API call and can be used to process query results.

When describing the data table, in the hooks field, declare the handler associated with the Hook, for example:

{
  "name": "Category",
  "version": "1.0.0",
  "decription": "Category",
  "bind": { "model": "category" },
  "hooks": {
    "before:find": "flows.hooks.before_find",
    "after:find": "flows.hooks.after_find",
    "before:search": "flows.hooks.before_search",
    "after:search": "flows.hooks.after_search",
    "before:save": "flows.hooks.before_save",
    "after:save": "flows.hooks.after_save"
  },
  "apis": {},
  "columns": {}
}