Use case

Whenever you have records in a gallery which are date related it can get messy for your users. When you show a header for the month per group of records this can help with readability of the data in your gallery. For example, when I load all the data in my gallery in my Canvas app I see a long list of records without clear separation.

By adding monthly headers, I can easily identify records from different months, making it much simpler to find scanned slips from previous months.

Importantly, this approach does not filter the gallery by month; it only adds visual headers for better organization.

Solution

The solution involves:

1. Using a ForAll loop

2. To collect a new placeholder record

3. And adding an extra label in our gallery

   It’s not difficult!

Code

The following code will help you achieve this. I will explain it step by step.

First, make a collection of the DataSource you want to use. In my case my datasource is called PackingSlips. We call this collection col<Datasource> collection. In my case it will be colPackingSlips.

I also only take the past 12 months of packing slips so my collection won’t be bigger than 2000 records by using the Filter() function in combination with the DateAdd() function. Notice the - sign to indicate the past 12 months and not the future 12 months.

ClearCollect(

    colPackingSlips,

    Filter('Packing Slip Scanner List',

    Created >= DateAdd(Today(),-12, TimeUnit.Months))

);

We then use this newly created collection to cross check that with the original list and add a new record to use for the header whenever our condition is met.

we use the ForAll function to iterate on our col<Datasource> collection. This allows us to create a ShowHeader column and set this to true whenever we hit our condition.

There’s some important things to consider here.

1. You can use whatever Filter() condition you like to show headers. I use a check on date by changing the format of the Created column (the date on which the packing slip is created) to year-month using the Text() function (“yyyy-mm”). You can use more conditions if needed, for instance, if there are other groupings that need to be made other than month of year.

2. You will need to include the && (meaning And) ShowHeader = true condition to make sure you only patch the first hit

We use the ForAll function to iterate through our initial Packing Slip list. We make sure to sort this Descending as to order the rows from first to last. This way only the first of the month will hit in our condition. We use the As function to reference this ForAll collection. I recommend always using As when you use ForAll since it will make writing code easier and better understandable for PowerFx logic. We then wrap our Filter condition with a CountRows() function that should equal zero. This makes sure that if a header already exists for that month we are not creating another one.

Lastly, we collect a new record for the colPackingSlips collection. We add a ShowHeader column and add the date of the record that has been hit in the Created column. We add one second to that record to make sure our newly collected header record is older than the record hit. This way it’ll be the header in our code.

ForAll(

Sort('Packing Slip Scanner List', Created, SortOrder.Descending) 

As ThisLoop,

If(

 CountRows(

Filter(

    colPackingSlips, 
    Text(ThisLoop.Created , "yyyy-mm") = Text(Created, "yyyy-mm") && ShowHeader = true

    )
)

 = 0,

    Collect(
    colPackingSlips, 
                {
                    ShowHeader: true, Created: DateAdd(ThisLoop.Created,1,TimeUnit.Seconds)
                }
            )
        )
    )

User Interface

Now in our user interface we can insert a gallery. In that gallery on the items property we put our collection colPackingSlips. We order this on the Created date descending.

In the gallery we add a vertical container so the header is always shown on top. In that container we add a label for the header and we add our packing slip labels.

The lblShowHeader needs to have a visibility property that makes it only visible if the record has true in the ShowHeader column. Otherwise it will block the other records. Therefore, we can add ThisItem.ShowHeader to the visibility property of the label called lblShowHeader. For the Text property of this label we can add the following code to make it show up the month and year.

Text(ThisItem.Created, "yyyy mmmm","nl-NL")

And there you have it, a gallery which showcases the headers of the month and year that the records were created in. This makes it way easier for your users to figure out in which month the records were created in.