Discuss

Displaying Record Details with the Data Detail Component

On this page

In some cases you don't need to show all the details of your dynamic records on the page. For example you just want to show the product name, and then when the users click the product - more information is displayed. This is also useful for update record forms. This can be done using the Data Details component and you can show the details directly on the page or in a modal.


Show details on the page

We created a dynamic table, displaying an ID, Airport Name and City. There is more info that we want to show, in the right column when a table row is clicked:

Screenshot_14|690x402

First, select the element, which you want to show the details into. In our case this is the column (1). Then click the Make Data Detail button (2):

Screenshot_15|690x402

Select a data source for the data detail:

Screenshot_16|690x402

This should be the same data source, as you used for your dynamic table/list/repeat region:

Screenshot_17|690x402

Then, select a Key:

Screenshot_18|690x402

The key is used to control which record details we are displaying. It should be an unique ID returned by your data source. Under Data Detail, select your ID and click the Select button:

Screenshot_19|690x402

We are done setting up the data detail properties. Now, let's add a paragraph inside our detail region. Right click your data detail region:

Screenshot_20|690x402

And add a paragraph:

Screenshot_21|690x402

NOTE: You can add any element here: title, image, lists, tables etc. We are just using a paragraph as the simplest example.

Then, double click inside the paragraph and click the dynamic data picker icon (or use the inner text dynamic attribute if you prefer):

Screenshot_22|690x402

Bind the data you need here. Make sure to select your bindings under the Data Detail and not under the Server Connect component!

Screenshot_23|690x402

Add as many bindings as you need. Now, let's setup the table so that the details are displayed when a row is clicked. Click your table row (1) and then add new Dynamic Event (2):

Screenshot_24|690x402

Under Mouse, select Click:

Screenshot_25|690x402

And select your dynamic action:

Screenshot_26|690x402

Under your data details element you will see a "Select" action. Select it:

Screenshot_27|690x402

And then select a Key value:

Screenshot_28|690x402

This must be the same ID which you selected earlier for your data detail properties. Select it under the repent region / dynamic table data:

Screenshot_29|690x402

And you are done. You will see the details of the selected records, when you click on the table rows:

data-detail1|690x398

Show details in a modal

You can also show details of a record in a modal. First, let's add a modal on the page. Select App and add new component:

Screenshot_14|690x402

Open the Components menu and add Dynamic Modal:

Screenshot_15|690x402

Remove the default dummy paragraph(1) in the modal body:

Screenshot_16|690x400

Then right click the modal body:

Screenshot_17|690x400

And add a container:

Screenshot_18|690x400

Select the container and click the Make Data Detail button:

Screenshot_19|690x400

Select a data source for the data detail:

Screenshot_20|690x400

This should be the same data source, as you used for your dynamic table/list/repeat region:

Screenshot_21|690x400

Then, select a Key:

Screenshot_22|690x400

The key is used to control which record details we are displaying. It should be an unique ID returned by your data source. Under Data Detail, select your ID and click the Select button:

Screenshot_23|690x400

We are done setting up the data detail properties. Now, let's add a paragraph inside our detail region. Right click your data detail region:

Screenshot_24|690x400

And add a paragraph:

Screenshot_25|690x400

NOTE: You can add any element here: title, image, lists, tables, forms etc. We are just using a paragraph as the simplest example.

Then, double click inside the paragraph and click the dynamic data picker icon (or use the inner text dynamic attribute if you prefer):

Screenshot_26|690x400

Bind the data you need here. Make sure to select your bindings under the Data Detail and not under the Server Connect component!

Screenshot_27|690x400

Add as many bindings as you need. Now let's setup the table so that the modal opens and displays the details, when a row is clicked. Click your table row and then add new Dynamic Event:

Screenshot_29|690x400

Select Mouse on Click:

Screenshot_30|690x400

And then click the dynamic action picker button:

Screenshot_31|690x400

We need to open the modal on click and show the selected record details inside. First add the modal show event:

Screenshot_32|690x400

Then add the Select action, for the Data Detail component:

Screenshot_33|690x400

And then select a Key value:

Screenshot_34|690x400

This must be the same ID which you selected earlier for your data detail properties. Select it under the repent region / dynamic table data:

Screenshot_35|690x400

Click select and you are done:

Screenshot_36|690x400

You will see the details of the selected records in a modal, when you click on the table rows:

data-detail2|690x398