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.
- 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.
Create a new application.
- Drag a repeater into the canvas.
- Add an image inside the repeater.
- Select type, right-click and import type . Select the attached json file. Click on create.
- Select connector, New File System Connector .
- Select the folder where you`ve saved the pictures and the json file and click on Save.
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.
DynamicImageDisplay.sapz (8.9 KB)
- 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