UI模板

模板是来描述UI的JSON数据，业务开发在开发前端页面之前，首先要配置好界面模板。

1. 模板加载方法

平台提供了createUIDom用于加载界面模板、按钮、上下文信息context等JSON数据 使用createPage包装过的业务组件，可以通过props.createUIDom 方法加载到模板数据，示例代码如下：

import React, { Component } from 'react';
import { createPage } from 'nc-lightapp-front';
class Order extends Component {
    constructor(props) {
        super(props);
        this.initMeta()
    }
    initMeta = () => {
        this.props.createUIDom({
            pagecode: "452000504A_list" //页面编码
        },(data)=>{
            if(data){
                if(data.template){ //模板数据
                    props.meta.setMeta(data.template)
                }
                if(data.button){ //按钮数据
                    props.button.setButtons(data.button)
                }
                //context数据： data.context  
            }
        })
    }
    render(){
         return (
             //界面视图
         )
    }
    createPage({})(Order);
}

2.模板与应用组件关系

模板每个区域对应一个UI组件 如：表单类型的区域，对应Form应用组件(组件使用文档链接)；表格类型的区域，对应Table应用组件
如下图：

模板每个区域与应用组件之间，通过区域编码对应。 应用组件渲染时，根据业务组传的区域编码参数，取到模板上对该区域的描述数据，进行组件渲染。

3.区域属性描述

模板目前支持三种类型的区域：表单、表格、查询区 描述区域的属性如下表：

4.字段属性描述

区域中 items 为数组结构，每一个元素，对应区域每个字段。 区域中每个字段的属性说明如下：

控件类型 itemtype 说明

目前支持的控件类型有 10 种，类型说明如下表