List customers (GET)

scenario create a list of customers showing the company name, contact person's first and last name, status, and an avatar on the left displaying the us state how does this work the rest apis get operator is used in a {{jigx}} function with an outputtransform to specify the exact data to be returned in the outputtransform, the properties we want to return and use are specified 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 list {{jig}} the local data provider is used to configure the list item component rest api rest detail url https //\[your rest service]/api/customers 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 data properties to be returned the customer logo is 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 jigx provider data provider rest method get #fetches data from the rest service url https //\[your rest service]/api/customers #use your rest service url \#return data for rows with matching ids forrowswithmatchingids true \#direct the function call to use local execution between the mobile device and the rest service uselocalcall true parameters accesstoken location header required true type string value service oauth #use manage jigx com to define credentials for your solution \#define the customer fields that must be fetched from the rest service outputtransform | $ customers { "id" custid, "firstname" firstname, "lastname" lastname, "companyname" companyname, "address" addresses\[0] address, "city" addresses\[0] city, "state" addresses\[0] state, "zip" addresses\[0] zip, "phone1" phones\[0] mobile, "phone2" phones\[0] office, "email" email, "web" web, "region" region, "customertype" customertype, "jobtitle" jobtitle, "logo" logo } \#convert the images returned from the rest service to local uri which the jig expects to be able to display the image conversions \ property logo 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 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 jig (screen) use a list {{jig}} type to configure a list of customers 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 list expressions are used to reference the exact data property required in each component 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 index for performance and offline support the data is synced from the rest service as soon as the app is opened or receives 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 tabs home jigid list customers icon home apps logo