阿里开源跨组件体系的表单渲染引擎——form-render

介绍

form-render是阿里开源的跨组件体系的表单渲染引擎 – 通过 JSON Schema 快速生成自定义表单配置界面,常用于自定义搭建配置界面生成。

  • 支持 Ant Design 和 Fusion Design 主流的视觉主题
  • 使用 JSON Schema 标准协议描述表单配置,并搭配丰富类型且可扩展的组件
  • 支持 1 排 N、横纵排、支持对象无限嵌套、自定义正则校验、自定义样式组件、列表拖拽等特性
  • 已在淘宝、天猫、飞猪、亚博科技、安全智能、新零售行业工作台、人工智能实验室、安全智能部门等多 BU 多场景使用,简单使用同时支持复杂场景使用
  • 使用上有详细文档,维护上有专人支持

  • 阿里开源跨组件体系的表单渲染引擎——form-render


    Github

    https://alibaba.github.io/form-render/#/

    安装

    npm i form-render -S
    import React from "react";
    import ReactDOM from "react-dom";
    // 使用 Ant Design 体系
    import FormRender from "form-render/lib/antd";

    // 使用 Fusion Design 体系
    // import "@alifd/next/dist/next.min.css";
    // import FormRender from "form-render/lib/fusion";

    // propsSchema 使用标准的 JSON Schema 来描述表单结构
    const propSchema = {
    type: "object",
    properties: {
    dateDemo: {
    title: "时间",
    type: "string"
    }
    }
    };

    // uiSchema 可以增强展示类型的丰富性,如时间组件
    const uiSchema = {
    dateDemo: {
    "ui:widget": "date"
    }
    };

    class App extends React.Component {
    constructor() {
    super();
    this.state = {
    formData: {}
    };
    }

    // 数据变化回调
    onChange = value => {
    this.setState({
    formData: value
    });
    };

    // 数据格式校验回调
    onValidate = list => {
    console.log(list);
    };

    render() {
    const { formData } = this.state;
    return (
    <FormRender
    propsSchema={propSchema}
    uiSchema={uiSchema}
    formData={formData}
    onChange={this.onChange}
    onValidate={this.onValidate}
    />
    );
    }
    }
    const rootElement = document.getElementById("root");
    ReactDOM.render(<App />, rootElement);

    文档API

    • 常用API
    阿里开源跨组件体系的表单渲染引擎——form-render

    • 不常用API
    阿里开源跨组件体系的表单渲染引擎——form-render

    form-render原理

    FormRender 底层引擎用原生 JS 来实现,通过解析 JSON Schema 配置,并支持渲染原生的 HTML 表单,通过 UiSchema 来配置 Widget 组件,在此基础上处理好上层 Ant Design 或 Fusion 组件 Widget 和 Input Format 的对应关系,最后还可以做到无缝接入其他组件体系的好处


    阿里开源跨组件体系的表单渲染引擎——form-render


    使用场景

    1. 规范化表单视图的快速生成:写好对应的参数配置,快速生成一个标准表单,省去了使用类 Ant Design 表单的麻烦地方


    阿里开源跨组件体系的表单渲染引擎——form-render


    2.可视化配置界面生成:并可以从代码层面自动生成 JSON Schema,来完成整体流程的打通


    阿里开源跨组件体系的表单渲染引擎——form-render


    3.服务能力配置界面生成:常用于后台字段系统中,接口同学通过吐 JSON Schema 字段给前端界面,渲染出他所想要的界面以及获取用户的输入进行提交给后端,可以起到无需发布就可无缝扩展各种类型的作用


    阿里开源跨组件体系的表单渲染引擎——form-render


    4.作为配置输入和搭建系统配合使用:FormRender 在正常展示的情况下,可以很简单的进行和原主题的适配使用


    阿里开源跨组件体系的表单渲染引擎——form-render

    阿里开源跨组件体系的表单渲染引擎——form-render


    总结

    介绍这样一个表单渲染引擎,是因为目前有很多地方需要用到自定义表单,如果配合上拖拽界面,即可实现一个自定义的智能表单,底层的渲染交给form-render即可,如果你想用它来做一些有意思的东西,不妨尝试一番!

    人已赞赏
    技术博文

    Postman的免费,快速,美观的替代方案——Postwoman

    2020-8-2 8:00:31

    技术博文

    界面美观功能强大,终于可以告别单调的swagger ui了——knife4j

    2020-8-4 18:00:23

    个人中心
    购物车
    优惠劵
    今日签到
    有新私信 私信列表
    搜索