The Repeater was recently released. This is one of our most powerful controls and is used to display a dataset on a page by applying the same customized visual template to each item in the dataset. Using the repeater is a 3 part process:
Part 1 - Build the visual template
( Example steps 3, 4, 5 & 6 below )
Part 2 - Map the data in the template
( Example steps 7, 8 & 9 below )
Part 3 - Assign the dataset to the repeater
( Example steps 10 & 11 below )
NB! It is very important to realise the difference between Part 2 and Part 3.
In Part 2 you are mapping the properties of a single data item to the controls in the template and is done in the Repeater’s ItemLoad eventhandler. The ItemLoad eventhandler fires once for every data item in your dataset, passing that data item in as “ListItem” parameter to the eventhandler.
In Part 3, you are assigning your entire data set to the repeater.
I will now build a basic example where I list the employees of the Northwind database using a card layout.
-
Let’s start by creating a connection to the Northwind db. Click on Connectors and add a Database.
-
Now create a Query by right-clicking on the Northwind db and selecting New Query. Add the following SQL:
SELECT FirstName, LastName, Photo FROM dbo.Employees
-
We will now start to build the template of the Repeater. Go to the StartPage and drag on a Repeater
-
Drag a Label into the Repeater and name it “Name”.
-
Drag an Image into the Repeater and name it “Photo”. Your repeater should now look like the image below.
-
We want to display each data item as a card. To do this, we will add some additional styling on the Repeater. Right-click on the Repeater and select Style. Add the following css into the free-text editor on the right.
border: solid 2px gray;
border-radius: 5px;
margin: 5px;
padding-left: 16px;
padding-bottom: 16px;
text-align: center;
-
Let’s map the data in the template now. Select the Repeater control on the canvas and create the ItemLoad EventHandler
-
Drag a SetValue action into the EventHandler and set:
- Target to Controls → Name → Text
- Value to
= `${~.Parameters.Input.ListItem.FirstName} ${~.Parameters.Input.ListItem.LastName}`
-
Drag in another SetValue and set:
- Target to Controls → Photo → Image
- Value to
= ~.Parameters.Input.ListItem.Photo
-
Lastly, we want to retrieve our dataset from the database and assign it to the Repeater. Go to StartPage.Load EventHandler and drag in the Employees query built in Step 2.
-
Drag in a SetValue and set:
- Target to Controls → Repeater → List
- Value to
= ~.northwind_Employees.Results
-
Preview the application
