JSON API Workflow

The JSON API lets you render Data from an external source, it can be a Local JSON file or a Remote API/REST.
Many providers are offering an access to data with an API, it means that you can render data coming from your own existing Database (MySQL, Oracle…) or from other solutions (Airtable, etc…).

Architecture of the Json API

Application

You will find below different possible Json API implementation scenarios:

• Case 1. By using a Local JSON file source, it is possible to implement a Master/Detail App with search functionalities, without using a Database.
  You can use a JSON Repeater linked to a page with a JSON Displayer for displaying detailed information.
  You can even link a JSON Search Box to the Repeater for adding search functionnalities.
  

• Case 2. By using the API provided by some third party solutions, you can also implement a master/detail App for loading your data into your APP. 
  For instance, Airtable  provides an API usable in Thorium Builder.
  See the screenshots below, created from one of the Airtable DB examples:
  

  

  JSON Repeater 

  

  JSON Displayer 

• Case 3. If you want to use data coming from an existing database, then you can use all the possibilities of the Json API Plugin, Master-detail, search & filters and even entering data.
  If you already have an API on your database, then you can use it for creating your PWA, else you can create API in a very simple way, see the documentation Implementing your API
  

Workflow

In this Chapter, we will describe what is happening and how the data are handled when using the JSON API.

• Master Detail Implementation. You can implement a JSON Repeater that will call an API for displaying a set of data to the user. When the data are loaded, they are all added to memory, and the Displayer will display only the data, depending on the Repeater settings.
  If you implement a detail page with a Json displayer , the when the user will select a line on the Repeater, it will load the page and display all the information (depending on the displayer setup).
  

  TIP

  When the Page with the JSON Displayer is loaded, you have 2 options, you can use the data already in Memory (the data from the API used with the JSON Repeater) , or call another API that will load additional Data by passing an ID (a Primary Key)
  

  In this Scenario, you can also add a JSON Search Box to the JSON Repeater, and also add JSON Action Button that will let you call the API with various parameters and then load another set of data.
  

  Here is a schema of the different process steps:
  

  

• Single Record Load  Using a JSON Displayer combined to a Repeater lets you implement a Master/Detail application, but you can also use the JSON Displayer for loading a single Record.
  Of course in that case, the API used with the Displayer is Supposed to load a single Record.