Mastering Custom Gallery Navigation

If you've ever built a Power Apps gallery and struggled with navigation, you're not alone. Imagine scrolling through an endless list of anime characters—?? Monkey D. Luffy, ?? Naruto Uzumaki, ?? Ichigo Kurosaki—only to realize that the navigation isn't smooth. Users either have to find a scrollbar at the bottom or awkwardly interact with step navigation that appears in the middle. Not exactly user-friendly, right? But worry not! Like a shonen protagonist discovering a hidden power, we have a better way to navigate your galleries. Enter custom gallery navigation!

?? The Problem: Default Gallery Navigation Is Clunky

By default, Power Apps provides a scrollbar for navigation. However, this approach has limitations:

• If the gallery is taller than the screen, the scrollbar appears at the bottom, forcing users to scroll down to even access it.
• Step navigation often appears in the middle of the screen, making navigation inconvenient and breaking the user experience.

This feels like trying to keep up with Goku’s Instant Transmission without a strategy—it’s frustrating! What if we could introduce a system that allows for seamless movement between items, just like flipping through an anime episode list?

? The Solution: Custom Navigation Buttons

With the power of custom navigation buttons, we can allow users to cycle through items without unnecessary scrolling. Here’s the breakdown of how it works:

• ?? Next Button: Moves forward based on the visible index of the gallery.
• ?? Previous Button: Moves backward to ensure users can browse effortlessly.
• ?? Init Button: Resets and initializes the dataset, ensuring all characters load properly.
• ?? Gallery Display: Shows anime characters dynamically, making sure navigation feels as smooth as watching a perfectly animated fight scene.

?? Code Breakdown: Custom Navigation in Action

Here’s how we structure our gallery navigation using Power Apps logic:

- con_CustomGalNav:
    Control: GroupContainer
    Variant: manualLayoutContainer
    Properties:
      Height: =765
      Width: =1366
      Y: =3
    Children:
    - gal_Char:
        Control: Gallery
        Variant: BrowseLayout_Horizontal_TwoTextOneImageVariant_ver5.0
        Properties:
          Default: =Index(col_Big3Characters,lvar_galcharIndex)
          Items: =col_Big3Characters
          DelayItemLoading: =true
          Height: =607
          LoadingSpinner: =LoadingSpinner.Data
          TemplatePadding: =0
          TemplateSize: =282
          Width: =1366
          Y: =158
        Children:
        - lbl_Index:
            Control: Label
            Properties:
              OnSelect: =Select(Parent)
              Text: =ThisItem.ID
              Y: =40
        - lbl_CharName:
            Control: Label
            Properties:
              OnSelect: =Select(Parent)
              Text: =ThisItem.Character
              FontWeight: =FontWeight.Bold
              Width: =Parent.TemplateWidth
              Y: =178
        - lbl_Anime:
            Control: Label
            Properties:
              OnSelect: =Select(Parent)
              Text: =ThisItem.AnimeName
              FontWeight: =FontWeight.Semibold
              Height: =48
              Width: =Parent.TemplateWidth
              Y: =100
    - btn_Init:
        Control: Classic/Button
        Properties:
          OnSelect: |-
            =ClearCollect(
                col_Big3Characters,
                {ID: 1, Character: "Monkey D. Luffy", AnimeName: "One Piece"},
                {ID: 2, Character: "Roronoa Zoro", AnimeName: "One Piece"},
                {ID: 3, Character: "Nami", AnimeName: "One Piece"},
                {ID: 4, Character: "Vinsmoke Sanji", AnimeName: "One Piece"},
                {ID: 5, Character: "Portgas D. Ace", AnimeName: "One Piece"},
                {ID: 6, Character: "Trafalgar D. Water Law", AnimeName: "One Piece"},
                {ID: 7, Character: "Nico Robin", AnimeName: "One Piece"},
                {ID: 8, Character: "Usopp", AnimeName: "One Piece"},
                {ID: 9, Character: "Franky", AnimeName: "One Piece"},
                {ID: 10, Character: "Tony Tony Chopper", AnimeName: "One Piece"},
                {ID: 11, Character: "Naruto Uzumaki", AnimeName: "Naruto"},
                {ID: 12, Character: "Sasuke Uchiha", AnimeName: "Naruto"},
                {ID: 13, Character: "Sakura Haruno", AnimeName: "Naruto"},
                {ID: 14, Character: "Kakashi Hatake", AnimeName: "Naruto"},
                {ID: 15, Character: "Itachi Uchiha", AnimeName: "Naruto"},
                {ID: 16, Character: "Hinata Hyuga", AnimeName: "Naruto"},
                {ID: 17, Character: "Jiraiya", AnimeName: "Naruto"},
                {ID: 18, Character: "Orochimaru", AnimeName: "Naruto"},
                {ID: 19, Character: "Shikamaru Nara", AnimeName: "Naruto"},
                {ID: 20, Character: "Gaara", AnimeName: "Naruto"},
                {ID: 21, Character: "Ichigo Kurosaki", AnimeName: "Bleach"},
                {ID: 22, Character: "Rukia Kuchiki", AnimeName: "Bleach"},
                {ID: 23, Character: "Renji Abarai", AnimeName: "Bleach"},
                {ID: 24, Character: "Orihime Inoue", AnimeName: "Bleach"},
                {ID: 25, Character: "Uryū Ishida", AnimeName: "Bleach"},
                {ID: 26, Character: "Byakuya Kuchiki", AnimeName: "Bleach"},
                {ID: 27, Character: "Toshiro Hitsugaya", AnimeName: "Bleach"},
                {ID: 28, Character: "Soi Fon", AnimeName: "Bleach"},
                {ID: 29, Character: "Yoruichi Shihouin", AnimeName: "Bleach"},
                {ID: 30, Character: "Aizen Sosuke", AnimeName: "Bleach"}
            );
            UpdateContext({lvar_galcharIndex:1})
          Text: ="Init"
          X: =16
          Y: =80
    - btn_Previous:
        Control: Classic/Button
        Properties:
          OnSelect: |-
            =UpdateContext({lvar_galcharIndex:Max(gal_Char.VisibleIndex-(gal_Char.Width/gal_Char.TemplateWidth),1)});
            Reset(gal_Char);
          Text: ="Previous"
          X: =822
          Y: =80
    - btn_Next:
        Control: Classic/Button
        Properties:
          OnSelect: |-
            =UpdateContext({lvar_galcharIndex:Min(gal_Char.VisibleIndex+(gal_Char.Width/gal_Char.TemplateWidth),Max(gal_Char.AllItemsCount))});
            Reset(gal_Char);
          Text: ="Next"
          X: =1016
          Y: =80
        

