Unanswered

How to create a horizontal and vertical scrollable gallery with freeze pane in canvas app?

(0) Share

Report

Posted on by rbn_nue

Hi Folks,

I'm trying to create table structure in canvas app with vertical and horizontal scrolls. It has large number of columns so it will not fit in the window and require horizontal scroll.

Another requirement is that there are an action section, to view/edit each item in the gallery. We need to freeze these two columns when user scrolls horizontally.

I did refer below awesome guide to achieve this using a slider control:

https://michalsacewicz.com/power-apps-horizontal-scroll-in-a-vertical-gallery-with-freeze-panes-effect/

I was wondering if there's any method without using slider control and rely on native scroll? Has anyone tried this?

Thanks

Categories:

Using Apps Using Formulas

General Questions

All responses (10)

Answers (0)

gcmfaizan 1,024 on at

Like (0)

Report

Re: How to create a horizontal and vertical scrollable gallery with freeze pane in canvas app?

@PowerApps880 kindly see my last reply above in the same thread. the way I freeze the first 2 columns, the same way you can freeze the last two.
PowerApps880 10 on at

Like (0)

Report

Re: How to create a horizontal and vertical scrollable gallery with freeze pane in canvas app?

Is it possible to freeze the last column instead of first one? I think there was a way in the blog but the blog is no longer active kindly suggest if anyone implemented this
gcmfaizan 1,024 on at

Like (2)

Report

Re: How to create a horizontal and vertical scrollable gallery with freeze pane in canvas app?

Hi @rbn_nue ,

to do this firstly add a vertical container and set properties as (named as ParentContaier in the screenshot):
Vertical Overflow = Scroll
Height = Parent.Height (Means Screen Height)
Width = Parent.Width (Means Screen Width)

add another container (named as ChildContainer) and do the same thing as above for height and width,

now add a gallery (named as GalleryForStaticColumns) and set height = Parent. Default and Width as per your need, then add label control to show columns data and set column width and positions.

Now add a horizontal container (named as ContainerForHorizontalScroll) and set properties as:

Horizontal Overflow = Scroll
Height = Parent.Height (Means Screen Height)
Width = Parent.Width (Means Screen Width)

Add a vertical gallery (named as Vertical Gallery) and set properties as:
Height = Parent.Default
Width = (NumberOfColumns * WidthOfLabel) e.g: 10*150 = 1500
Data Source = your filter query

Now add a Horizontal Gallery (named as HorizontalGallery) and set properties as:

Template Size = Parent.Width - Padding e.g: 1500-5=1445
Data Source = Filter('Your Table Name', 'GUID Column' = ThisItem.'GUID Column')
Width = Parent.Width - Self.X
Height = Parent.TemplateHeight

now add labels in this gallery to view data.

Please mark this as the solution to help others.
rbn_nue on at

Like (0)

Report

Re: How to create a horizontal and vertical scrollable gallery with freeze pane in canvas app?

Hi @Static

That was a beautiful tutorial. Although it does not have vertical scroll, which is needed. Thanks for your suggestion.
rbn_nue on at

Like (0)

Report

Re: How to create a horizontal and vertical scrollable gallery with freeze pane in canvas app?

Hi @gcmfaizan

Thanks for the response. How would you achieve vertical scroll in this scenario?

Thanks
gcmfaizan 1,024 on at

Like (1)

Report

Re: How to create a horizontal and vertical scrollable gallery with freeze pane in canvas app?

Ì have an idea that is quite simple and fullfill your requirement,
my recommendation is those 2 columns out of the horizontal container and the gallery in the container remain samin just exclude that column, but make sure you use same filter query on both galleries, inter (that is in container), and outer.

If my reply helps, then please give me thumbs up.
Static 125 on at

Like (2)

Report

Re: How to create a horizontal and vertical scrollable gallery with freeze pane in canvas app?

So, if you want freeze a couple of columns, let say two first. In this way you can create additional Gallery and show just these two as here in this video. Easiest way. This i think what you need.
https://www.youtube.com/watch?v=8CBosd_PG74
Also you can try use Creator KIT, Fluent List.
https://learn.microsoft.com/en-us/power-platform/guidance/creator-kit/overview

Best Regards,
Anton Nyrkov
rbn_nue on at

Like (0)

Report

Re: How to create a horizontal and vertical scrollable gallery with freeze pane in canvas app?

Thanks for the response @Static

Although I'm looking for a way through which we can freeze couple of columns as well. So two columns should not move when scrolling horizontally, all others should move.
Static 125 on at

Like (2)

Report
Re: How to create a horizontal and vertical scrollable gallery with freeze pane in canvas app?

Hi @rbn_nue
So, you can use container Horizontal Scroll in Vertical Gallery. For me this is a best way and most responsive for different type of screen.

For example:
There may be a requirement of showing more columns (horizontally) like table in a vertical gallery, by default vertical gallery will not offer horizontal scroll to show more details.

But there is a workaround to achieve this. Refer below for the steps:
Create a horizontal container and fit it in screen. Example: Width = 500
Set following properties: (hiding vertical scroll here as vertical gallery displays one)
2. Create a vertical gallery inside horizontal container with the width you are looking for. Example: 1000
Set following properties:
3. Use normal container for headers in case vertical gallery to be shown like a table.
Set following properties:
Tree View:
Output:
After making above changes, horizontal container shows horizontal scroll which will look like in-built horizontal scroll in vertical gallery.
Note:
Make sure to have same width for header and gallery elements to properly aligned like a table.
v-jefferni on at

Like (1)

Report

Re: How to create a horizontal and vertical scrollable gallery with freeze pane in canvas app?

Hi @rbn_nue ,

I don't think there is a way. The reason is the native scroll bar of Gallery cannot interact with any other controls than the Gallery itself. In other words, other controls cannot know where the scroll bar is.

Best regards,