cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Steelman70
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
LauraOnu
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
LauraOnu
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

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.

SimonP
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.

@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

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

What can I do?

Helpful resources

Announcements
PA User Group

Welcome to the User Group Public Preview

Check out new user group experience and if you are a leader please create your group

Power Apps Community Call

Monthly Power Apps Community Call

Did you miss the call?? Check out the Power Apps Community Call here!

secondImage

Experience what’s next for Power Apps

See the latest Power Apps innovations, updates, and demos from the Microsoft Business Applications Launch Event.

Power Platform ISV STudio

Power Platform ISV Studio

ISV Studio is the go-to Power Platform destination for ISV’s to monitor & manage applications post-AppSource publish.

Top Solution Authors
Top Kudoed Authors
Users online (74,207)