cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Highlighted
New Member

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
Highlighted
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
Highlighted
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

Highlighted
New Member

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
    }
)
Highlighted
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

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

Highlighted
New Member

Re: Using gallery as a naviation menu

Nope 😞 

 

The collection is still not populating:

 

Capture.JPG

Highlighted
New Member

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 ?

Highlighted
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

Highlighted
New Member

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

Highlighted
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
August 2020 Community Challenge: Can You Solve These?

August 2020 Community Challenge: Can You Solve These?

We're excited to announce our first cross-community 'Can You Solve These?' challenge!

secondImage

Return to Workplace

Reopen responsibly, monitor intelligently, and protect continuously with solutions for a safer work environment.

secondImage

Super Users Coming in August

We are excited for the next Super User season.

secondImage

Community User Group Member Badges

FIll out a quick form to claim your community user group member badge today!

secondImage

Power Platform 2020 release wave 2 plan

Features releasing from October 2020 through March 2021

Top Solution Authors
Top Kudoed Authors
Users online (7,223)