Data Providers
...
REST
Create an app using REST APIs

Create customer (POST)

9min

Scenario

Press the Add Customer button in the customer list to create a customer. Complete the new customer form and press the Create button.

Add new customer
Add new customer


How does this work

A function to call the REST API's POST operation is configured, allowing the record to be created in the backend. The function is referenced in the execute-entity action on the form. The customer is created using the REST data provider with a create method (which creates the record in the local data provider with a temp_id, calling the rest-create-customer function and providing the parameters for the data values to be created in 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 it is created in the datastore.

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

URL

https://[your_rest_service]/api/us_states (To get a list of states for selection in the form)

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 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. In the outputTransform the id and status are configured to ensure that the properties are automatically returned once the record is created and the local provider's temp_id is updated with the actual id and status.

Making the form completion easier the REST API GET opertaion is used on the us_states table to return the state name, region and abbreviation in the dropdown field.

rest-create-customer.jigx
rest-get-usStates.jigx


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


Datasource

Add a file under the datasource folder to configure the local data provider with the data to return from the us-states table.

us-states.jigx


Jig (screen)

  • On the list of customers jig configure an go-to action that adds the Add Customer button to the list and links to the create-customer jig.
  • In a default jig add a local data provider datasource with a query to get the us_states data. Add a query parameter to set the state of the region field once the state field is selected.
  • Add a form component to capture 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.
  • For the region use an expression that uses the datasource queryParameters value. This allows the region to auto populate on the form on the state is selected in the dropdown.
  • Add an execute-entity action to call the function that will create the customer record in the local table (using method: create) and in the REST service (function: rest-create-customer). Use an expression to specify the value for each of the function's parameters.
create-customers.jigx
list-customer.jigx


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