FormMaker
Preparation
Work with mongoose model. On your api, create a route 'metadata' for a given model :
// First of all, import the moduleconst path = const Metadata = // Load ModelsMetadata // Let's use a model pet// We need to use the meta middleware : Metadata.meta('<modelName>')app
Disabled fields
By default not all kind of field will be displayed on client side. Here is the list of disabled fields :
- __v
- _id
- created_at
- updated_at
So, for those fields, you would not get a form input client side.
Model Options
In the mongoose model :
let petSchema = name : type: String required: true placeholder: "Name of the animal" kind : type: String enum: 'Lion' 'Cat' 'Dog' 'Rabbit' 'Bird' 'Duck' placeholder: "Type of animal" // Placeholder description : type: String placeholder: "Enter the description" forceField: "textarea" // Force generation of a textarea instead of a input type text weight : type: Number vaccined : type: Boolean created_at : type: Date default: Datenow updated_at : type: Date moduleexports = mongoose
List of field types
- Text
// In mongoose modellet petSchema = name : type: String required: true placeholder: "Nom de l'animal"
- Numeric
// In mongoose modellet petSchema = weight : type: Number
- type: Boolean, checkbox
// In mongoose modellet petSchema = weight : type: Number
- Enum : displays select input as default
// In mongoose modellet petSchema = kind : type: String enum: 'Lion' 'Cat' 'Dog' 'Rabbit' 'Bird' 'Duck' placeholder: "Type"
- Textarea
// In mongoose modellet petSchema = description : type: String forceField: "textarea"
- Radio
// In mongoose modellet petSchema = kind : type: String enum: 'Lion' 'Cat' 'Dog' 'Rabbit' 'Bird' 'Duck' placeholder: "Type" forceField: "radio"
- Foreign Key
Create multiple forms
// First of all, import the moduleconst Metadata = // Add meta fields// Here, we disabled kind and vaccined fieldsapp // Edit meta fields// Here, we disabled name fieldapp
Views
That's it for the API.
Now on the client side react project :
Add Form
// Now in the render {return <FormMaker title="Add a Pet" metaUrl="http://server/pets/metadata" onSubmit= { console } onCancel= { console } />} // Now you can handle each action submit and cancel by binding your callback here
Edit Form
// Now in the render// We just have to set values and data, will be matched automatically {return <FormMaker title="Add a Pet" metaUrl="http://server/pets/metadata" values= name: "Toto" vaccined: true kind: "Cat" onSubmit= { console } onCancel= { console } />}
Customize style
Each element got a customizable Css style or caption, look in www/src/Forms/formStyles
, by default we use Bootstrap 4 classes.