cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
lewdow
Level: Power Up

Using gallery as a naviation menu

Hi - I have inserted a gallery to function as a navigatable menu on the left hand side of a PowerApp like this

 

I've formatted the gallery and set the Items property to populate from just a simple static excel file (I would have just typed the items into a list in powerapps itself but couldn't work out how to) so I have it looking like I want it to with the content I want. 

 

Now I'm just facing the challenge of how to set an OnSelect property for each individual menu option so that each item navigates to the relevant page within the app. How do I do this? 

 

Thanks

 

Lewis

1 ACCEPTED SOLUTION

Accepted Solutions
Super User
Super User

Re: Using gallery as a naviation menu

@lewdow 

You are on the right track!  Here's what I suggest doing.

 

Instead of using the Excel file to construct the menu, click on the App in the Screens menu and change the OnStart property to the following code.  Replace value with the text you want to display on the menu and navlink with the Screen Name in PowerApps.  Notice there are no quotes surrounding the navlink field item.

 

ClearCollect(
    dropDownItems,
    {
        value: "Inbox",
        navlink: InboxScreen
    },
    {
        value: "Outbox",
        navlink: OutboxScreen
    },
    {
        value: "Archive",
        navlink: ArchiveScreen
    },
    {
        value: "Spam",
        navlink: SpamScreen
    }
);

 

Now create the gallery and put the following code in the Items property

 

dropDownItems

 

Finally create each screen having the same name as the navlink field.

 

  • InboxScreen
  • OutboxScreen
  • ArchiveScreen
  • SpamScreen

 

Voila!  No Excel file necessary!

 

---

Please click "Accept as Solution" if my response helped to solve your issue so that others may find it more quickly.  If your thought the post was helpful please give it a "Thumbs Up."

 

 

View solution in original post

12 REPLIES 12
Super User
Super User

Re: Using gallery as a naviation menu

@lewdow 

You are on the right track!  Here's what I suggest doing.

 

Instead of using the Excel file to construct the menu, click on the App in the Screens menu and change the OnStart property to the following code.  Replace value with the text you want to display on the menu and navlink with the Screen Name in PowerApps.  Notice there are no quotes surrounding the navlink field item.

 

ClearCollect(
    dropDownItems,
    {
        value: "Inbox",
        navlink: InboxScreen
    },
    {
        value: "Outbox",
        navlink: OutboxScreen
    },
    {
        value: "Archive",
        navlink: ArchiveScreen
    },
    {
        value: "Spam",
        navlink: SpamScreen
    }
);

 

Now create the gallery and put the following code in the Items property

 

dropDownItems

 

Finally create each screen having the same name as the navlink field.

 

  • InboxScreen
  • OutboxScreen
  • ArchiveScreen
  • SpamScreen

 

Voila!  No Excel file necessary!

 

---

Please click "Accept as Solution" if my response helped to solve your issue so that others may find it more quickly.  If your thought the post was helpful please give it a "Thumbs Up."

 

 

View solution in original post

lewdow
Level: Power Up

Re: Using gallery as a naviation menu

Thanks so much! Super clear...I got so far, but I don't think the collection is populating properly as when I go into My Collections and look at the preview it just as 'value' as a single row. 

 

This is the code I've put in the 'App' OnStart Property, but when I change the 'Items' property of the Gallery nothing populates...any obvious issues with this?

 

ClearCollect(
    NavItems,
    {
        value: "Introduction",
        navlink: IntroScreen
    },
    {
        value: "Segmentation, Targeting and Activity Planning",
        navlink: SnTScreen
    },
    {
        value: "Account Planning Guidance",
        navlink: PlanningScreen
    },
    {
        value: "Tools",
        navlink: ToolsScreen
    }, 
    {
        value: "Ways of Working & Governance",
        navlink: WoWScreen
    }, 
    {
        value: "Measures & SFI",
        navlink: MeasuresScreen
    },
    {
        value: "Training & Development",
        navlink: TnDScreen
    }
)
Super User
Super User

Re: Using gallery as a naviation menu

@lewdow 

You'll have to Run the App OnStart code manually by clicking the following button.  Its much quicker than closing the whole app and opening.

 

img1.png

Super User
Super User

Re: Using gallery as a naviation menu

@lewdow 

Forgot to mention this is because when we are coding the App is already open.  Therefore, the OnStart doesn't work unless you run it manually.

lewdow
Level: Power Up

Re: Using gallery as a naviation menu

Nope 😞 

 

The collection is still not populating:

 

Capture.JPG

lewdow
Level: Power Up

Re: Using gallery as a naviation menu

So close - it's got to be something minor and stupid somewhere! Any ideas what to try @mdevaney ?

Super User
Super User

Re: Using gallery as a naviation menu

@lewdow 

I took the Collection your supplied and copy pasted into my own app.  It worked Smiley Frustrated

My first suggestion is to doublecheck those screen names.  Copy and paste the screen names from the Collection into the rename field to ensure accuracy.  If that doesn't work, save what you've done so far, close the app, then re-open the app and see if it works.  Let me know how it goes.

 

img2.png

 

 

img3.png

lewdow
Level: Power Up

Re: Using gallery as a naviation menu

Nailed it - I hadn't created the other screens yet and so just created blank screens with the correct names and the collection populates!

 

You're a legend thank you!

 

Lewis

Super User
Super User

Re: Using gallery as a naviation menu

@lewdow 

Coincidentally, I did this same project last weekend so it was still fresh in my head.  Glad I could help you out.

 

Lets mark this sucker as solved.  Peace out!

Helpful resources

Announcements
thirdimage

Power Automate Community User Group Member Badge

Fill out a quick form to claim your user group badge now!

sixthImage

Power Platform World Tour

Find out where you can attend!

Power Platform 2019 release wave 2 plan

Power Platform 2019 release wave 2 plan

Features releasing from October 2019 through March 2020

fifthimage

Microsoft Learn

Learn how to build the business apps that you need.

Top Kudoed Authors (Last 30 Days)
Users online (5,966)