Reading and displaying images dynamically in stadium

Images can be selected from many different sources, including from Connectors (Databases, File systems and Web Services), Static Data or the Stadium Gallery.

In this tutorial, we are going to learn how to set images dynamically inside repeaters using data read from a JSON file.

Prerequisites:
Download and save the pictures, and attached json file in the same folder.

elaicheesecake uthappizza vadonutzucchipakoda

menu.json (1.4 KB)
Description

  • We’ll add a repeater with image control in the StartPage.
  • We’ll read our data from a JSON File and store the data in a list in the StartPage.Load. We’ll then pass the list data to the Repeater.ItemLoad page
  • We’ll use the FileSystem_ReadFile action to read each image dynamically so that we can display images.

Steps:
Create a new application.

In the StartPage canvas
  1. Drag a repeater into the canvas.
  2. Add an image inside the repeater.
Now, let’s create a type with the attached json file.
  1. Select type, right-click and import type . Select the attached json file. Click on create.

We’ll create a file system connector that will allow us to populate images inside our repeater.
  1. Select connector, New File System Connector .
  2. Select the folder where you`ve saved the pictures and the json file and click on Save.

image


In the StartPage.Load canvas, let’s read our data from the JSON File and store the data in a list
  1. Inside the StartPage.Load canvas, drag the FileRead action from the FileSystem connector created in step 6 above. Set the filename as menu.json

  2. Drag and drop a list below the FileRead action and set its properties as in the picture

image
3. Drag and drop SetValue action with properties below.
image

Now, we are done with reading the JSON Data
image


The last step is to use the FileSystem_ReadFile action to read each image dynamically so that we can display images
  1. Go to StartPage canvas. Select the repeater. In the repeater properties, set the repeater`s Listitem type as Types.type

  2. Click on the link Create EventHandler in the repeater properties
    image

  3. Inside the Repeater.ItemLoad canvas, drag the FileRead action from the FileSystem connector created in step 5 above. Set the filename as in picture

  1. Drag and drop SetValue action and set its properties

image

The Reapeater.ItemLoad has 2 actions.
image


Preview your application.
Congratulations! You should be seeing the following images.

Sample
NewApplication.sapz (8.6 KB)

Challenge yourself

  • If you want to save the pictures and JSON file in different folders, you will need 2 different FileSystem connectors.
  • You can add other controls in the repeater to display name and id as created in the type
1 Like