Dataview
  • 03 Oct 2023
  • 2 Minutes to read
  • Contributors
  • Dark
    Light

Dataview

  • Dark
    Light

Article Summary

This page is work in progress & only meant as a quick start guide for the new "Custom layout" feature.
More detailed information will follow later.

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.

The properties accessed within the values object need to be written "all lower case", no matter how they're actually named in the table component.

E.g. the column named PricePerLiter needs to be accessed using values.priceperliter.

Usage example

Resulting dataview:

image.png

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>
    

As you can see in the custom layout template above, you can write fully functional JavaScript inside the template blocks ({[ ... ]}). This means that you can also perform calculations, formatting etc. there if needed.

E.g. {[ values.priceperliter * values.size).toFixed(2) ]} is vanilla JavaScript.

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.


Was this article helpful?