Data Item Collections

Collections

The most powerful things that you will do in terms of data presentation in OneVu will likely revolve around collections of data.

A collection could, for example, be a list of payments, a collection of contact details, a list of all family members, a series of invoices, a list of documents issued etc.

In order to be able to show collections of details, we need a different format to enable OneVu to understand that it is a collection. Let’s go back to our data item that had a zero:

${TransactionDetail.Payments[0].TransAmount}

If we look, we might find that TransAmount is is just one of 9 pieces of data available for every payment made for council tax.

Let’s say we wanted to show a list of all payments with these two fields

PostedDate - TransAmount

I.e. if the last three payments were made on the first of the month for 104.00 we want it to show:

01/03/2020 - 104.00

01/02/2020 - 104.00

01/01/2020 - 104.00

How can we do this?

Handlebars

The way we do this is using a format called ‘handlebars’. Or in lay terms two curly brackets around things. I.e. {{ Thing }}

When working with collections what you need to do first is see where the [0] is. This is effectively telling you this is a collection.

So for:

${TransactionDetail.Payments[0].TransAmount}

We can see the collection is:

TransactionDetail.Payments

Because the [0] is after the word Payments.

Now we know the name of the collection we need to tell it what to do with that collection. To do this we add an action/rule.

What we are trying to do is show the date each payment was made and the amount. This is how we do this:

 {{#each  TransactionDetail.Payments}}
 {{PostedDate}} - {{TransAmount}}
 {{/each}}

Basically this is saying for each payment made show PostedDate and TransAmount separated by a hyphen.

So if you want view contents in a collection you will use:

{{#each Whatever.TheCollectionNameIs}}

To tell OneVu to retrieve contents from the collection for each row in that collection.

You then place the actual name of the field i.e. TransAmount inside double curly brackets. So if we additionally wanted to show the payment transaction description (TransDescription) and payment reference (Reference) we would do this:

 {{#each  TransactionDetail.Payments}}
 {{PostedDate}} - {{TransAmount}} - {{TransDescription}} - {{Reference}}
 {{/each}}

Giving a result like this where there were three payments in the collection:

01/03/2020 - 104.00 - Direct Debit - 12347
01/02/2020 - 104.00 - Direct Debit - 12346
01/01/2020 - 104.00 - Direct Debit - 12345