cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Highlighted
Power Participant
Power Participant

Add column headings to a gallery to display tabular data

Here is a small hack to add bold column headings to a gallery and display tabular data.

 

  1. Connect to your data source if you have not done so already (in my case a table (FX_data) of foreign exchange rates by date in an Access Web App, but it could be anything)


  2. For your chosen screen, set the following property:

    OnVisible = ClearCollect( FX_data_with_headings, { IsHeadingRow: true}); Collect(FX_data_with_headings, FX_data))

    The trick is that when you navigate to the screen you create a first row before your data to identify it as the heading row


  3. Create a vertical custom gallery in your screen and set the following property:

    Items = FX_data_with_headings


  4. Add text boxes in your gallery and arrange them horizontally (see image below) and set the following properties

    For the first text box (in my case the date column):
    Text = If(ThisItem.IsHeadingRow ,"Date",DateValue(ThisItem.Date))
    FontWeight = If(ThisItem.IsHeadingRow ,FontWeight.Bold,FontWeight.Normal)

    For the second text box (in my case the BRL column):
    Text = If(ThisItem.IsHeadingRow ,"BRL", ThisItem.BRL_rate)
    FontWeight = If(ThisItem.IsHeadingRow ,FontWeight.Bold,FontWeight.Normal)

    The trick is to use the IsHeadingRow field to identify the heading row and display titles and make them bold, underlined or whatever you like

 

Hope this helps someone, and please let me know if there is an easier way of doing this.

The editing process...

FX_capture_raw.PNG

 

...the result

FX_capture.PNG

1 ACCEPTED SOLUTION

Accepted Solutions
Highlighted
Power Apps
Power Apps

Very creative idea, the headings get added just like another row to the collection!

Another pattern that I've seen was to use two galleries: one for the headings and one for the records. This provides a sticky header while scrolling the records. Are you trying to build a gridview with sort/ filter, etc?

GridView.jpg

View solution in original post

5 REPLIES 5
Highlighted
Power Apps
Power Apps

Very creative idea, the headings get added just like another row to the collection!

Another pattern that I've seen was to use two galleries: one for the headings and one for the records. This provides a sticky header while scrolling the records. Are you trying to build a gridview with sort/ filter, etc?

GridView.jpg

View solution in original post

Highlighted

I have to admit that the two gallery approach is superior.  Frankly I was just playing around with this new tool, and what fun it is!

By the way, is there a function to return the column names of a table?  I have not seen one in the reference.

Highlighted
Advocate I
Advocate I

I know this is an old topic, but here's another hack that might help.

Create labels for the column headings above the Gallery. For each label use calculated values for the x position and the width to match the Gallery item so:

For the label width: MyGalleryItem.Width

For the label x position: MyGallery.X + MyGalleryItem.X

 

This will cause the label width and alignment to always match the field for which it's the heading. It's a bit of a faff, but worth it in the long run.

 

The other more obvious alternative if you want a pure data table is to use the 'Data Table' control, which does all this for you. However, as far as I can see this doesn't support custom layouts. e.g. in my case I needed a second row for a description that spanned multiple columns in the first row.

Highlighted

@SimonP

Hi Simon,

I tried to re-create your suggestion but could not.

I created 2 Horizontal Galleries.

How to match the Header Gallery Labels with the content in the 2nd gallery below

Highlighted

@LauraOnu I cant seem to get the column header position to match the below

What can I do?

Helpful resources

Announcements
Community Conference

Power Platform Community Conference

Check out the on demand sessions that are available now!

News & Announcements

Community Blog

Stay up tp date on the latest blogs and activities in the community News & Announcements.

secondImage

Power Platform 2020 release wave 2 plan

Features releasing from October 2020 through March 2021

Community Highlights

Community Highlights

Check out the Power Platform Community Highlights

Top Solution Authors
Top Kudoed Authors
Users online (10,413)