Upload product images (POST)

Scenario

From the view customer, 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

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) step, to develop a complete and functional solution.

REST API

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: [email protected]
    
children:
  - type: component.entity
    options:
      children:
        - type: component.entity-field
          options:
            label: Customer
            value: [email protected]
  - 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.
            [email protected].
            {
              "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

customer-composite.jigx

list-customers.jigx

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