Questions: Form Fields linking to Entities/Objects, Lookup Tables, and Styling.

[learner291]

I would like to use formBuilder and renderer but have some questions, can someone please answer them?

I have created a small form on form builder website, json produced is as follows:

[
  {
    "type": "text",
    "required": false,
    "label": "Forename",
    "className": "form-control",
    "name": "text-1580340240351",
    "access": false,
    "subtype": "text"
  },
  {
    "type": "text",
    "required": false,
    "label": "Surname",
    "className": "form-control",
    "name": "text-1580340272602",
    "access": false,
    "subtype": "text"
  },
  {
    "type": "date",
    "required": false,
    "label": "Date of Birth",
    "className": "form-control",
    "name": "date-1580340280389",
    "access": false
  },
  {
    "type": "select",
    "required": false,
    "label": "Gender",
    "className": "form-control",
    "name": "select-1580340283528",
    "access": false,
    "multiple": false,
    "values": [
      {
        "label": "Male",
        "value": "1",
        "selected": true
      },
      {
        "label": "Female",
        "value": "2"
      },
      {
        "label": "Other",
        "value": "3"
      }
    ]
  },
  {
    "type": "text",
    "required": false,
    "label": "Street",
    "className": "form-control",
    "name": "text-1580340297905",
    "access": false,
    "subtype": "text"
  },
  {
    "type": "text",
    "required": false,
    "label": "City",
    "className": "form-control",
    "name": "text-1580340301250",
    "access": true,
    "subtype": "text"
  }
]

1. I am using Asp.net Core MVC and I have models: client and address. Is it possible to create a form in such away so that when I send UserData (inputs by users into each field) using ajax, it sends following json. I know I will need to use data: JSON.stringify(frInstance.userData) to get json but how will it be formatted to include client and address objects as shown below. I didn't find a way to associate each field to an object when I was building the form.

{
  "client": {
    "forename": "MyForename",
    "surname": "MySurname",
    "dateOfBirth": "2020-01-29",
    "gender": "2"
  },
  "address": {
    "street": "Street",
    "city": "My City"
  }
}

2. When I was creating the form, I added options for the Select control (Gender) but in real life scenarios I will need to populate values for the control from a lookup table in the database. For example, I am storing list of nationalities in a Nationality lookup table so I would need to populate the Select at run time. And when user submits the form, I should get nationality id in the UserData instead of nationality text. Are these two scenarios possible?

3. Finally, is it possible to use a different library for styling such as https://keenthemes.com/metronic/, if yes, is there any guidance available?

Thanks

[Jojoshua]

Did you find resolution to this already?

[lucasnetau]

Hi @learner291

1. You'll need to write a function that maps from your model to userData of each field

{
    "type": "text",
    "required": false,
    "label": "Surname",
    "className": "form-control",
    "name": "text-1580340272602",
    "access": false,
    "subtype": "text",
    "userData": ['THE VALUE'],
  },

2. Please take a look at https://github.com/lucasnetau/formBuilder-plugins for an example on how to dynamically create your element's options

3. Sure. I would recommend disabling the injected v3 bootstrap styles and then load the css library you wish to use (metronic uses Bootstrap v5)