- Print
- DarkLight
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:
- Create a table component which queries the data you'd like to show from a data source
- Enable Hive in controls for the dataviews
Entries
property - Get the data from the table component e.g. by writing a simple script like
NameOfTableCmp
in theEntries
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:
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.