@LuisAlava wrote:

Hello developers, I’m going to summarize the query I have.
I need to extract data from a database and show on an ionic page, I know how to extract and present them, the problem is that the presentation of the data must be in a table, just like the MySQL tables, in the header (name, age, document, birthday), the truth is that I have no idea how to create a view in the form of a table. the grib do not give me the desired presentation, is there any other way? Can I use bootstrap? The idea is to leave something similar to this: https://www.solvetic.com/uploads/monthly_06_2016/tutorials-1-0-65866500-1464780116.jpg

just the part of the table, I thank you in advance

Posts: 2

Participants: 2

Read full topic

@WouterDoornbos wrote:

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!

Posts: 2

Participants: 2

Read full topic

@hardikdg wrote:

I am showing ion-menu button on around 10 pages. I want to change menu items dynamically based on the user settings.
For ex: If a user enables some functionality in the settings screens I want to update the side menu items.

The current issue I am having is if I have this type of code on every page, I need to duplicate the preferences check in every controller.

<button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
</button>

I am looking for any solution that may work on all the pages with a single function, Or some way I can show dynamic menu items from all the ‘menu-toggle’ button click.

Posts: 1

Participants: 1

Read full topic

@JAR19 wrote:

I am trying to debug my app on an iPhone 5c. When I link the device to Safari on the macbook it appears to generate errors whereas without the link to the macbook the app seems to behave as expected.

So I am not sure if I am seeing real errors using the macbook or problems caused by the cable link.

Has anyone else experienced this?

Posts: 3

Participants: 2

Read full topic

@LeoFeitosa wrote:

Hello everyone.
I’m trying to download files using the fileTrasnfer plugin, it usually downloads but only works when the app is active, I wonder if there is any way to make the download start as if it were native.
Does anyone have any ideas?

Posts: 8

Participants: 2

Read full topic

@npatel wrote:

I am having an issue making http get requests when I deploy to my ios device. I have enabled CORS on my endpoint in API Gateway, and my get requests are successful on android devices. The requests are also successful when emulating ios or android with the implementation of a proxy (link I followed for the proxy is below).

http://blog.ionicframework.com/handling-cors-issues-in-ionic/

I have attempted updating the info.plist file to allow for NSAllowsArbitraryLoads with no success. I also attempted to rollback from WKWebView to UIWebView. This change resolves the API issue, but the app perfomance is compromised significantly and critical functionality is lost (specifically interacting with buttons and swiping the cards that are loaded after a successful call).

Is there a working solution for ios devices that allows for the use of the WKWebView plugin without compromising the API calls?

Posts: 1

Participants: 1

Read full topic

@cybentizens wrote:

Hi,

I’m using ionic 3 and want to enlarge font size of text on a button click. But button is inside popover.

But it is not working.

Here is my code.

Popover.html

<ion-list>
  <button (click)="changeFontSize(-0.2)" ion-button icon-only>
    <ion-icon name="remove"></ion-icon>
  </button>
  <button (click)="changeFontSize(0.2)" ion-button icon-only>
    <ion-icon name="add"></ion-icon>
  </button>
</ion-list>

Popover.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { ViewController } from 'ionic-angular';


@IonicPage()
@Component({
  selector: 'page-popover',
  templateUrl: 'popover.html',
})
export class PopoverPage {

  constructor(public navCtrl: NavController, public navParams: NavParams, public viewCtrl: ViewController) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad PopoverPage');
  }

  //Change Font Size
  textEle: any;

  ngOnInit() {
    if (this.navParams.data) {
      this.textEle = this.navParams.data.textEle;
    }
  }

  changeFontSize(direction: string) {
    this.textEle.style.fontSize = direction;
  }

}

ContentPage.html

<div #popoverText class="test">
    <div class="inner-text">Demo Text Here</div>
</div>

ContentPage.ts

import { Component, ElementRef, ViewChild } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { PopoverController} from 'ionic-angular';
import { PopoverPage } from '../popover/popover';


@IonicPage()
@Component({
  selector: 'page-content',
  templateUrl: 'content-page.html',
})
export class ContentPage {

  @ViewChild('popoverText', {read: ElementRef}) text: ElementRef;

  constructor(
    public navCtrl: NavController,
    public navParams: NavParams,
    public popoverCtrl: PopoverController
  ) {

  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad ContentPage');
  }

