Best way to generate forms based on json


#1

Hello!

So i’m building an app that needs to generate a form based on json data. The json data looks something like this:

{"response":{"success":"true","navigation":[{"step":[{"id":"1","page":{"title":"Start","required":"1","item":"start","pageType":"page","id":"1","Fields":{"v_registration":{"readOnly":"false","required":"true","label":"Kenteken","inputType":"text","sequence":"100"}}}},{"id":"2","page":{"title":"Voertuig gegevens","required":"1","item":"voertuig_gegevens","pageType":"page","id":"1","Fields":{"v_registration":{"readOnly":"true","required":"false","label":"Kenteken","group":"1","inputType":"text","sequence":"100"},"v_make":{"readOnly":"true","required":"false","label":"Merk","group":"1","inputType":"text","sequence":"110-1"},"v_modelSpecific":{"readOnly":"true","required":"false","label":"Model","group":"1","inputType":"text","sequence":"110-2"},"vs_vatMarginTypeId":{"readOnly":"false","options":{"option":[{"key":"2","value":"marge"},{"key":"1","value":"btw"}]},"required":"true","label":"BTW voertuig?","group":"1","inputType":"checkbox","sequence":"120"},"v_dateFirstAdmission":{"readOnly":"true","required":"false","label":"Datum 1e toelating","group":"1","inputType":"date","sequence":"130"},"v_dateFirstRegistration":{"readOnly":"true","required":"false","label":"Datum 1e afgifte NL","group":"1","inputType":"date","sequence":"140"},"vs_dateSecondRegistration":{"readOnly":"true","required":"false","label":"Datum laatste tenaamstelling","group":"1","inputType":"date","sequence":"150"},"vs_dateApkExpires":{"readOnly":"true","required":"false","label":"APK vervaldatum","group":"1","inputType":"date","sequence":"160"},"vs_fuelTypeId":{"readOnly":"true","options":{"option":[{"key":"1","value":"benzine"},{"key":"2","value":"diesel"},{"key":"3","value":"lpg"},{"key":"4","value":"lpg g3"},{"key":"5","value":"hybride"},{"key":"6","value":"elektriciteit"},{"key":"7","value":"bio-ethanol"},{"key":"8","value":"cng"},{"key":"9","value":"lng"},{"key":"10","value":"alcohol"},{"key":"11","value":"aardgas"},{"key":"21","value":"onbekend"}]},"required":"false","label":"Brandstof","group":"1","inputType":"text","sequence":"170"},"vs_bodyTypeId":{"readOnly":"false","required":"false","label":"Carrosserie","group":"1","inputType":"select","sequence":"180"},"vs_transmissionTypeId":{"readOnly":"false","required":"false","label":"Transmissie","group":"1","inputType":"select","sequence":"190"},"vs_colorTypeId":{"readOnly":"true","options":{"option":[{"key":"1","value":"antraciet"},{"key":"2","value":"beige"},{"key":"5","value":"blauw"},{"key":"3","value":"blauw - donker"},{"key":"4","value":"blauw - licht"},{"key":"6","value":"brons"},{"key":"62","value":"bruin"},{"key":"7","value":"bruin - donker"},{"key":"8","value":"bruin - licht"},{"key":"9","value":"champagne"},{"key":"61","value":"creme"},{"key":"10","value":"geel"},{"key":"11","value":"goud"},{"key":"12","value":"grijs"},{"key":"42","value":"grijs - donker"},{"key":"52","value":"grijs - licht"},{"key":"15","value":"groen"},{"key":"13","value":"groen - donker"},{"key":"14","value":"groen - licht"},{"key":"16","value":"ice blue"},{"key":"17","value":"koper"},{"key":"18","value":"lime"},{"key":"19","value":"olijfgroen"},{"key":"20","value":"oranje"},{"key":"63","value":"paars \/ aubergine"},{"key":"21","value":"paars \/ aubergine - donker"},{"key":"22","value":"paars \/ aubergine - licht"},{"key":"23","value":"petrol"},{"key":"26","value":"rood"},{"key":"24","value":"rood - donker"},{"key":"25","value":"rood - licht"},{"key":"34","value":"rood - midden"},{"key":"27","value":"roze"},{"key":"28","value":"staal - blauw"},{"key":"29","value":"turquoise"},{"key":"30","value":"wit"},{"key":"31","value":"zilver"},{"key":"32","value":"zwart"},{"key":"33","value":"niet van toepassing"},{"key":"0","value":"onbekend"}]},"required":"false","label":"Kleur","group":"1","inputType":"text","sequence":"200"}}}},{"id":"3","page":{"title":"Uitvoering","required":"1","item":"uitvoering","pageType":"page","id":"1","Fields":{"Models":{"required":"false","readOnly":"true","label":"Uitvoering","group":"1","inputType":"models","sequence":"210"}}}},{"id":"4","page":{"title":"Foto's","required":"1","item":"fotos","pageType":"page","id":"1","Fields":{"vehicle_image":[{"Fields":{"vim_image":{"readOnly":"false"},"vim_thumbnail":null,"vim_position":{"readOnly":"false","options":{"option":[{"key":"4","value":"Voorzijde"},{"key":"1","value":"Linksvoor"},{"key":"3","value":"Linker zijkant"},{"key":"8","value":"Linksachter"},{"key":"9","value":"Achterzijde"},{"key":"2","value":"Rechtsachter"},{"key":"10","value":"Rechter zijkant"},{"key":"7","value":"Rechtsvoor"},{"key":"6","value":"Interieur"},{"key":"13","value":"Dashboard"},{"key":"5","value":"Tellerstand"},{"key":"11","value":"Schade"},{"key":"0","value":"Overig"}]},"value":"1"},"vim_type":"0","vim_image_id":"1"},"inputType":"upload_image","required":"false","sequence":"110"},{"Fields":{"vim_image":{"readOnly":"false"},"vim_thumbnail":null,"vim_position":{"readOnly":"false","options":{"option":[{"key":"4","value":"Voorzijde"},{"key":"1","value":"Linksvoor"},{"key":"3","value":"Linker zijkant"},{"key":"8","value":"Linksachter"},{"key":"9","value":"Achterzijde"},{"key":"2","value":"Rechtsachter"},{"key":"10","value":"Rechter zijkant"},{"key":"7","value":"Rechtsvoor"},{"key":"6","value":"Interieur"},{"key":"13","value":"Dashboard"},{"key":"5","value":"Tellerstand"},{"key":"11","value":"Schade"},{"key":"0","value":"Overig"}]},"value":"3"},"vim_type":"0","vim_image_id":"3"},"inputType":"upload_image","required":"false","sequence":"120"},{"Fields":{"vim_image":{"readOnly":"false"},"vim_thumbnail":null,"vim_position":{"readOnly":"false","options":{"option":[{"key":"4","value":"Voorzijde"},{"key":"1","value":"Linksvoor"},{"key":"3","value":"Linker zijkant"},{"key":"8","value":"Linksachter"},{"key":"9","value":"Achterzijde"},{"key":"2","value":"Rechtsachter"},{"key":"10","value":"Rechter zijkant"},{"key":"7","value":"Rechtsvoor"},{"key":"6","value":"Interieur"},{"key":"13","value":"Dashboard"},{"key":"5","value":"Tellerstand"},{"key":"11","value":"Schade"},{"key":"0","value":"Overig"}]},"value":"2"},"vim_type":"0","vim_image_id":"2"},"inputType":"upload_image","required":"false","sequence":"130"},{"Fields":{"vim_image":{"readOnly":"false"},"vim_thumbnail":null,"vim_position":{"readOnly":"false","options":{"option":[{"key":"4","value":"Voorzijde"},{"key":"1","value":"Linksvoor"},{"key":"3","value":"Linker zijkant"},{"key":"8","value":"Linksachter"},{"key":"9","value":"Achterzijde"},{"key":"2","value":"Rechtsachter"},{"key":"10","value":"Rechter zijkant"},{"key":"7","value":"Rechtsvoor"},{"key":"6","value":"Interieur"},{"key":"13","value":"Dashboard"},{"key":"5","value":"Tellerstand"},{"key":"11","value":"Schade"},{"key":"0","value":"Overig"}]},"value":"10"},"vim_type":"0","vim_image_id":"10"},"inputType":"upload_image","required":"false","sequence":"140"},{"Fields":{"vim_image":{"readOnly":"false"},"vim_thumbnail":null,"vim_position":{"readOnly":"false","options":{"option":[{"key":"4","value":"Voorzijde"},{"key":"1","value":"Linksvoor"},{"key":"3","value":"Linker zijkant"},{"key":"8","value":"Linksachter"},{"key":"9","value":"Achterzijde"},{"key":"2","value":"Rechtsachter"},{"key":"10","value":"Rechter zijkant"},{"key":"7","value":"Rechtsvoor"},{"key":"6","value":"Interieur"},{"key":"13","value":"Dashboard"},{"key":"5","value":"Tellerstand"},{"key":"11","value":"Schade"},{"key":"0","value":"Overig"}]},"value":"8"},"vim_type":"0","vim_image_id":"8"},"inputType":"upload_image","required":"false","sequence":"150"},{"Fields":{"vim_image":{"readOnly":"false"},"vim_thumbnail":null,"vim_position":{"readOnly":"false","options":{"option":[{"key":"4","value":"Voorzijde"},{"key":"1","value":"Linksvoor"},{"key":"3","value":"Linker zijkant"},{"key":"8","value":"Linksachter"},{"key":"9","value":"Achterzijde"},{"key":"2","value":"Rechtsachter"},{"key":"10","value":"Rechter zijkant"},{"key":"7","value":"Rechtsvoor"},{"key":"6","value":"Interieur"},{"key":"13","value":"Dashboard"},{"key":"5","value":"Tellerstand"},{"key":"11","value":"Schade"},{"key":"0","value":"Overig"}]},"value":"9"},"vim_type":"0","vim_image_id":"9"},"inputType":"upload_image","required":"false","sequence":"160"},{"Fields":{"vim_image":{"readOnly":"false"},"vim_thumbnail":null,"vim_position":{"readOnly":"false","options":{"option":[{"key":"4","value":"Voorzijde"},{"key":"1","value":"Linksvoor"},{"key":"3","value":"Linker zijkant"},{"key":"8","value":"Linksachter"},{"key":"9","value":"Achterzijde"},{"key":"2","value":"Rechtsachter"},{"key":"10","value":"Rechter zijkant"},{"key":"7","value":"Rechtsvoor"},{"key":"6","value":"Interieur"},{"key":"13","value":"Dashboard"},{"key":"5","value":"Tellerstand"},{"key":"11","value":"Schade"},{"key":"0","value":"Overig"}]},"value":"6"},"vim_type":"0","vim_image_id":"6"},"inputType":"upload_image","required":"false","sequence":"170"},{"Fields":{"vim_image":{"readOnly":"false"},"vim_thumbnail":null,"vim_position":{"readOnly":"false","options":{"option":[{"key":"4","value":"Voorzijde"},{"key":"1","value":"Linksvoor"},{"key":"3","value":"Linker zijkant"},{"key":"8","value":"Linksachter"},{"key":"9","value":"Achterzijde"},{"key":"2","value":"Rechtsachter"},{"key":"10","value":"Rechter zijkant"},{"key":"7","value":"Rechtsvoor"},{"key":"6","value":"Interieur"},{"key":"13","value":"Dashboard"},{"key":"5","value":"Tellerstand"},{"key":"11","value":"Schade"},{"key":"0","value":"Overig"}]},"value":"7"},"vim_type":"0","vim_image_id":"7"},"inputType":"upload_image","required":"false","sequence":"180"},{"Fields":{"vim_image":{"readOnly":"false"},"vim_thumbnail":null,"vim_position":{"readOnly":"false","options":{"option":[{"key":"4","value":"Voorzijde"},{"key":"1","value":"Linksvoor"},{"key":"3","value":"Linker zijkant"},{"key":"8","value":"Linksachter"},{"key":"9","value":"Achterzijde"},{"key":"2","value":"Rechtsachter"},{"key":"10","value":"Rechter zijkant"},{"key":"7","value":"Rechtsvoor"},{"key":"6","value":"Interieur"},{"key":"13","value":"Dashboard"},{"key":"5","value":"Tellerstand"},{"key":"11","value":"Schade"},{"key":"0","value":"Overig"}]},"value":"4"},"vim_type":"0","vim_image_id":"4"},"inputType":"upload_image","required":"false","sequence":"190"},{"Fields":{"vim_image":{"readOnly":"false"},"vim_thumbnail":null,"vim_position":{"readOnly":"false","options":{"option":[{"key":"4","value":"Voorzijde"},{"key":"1","value":"Linksvoor"},{"key":"3","value":"Linker zijkant"},{"key":"8","value":"Linksachter"},{"key":"9","value":"Achterzijde"},{"key":"2","value":"Rechtsachter"},{"key":"10","value":"Rechter zijkant"},{"key":"7","value":"Rechtsvoor"},{"key":"6","value":"Interieur"},{"key":"13","value":"Dashboard"},{"key":"5","value":"Tellerstand"},{"key":"11","value":"Schade"},{"key":"0","value":"Overig"}]},"value":"5"},"vim_type":"0","vim_image_id":"5"},"inputType":"upload_image","required":"false","sequence":"200"},{"Fields":{"vim_image":{"readOnly":"false"},"vim_thumbnail":null,"vim_position":{"readOnly":"false","options":{"option":[{"key":"4","value":"Voorzijde"},{"key":"1","value":"Linksvoor"},{"key":"3","value":"Linker zijkant"},{"key":"8","value":"Linksachter"},{"key":"9","value":"Achterzijde"},{"key":"2","value":"Rechtsachter"},{"key":"10","value":"Rechter zijkant"},{"key":"7","value":"Rechtsvoor"},{"key":"6","value":"Interieur"},{"key":"13","value":"Dashboard"},{"key":"5","value":"Tellerstand"},{"key":"11","value":"Schade"},{"key":"0","value":"Overig"}]},"value":"0"},"vim_type":"0","vim_image_id":"11"},"inputType":"upload_image","required":"false","sequence":"999"},{"Fields":{"vim_image":{"readOnly":"false"},"vim_thumbnail":null,"vim_position":{"readOnly":"false","options":{"option":[{"key":"4","value":"Voorzijde"},{"key":"1","value":"Linksvoor"},{"key":"3","value":"Linker zijkant"},{"key":"8","value":"Linksachter"},{"key":"9","value":"Achterzijde"},{"key":"2","value":"Rechtsachter"},{"key":"10","value":"Rechter zijkant"},{"key":"7","value":"Rechtsvoor"},{"key":"6","value":"Interieur"},{"key":"13","value":"Dashboard"},{"key":"5","value":"Tellerstand"},{"key":"11","value":"Schade"},{"key":"0","value":"Overig"}]},"value":"0"},"vim_type":"0","vim_image_id":"12"},"inputType":"upload_image","required":"false","sequence":"999"}]}}},{"id":"5","page":{"title":"Opties","required":"1","item":"opties","pageType":"page","id":"1","Fields":{"vs_commentAccessories":{"readOnly":"false","required":"false","label":"Opmerkingen bij opties en accessoires","inputType":"textarea","sequence":"200"}}}},{"id":"6","page":{"title":"Schade","required":"1","item":"schade","pageType":"page","id":"1","Fields":{"ds_repairCosts":{"readOnly":"false","required":"true","label":"Opknapkosten","inputType":"numeric","sequence":"110"},"vs_commentTechnicalDefects":{"readOnly":"false","required":"false","label":"Opmerkingen beschadigingen","inputType":"textarea","sequence":"120"}}}},{"id":"7","page":{"title":"Algemeen","required":"1","item":"algemeen","pageType":"page","id":"1","Fields":{"vs_mileage":{"readOnly":"false","required":"true","label":"Tellerstand","group":"1","inputType":"numeric","sequence":"100-1"},"vs_mileageType":{"readOnly":"false","options":{"option":[{"key":"km","value":"km"},{"key":"mi","value":"mi"}]},"value":"km","required":"true","label":"Tellersoort","group":"1","inputType":"select","sequence":"100-2"},"tax_dateDelivery":{"readOnly":"false","required":"true","label":"Verwachte leverdatum","group":"1","inputType":"date","sequence":"120"},"vs_mileageDelivery":{"readOnly":"false","required":"true","label":"Verwachte tellerstand","group":"1","inputType":"numeric","sequence":"130"},"vs_numberOfSeats":{"readOnly":"false","options":{"option":[{"key":"1","value":"1"},{"key":"2","value":"2"},{"key":"3","value":"3"},{"key":"4","value":"4"},{"key":"5","value":"5"},{"key":"6","value":"6"},{"key":"7","value":"7"},{"key":"8","value":"8"},{"key":"9","value":"9"}]},"required":"false","label":"Aantal zitplaatsen","group":"1","inputType":"select","sequence":"140"},"vs_colorTypeId":{"readOnly":"false","options":{"option":[{"key":"1","value":"antraciet"},{"key":"2","value":"beige"},{"key":"5","value":"blauw"},{"key":"3","value":"blauw - donker"},{"key":"4","value":"blauw - licht"},{"key":"6","value":"brons"},{"key":"62","value":"bruin"},{"key":"7","value":"bruin - donker"},{"key":"8","value":"bruin - licht"},{"key":"9","value":"champagne"},{"key":"61","value":"creme"},{"key":"10","value":"geel"},{"key":"11","value":"goud"},{"key":"12","value":"grijs"},{"key":"42","value":"grijs - donker"},{"key":"52","value":"grijs - licht"},{"key":"15","value":"groen"},{"key":"13","value":"groen - donker"},{"key":"14","value":"groen - licht"},{"key":"16","value":"ice blue"},{"key":"17","value":"koper"},{"key":"18","value":"lime"},{"key":"19","value":"olijfgroen"},{"key":"20","value":"oranje"},{"key":"63","value":"paars \/ aubergine"},{"key":"21","value":"paars \/ aubergine - donker"},{"key":"22","value":"paars \/ aubergine - licht"},{"key":"23","value":"petrol"},{"key":"26","value":"rood"},{"key":"24","value":"rood - donker"},{"key":"25","value":"rood - licht"},{"key":"34","value":"rood - midden"},{"key":"27","value":"roze"},{"key":"28","value":"staal - blauw"},{"key":"29","value":"turquoise"},{"key":"30","value":"wit"},{"key":"31","value":"zilver"},{"key":"32","value":"zwart"},{"key":"33","value":"niet van toepassing"},{"key":"0","value":"onbekend"}]},"required":"false","label":"Kleur","group":"1","inputType":"select","sequence":"150"},"vs_lacTypeId":{"readOnly":"false","options":{"option":[{"key":"1","value":"basis\/uni"},{"key":"2","value":"metallic"},{"key":"3","value":"mica"},{"key":"4","value":"parelmoer"},{"key":"5","value":"mat"},{"key":"11","value":"onbekend"}]},"required":"true","label":"Laksoort","group":"1","inputType":"select","sequence":"160"},"vs_interiorColorTypeId":{"readOnly":"false","options":{"option":[{"key":"1","value":"antraciet"},{"key":"2","value":"beige"},{"key":"3","value":"blauw - donker"},{"key":"4","value":"blauw - licht"},{"key":"5","value":"blauw - midden"},{"key":"6","value":"bruin"},{"key":"7","value":"cognac"},{"key":"8","value":"geel"},{"key":"22","value":"grijs - donker"},{"key":"9","value":"grijs - licht"},{"key":"10","value":"groen"},{"key":"11","value":"ivoor"},{"key":"12","value":"lila"},{"key":"13","value":"oranje"},{"key":"14","value":"paars"},{"key":"15","value":"rood"},{"key":"16","value":"wit"},{"key":"17","value":"zwart"},{"key":"0","value":"onbekend"}]},"required":"true","label":"Interieur kleur","group":"1","inputType":"select","sequence":"170"},"vs_liningTypeId":{"readOnly":"false","options":{"option":[{"key":"1","value":"alcantara"},{"key":"2","value":"half leder \/ alcantara"},{"key":"3","value":"half leder \/ stof"},{"key":"4","value":"half skai \/ stof"},{"key":"5","value":"leder"},{"key":"6","value":"skai"},{"key":"7","value":"stof"},{"key":"8","value":"velours"},{"key":"11","value":"onbekend"}]},"required":"true","label":"Bekleding","group":"1","inputType":"select","sequence":"180"},"vs_numberOfKeys":{"readOnly":"false","options":{"option":[{"key":"1","value":"1"},{"key":"2","value":"2"},{"key":"3","value":"3"},{"key":"4","value":"4"}]},"required":"false","label":"Aantal sleutels","group":"1","inputType":"select","sequence":"190"},"vs_napManualStatusTypeId":{"readOnly":"false","options":{"option":[{"key":"1","value":"Niet opgegeven"},{"key":"2","value":"Ok"},{"key":"3","value":"Niet ok"}]},"required":"false","label":"NAP status","group":"1","inputType":"select","sequence":"200"},"vs_usedAsTypeId":{"readOnly":"false","options":{"option":[{"key":"1","value":"geen van allen (geweest)"},{"key":"2","value":"lesauto (geweest)"},{"key":"3","value":"taxi (geweest)"},{"key":"4","value":"hulpdienstvoertuig (geweest)"}]},"required":"false","label":"Gebruikt als","group":"1","inputType":"select","sequence":"210"},"tax_tradingBid":{"readOnly":"false","required":"false","label":"Benodigd handelsbod","group":"1","inputType":"numeric","sequence":"220"},"vs_newPriceInvoice":{"readOnly":"false","required":"false","label":"Nieuwprijs factuur","group":"1","inputType":"numeric","sequence":"230"},"vs_aircoStatusTypeId":{"readOnly":"false","options":{"option":[{"key":"1","value":"correct werkend"},{"key":"2","value":"defect"},{"key":"3","value":"niet van toepassing"},{"key":"11","value":"onbekend"}]},"required":"false","label":"Staat airco","group":"2","inputType":"select","sequence":"250"},"vs_pets":{"readOnly":"false","options":{"option":[{"key":"0","value":"nee"},{"key":"1","value":"ja"}]},"required":"true","label":"Dierengeur","group":"2","inputType":"radio","sequence":"260"},"vs_smoked":{"readOnly":"false","options":{"option":[{"key":"0","value":"nee"},{"key":"1","value":"ja"}]},"required":"true","label":"Rookgeur","group":"2","inputType":"radio","sequence":"270"},"vs_maintenanceHistoryTypeId":{"readOnly":"false","options":{"option":[{"key":"1","value":"gedeeltelijk"},{"key":"2","value":"volledig"},{"key":"3","value":"geen"},{"key":"11","value":"onbekend"}]},"required":"false","label":"Onderhoudshistorie\/boekjes","group":"2","inputType":"select","sequence":"280"},"vs_tiresTypeId":{"readOnly":"false","options":{"option":[{"key":"1","value":"Zomerbanden"},{"key":"2","value":"Winterbanden"},{"key":"3","value":"Onbekend"}]},"required":"false","label":"Levering op","group":"2","inputType":"select","sequence":"290"},"vs_extraTiresTypeId":{"readOnly":"false","options":{"option":[{"key":"0","value":"nee"},{"key":"1","value":"ja, winterbanden zonder velgen"},{"key":"2","value":"ja, winterbanden met stalen velgen"},{"key":"3","value":"ja, winterbanden met LM velgen"},{"key":"4","value":"ja, zomerbanden met LM velgen"},{"key":"5","value":"ja, zomerbanden met stalen velgen"},{"key":"6","value":"ja, zomerbanden zonder velgen"}]},"required":"false","label":"Extra set banden","group":"2","inputType":"select","sequence":"300"},"vs_timingBeltReplacedTypeId":{"readOnly":"false","options":{"option":[{"key":"3","value":"n.v.t."},{"key":"1","value":"ja"},{"key":"2","value":"nee"}]},"required":"false","label":"Distributieriem vervangen","group":"2","inputType":"select","sequence":"310"},"vs_timingBeltReplacedMileage":{"readOnly":"false","required":"false","label":"Tellerstand","group":"2","inputType":"numeric","sequence":"320"},"vs_timingBeltReplacedDate":{"readOnly":"false","required":"false","label":"Datum","group":"2","inputType":"date","sequence":"330"},"vs_lastMaintenanceMileage":{"readOnly":"false","required":"false","label":"Tellerstand laatste beurt","group":"2","inputType":"numeric","sequence":"340"},"vs_conditionBodyTypeId":{"readOnly":"false","options":{"option":[{"key":"3","value":"goede conditie"},{"key":"2","value":"redelijke conditie"},{"key":"1","value":"slechte conditie"}]},"required":"true","label":"Carrosserie","group":"2","inputType":"radio","sequence":"350"},"vs_conditionInteriorTypeId":{"readOnly":"false","options":{"option":[{"key":"3","value":"goede conditie"},{"key":"2","value":"redelijke conditie"},{"key":"1","value":"slechte conditie"}]},"required":"true","label":"Interieur","group":"2","inputType":"radio","sequence":"360"},"ValuationComment":{"Fields":{"taxcom_valuationId":{"readOnly":"false"},"taxcom_typeId":"7","taxcom_personId":{"readOnly":"false"},"taxcom_companyId":{"readOnly":"false"},"taxcom_groupId":{"readOnly":"false"},"taxcom_text":{"readOnly":"false"},"taxcom_type":{"readOnly":"false"},"taxcom_id":{"readOnly":"false"}},"required":"false","readOnly":"false","label":"Aanvullende info voor de occasionmanager","group":"3","inputType":"textarea","sequence":"370"}}}},{"id":"8","page":{"title":"Klant gegevens","required":"1","item":"klant","pageType":"page","id":"1","Fields":{"vi_type":{"readOnly":"false","options":{"option":[{"key":"used","value":"Gebruikt"},{"key":"new","value":"Nieuw"},{"key":"none","value":"Losse inkoop"}]},"required":"true","label":"Soort","group":"1","inputType":"radio","sequence":"100"},"vi_registration":{"readOnly":"false","required":"false","label":"Kenteken","group":"1","inputType":"text","sequence":"110"},"vi_make":{"readOnly":"false","required":"false","label":"Merk","group":"1","inputType":"select","sequence":"120"},"vi_model":{"readOnly":"false","required":"false","label":"Model","group":"1","inputType":"select","sequence":"130"},"vi_sourceTypeId":{"readOnly":"false","options":{"option":[{"key":"1","value":"Demo"},{"key":"2","value":"Inkoop dealerlease"},{"key":"3","value":"Inkoop dealerrent"},{"key":"4","value":"Inkoop TKV\\'s"},{"key":"5","value":"Import"},{"key":"6","value":"Inkoop extern handel"},{"key":"7","value":"Inkoop uit dealerorganisatie"},{"key":"8","value":"Inkoop geherwaardeerde occasion"},{"key":"9","value":"Vrije inkoop"}]},"required":"false","label":"Soort inkoop","group":"1","inputType":"select","sequence":"140"},"vi_consultedWithEmployeeId":{"readOnly":"false","options":{"option":[{"key":"17648","value":"Nils van der Veen"},{"key":"2256","value":"Berry Buitenhuis"},{"key":"2258","value":"Edwin Arnoldus"},{"key":"17649","value":"Regina Visser"},{"key":"59480","value":"Floris Valk"},{"key":"446301","value":"Michiel van Beek"},{"key":"491942","value":"Jasper Blom"},{"key":"492163","value":"Wouter Doornbos"}]},"required":"false","label":"Overlegd met","group":"1","inputType":"select","sequence":"150"},"vi_freeSaleReasonTypeId":{"readOnly":"false","options":{"option":[{"key":"1","value":"Aankoop door remarketing"},{"key":"2","value":"Aankoop vanwege (private) lease"},{"key":"3","value":"Aankoop  prive vanwege zakelijke aanschaf"},{"key":"4","value":"Aankoop zakelijk vanwege prive aanschaf"},{"key":"5","value":"Overname collega dealer"},{"key":"6","value":"Overig"}]},"required":"false","label":"Reden verkoop","group":"1","inputType":"select","sequence":"160"},"vi_freeSaleReasonComment":{"readOnly":"false","required":"false","label":"Reden verkoop (uitleg)","group":"1","inputType":"textarea","sequence":"170"},"c_companyName":{"readOnly":"false","required":"false","label":"Bedrijfsnaam","group":"2","inputType":"text","sequence":"200"},"c_salutationTypeId":{"readOnly":"false","options":{"option":[{"key":"1","value":"Dhr."},{"key":"2","value":"Mevr."}]},"required":"false","label":"Aanhef","group":"2","inputType":"select","sequence":"210"},"c_initials":{"readOnly":"false","required":"false","label":"Voorletters","group":"2","inputType":"text","sequence":"220"},"c_lastName":{"readOnly":"false","required":"true","label":"Achternaam","group":"2","inputType":"text","sequence":"230"},"c_emailAddress":{"readOnly":"false","required":"true","label":"Email","group":"2","inputType":"text","sequence":"240"}}}},{"id":"9","page":{"title":"Wijzig gegevens","required":"0","item":"wijzig_gegevens","pageType":"page_edit_vehicle","id":"1","Fields":{"vs_vehicleTypeId":{"readOnly":"false","options":{"option":[{"key":"1","value":"personenvoertuig"},{"key":"2","value":"bedrijfsvoertuig"},{"key":"3","value":"motorfiets"},{"key":"4","value":"bromfiets"},{"key":"11","value":"zwaar bedrijfsvoertuig"}]},"required":"true","label":"Soort voertuig","inputType":"select","sequence":"100"},"v_make":{"readOnly":"false","required":"true","label":"Merk","inputType":"select","sequence":"110"},"v_modelSpecific":{"readOnly":"false","required":"true","label":"Model","inputType":"select","sequence":"120"},"vs_fuelTypeId":{"readOnly":"false","options":{"option":[{"key":"1","value":"benzine"},{"key":"2","value":"diesel"},{"key":"3","value":"lpg"},{"key":"4","value":"lpg g3"},{"key":"5","value":"hybride"},{"key":"6","value":"elektriciteit"},{"key":"7","value":"bio-ethanol"},{"key":"8","value":"cng"},{"key":"9","value":"lng"},{"key":"10","value":"alcohol"},{"key":"11","value":"aardgas"},{"key":"21","value":"onbekend"}]},"required":"true","label":"Brandstof","inputType":"select","sequence":"130"},"vs_bodyTypeId":{"readOnly":"false","required":"true","label":"Carrosserie","inputType":"select","sequence":"140"},"vs_transmissionTypeId":{"readOnly":"false","required":"true","label":"Transmissie","inputType":"select","sequence":"150"},"vs_cylinderVolume":{"readOnly":"false","required":"false","label":"Motorinhoud (cc)","inputType":"select","sequence":"160"},"vs_power":{"readOnly":"false","required":"false","label":"Vermogen (kW)","inputType":"select","sequence":"170"},"v_dateFirstAdmission":{"readOnly":"false","required":"true","label":"Datum 1e toelating","inputType":"date","sequence":"180"}}}}]}]}}

What would be the best way to generate forms based on this json response?

Elements that are needed are:

  • Dropdown boxes
  • Textboxes
  • Checkboxes
  • Fileuploads

Thank you!


#2

Hello

I had the same requirement in my project and we end up with this:

It allows easily creating forms as JSON on the web part, and my mobile app just consumes the JSON and renders the form.

Unfortunately, it does not have native support for Angular/Ionic, but it was “relatively” easy to render an HTML template based on JSON with *ngFor and *ngIf statements.