Skip to main content

Creating List and Details or View Page

In this video you will understand how to create a list page for collection items/records. Then how to link them to the details or view or show page of those records where each page displays the data of a distinct record.

1. Create a Button

To create a list page for collection items or records firstly create a new button or edit an existing button that would act as a link. Then Save your changes.

DrapCode Builder Collection Constructor

2. Create a Page

You need a records list page to have all your records displayed. For this go to the Add Page option on the left menu bar. You can either create a new page or copy from an existing page.

If you haven’t created your page yet, Click Here

DrapCode Builder Collection Constructor

3. Bind the Collection

As the page will display data from the collection, you would have to bind the particular collection with the display page. For this go to the page Setting and choose the collection to bind. Then Update the changes.

DrapCode Builder Collection Constructor

4. Design the Page

You can choose Layout for your page. Next bind each element of the page with the page. For this select the element and click its Settings icon. In the box that appears choose where it should fetch its text from. Then Save your settings.

DrapCode Builder Collection Constructor

5. Bind the Button to the Page

Next it is important to bind the button that you created to the page from where it will fetch its data. To do this click the Settings icon of the button. In the box that appears mention the Page from where to get data, Get Path Link ID the record to fetch and Path Field that is the record parameter. Then Save your settings.

DrapCode Builder Collection Constructor

6. Display the Records

To view the final changes on the page click Preview. It will display individual records with their ID in the URL. Click the button you created and it will display the record of the chosen page.

DrapCode Builder Collection Constructor

Just like in the above steps you can link the page with the Data Group too. For this click the Settings icon of the Data Group. In the box that appears mention the collection to get data from and the filters. Then Save your settings.

DrapCode Builder Collection Constructor

8. Bind the Fields with the Page

Next bind the fields that you created to the page from where it will fetch its data. To do this click the Settings icon of the button. In the box that appears mention Get Data from Collection. Then Save your settings.

DrapCode Builder Collection Constructor

9. Bind the Button to the Page

As done earlier bind the button that you created to the page from where it will fetch its data. To do this click the Settings icon of the button. In the box that appears mention the Page from where to get data, Get Path Link ID the record to fetch and Path Field that is the record parameter. Then Save your settings.

DrapCode Builder Collection Constructor

10. Display the Page

To view the final changes on the page click Preview. It will display individual records with their ID in the URL. Click the button you created and it will display the record of the chosen page.

DrapCode Builder Collection Constructor