  //Open Popover
  presentPopover(ev: UIEvent) {
    let popover = this.popoverCtrl.create(PopoverPage, {
      textEle: this.text.nativeElement
    });
    popover.present({
      ev: ev
    });

    //On Popover Close
    popover.onDidDismiss(data => {
      console.log("Test");
    });


  }


}

Posts: 1

Participants: 1

Read full topic

@boussarhane wrote:

While trying to show a youtube video, It worked well but when i take a look on my console I found those errors :

Failed to load resource: net::ERR_BLOCKED_BY_CLIENT
static.doubleclick.net/instream/ad_status.js

Failed to load resource: net::ERR_BLOCKED_BY_CLIENT
VM1427 www-embed-player.js:302

GET https://googleads.g.doubleclick.net/pagead/id net::ERR_BLOCKED_BY_CLIENT

GET https://googleads.g.doubleclick.net/pagead/id net::ERR_BLOCKED_BY_CLIENT

This is my class :

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
    selector: 'page-youtube',
    template: `
    <ion-header>
        <ion-navbar>
            <ion-title>Vidéo Youtube</ion-title>
        </ion-navbar>
    </ion-header>

    <ion-content>
        <iframe width="560" height="315" src="https://www.youtube.com/embed/xxxxxxxxxx" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe>
    </ion-content>

    `,
  })

  export class YoutubeVideo{
      constructor(public navCtrl: NavController){}
  }

Another problem is my video take only the half of the screen not all the screen.

Posts: 1

Participants: 1

Read full topic

@Antonini wrote:

Hi all,

I’m working on ionic 3 and I have add the Google Maps Place Autocomplete to an input tag.
I have add these pieces of code:

index.html

script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAOyCVi_EH1cPheAu12hzDj5r3IrBtT6Ng&libraries=places"></script>

page-controller.ts

ionViewDidEnter() {
    let places = document.getElementById('city').children[0];
    let autocomplete = new google.maps.places.Autocomplete(places);
  }

but it works only once, when I refresh page.

In fact, if I click on the save button in the pageController (that save user data and bring me back in homeController) and I return on this page, the Autocomplete doesn’t work anymore.

Can someone help me please?

Posts: 1

Participants: 1

Read full topic

@jamesharvey wrote:

Hello guys,

I’m building an app which needs a lot of contents on a single HTML page.

I built a tab bar with ion-segment and I could get four different pages on one html file.
Now I need another tab bar within this ion-segment page…
I tried to use another ion-segment tab bar within a page created by ion-segment. I found out this doesn’t really work on Ionic.
It looks like I have to create a custom made tab menu based on Typescript & angular. I don’t have a clue about this yet. Is there any working example of typescript & angular tab menu which can divide one page into two or three?

Thanks,

Posts: 1

Participants: 1

Read full topic

@boussarhane wrote:

I embaded a youtube video to my ionic app

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
    selector: 'page-youtube',
    template: `
    <ion-header>
        <ion-navbar>
            <ion-title>Vidéo Youtube</ion-title>
        </ion-navbar>
    </ion-header>

    <ion-content>
        <iframe width="560" height="315" src="https://www.youtube.com/embed/xxxxxxxxxx" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe>
    </ion-content>

    `,
  })

  export class YoutubeVideo{
      constructor(public navCtrl: NavController){}
  }

But when I run it, it only take a half of the mobile screen. I want it to take the viewport dimensions.

Posts: 1

Participants: 1

Read full topic

@codiqa1000101513 wrote:

Hi All,

Simple question.

In my view (about.html) I can do © and it works.

But if in my class I have something like:

public dataLocation: string = (“Company ©”);

I don’t see the copyright symbol. Just the “©”

Any ideas???

Simon

Posts: 1

Participants: 1

Read full topic

@jonas3344 wrote:

Hey,

there have been some threads on this topic but I couldn’t find a solution.

My problem: I’ve an API (written in PHP) which seems to work. I can send a request and get the data. There is a basic authorization with username/password which works. I can get the data through browser or through postman (or paw which seems to be a nice tool too).

Not I try to call this api-endpoint through my app. The api gets called but doesn’t add the authorization-header no matter what I try. In the firefox dev tools I see that the request is missing the authorization-header. Can anyone enlighten me? Thank you.
My code:

  let headers = new Headers();
    headers.append("authorization", "basic aGM0YXBwOmHjddP5NjU=");
    headers.append("Content-Type","application/json");

    let options = new RequestOptions({ headers: headers });
    return  this.http.get(this.apiUrl, options)
            .do((res : Response ) => console.log(res.json())
            .map((res : Response ) => res.json())
            .catch(error => console.log(error)));
  }

