Using gallery as a naviation menu

[Anonymous]

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

[mdevaney · Accepted solution]

@Anonymous 

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

[Anonymous]

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

[mdevaney]

@Anonymous 

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.

[mdevaney]

@Anonymous 

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.

[Anonymous]

Nope 😞 

The collection is still not populating:

[Anonymous]

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

[mdevaney]

@Anonymous 

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

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.

[Anonymous]

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

[mdevaney]

@Anonymous 

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!