Burgers & Bytes
April 5, 2024

Dynamic horizontal header part 1: static header

Apr 5, 2024  •  4   • 648 
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. This blog: the setup to create a header and nested galleries
  2. The second blog shows how to create a dynamic horizontal scrolling header.


The academic course catalog offers a timeline that illustrates the availability of courses across multiple years, with the main section displaying a horizontal representation of courses available per academic years.

End result

The end results displays the data in a table format to give insights in courses per available per year.

End Result

Set up: 1 datasource and 3 galleries


There is a table in which for all courses the startdates and years are stored like this:

Course nameStartdateYear
Corporate Finance12-12-20232023
Corporate Finance06-12-20242024
Corporate Finance09-12-20242024
Corporate Finance01-12-20252025
Business Analytics02-02-20242024
Business Analytics04-02-20242024
Business Analytics08-02-20242024
Managing Business Strategically14-02-20242024
Managing Business Strategically23-10-20242024
Managing Business Strategically12-02-20262026

3 Galleries

In order to establish the desired layout, three galleries need to be created.


In order to establish the horizontal header, it is necessary to incorporate a horizontal gallery displaying the years present in the Courses. Furthermore, apart from configuring the structure to arrange all available years in the correct sequence, the Courses have already been grouped by year value to use in other galleries.


Formula to use in Items:

Sort(GroupBy(Courses,"demo_year", "GroupedCoursesYear"),demo_year,SortOrder.Ascending)

The header gallery only contains one text label which is set to ThisItem.demo_year

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:

With({FirstDate: First(SortByColumns(Courses, "demo_startdate", SortOrder.Ascending)).Startdate},
                Year = Year(

Nested gallery

Let’s break down the formula a bit:

The gallery contains one text label to display the check mark icon if the course is available in that particular year.


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.

The second part of this blog serie will describe a way how to create a moving horizontal header in which you can navigate through the data.

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