Posts: 3

Participants: 2

Read full topic

@jamesharvey wrote:

Hello guys,

I have a search bar on my ionic app.
How can I make it fixed to top? I want it to stay at top when scrolling down.

Thanks,

Posts: 1

Participants: 1

Read full topic

@Willcowd wrote:

Hi All

I’m trying to have a side menu purely on the homepage

This code within the ion-navbar shows the button

        <ion-buttons end>
            <button ion-button>
                <ion-icon ios="ios-cog" md="ios-cog"></ion-icon>
            </button>
        </ion-buttons>

but adding menuToggle removes the button

        <ion-buttons end>
            <button ion-button menuToggle>
                <ion-icon ios="ios-cog" md="ios-cog"></ion-icon>
            </button>
        </ion-buttons>

Any help would be great
Mark

Posts: 1

Participants: 1

Read full topic

@impactcolor wrote:

When I upload a project from git I get an error that says Build failed:

Running with gitlab-ci-multi-runner 9.1.0 (0118d89)
on Snapshot Builds (c9648220)
Using Shell executor…
Running on ip-10-2-1-50…
Cloning repository…
Cloning into ‘/home/gitlab-runner/builds/c9648220/0/project-1’…
Checking out 0ee8ab48 as master…
Skipping Git submodules setup
$ run "fetch-updates"
Checking for build process updates…
$ run "build-app"
Attempting to restore cached packages…
No cache found for packages, installing…
$ npm install --quiet --no-optional
npm WARN @ionic-native/camera@4.3.1 requires a peer of @ionic-native/core@^4.2.0 but none was installed.
npm WARN @ionic-native/image-picker@4.3.1 requires a peer of @ionic-native/core@^4.2.0 but none was installed.
npm WARN @ionic-native/network@4.3.3 requires a peer of @ionic-native/core@^4.2.0 but none was installed.
npm WARN ajv-keywords@2.1.0 requires a peer of ajv@>=5.0.0 but none was installed.

added 1 package and removed 3 packages in 4.4s
Saving package cache…
Package cache saved!
$ npm run build
npm info it worked if it ends with ok
npm info using npm@5.3.0
npm info using node@v8.2.1
npm info lifecycle homeinspectorplus@0.0.1~prebuild: homeinspectorplus@0.0.1
npm info lifecycle homeinspectorplus@0.0.1~build: homeinspectorplus@0.0.1

homeinspectorplus@0.0.1 build /usr/src/app
ionic-app-scripts build

sh: 1: ionic-app-scripts: Permission denied
npm info lifecycle homeinspectorplus@0.0.1~build: Failed to exec build script
npm ERR! code ELIFECYCLE
npm ERR! errno 126
npm ERR! homeinspectorplus@0.0.1 build: ionic-app-scripts build
npm ERR! Exit status 126
npm ERR!
npm ERR! Failed at the homeinspectorplus@0.0.1 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /home/gitlab-runner/.npm/_logs/2017-12-04T18_50_38_795Z-debug.log
npm run build failed
Running after script…
$ run "clean-up"
ERROR: Job failed: exit status 1

Any ideas what I can do to fix this?

Posts: 1

Participants: 1

Read full topic

@jamesharvey wrote:

Hello guys,

I’m building an app with 20 different pages with completely information on each.
and the each page will get search feature to navigate to another page.
It may sounds odd but this works for what I’m building…
I have 20 different navigate functions for each of 20 pages in my typescript.

so I managed to build a a search bar with data provider which can search through the items below:

