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

Delete customer (DELETE)

8min

Scenario

Add the ability to delete a customer from the list of customers by swiping left on the customer in the list-item and tapping the Delete button.

Delete customer
Delete customer


How does this work

A delete function is configured to call the REST APIs DELETE operation and identify the record to delete using the customer Id (CustID). The function is referenced in the execute-entity action which will delete the customer from the list and from the datasource via the REST API when the Delete button is pressed.

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?id={custId}

Operation/Method

DELETE

Function

Specify the REST API url and operation (method), parameters to include authentication in the header and the customer id (custId) to use as the identification of the record to delete.

rest-delete-customer.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


Jig (screen)

  • Use a list type to configure a list of customers.
  • Since the data is already synced to the local Sqlite data provider, the s datasource is configured using the local provider 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.
  • A swipeable: left event is configured for the delete with an execute-entity action that calls the delete function and uses the custId to identify the record to delete.
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 recieves focus. This is achieved by calling the global action in the OnFocus and onLoad events.

index.jigx