JSON Action Button

JSON ACtion buttons are simple customisable buttons that can handle 2 types of actions: Filtering a JSON Repeater , or, when added to a JSON Repeater template, opening a page by passing the selected line current record and ID.

Action Button

The Action Button mode, will let you set up an API address that will be assigned to a JSON Repeater dynamically.
For instance, if your API can return Vegetables or Fruits depending on one parameter:  https://www.mydomain/myApi?type=fruits or  https://www.mydomain/myApi?type=vegetables .

In order to implement this kind of Filter, drop 2 JSON Action buttons to your page, and set the “Call JSON” of each button with the different API calls just like in our exemple.
Then, link the 2 buttons to the JSON Repeater (option Connect to Virtual List)

...

When you run the project, it is now possible to reload the JSON Repeater with different parameters:

...

List Line Action Button

The “List Line Action Button” is supposed to be added inside a JSON Repeater and linked to a page. This button will be shown on every line of the Repeater, and if the user click on it, it will load a page by passing the Memory Record and record Identifier.

...

Action Button within a Repeater Template

When you double click on the button, you can adjust its parameters:

...

Action Button Settings

  • Action. Set it to List Line Action

  • Page. Select here the page you want to open when the user click on the line button

  • Effect. Select the Effect you want to apply when loading the page.

  • Key. Enter the JSON field name that contains a unique identifier (ID) that will be passed to the called page

    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.

Copyright©  Nymphide Lab 2020 - All Rights Reserved 

...