private homes: any[] = [

          {
            "name": "New York City",
            "state":"NY",
            "zip": "01112",
            "rental": "yes",
            "navigate": "openNYC()",
            "id": "1"
          },

            {
            "name": "San Francisco",
            "state":"CA",
            "zip": "31112",
            "rental": "yes",
            "navigate": "openSF()",
            "id": "2"
            },
            {
            "name": "Boston",
            "state":"MA",
            "zip": "02112",
            "rental": "yes",
            "navigate": "openBOS()",
            "id": "3"
            },

and so on....

I want users to navigate to each page when they tab on search result item.
How can I pass in this “navigate” function to search result item?
It allows me to search but I can make them navigate to a specific page.
I can pass in all other data but the function can’t be passed in like texts. How do you guys deal with this kind of problem?

Thanks

Posts: 1

Participants: 1

Read full topic

@Ben1nB1ack wrote:

Is there a way to run Android under DevApp/Ionic View and have deviceready work?

I have been all over this forum and GIT bugs and Stack overflow

here is actual error from console.

[19:29:05]  console.log: deviceready has not fired after 5 seconds.
[19:29:05]  console.log: Channel not fired: onFileSystemPathsReady
[19:29:05]  console.warn: Ionic Native: deviceready did not fire within 5000ms. This can happen when plugins are in an
            inconsistent state. Try removing plugins from plugins/ and reinstalling them.

i have updated all
tried all that is in

https://github.com/ionic-team/ionic-cli/issues/259

Posts: 1

Participants: 1

Read full topic

@javasol wrote:

I’m using ion-datetime for a time picker on my app. It seems like there’s a feature on the picker that causes the lists to bounce or jump when the end of the list is reached. Is there any way to turn this off? My user base is more of an older user base and they are complaining that they are having trouble selecting a time while using this. I personally like it the way it is but, users are complaining…

The question is, is there any way to have the lists in the picker stay at the end and not bounce/jump when it gets there?

Posts: 1

Participants: 1

Read full topic

@Madhawa wrote:

Im used this https://devdactic.com/dynamic-theming-ionic/ for my university project app ,Theme background change are working but ihave some issue, Ionic Modals for not working theme option , other pages are working , How to fix that issue
Thanks

my-code

providers - settings.ts

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/Rx';

@Injectable()
export class SettingsProvider {

  private theme: BehaviorSubject<String>;

  constructor() {
    this.theme = new BehaviorSubject('dark-light');



  }
  setActiveTheme(val) {
    this.theme.next(val);
  }

  getActiveTheme() {
    return this.theme.asObservable();
  }
}

page/setting.html

<ion-content padding>
  <p text-center>Theme settings</p>
  <button ion-button full icon-left (click)="toggleAppTheme()" (click)="presentLoading()" style="background: lightgrey;color: #263447;">
    <ion-icon  name="sunny"></ion-icon>Light
  </button>

 <button ion-button full icon-left (click)="toggleAppThemes()" (click)="presentLoading()" style="background: #263447;color: white;">
    <ion-icon  name="bulb"></ion-icon>Dark
  </button>
</ion-content>

setting.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams , LoadingController} from 'ionic-angular';
import {SettingsProvider} from "../../providers/settings/settings";


@IonicPage()
@Component({
  selector: 'page-settings',
  templateUrl: 'settings.html',
})
export class SettingsPage {
  selectedTheme: String;
  constructor(public navCtrl: NavController, private settings: SettingsProvider,public loadingCtrl: LoadingController) {
    this.settings.getActiveTheme().subscribe(val => this.selectedTheme = val);

  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad SettingsPage');
  }
  to

  toggleAppTheme() {

      this.settings.setActiveTheme('light-theme');

  }
  toggleAppThemes() {
 this.settings.setActiveTheme('dark-theme');

  }
}

app.html

ion-menu  id="myMenu" [content]="content" side="right" persistent="true">
  <ion-header>
    <ion-toolbar>
      <ion-grid>

        <ion-row>
          <ion-col col-6>
            <div text-left  style="color: #000000; font-size: 2rem;">
       Car-Rent</div>
          </ion-col>
          <ion-col >
            <div  class="t-setting" style="text-align: right;font-size: 2rem; color:#a57958;" ><ion-icon ios="ios-settings-outline" md="md-settings"></ion-icon></div>

            </ion-col>
          <ion-col>
            <div  class="t-logout" style="font-size: 2rem; color:#a57958; text-indent: 0rem;  text-align: right;"  ><ion-icon ios="ios-log-out" md="md-log-out"></ion-icon></div>
          </ion-col>
        </ion-row>
      </ion-grid>




    </ion-toolbar>
  </ion-header>
  <ion-content >
    <ion-list >
      <button menuClose ion-item *ngFor="let p of pages"[class.activeHighlight]="checkActive(p)" (click)="openPage(p)" > <ion-icon [name]="p.icon" item-left></ion-icon>{{p.title}}</button>

    </ion-list>
  </ion-content>
</ion-menu>
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"  [class]="selectedTheme" ></ion-nav>

Posts: 1

Participants: 1

Read full topic