How to create your own scrollbar for galleries in Power Apps

tl;dr

Did you know that two buttons and a slider make a sweet scrollbar? Let me show you how to do it!

In my last blog post about How to build a curved gallery in Power Apps I already showed how you can use a slider to scroll through a horizontal gallery, and we hid that slider. This post shall show you how you can create your own scrollbar to navigate a vertical gallery.

To make this as flexible and reuasable as possible, we will componentize this.

create a component

1. Create a new component cmp_scrollGallery and add the following custom properties to it:

galleryStyles (Record): {X:0,Y:0,Width:cmp_scrollGallery.Width,Height:cmp_scrollGallery.Height}

galleryContent (Table):

Table({id:1,image:'image1',title:"Lake Tahoe",description:"d1"},{id:2,image:'image2',title:"Trees",description:"d2"},{id:3,image:'image3',title:"Waterfall",description:"d3"},{id:4,image:'image4',title:"Lake Louise",description:"d4"},{id:5,image:'image5',title:"Santa Barbara",description:"d5"},{id:6,image:'image6',title:"Ocean",description:"d6"},{id:7,image:'image7',title:"Beaver Dam",description:"d7"},{id:8,image:'image8',title:"Green",description:"d8."})

sizeWidth (Number): App.DesignWidth

sizeHeight (Number): App.DesignHeight

sliderStyles (Record): {X:cmp_scrollGallery.Width,Y:0,Width:50,Height:cmp_scrollGallery.Height}

backgroundBarColor (Color): ColorValue("#168aad")

scrollBarColor (Color): ColorValue("#1e6091")

scrollbarStyles (Record): {X:cmp_scrollGallery.galleryStyles.Width-20,Y:0,Width:20,Height:cmp_scrollGallery.Height}

titleStyles (Record): {Font: Font.'Open Sans', FontSize: 16, FontWeight: Bold, Color: White, Width: cmp_scrollGallery.galleryStyles.Width*0.5, Height:40, X: cmp_scrollGallery.imageStyles.X+cmp_scrollGallery.imageStyles.Width +40 } |

imageStyles (Record): {Width:128, Height: 128, BorderTopLeft: 0, BorderTopRight: Self.Width, BorderBottomLeft: 0, BorderBottomRight:0,X: 16}

bodyStyles (Record):{Font: Font.'Open Sans', FontSize: 12, FontWeight: Lighter, Color: White, Width: cmp_scrollGallery.galleryStyles.Width*0.7, Height:40, X: cmp_scrollGallery.imageStyles.X+cmp_scrollGallery.imageStyles.Width +40 }

2. Set the Width of the component to cmp_scrollGallery.sizeWidth and the Height to cmp_scrollGallery.sizeHeight

gallery

We will now add a gallery and refer to our custom properties.

1. Upload a few images
2. Add a horizontal gallery gal_1
3. Set the ShowScrollbar property to false
4. Set its items property to cmp_scrollGallery.galleryContent
5. X: cmp_scrollGallery.galleryStyles.X, Y: cmp_scrollGallery.galleryStyles.Y, Height: cmp_scrollGallery.galleryStyles.Height, Width: cmp_scrollGallery.galleryStyles.Width

image in the gallery

1. Add an image img to the gallery, set its Image property to ThisItem.image
2. X: 16, Width: cmp_scrollGallery.imageStyles.Width, Height: cmp_scrollGallery.imageStyles.Height
3. Add a button to the gallery, (I liked it to be semi transparent) and set its X to img.X and its Width*toimg.Width`
4. RadiusTopRight: cmp_scrollGallery.imageStyles.BorderTopRight, all other Radius… properties shall be 0 - this creates this quarter circle effect
5. TemplatePadding: 20, TemplateSize: 140

title text label in the gallery

1. Add a text label lbl_title
2. X: cmp_scrollGallery.TitleStyles.X, Y: img.Y, Width: cmp_scrollGallery.TitleStyles.Width, Height: 40
3. Color: cmp_scrollGallery.TitleStyles.Color, Font: cmp_scrollGallery.TitleStyles.Font, FontWeight: cmp_scrollGallery.TitleStyles.FontWeight, Size: cmp_scrollGallery.TitleStyles.FontSize
4. Set its Text property to ThisItem.title

description text label in the gallery

1. Add a text label lbl_description
2. X: cmp_scrollGallery.bodyStyles.X, Y: img.Y, Width: cmp_scrollGallery.bodyStyles.Width, Height: 40
3. Color: cmp_scrollGallery.bodyStyles.Color, Font: cmp_scrollGallery.bodyStyles.Font, FontWeight: cmp_scrollGallery.bodyStyles.FontWeight, Size: cmp_scrollGallery.bodyStyles.FontSize
4. Set its Text property to ThisItem.description

Now that we have the gallery, lets make it scrollable. We will add a slider control and hook this the Y property of the image. 💡 The Y property of all other controls in the gallery depends on img.Y

slider

1. Add a vertical slider sli_gal
2. X: cmp_scrollGallery.sliderStyles.X-Self.Width, Y: cmp_scrollGallery.sliderStyles.Y, Height: cmp_scrollGallery.sliderStyles.Height, Width: cmp_scrollGallery.sliderStyles.Width
3. Set its Min to gal_1.TemplatePadding+btn_ScrollBar.Height/2, its Max to gal_1.Height+gal_1.TemplatePadding-btn_ScrollBar.Height/2 and its Default to 50
4. Set the HandleSize to 50
5. Now set all color values to Transparent - we want to make the slider disappear. Don’t set the visible property to false - users can’t interact then with the control anymore

Now the most important step: Go back to img.Y and set it to sli_gal.Value-gal_1.Height+gal_1.TemplatePadding. You can now move the hidden handle and see that the items in the gallery in fact scroll :-)

Now we want to add the scroll bar:

2 buttons

Yes, for real. Our scrollbar only consists of two buttons, one for the background bar and one for the actual scroll bar

background bar

1. Add a button btn_backgroundBar, set its DisplayMode to View, we don’t want users to interact with it.
2. X: cmp_scrollGallery.scrollbarStyles.X, Y: 0, Height: cmp_scrollGallery.Height, Width: 20
3. Fill: cmp_scrollGallery.backgroundBarColor

scroll bar

1. Add a button btn_scrollBar, set its DisplayMode to View
2. X: cmp_scrollGallery.scrollbarStyles.X, Y: sli_gal.Height-sli_gal.Value+Self.Height/2-gal_1.TemplatePadding, Height: 40, Width: 20
3. Fill: cmp_scrollGallery.scrollBarColor

As a last step, rearrange the controls so that the slider is on top

Feedback and what’s next?

Who would have thought that its that easy to create your own custom scrollbar? Adjust sizes and colors as you please, and let me know on twitter how you like it! If you found this blog post useful, please also subscribe to my newsletter - news coming about every 2 months, I promise to not spam you!