Contact Info
303 N Glenoaks Blvd . Ste# 200
Burbank, CA 91502
info@skylineconsultantsllc.com
626-205-8527
Follow Us

Simple Navigation for Your Mobile Power App

For all our Power Apps projects we had one similar requirement – to have a very simple static menu, where each item should navigate to a specific screen. We had tried different methods and chose the best one for us.

In this blog, we want to show you how easily we can create this menu using Gallery control.

Before we start, we need to prepare two sets of icons for our menu: common and selected. You can use any icons which you like or have. I’ve imported all my icons to Media.

Let’s imagine you will need 4 Screens:

  • MainScreen;
  • LeadsScreen;
  • ContactsScreen;
  • OpportunitiesScreen.

On the visible property (OnVisible) of the MainScreen we should add the next function
UpdateContext({selectedScreen:MainScreen});

ClearCollect(MenuItems, {

Name: “Main”,

TargetScreen:MainScreen,

Icon: ic_main,

SelectedIcon:ic_main_selected

 

},{

Name: “Contacts”,

TargetScreen:ContactsScreen,

Icon:  ic_contacts,

SelectedIcon: ic_contacts_selected

},{

Name: “Leads”,

TargetScreen:LeadsScreen,

Icon:   ic_leads,

SelectedIcon: ic_leads_selected

 

},{

Name: “Opportunities”,

TargetScreen:OpportunitiesScreen,

Icon:  ic_opportunities,

SelectedIcon:  ic_opportunities_selected

 

}

);

Then we should add a Horizontal Gallery and set Items property to our MenuItems. We left only one Text field and set Text property to ThisItem.Name.

It will be a good idea to change Color property and set it to

If(ThisItem.TargetScreen = selectedScreen, RGBA(74, 144, 226, 1),RGBA(40, 40, 40, 1))

Next step Is change Image property to the following

If(ThisItem.TargetScreen = selectedScreen, ThisItem.SelectedIcon, ThisItem.Icon)

Also, it would be better to add additional trigger property and set OnSelect property Navigate(ThisItem.TargetScreen,ScreenTransition.Fade)

The final step, just to copy and paste our Gallery to all Screens and for each screen. OnVisible function add
UpdateContext({selectedScreen:ContactsScreen});

You can add MenuItems in the different positions which are better for your solution.

It’s very simple, just a few minutes and you have great, user-friendly navigation.

Post a Comment