Overview
Galleries in Canvas Apps do not have column headers by default and only show the result set that you’re querying. In this tutorial, we will go over three methods for column headers that are easy to put together in a few simple steps.
YouTube
Basic Layout
This method is the easiest to put together and only involves a line and the column labels. Little effort needs to be put into the aesthetics if you’re not concerned about that.
- Add a rectangle above your gallery
- Change the width to the same width as your gallery. Adjust the height to 1 pixel. This will make the rectangle look like a line
- Change the color of the rectangle to match the color scheme of your screen
- Add your header labels and icons above the line. For the labels, I recommend using a semi-bold font weight to make them stand out
Backdrop Layout
This method provides a backdrop to your header and will make it stand out and provide more definition to your screen.
- Add a rectangle above your gallery
- Change the width to the same width as your gallery. Adjust the height to 40 pixels
- Change the color of the rectangle to either a dark or light color that matches your color scheme
- Add your header labels and icons above the line. It’s best to change the color to either light or dark color depending on the backdrop color used. Contrast is very important here to ensure the labels can be read clearly by users
Label Only Layout
In this method, we will only use labels for the column headers and evenly space them out so it’s easy to understand where a column starts and ends.
- Add header labels above your gallery
- Change the font color to a dark color code and change the background to something light. At this point, you can change the font weight to semi-bold
- Select the label where you want to adjust the X position
- Select the X property in the top property dropdown list
- Update the formula to reference the preceding label’s height and width and add 1 pixel. This will always ensure the following column will be properly spaced out
- After the change has been made, you will see a gap between labels and they will be properly spaced out
- Repeat for the remaining labels in the column header
