Dynamic Forms from JSON data


#1

{
“formstructure”: [
{
“clientid” : “1001”,
“formid”: “1001”,
“formname” : “Registration Form A”,
“formicon” : “user.png”,
“pages” : [{
“pageno” : “01”,
“pagename” : “Basic Information”,
“fields”: [
{
“label”: “Firstname”,
“datatype”: “text”,
“lookupname”: “null”,
“order” : “01”,
“validations”: [{
“minsize”: “10”,
“maxsize”: “20”,
“required”: “mandatory”,
“status”: “enable”
}]

             }, { 
                   "label": "Middlename", 
                   "datatype": "text", 
                   "lookupname": "null", 
                   "order" : "02", 
                   "validations": [{ 
                         "minsize": "10", 
                         "maxsize": "20", 
                         "required": "optional", 
                         "status": "enable" 
                   }] 
             }, { 
                   "label": "Lastname", 
                   "datatype": "text", 
                   "lookupname": "null", 
                   "order" : "03", 
                   "validations": [{ 
                         "minsize": "10", 
                         "maxsize": "20", 
                         "required": "mandatory", 
                         "status": "enable" 
                   }] 
             }, { 
                   "label": "Sex", 
                   "datatype": "radio", 
                   "lookupname": "null", 
                   "order" : "04", 
                   "validations": [{ 
                         "minsize": "null", 
                         "maxsize": "null", 
                         "required": "mandatory", 
                         "status": "enable" 
                   }], 
                   "options": [{ 
                         "id": "01", 
                         "value": "Male" 
                   }, { 
                         "id": "02", 
                         "value": "Female" 
                   }] 
              
             }, { 
                   "label": "Hobbies", 
                   "datatype": "check", 
                   "lookupname": "null", 
                   "order" : "05", 
                   "validations": [{ 
                         "minsize": "null", 
                         "maxsize": "null", 
                         "required": "mandatory", 
                         "status": "enable" 
                   }], 
                   "options": [{ 
                         "id": "01", 
                         "value": "Music" 
                   }, { 
                         "id": "02", 
                         "value": "Sports" 
                   }, { 
                         "id": "02", 
                         "value": "Travelling" 
                   }, { 
                         "id": "02", 
                         "value": "Reading" 
                   }] 
              
             }, { 
                   "label": "Date of Birth", 
                   "datatype": "date", 
                   "lookupname": "null", 
                   "order" : "06", 
                   "validations": [{ 
                         "minsize": "null", 
                         "maxsize": "null", 
                         "required": "mandatory", 
                         "status": "enable" 
                   }] 
             }, { 
                   "label": "Country", 
                   "datatype": "lookup", 
                   "lookupname": "countrylookup", 
                   "order" : "07", 
                   "validations": [{ 
                         "minsize": "null", 
                         "maxsize": "null", 
                         "required": "mandatory", 
                         "status": "enable" 
                   }] 
             }, { 
                   "label": "Start Time", 
                   "datatype": "time", 
                   "lookupname": "null", 
                   "order" : "08", 
                   "validations": [{ 
                         "minsize": "null", 
                         "maxsize": "null", 
                         "required": "mandatory", 
                         "status": "enable" 
                   }] 
             }, { 
                   "label": "No Workers", 
                   "datatype": "number", 
                   "lookupname": "null", 
                   "order" : "09", 
                   "validations": [{ 
                         "minsize": "null", 
                         "maxsize": "null", 
                         "required": "mandatory", 
                         "status": "enable" 
                   }] 
             }, {
                    "label": "Geo Location",
                    "datatype": "geocoordinate",
                    "lookupname": "null",
                    "order" : "10",
                    "validations": [{
                          "minsize": "null",
                          "maxsize": "null",
                          "required": "mandatory",
                          "status": "enable"
                    }] 
             }, {
                    "label": "Scan URL",
                    "datatype": "barcode",
                    "lookupname": "null",
                    "order" : "11",
                    "validations": [{
                          "minsize": "null",
                          "maxsize": "null",
                          "required": "mandatory",
                          "status": "enable"
                    }] 
             }, {
                    "label": "Scan URL",
                    "datatype": "qrcode",
                    "lookupname": "null",
                    "order" : "12",
                    "validations": [{
                          "minsize": "null",
                          "maxsize": "null",
                          "required": "mandatory",
                          "status": "enable"
                    }] 
              }, {
                    "label": "Profile Pic",
                    "datatype": "image",
                    "lookupname": "null",
                    "order" : "13",
                    "validations": [{
                          "minsize": "null",
                          "maxsize": "null",
                          "required": "mandatory",
                          "status": "enable"
                    }] 
              }] 
       }, { 
             "pageno" : "02", 
             "pagename" : "Personal Information", 
             "fields": [ 
             { 
                   "label": "sex", 
                   "datatype": "radio", 
                   "lookupname": "null", 
                   "order" : "01", 
                   "validations": [{ 
                         "minsize": "null", 
                         "maxsize": "null", 
                         "required": "mandatory", 
                         "status": "enable" 
                   }], 
                   "options": [{ 
                         "id": "01", 
                         "value": "Male" 
                   }, { 
                         "id": "02", 
                         "value": "Female" 
                   }] 
              
             }, { 
                   "label": "dateofbirth", 
                   "datatype": "date", 
                   "lookupname": "null", 
                   "order" : "02", 
                   "validations": [{ 
                         "minsize": "null", 
                         "maxsize": "null", 
                         "required": "mandatory", 
                         "status": "enable" 
                   }] 
             }, { 
                   "label": "country", 
                   "datatype": "text", 
                   "lookupname": "countrylookup", 
                   "order" : "03", 
                   "validations": [{ 
                         "minsize": "null", 
                         "maxsize": "null", 
                         "required": "mandatory", 
                         "status": "enable" 
                   }] 
             }] 
       }] 
 }, { 
      "clientid" : "1001", 
       "formid": "102", 
       "formname" : "Registration Form B", 
       "formicon" : "user.png", 
       "pages" : [{ 
             "pageno" : "01", 
             "pagename" : "Basic Information", 
             "fields": [ 
              { 
                   "label": "firstname", 
                   "datatype": "text", 
                   "lookupname": "null", 
                   "order" : "01", 
                    "validations": [{ 
                         "minsize": "10", 
                         "maxsize": "20", 
                         "required": "mandatory", 
                         "status": "enable" 
                   }] 
              
             }, { 
                   "label": "middlename", 
                   "datatype": "text", 
                   "lookupname": "null", 
                   "order" : "02", 
                   "validations": [{ 
                         "minsize": "10", 
                         "maxsize": "20", 
                         "required": "optional", 
                         "status": "enable" 
                   }] 
             }, { 
                   "label": "lastname", 
                   "datatype": "text", 
                   "lookupname": "null", 
                   "order" : "03", 
                   "validations": [{ 
                         "minsize": "10", 
                         "maxsize": "20", 
                         "required": "mandatory", 
                         "status": "enable" 
                   }] 
             }] 
       }, { 
             "pageno" : "02", 
             "pagename" : "Personal Information", 
             "fields": [ 
             { 
                   "label": "sex", 
                   "datatype": "radio", 
                   "lookupname": "null", 
                   "order" : "01", 
                   "validations": [{ 
                         "minsize": "null", 
                         "maxsize": "null", 
                         "required": "mandatory", 
                         "status": "enable" 
                   }], 
                   "options": [{ 
                         "id": "01", 
                         "value": "Male" 
                   }, { 
                         "id": "02", 
                         "value": "Female" 
                   }] 
              
             }, { 
                   "label": "dateofbirth", 
                   "datatype": "date", 
                   "lookupname": "null", 
                   "order" : "02", 
                   "validations": [{ 
                         "minsize": "null", 
                         "maxsize": "null", 
                         "required": "mandatory", 
                         "status": "enable" 
                   }] 
             }, { 
                   "label": "country", 
                   "datatype": "text", 
                   "lookupname": "countrylookup", 
                   "order" : "03", 
                   "validations": [{ 
                         "minsize": "null", 
                         "maxsize": "null", 
                         "required": "mandatory", 
                         "status": "enable" 
                   }] 
             }] 
       }] 
 }] 

}

This my JSON file format… I’m trying to create dynamic forms according to datatypes used in JSON.If the datatype in JSON is text automatically text field will come with labels , if the data type is date, a date picker field must come,If the label is sex a radio button with options must come.I tried but failed…i’m new to ionic.


#2

See: https://devdactic.com/dynamic-components-ionic/