HTML5 Data Bindings Manual

Advanced: Using Detail Region in HTML5 Data Bindings

In this tutorial we will show you how to show detailed information about your feed entries using Detail Region.

*You can also check out the video.

How to do it

1. We created a repeat children region that contains a div container with thumbnail image, title, price and view details buttons.

2. We want to show more detailed information about each entry when the view details button is clicked. This is the container that we are going to use for the details. It contains a dummy image, title and details list.

3. We select the wrapping div container (1), select the feed repeating element (2), choose detail region item (3) from the dropdown menu in the smart insert panel and click insert (4).
   
   

4. Now, we can bind the details attributes into our detail region. Our image binding is located under the media data element. Select the dummy image (1) and the banner image attribute (2). Choose the img.data.src item (3) from the bind menu and click bind (4).
   
   

5. We are going to bind the title attribute from our feed. Select the dummy text (1), expand the general data element (2), choose title (3) and click insert (4).

6. We do the same for each detail and we're done binding the attributes into the detail region.

7. Select the view details button (1) and open the behaviors tab (2).

8. From the DMXzone menu item (1), choose control HTML5 Data Bindings menu item (2).

9. In the control HTML5 Data Bindings window, choose select active record item from the action menu (1), select your repeat region, for our tutorial we only have one (2), and select the current selection menu item from the set to menu (3). When you're ready, click OK.

10. Click Live View button in order to preview the results.