List product images (GET)

scenario from the list of customers from the list of customers , swipe left and select the view button the customer's details are shown on a screen with the customer's location at the top, the contact person's details, and then a list of the customer's products with images list customer images how does this work the rest apis get operator for the customer and images table is used in the {{jigx}} functions with an outputtransform to specify the exact data to be returned to be shown in the list and view a composite {{jig}} with a location header, combines the view customer jigx and list customer images jigx and uses inputs to know which customer's details to show a global action is configured to sync the data in the app with the rest data provider calling the function in turn, the global action is called in the index jigx file to load the data when the app is opened in the {{jig}} s the local data provider is used to configure the components this code sample builds upon the previous list customers (get) docid 1o2k7 ccuvzfbg7x7f4r2 step, to develop a complete and functional solution rest api rest detail url https //\[your rest service]/api/images?custid={custid}\&includeimage=true operation/method get function specify the rest api url and operation (method), parameters to include authentication in the header and in the outputtransform define the image metadata properties to be returned the customer images are stored in the rest service in base64, {{jigx}} requires the logo in local uri format for display a conversion is configured in the function to change the base64 to local uri rest get customer images jigx provider data provider rest method get #fetches data from the rest service url https //\[your rest service]/api/images?custid={custid}\&includeimage=true #use your rest service url uselocalcall true #direct the function call to use local execution between the mobile device and the rest service forrowswithvalues #use forrowswithvalues with the customer id to only get images specific to that customer instead of all rows (images) custid custid parameters accesstoken location header required true type string value service oauth #use manage jigx com to define credentials for your solution custid type string location query required true \#define the customer images that must be fetched from the rest service outputtransform | $ images { "id" id, "custid" $$ inputs custid, "createddate" createddate, "createdby" createdby, "description" description, "image" image }\[] \#convert the images returned from the rest service to local uri which the jig expects to be able to display the image conversions \ property image from base64 to local uri action (global) create a load data jigx file under the actions folder this file is configured with an action that syncs the data from the rest service, by calling the function, to the local sqlite table the action file is referenced in the index jigx file to load the data when the app is opened or is in focus on the device the rest get customers images function is not added to the sync entities action due to the large number of images that will be returned rather the images are returned on demand in the {{jig}} per customer which reduces the number of images loaded on the device ensuring that the performance is not affected load data jigx # the sync entities action is used to get the data from the rest data provider using the function \# the global action can be referenced throughout the solution for effieicency and performance \# the data is synced from the rest data provider to a local data provider on the device action type action sync entities options provider data provider rest entities \ entity customers function rest get customers \ entity us states function rest get usstates jig (screen) use a list {{jig}} type to configure a list of customers use a list {{jig}} type to configure a list of customer product images use a default {{jig}} type to configure the customer details view since the data is already synced to the local sqlite data provider, the {{jig}} 's datasource is configured with a query to provide the data for use in the lists and view create a composite {{jig}} and combine the default and image list {{jig}} s in the header use a location component and an expression that uses inputs from the default {{jig}} 's jsonproperties to show the address, city, state, and zip code of the customer in the datasource query of the view customer {{jig}} use jsonproperties to return the complex structure for address and phone configure a queryparameter using inputs to return the customer details by id in the datasource for the view customer {{jig}} expressions are used to reference the exact data property required in each component of the view customer {{jig}} list customer images jigx title products and services type jig list icon image file camera alternate \#add a placeholder if there are no images to return placeholders \ title it seems we're fresh out of visuals here when =$count(@ctx datasources customerimages) = 0 icon loading data \#define the data to use in the jig, the data has been synced by the global action to the local data provider from the rest service datasources customerimages type datasource sqlite options provider data provider local entities \ entity customer images query | select cim id as id, json extract(cim data, '$ createddate') as createddate, json extract(cim data, '$ custid') as custid, json extract(cim data, '$ createdby') as createdby, json extract(cim data, '$ description') as description, json extract(cim data, '$ image') as image from \[customer images] as cim where json extract(cim data, '$ custid') = @custid order by json extract(cim data, '$ createddate') desc queryparameters custid =@ctx jig inputs customer id data =@ctx datasources customerimages item type component list item options title =@ctx current item description subtitle =@ctx current item createdby leftelement element image text '' uri =@ctx current item image view customer details jigx title customer details type jig default header type component jig header options height medium children type component location options address =@ctx jig inputs customer address & ' ' & @ctx jig inputs customer city & ', ' & @ctx jig inputs customer state & ', ' & @ctx jig inputs customer zip \#define the data to use in the jig, the data has been synced by the global action to the local data provider from the rest service datasources customer type datasource sqlite options provider data provider local entities \ entity customers query | select cus id as id, json extract(cus data, '$ firstname') as firstname, json extract(cus data, '$ lastname') as lastname, json extract(cus data, '$ companyname') as companyname, json extract(cus data, '$ address') as address, json extract(cus data, '$ city') as city, json extract(cus data, '$ state') as state, json extract(cus data, '$ zip') as zip, json extract(cus data, '$ phone1') as phone1, json extract(cus data, '$ phone2') as phone2, json extract(cus data, '$ email') as email, json extract(cus data, '$ web') as web, json extract(cus data, '$ customertype') as customertype, json extract(cus data, '$ jobtitle') as jobtitle from \[customers] as cus where id = @custid order by json extract(cus data, '$ companyname') queryparameters custid =@ctx jig inputs customer id \#use jsonproperties to return the complex structure for address and phone jsonproperties \ addresses \ phones children \ type component entity options children \ type component entity field options label name value =@ctx datasources customer companyname \ type component field row options children \ type component entity field options label contact value =@ctx datasources customer firstname & ' ' & @ctx datasources customer lastname \ type component entity field options label job title value =@ctx datasources customer jobtitle \ type component entity field options contenttype email label email righticon email value =@ctx datasources customer email \ type component entity field options contenttype phone label phone righticon phone value =@ctx datasources customer phone1 \ type component entity field options contenttype link label web value =@ctx datasources customer web customer composite jigx title customer details type jig composite onfocus type action sync entities options provider data provider rest entities \ entity customer images function rest get customer images functionparameters custid =@ctx jig inputs customer id header type component jig header options height medium children type component location options address =@ctx jig inputs customer address & ' ' & @ctx jig inputs customer city & ', ' & @ctx jig inputs customer state & ', ' & @ctx jig inputs customer zip children \ jigid view customer details inputs customer =@ctx jig inputs customer \ jigid list customer images inputs customer =@ctx jig inputs customer list customers jigx title global customers type jig list icon global accelerator header type component jig header options height small children type component image options source uri https //www dropbox com/scl/fi/ha9zh6wnixblrbubrfg3e/business 5475661 640 jpg?rlkey=anemjh5c9qsspvzt5ri0i9hva\&raw=1 \#define the data to use in the jig, the data has been synced by the global action to the local data provider from the rest service datasources customers type datasource sqlite options provider data provider local entities \ entity customers query | select cus id as id, json extract(cus data, '$ firstname') as firstname, json extract(cus data, '$ lastname') as lastname, json extract(cus data, '$ companyname') as companyname, json extract(cus data, '$ address') as address, json extract(cus data, '$ city') as city, json extract(cus data, '$ state') as state, json extract(cus data, '$ zip') as zip, json extract(cus data, '$ phone1') as phone1, json extract(cus data, '$ phone2') as phone2, json extract(cus data, '$ email') as email, json extract(cus data, '$ web') as web, json extract(cus data, '$ customertype') as customertype, json extract(cus data, '$ jobtitle') as jobtitle, json extract(cus data, '$ logo') as logo from \[customers] as cus \ order by \ json extract(cus data, '$ companyname') data =@ctx datasources customers item type component list item options title =@ctx current item companyname subtitle =@ctx current item firstname & ' ' & @ctx current item lastname leftelement element avatar text =@ctx current item state uri =@ctx current item logo label title =$uppercase((@ctx current item customertype = 'silver' ? @ctx current item customertype @ctx current item customertype = 'gold' ? @ctx current item customertype '')) color \ when =@ctx current item customertype = 'gold' color color3 \ when =@ctx current item customertype = 'silver' color color14 onpress type action go to options linkto update customer parameters customer =@ctx current item swipeable left \ onpress type action go to options parameters customer =@ctx current item \# link to the composite to see the customer details and images linkto customer composite label view icon view \ label delete icon delete 2 color negative onpress type action confirm options isconfirmedautomatically false onconfirmed type action execute entity #action to execute the delete options \#use the rest data provider to call the delete function provider data provider rest entity customers method delete #delete the record from the local sqlite table goback stay function rest delete customer #delete the record from the rest service \#specifiy the function parameters required by the function to delete the customer, in this example custid functionparameters custid =$number(@ctx current item id) #id of customer record to be deleted in rest service data id =@ctx current item id #id of customer to be deleted from local data provider modal title are you sure? description =('press confirm to permanently delete ' & @ctx current item companyname) actions \ children \ type action go to options title add customer linkto new customer index for performance and offline support the data is synced from the rest service as soon as the app is opened or recieves focus this is achieved by calling the global action in the onfocus and onload events index jigx name hello rest example title hello rest solution category sales \# onfocus is triggered whenever the jig is displayed the sync entities action in the global action calls the jigx rest function and populates the local sqlite tables on the device with the data returned from rest service onfocus type action execute action options action load data \# onload is triggered when the solution is loaded on the device the sync entities action in the global action calls the jigx rest function and populates the local sqlite tables on the device with the data returned from rest service onload type action execute action options action load data widgets \ size 1x1 jigid list customers