Burgers & Bytes
April 5, 2024

Dynamic horizontal header part 2: flexible horizontal scrolling

Apr 5, 2024  •  2   • 414 
Table of contents

In Excel we are quite familiar with a the functionality to freeze a row and a column. In Power App Canvas this can be more challenging. In this blog serie of two blogs a solution for Power Apps will be explained.

  1. The first blog the setup to create a header and nested galleries are explained
  2. This (second) blog shows how to create a dynamic horizontal scrolling header.

Set up

See blog part 1 to have the setup in which the basic of the three galleries are created.

End result

The end results of this blog is to have horizontally header to navigate through the data.

End Result


On the screen OnVisible a variable is set: Set(varStartMonthYear, Now())


The horizontal gallery needs to contain the month/year for a period of six months. Starting with the next six month for the date of today, set in the variable varStartMonthYear.

    & " - " & 

The gallery only contains one text label which is set by ThisItem.Value

To be able to navigate to the previous period of six months and next period of six months, add two buttons on the screen.

On the back arrow button the OnSelect value is: Set(varStartMonthYear, DateAdd(varStartMonthYear,-6, TimeUnit.Months)) On the next arrow button the OnSelect value is: Set(varStartMonthYear, DateAdd(varStartMonthYear,6, TimeUnit.Months))

To display the course names add a vertical gallery. In this example the table Courses needs to be loaded and grouped by the name of the course. In the Items of the gallery the following formula is added: GroupBy(Courses,"demo_name","GroupedCourses")

Course gallery

Example of the result of the formula:

Grouped courses

In the gallery a text label represents the course name. In this case the Text value is: ThisItem.demo_name

In the gallery galGroupedCourses another gallery needs to be added as a nested gallery.

The Items of the newly created nested gallery needs to be filled using the following formula:

            Year(Startdate) = Year(
            ) && Month(Startdate) = Month(

Nested gallery

The gallery contains one text label to display the check icon if the course would start in that particular month/year combination. If(Not(IsBlank(ThisItem.Startdate)),"✅","")

Check mark

Wrap up

With this configuration, a single data source suffices to generate meaningful insights and data arrangements through the use of nested galleries. This enhances the adaptability of app design and facilitates data visualization, even in cases with more complex data structures.

comments powered by Disqus
Empowering productivity - one blog at a time!