Core features

• Automatic forms generation
• Fields capable of rendering every schema
• Similarly to other form packages, uniforms can help you with rendering a form, by taking care of its state management, validation, and submission. What makes it unique though, is the ability to completely generate the form for you, without having to manually provide its field

In order to do so, nexweave autoform require you to do follwing things:

• Provide the schema of your data. You can approach the schema as a formal description of the data, where you define its types, allowed values, default values, required ones and so on.

Basic Schema Usage

Start by defining a schema

export const schema = {
  title: 'My Widget',
  type: 'object',
  properties: {
    backgroundColor: { type: 'string' },
    font:{
      type: "string",
      span: 24,
      ishidden: false,
      instanceOf: "typography",
      uniforms: {
          allowedFields: ["fontFamily", "fontWeight", "fontSize", "letterSpacing", "align", "color", "fontStyle", "textDecoration"]
      },
  }
  },
  required: ['firstName', 'lastName'],
};

As you can see, we've defined three properties - backgroundColor and  font, that are of string and backgroundColor, which is an instance of typograpy.

Once the schema is defied, Nexweave widget development kit will automatically pick the schema and render form accordingly.

Your widget will receive the data as per the properties field defined. So for our example the widget will receive interaction props which have the data property containing all the data defined under schema .

interactions : {
	data : {
		backgroundColod : "#FFFFFF",
		font: {
			fontFamily: "Montserrat",
      fontSize: 3.5,
      color: "#000",
      align: "left",
      direction: "ltr",
      lineHeight: 0,
      fontWeight: 700,
      fontStyle: "normal",
      letterSpacing: 5,
      textDecoration: "none"
		}
	}
}

Now you're free to do whatever you want inside your widget component with this data 🙌🏻