?? How It Works

Instead of relying on the default scrolling behavior of the gallery, we implement custom navigation buttons to control how users navigate through the items. Here’s how each part works:.

?? Initialization Button (Init) ??

• The Init button populates the gallery with anime characters (One Piece, Naruto, Bleach).
• It clears existing data and stores a fresh collection.
• It also resets the index to 1, ensuring navigation starts from the first item.

?? Navigation Buttons (Previous & Next) ??

• The Next button increases the visible index by a step based on gallery width, ensuring smooth navigation.
• The Previous button decreases the visible index, allowing users to move backward efficiently.
• The logic ensures users never go beyond the available items, keeping navigation seamless.

?? Gallery Behaviour ???

• The gallery dynamically updates based on lvar_galcharIndex, ensuring only the relevant portion of the collection is displayed.
• Items are indexed correctly, avoiding unnecessary scrolling or hidden items.
• The gallery is set to delay loading, optimizing performance and ensuring smooth rendering.

?? Why This Works Better

• ?? No More Hidden Scrollbars: Users don’t have to search for the scrollbar—it’s all done with intuitive buttons.
• ?? Smooth Interaction: Browsing characters feels natural and seamless, like flipping through a well-organized manga collection.
• ?? User-Friendly Approach: Anyone can navigate easily, even if they’re new to Power Apps.

By implementing this system, your app’s navigation will be as smooth as Sasuke’s Chidori, ensuring users have an efficient and frustration-free experience.

?? Final Thoughts: Powering Up Your Galleries

Great UX is like great anime storytelling—it needs to flow seamlessly. With custom gallery navigation, you empower users to browse effortlessly without worrying about hidden scrollbars or inconvenient step navigation. Whether you're creating a character database, an inventory system, or a leaderboard, this approach makes navigation a breeze.

Now go forth, Power Apps developer, and craft an interface that even an anime protagonist would be proud of! ????

Hey there, I’m Ajay! ?? I'm all about PowerApps and creating fun, intuitive solutions. I blend technical skills with creativity to make the impossible possible! If you want to follow my nerdy adventures, you’re in the right place—stick around for more insights and tech tips to fuel your development journey! ??