Dataview

Properties

Entries

You can now use Hive in controls to show data from table components in the dataview.
To do so, follow those steps:

1. Create a table component which queries the data you'd like to show from a data source
2. Enable Hive in controls for the dataviews Entries property
3. Get the data from the table component e.g. by writing a simple script like NameOfTableCmp in the Entries property

Value

You can now use Hive in controls to tell the dataview which value to select.
This can be used as a 1:1 replacement for the dataviews Set value slot. You usually provide the key column value of the entry you'd like to select here (which is the first column in the underlying table component).

Custom layout

By default, the dataview can show exactly 1 text and 1 image and gives you a few basic options to customize the layout (position of text & image etc.).

The Custom layout property gives you the freedom to provide your own HTML layout and show arbitrary data.

Within the Custom layout you can write pure HTML with the additional option to access data coming from the Entries property (i.e. data form a table component).

The HTML you write here is automatically repeated for every entry in the dataview.

In order to inject data from the connected table component into this HTML, you can add template blocks starting with {[ and ending with ]} to your HTML. Within those blocks you can write JavaScript code which is executed at runtime, when rendering the dataviews entries.

Access to all data from the connected table component is provided through an object named values which you can use within the template blocks. All columns from the connected table component are accessible as properties of the values object.

E.g. if the connected table component consists of columns named Key, Title, Size & PricePerLiter, you can access the corresponding data using {[ values.key ]}, {[ values.title ]}, {[ values.size ]} & {[ values.priceperliter ]} within the Custom layout HTML.

Usage example

Resulting dataview:

Imagine a table component named ProductsTable with the following query:

from Products select { .Id, .Title, .DetailText, .Size, .PricePerLiter, .Thumbnail }

You can achieve the above shown dataview layout using the following property values:

• Entries: ProductsTable (activate Hive in controls first)
• Custom layout:

  <div class="products-dv--background" style="background-image: url({[ values.thumbnail.Url ]});"></div>
    <div class="products-dv--title">{[ values.title ]}</div>
    <div class="products-dv--priceWrapper">
      <div class="products-dv--priceTotal">€ {[ (values.priceperliter * values.size).toFixed(2) ]} *</div>
      <div class="products-dv--pricePerLiter">€ {[ values.priceperliter.toFixed(2) ]}/Liter *</div>
    </div>
  </div>
  

Obviously, this also needs some custom CSS to look like the dataview shown above but I leave this as an exercise to the reader.

Hint: You can provide your own classes in the HTML (like products-dv--background in the Custom layout above) and use those classes to style the entries.