@SaiC4067

First thing I recommend is to learn how to use the examples in the UI gallery.

Using the Live UI tool and viewing the Design Time Configuration allows you to see exactly how the examples are configured.

The best way to learn is to use the examples provided.

---------------------------------------------------------------------------------

Anyway to configure a repeating dynamic layout with images, where the image can be different for each entry in the list, you can follow the following process:

1. Create a data object to represent a book. This should contain properties for the basic information such as: Name, Author, Genre, BookID etc. It also needs a property to hold the reference to the image for the individual book.

2. Add a source for the actual data to be used in the pagelist/data page. Depending on your requirements this could be from a local table, an external table, or from a webservice etc. For a basic example we can configure a local data table (under the data type created in part 1). Go to Records Tab and click Configure Source to create a local database table for it (this will autogenerate some data pages and a report definition which will save time later). Add some sample book data to the table that we can test with.

3. You need a pagelist data source for the list of books to be shown (ie. it should be a list of the book objects defined in step 1). Depending on your solution this could be either a List Data Page (if you are showing the list in a dashboard) or a Page List property (if you are showing the list as part of a case screen). For this example we will just reuse the D_BookList data page that was autogenerated in step 2. If this is for a real project you may want to define new data pages/reports depending on your requirements.

4. Create your first section which will act as a container for the repeating layout. You must use the full section editor to use repeating dynamic layouts. Add the repeating layout from the structural menu, and then click on the settings to configure the source. Add the data page (or property) we created earlier, eg. D_BookList.

5. Create a section for the book list item. The section should be in the class we created in step 1. This one should be created with a design template, I recommend something like the "Card with image and metadata" template, but you can experiment to find what works best for your application. Add all of the required properties, then add the image control and use a property reference for the source (the image reference property we created in part 1)  (you might need to fix the image size to make the book list look consistent). Save the section once done.

6. Open the Book Library section with the repeating layout created in step 4, and then open the app explorer to the BookListItem section created in step 5. Drag and drop the list item section into the repeating layout. Save the Book Library section. (Tip: Add the default container format to the included section so that the books container uses consistent styling)

7. Now we need to source some images. In the UI Gallery example it uses images already present on the Pega server. These are represented as Binary File rules which can be found in the Records Explorer -> Technical -> Binary File. You can reference images stored on the Pega server as Binary Files by combing the folder name, filename, filetype "webwb/pySamplesSC0896.jpg". To create your own images on the Pega server, just create a binary file rule in the same way as the example. If your images are stored on another server accessible to your Pega server then you can also use a fully qualified URL (to test just find an image online and copy the full URL). Once you have some file URLs you can add them to the Book data instances ImageRef column.

8. Run the section created in step 4 (either run directly or you can specify it as a dashboard widget and run via the User portal dashboard). It should display a list of books with different images for each book.