Repeater
Last updated
Last updated
While a Datagrid can be used to present the data in a table row by row in a tabular view, a Repeater can be used to present the records in a list one below the other (vertically stacked, but different from Datagrids) or side-by-side (horizontally stacked) or stacked in a grid (not to be confused with a Datagrid) of x records per row.
So, Repeaters also, like Datagrids, let you display data from a list (database list / transient list) on to the user interaction screen. However, unlike Datagrids, Repeaters do not have an 'on click row' option. But you can always add a Button in a Repeater. When a Button is clicked, WEM will then know which record is being referred to.
All the properties except for Appearance are the same as explained in the previous page for Datagrid. Please refer there for more details on the common properties.
Appearance: Layout - This property determines how the cards are arranged in a page. You could arrange the cards one below another in a vertical grid, one beside another in a horizontal grid or in a grid of multiple rows and multiple columns per row.
Vertical - This is the default manner in which the cards are arranged one below another, as you see in step 6 of the Illustration. When the page size is specified, a page shows that many number of cards.
Horizontal - This allows you to stack the cards one beside another.
You can see that the cards are jammed close to one another and there are too many cards in a row. For the former, make sure that you arrange the contents within the Repeater properly so as to include some empty vertical spacing. For the latter, make sure that you adjust the Page size property accordingly.
Grid - This allows you to arrange the cards in a grid consisting of rows and configurable number of columns per row.
When you select this option, you get further options for selecting the Grid render direction and Number of columns per row.
Grid render direction = Left to right results in the cards being populated row 1 first and then row 2 and so on, whereas Grid render direction = Top to bottom results in the cards being populated column 1 first and then column 2 and so on.
Number of columns per view allows you to specify how many cards should be there in a row for diferent screen sizes.
The configuration in the above screenshot results in 4 cards per row, rendered left to right.
On the other hand, if the configuration was such that the rendering needs to be top to bottom, with 3 cards in a row, this is what happens...
In our EMS use case, we were showing the clients list in a Datagrid in the 'Clients' Template Fragment. Let's now try to use Repeaters here instead.
Let's assume you have a blank canvas (Template Editor) in the 'Clients' Template Fragment. Let's also assume that we have a company logo (image) stored in the 'Clients' datalist.
In the Template Editor, click on the 'Repeater' icon and drag it to the canvas. This would prompt you to select a list.
For our example, select the 'Clients' list from the tree and click on 'Ok.
Instead of steps 2 and 3, there is another way of adding a Repeater to the Template Editor. Drag the list from the data model tree into the Template Editor. This will bring up an overlay from which you can choose to create a Repeater.
As you can see, the Repeater is empty. You can now design thw way you would like the information to be displayed in the Repeater. Let's design a Table within a Div that shows the company logo on the left and client id and name on the left.
Press 'Save' and see what happens at run-time, while previewing the project. The clients list is now shown as cards.
