Upload product images (POST)

scenario from the list & view customers (get) docid 1idosnlezutmg r89yq f on the screen, tap the add images button, which will direct you to a screen that allows you to upload multiple images of products for each customer upload images using rest how does this work the rest apis post operator for the images table is used in a jigx function with an inputtransform to capture the image metadata configuring the conversion property ensures that the images are uploaded in the correct format to the rest service specifying the id in the ouputtransform in the function enables the local data provider temp id to be automatically updated with the rest id once the images are created in the datastore the media field takes a photo or selects from existing images on the device this code sample builds upon the previous list customers (get) docid\ dj2zriast58uytgk mfli step, to develop a complete and functional solution rest api rest detail url https //\[your rest service]/api/images operation/method post function the rest apis post operator is used in a jigx function with body parameters to specify the exact columns to be created for the image record the inputtransform specifies the image metadata that is sent to the rest service this transformation process ensures that the data adheres to the expected schema or format required by the rest service for processing the request in the outputtransform the id is configured to ensure that the properties are automatically returned once the image is created and the local provider's temp id is updated with the actual id the customer images are stored in the rest service in base64, jigx stores the iamges in local uri format for display a conversion is configured in the function to change the images from local uri to base64 rest upload customer images jigx provider data provider rest \# creates data in the backend method post \# use your rest service url url https //jigx training azurewebsites net/api/images \# 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 \# use manage jigx com to define credentials for your solution value service oauth custid type string location body required false createdby type string location body required false description type string location body required false createddate type string location body required false value =$now() image type image location body required false \# define the image metadata that must be created in the record in the rest api inputtransform | { "custid" custid, "createdby" createdby, "description" description, "createddate" createddate, "image" image } \# specifiying an outputtransform for the image id ensure that the id created \# by the rest api is automatically synced back to the jigx local datasource \# replacing the temp id outputtransform | $ { "id" image id } \# convert the images to be uploaded to the rest service to base64 \# which the rest service expects to be able to store the image conversions \ property image from local uri to base64 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) on the customer composite jig add a go to action to add a button that links to the add customer images jig add parameters to the go to action to use the customer id as inputs use a default jig with the media picker component to capture or select images add an execute entities action to call the rest upload customer images function and use the media field 's state to configure the metadata to be uploaded for the image add customer images jigx title upload images type jig default header type component jig header options height small children type component image options source uri https //www dropbox com/scl/fi/o1gobv6lj1l3076veyaff/cloud 7906280 1280 png?rlkey=c5ad2oknpw5fju9qjlb1c2d2o\&raw=1 \# set the onfocus to clear all data from the jig and reset it \# for the next upload onfocus type action reset state options state =@ctx jig components newimage state data children \ type component entity options children \ type component entity field options label customer value =@ctx jig inputs customer companyname \ type component form instanceid newimage options isdiscardchangesalertenabled false children \ type component text field instanceid description options label add the product name \ type component media field instanceid image options label image mediatype image ismultiple true maximumfilesize =20 1024 1024 actions \ children \# action to upload the images \ type action execute entities options title upload images provider data provider rest entity customer images \# create the image record in the local sqlite table method create \# create the image record in the rest service function rest upload customer images \# data configuration points to the collection of images with their metadata \# in the media picker ensuring that the call to post \# & create is executed multiple times for each image \=@ctx components image state value { "custid" @ctx jig inputs customer id, "createdby" @ctx user email, "description" @ctx jig components description state value, "createddate" $now(), "image" $ } onsuccess type action go back 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 \# add an onfocus to return the images for the specific customer \#using the id this is on demand syncing to limit the images returned 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 actions \ children \ type action go to options title add images linkto add customer images parameters 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 \# action to execute the delete type action execute entity options \# use the rest data provider to call the delete function provider data provider rest entity customers \# delete the record from the local sqlite table method delete goback stay \# delete the record from the rest service function rest delete customer \# specifiy the function parameters required by the \# function to delete the customer, in this example custid functionparameters \# id of customer record to be deleted in rest service custid =$number(@ctx current item id) data \# id of customer to be deleted from local data provider id =@ctx current item id 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 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