Setting up a JSON Source
When you want to display an external data set in a PWA, you can use a JSON Repeater and choose a JSON source.
This source can be a static JSON File, or a remote API Rest that return dynamic JSON data.
NOTE
When using Remote API Rest, don’t use mix-content (https vs http), or you could have security issues that will make your App stop working correctly.
Populating a JSON Repeater from a remote API
Implementing a Remote API works almost like with a local JSON File, the main difference is that instead of creating a data source from a JSON File, you have to enter the address of the API.
Setting Up options and Headers
New option available with version 2
Calling an API Rest may require some additional parameters (Headers…) .
For example, in order to avoid CORS security (cross-domain) issues, then you have to setup your Json API preferences.
Edit the Json API Parameters by double-clicking on the icon at the bottom of the screen (Or go to the project preferences=>Plugins)
Then set up the different parameters you want to apply when calling your API from your Project:
NOTE
Thorium uses the Fetch API for the Communication with the Web server, you can find out more about this API here: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
For example, in a cross-domain configuration, you should have to set the mode as “cors"
The Json API options are also used by the GoogleMap and OSM API when the map markers data are coming from an API
STEP #1 : create a page for your project and drop a JSON Repeater on the page
STEP #2 : double click on the JSON API Repeater widget.
By double-clicking, you can access to the advanced properties. Select the API Rest JSON source” for "Source Type” and enter your API Address
NOTE
It is highly recommended to use a secured https connection for accessing to your API
Important: in a master-detail context, if the page containing the Repeater is opened from another Repeater line, then the ID of the calling record line (if is is added to the Key Field Repeater parameter) is automatically passed to the current Repeater, it means that you can filter the Repeater from a parent id.
Exemple: the calling line is the country Canada with id = 23 , then if you want to display only the Cities with Parent ID=23, use the following syntax:
https://myDomain/MyPAth/MyAPI?MyIndexField= {key} &myParam2=Value...
{key} will be automatically replaced by the value of the selected country record key value, so in our example, the following address will be actually sent to the server:
https://myDomain/MyPAth/MyAPI?MyIndexField=23&myParam2=Value..If your Json API returns records within a root group (eg. json=>Items=>id, name,...} ) , then set the Root option with the record root name (eg. “Items”), else leave it empty.
Exemple of JSON Structure expected by the Plugin
STEP #4 : define the fields you want to display in the list as described in the screenshot below:
TIP
You can use the JSON Explorer in order to get the fields name and then, you can drag&drop fields to the JSON Repeater Field names. The JSON Explorer Window can stay open while you are modifying your pages so you can use it in the whole project.
TIP
The Image Root fields lets you specify the root access to images if there are located on another server. For instance, The “image” field can contain only the filename, and the “Image Root” contains then the full prefix url when required (eg. https://myserver/mypath/)
Note that the JSON Repeater includes a parameter named “Key Field” that will reference the Primary Key of the record and then call another API from this record when displaying the detail.
Read the JSON Repeater Help Page for more details.
