JSON Repeater Widget

The JSON Repeater lets you display a set of Data (Client List, Product List …) provided by the API

JSON Repeater are powered by the Framework7 Virtual List,  when the App is started, all the data from the JSON Source are loaded in memory, and the Virtual List engine will render the data without loss of performance by rendering only the visible data onscreen. 

Setup the JSON Source for the Repeater

The first thing you have to do while implementing is setting up the JSON source

Choosing a Display mode

The JSON Repeater implements 3 display modes: medalist (image+text list), Collection (Image Grid) or Custom Template:

3 different Repeater display modes

• Media List. This display mode will render the JSON data as a list with (or without) an image.
  You can set the image size and display it rounded.
  The right side can display up to 3 different fields (named First Field, Second Field and Third Field in the interface)
  

• Collection. The collection display mode let’s you display the records as an image Grid with or without text information.
  

  NOTE

  The Collection display mode is not powered by the Virtual List Component, and is limited to 99 records.
  With the current version, the Collection View Mode can’t work with JSON Search Box and JSON Action buttons, it will be implemented in a future release.
  

• Custom Template. With this Display Mode, you can virtually setup any type of layout, the “Repeated Zone” is empty by default and you can add any type of component inside (Cards…)
  

  NOTE

  For displaying your Data fields with a Custom Template display mode, you must add Json Fields inside the Template.
  

  

  Example of Custom Template
  With a Card, some JSON Fields (Image and Text)
  And an Action Button
  

  Important

  Custom Repeater must have a Fixed height, if you have elements inside the template that have a dynamic size (Long text, Responsive Image….) you must make sure that these elements have always the same size! See the example below:
  

  

  This is what happens by default if the text styles are not well defined: the text overlaps

  

  In order to solve this kind of problem, you must either use the "Single Line (no wrap)" text alignment available in the settings of the JSON fields.You can also define a fixed height for the JSON control, and use the "Clampin" attribute (Advanced Text Properties) which allows you to set the number of visible lines. (See Screen shot above with the description having a Clampin value of 2)

Setting Up the Fields to display

Depending on the display mode, you must choose the fields you wish to display in the list.
You must set the names of the JSON fields by using the exact name returned by the API or JSON file.

Fields that are within a hierarchy should use the dot notation, for example: address.city

• Media List. The medial list template lets you add 3 fields to the layout plus an optional image.
  

  

• Collection Layout. For the Collection view mode, you can set 2 fields that will be displayed at the bottom of every image.
  

• Custom Template. For the Custom template view mode, there is more flexibility as you can add all the fields you want to display in a list line.
  You can also add Images , audio or videos files.
  
  For adding fields, just drop the widget “Json Field” into the Repeater template and set the name of the field.
  

  

  Example of Custom Template

Detail Page and "Key Field” 

The last thing you have to setup in your Repeater are the detail page and the Key Field.
Note that this is only required if you want a master/detail behaviour, if you let theses parameters empty, then there won’t be any action triggered when the user will select a line.

The “Detail Page” is the target page that will be open when a user select a list line.
In general this page will contain a JSON Displayer for displaying the record detail, and/or another JSON Repeater that will display the list of Child records for the selected line.

The Key Field is the name of the field which is a unique identifier for the records (in general: “id”). This field will be passed to a page when linking a Repeater to a detail page. For instance, it will be useful if you want the JSON Displayer of the detail page to call an API that will return more content than the content available in the Repeater memory data.

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..