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.

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:


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


    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:

    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:


    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.

Copyright©  Nymphide Lab 2020 - All Rights Reserved