Update customer details (PUT)

8min
Scenario
Add the ability to update a customer's details by pressing on the customer in the list of customers﻿ which loads that specific customer's details in a form. You can edit the fields and press the Update Customer button. 
Update customer
﻿
How does this work
The customer details are loaded using the customer id as the inputs from the list-customer 
﻿.  An update function to call the REST APIs PUT operation is configured. The function and function parameters are referenced in the execute-entity action in the 
﻿, which will update the customer's details when the Update Customer button is pressed on the form. A Post operation is performed in the REST service.
This code sample builds upon the previous List customers (GET)﻿ step, to develop a complete and functional solution.
REST API
REST
Detail
URL
https://[your_rest_service]/api/customers
Operation/Method
PUT
function
The REST APIs PUT operator is used in a 
﻿ function with body parameters to specify the exact columns to be updated for the record. The inputTransform specifies how the data should be structured or formatted when being 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. 
rest-update-customer.jigx
provider: DATA_PROVIDER_REST
method: PUT #Updates data in the REST Service
url: https://[your_rest_service]/api/customers #Use your REST service URL 
useLocalCall: true #Direct the function call to use local execution between the mobile device and the REST service
format: text

parameters:
  accessToken:
    location: header
    required: true
    type: string
    value: service.oauth #Use manage.jigx.com to define credentials for your solution

  id:
    type: int
    location: body
    required: true
  firstName:
    type: string
    location: body
    required: true
  lastName:
    type: string
    location: body
    required: true
  companyName:
    type: string
    location: body
    required: true
  address:
    type: string
    location: body
    required: false
  city:
    type: string
    location: body
    required: false
  state:
    type: string
    location: body
    required: false
  zip:
    type: string
    location: body
    required: false
  phone1:
    type: string
    location: body
    required: false
  phone2:
    type: string
    location: body
    required: false
  email:
    type: string
    location: body
    required: false
  web:
    type: string
    location: body
    required: false
  region:
    type: string
    location: body
    required: false
  customerType:
    type: string
    location: body
    required: false
  jobTitle:
    type: string
    location: body
    required: false
#Define the customer data that must be updated in the record in the REST Service  
inputTransform: |
  {
    "custId": id,
    "firstName": firstName,
    "lastName": lastName,
    "companyName": companyName,
    "address": address,
    "city": city,
    "state": state, 
    "zip": zip,
    "phone1": phone1,
    "phone2": phone2,
    "email": email,
    "web": web,
    "region": region,
    "customerType": customerType,
    "jobTitle": jobTitle
  }
  
provider: DATA_PROVIDER_REST
method: PUT #Updates data in the REST Service
url: https://[your_rest_service]/api/customers #Use your REST service URL 
useLocalCall: true #Direct the function call to use local execution between the mobile device and the REST service
format: text

parameters:
  accessToken:
    location: header
    required: true
    type: string
    value: service.oauth #Use manage.jigx.com to define credentials for your solution

  id:
    type: int
    location: body
    required: true
  firstName:
    type: string
    location: body
    required: true
  lastName:
    type: string
    location: body
    required: true
  companyName:
    type: string
    location: body
    required: true
  address:
    type: string
    location: body
    required: false
  city:
    type: string
    location: body
    required: false
  state:
    type: string
    location: body
    required: false
  zip:
    type: string
    location: body
    required: false
  phone1:
    type: string
    location: body
    required: false
  phone2:
    type: string
    location: body
    required: false
  email:
    type: string
    location: body
    required: false
  web:
    type: string
    location: body
    required: false
  region:
    type: string
    location: body
    required: false
  customerType:
    type: string
    location: body
    required: false
  jobTitle:
    type: string
    location: body
    required: false
#Define the customer data that must be updated in the record in the REST Service  
inputTransform: |
  {
    "custId": id,
    "firstName": firstName,
    "lastName": lastName,
    "companyName": companyName,
    "address": address,
    "city": city,
    "state": state, 
    "zip": zip,
    "phone1": phone1,
    "phone2": phone2,
    "email": email,
    "web": web,
    "region": region,
    "customerType": customerType,
    "jobTitle": jobTitle
  }
  
﻿
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
      - entity: us-states
        function: rest-get-usStates  
        
# 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 list of customers jig configure an on-press action in the swipable: left event that adds the View button to the list and links to the update-customer 
﻿. 
Add a form component to load the customer details with each field's instanceId containing the same name as the body parameters in the function.
For the state field configure a dropdrown with an expression to get the list of states for selection.
Configure an initialValue property for each field in the form using an expression to return the customer data for that field.
Add an execute-entity action to call the function that will update the customer record in the local table (using method: update) and in the REST service (function: rest-update-customer). Use an expression to specify the value for each of the function's parameters. Note that the customer id already exists and the expression for id: uses the inputs again to specifiy the customer record that must be updated. 
update-customer.jigx
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

# Specify the local datasource -ASK RENIER
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: [email protected]
item:
  type: component.list-item
  options:
    title: [email protected]
    subtitle: [email protected] & ' ' & @ctx.current.item.lastName
    leftElement: 
      element: avatar
      text: [email protected]
      uri: [email protected]
    label:
      title: =$uppercase((@ctx.current.item.customerType = 'Silver' ? @ctx.current.item.customerType:@ctx.current.item.customerType = 'Gold' ? @ctx.current.item.customerType:''))
      color:
        - when: [email protected] = 'Gold'
          color: color3
        - when: [email protected] = 'Silver'
          color: color14
# Add the onPress event to the customer - list to view & update customer details        
    onPress: 
      type: action.go-to
      options:
        linkTo: update-customer
        parameters:
          customer: [email protected]
# Add the swipeable event to the customer - list to delete customer            
    swipeable:
      left:
        - 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: [email protected] #id of customer to be deleted from local data provider
                title: Are you sure?
                description: =('Press Confirm to permanently delete ' & @ctx.current.item.companyName)
 
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

# Specify the local datasource -ASK RENIER
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
# Add the onPress event to the customer - list to view & update customer details        
    onPress: 
      type: action.go-to
      options:
        linkTo: update-customer
        parameters:
          customer: =@ctx.current.item
# Add the swipeable event to the customer - list to delete customer            
    swipeable:
      left:
        - 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
                title: Are you sure?
                description: =('Press Confirm to permanently delete ' & @ctx.current.item.companyName)
 
﻿
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
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
﻿
﻿
Updated 15 May 2024
Did this page help you?
Create customer (POST)
List & View customers (GET)
Docs powered by Archbee
TABLE OF CONTENTS
REST	Detail
URL	https://[your_rest_service]/api/customers
Operation/Method	PUT