FormRender is a rendering engine that generates standard forms from JSON Schema, often used for custom build configuration interface generation
Such as have you want to pass a certain standard constraints automatically generated form configuration interface, this scenario is similar to build configuration form interface, can consider FormRender, such as the type scene: https://alibaba.github.io/form-render/#/docs/used
In the internal practice a year later, there are more than ten BU in use, in order to make the external can also be used, we in October this year to open source it to alibaba/form – render 🏄 🏄 🏄 : https://github.com/alibaba/form-render
Why do FormRender?
50% of the scenes in the middle and background are related to forms, and have high requirements for flexible configuration. In particular, the efficiency can be improved by delivering JSON configuration to generate form views
I have investigated relevant schemes inside and outside the group, and no scheme that supports Antd or Fusion system, meets JSON Schema protocol and can be used with simple configuration has been found yet
Train of thought
Based on this, the underlying engine uses pure native JS, analyzes JSON Schema configuration, supports rendering native HTML form, and uses UiSchema to configure Widget components. On this basis, the corresponding relationship between the upper-layer Antd or Fusion component Widget and Input Format can be handled well. Finally, the benefits of seamless access to other component systems can be achieved
The characteristics of
-
Support Ant Design and Fusion Design mainstream visual themes
-
Form configuration is described using the JSON Schema standard protocol with type-rich and extensible components
-
Support 1 row N, support object infinite nesting, custom regular check, custom style components, list drag and drop features
-
It has been used in multiple BU scenarios such as Feizhu, AGtech, Security Intelligence, Taobao, new retail industry workbench, artificial intelligence Lab, and Tmall, and can support complex scenarios
-
There are detailed documents on the use and special support for maintenance
How to use
/ / installation
npm i form-render -S
Copy the code
import React from "react";
import ReactDOM from "react-dom";
// Use Ant Design
import FormRender from "form-render/lib/antd";
// Use Fusion Design
// import "@alifd/next/dist/next.min.css";
// import FormRender from "form-render/lib/fusion";
// propsSchema uses a standard JSON Schema to describe form structures
const propSchema = {
type: "object",
properties: {
dateDemo: {
Title: "time ",
type: "string"
}
}
};
// uiSchema can enhance the richness of the display type, such as time component
const uiSchema = {
dateDemo: {
"ui:widget": "date"
}
};
class App extends React.Component {
constructor() {
super();
this.state = {
formData: {}
};
}
// Data change callback
onChange = value => {
this.setState({
formData: value
});
};
// Data format validation callback
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);
Copy the codeThe document is as follows
-
The document’s official website: https://alibaba.github.io/form-render/
-
Demo exploration: https://alibaba.github.io/form-render/docs/demo/index.html
-
Code Sandbox:https://codesandbox.io/s/form-renderjichudemo-8k1l5? fontsize=14
-
Common scenarios: https://alibaba.github.io/form-render/#/docs/used
-
Proptypes to Json Schema:https://alibaba.github.io/form-render/#/docs/proptypes
The “Form Render Open Source Community” group tag number: 23185578
The address of the project: https://github.com/alibaba/form-render
Recommend to you
Issue 1594. From form abstraction to form center
[Issue 1569] Design and practice of configuring page rendering systems
[Issue 1767] Continuous integration of micro program engineering in wechat