Link Search Menu Expand Document

Use a Cell

Cells are used by the List View and Grid View to display Multiple Values of a Data Type. For example, a List of Users or a List of Posts.

Datasource

The easiest way to display data in a List View or Grid View is to use the Datasource feature. You can either Search/Display multiple Records from your Kodika Server, or fetch data from an External JSON API.

  1. Open the Screen that you want to add the List View or the Grid View.
  2. Drag the Design element(List View or Grid View) in the Screen. It is usually full screen, but you can change its size afterward.
  3. Open Datasource section.
  4. Press + Create datasource.
  5. Select either the Kodika Server or the External APIs
    1. Kodika Server: Follow the steps in Search/Display multiple Records using Datasource page to setup the parameters.
    2. External API: Select the API and then the API Request that you want to use.
  6. Connect the List of Records of the On Success response (Kodika Server), or the List of Models from the API Response (External API) with the Design element of step 2.
    1. Press the + on the parameter of the Datasource response.
    2. Select the Design Element menu.
    3. Press the + on the List View or Grid View from the List of the Screen’s Design Elements.
  7. Select or create the Cell that will be used.
  8. (Optional) Edit the design and assign values to the Cell.
  9. Press SAVE on the Datasource create.
  10. (Optional) You can enable, by answering Yes, the Auto start of the Datasource.

Screen Property

A more advanced way to display data in a List View or Grid View is to connect it with a Screen property with a Data Type with Multiple Values.

  1. Open the Screen that you want to add the List View or the Grid View.
  2. Drag the Design element(List View or Grid View) in the Screen. It is usually full screen, but you can change its size afterward.
  3. Open the Data tab in the Inspectors section.
  4. Create a new Screen property, if need to, with a List of Data Type.
  5. Select the newly added Design element in the Editor.
  6. Press the + in the Screen Property. Check out more.
  7. Select or create the Cell that will be used. Now every time the binded Screen property changes, the Design Element will refresh with the new Data.

On Selection Event Action

After you have set a Cell, either with a Datasource or a Screen property, you will be able to use the On Selection Event of the List View or the Grid View.
Tip: Using this event a special case Selected Item will be visible during bind of the Screen Navigation parameters.

Example

Navigate to a new screen from an On Selection Event and use the selected Pet in the next My Pet Screen