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, extract the pictures and save attached json file in the same folder.
pictures.zip (86.3 KB)
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
- Drag a repeater into the canvas.
- Add an image inside the repeater.
Now, let’s create a type with the attached json file.
- 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.
- Select connector, New File System Connector .
- Select the folder where you`ve saved the pictures and the json file and click on Save.
In the StartPage.Load canvas, let’s read our data from the JSON File and store the data in a list
-
Inside the StartPage.Load canvas, drag the FileRead action from the FileSystem connector created in step above. Set the filename as menu.json
-
Drag and drop a list below the FileRead action and set its properties as in the picture
-
Drag and drop SetValue action with properties below.
Now, we are done with reading the JSON Data
The last step is to use the FileSystem_ReadFile action to read each image dynamically so that we can display images
-
Go to StartPage canvas. Select the repeater. In the repeater properties, set the repeater`s Listitem type as Types.type
-
Click on the link Create EventHandler in the repeater properties
-
Inside the Repeater.ItemLoad canvas, drag the FileRead action from the FileSystem connector created in step 5 above. Set the filename as in picture
- Drag and drop SetValue action and set its properties
The Repeater.ItemLoad has 2 actions.
Preview your application.
Congratulations! You should be seeing the following images.
Sample
DynamicImageDisplay.sapz (8.9 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