PowerApps: Display static menu using Gallery control

In this post, we will see how we can display static menu using Gallery control where each item will navigate to different screen.

Pre-Requisites – Basic knowledge of PowerApps and some of the controls. (see references for more information)

Steps

  • First of all add Main or Home screen (to host the static menu) and then add all related screens (where each item will navigate to). Lets say, we added HomeScreen, ProductsScreen, TwitterScreen and ReportsScreen. (see below screenshot for navigation relationship)
  • Click on “View” -> “Media”. This will open a page to upload Images, Videos or Audios. Upload required images here.

Toolbar

  • Now select the HomeScreen and from property dropdown, select “OnVisible” property. For this property set below formula-
ClearCollect(HomeScreenData,
{Title: "Products", Description: "View Product Catalog", Image: Products, Screen: BrowseScreen1}, 
{Title: "Twitter", Description: "View Twitter Feeds", Image: Twitter, Screen: TwitterScreen}, 
{Title: "Reports", Description: "View Report Dashboard", Image: reports, Screen: ReportScreen})

Lets understand this formula. “ClearCollect” function is used to add a set of records to a collection but before that it deletes any existing records from the same collection. This function returns collection of records as a table.

Here collection name is “HomeScreenData” and we are adding three records to this collection. Each record has four attributes – Title, Description, Image and Screen. (Note: since Images are already uploaded to PowerApps, it will appear with intellisense.)

  • Now add Gallery control to HomeScreen and set it’s “Items” property to “HomeScreenData”Gallery

 Here what we did is, we bind the control to a collection. This can be viewed by selecting the Gallery control and from right-most pane, click on “HomeScreenData” link. It will show the data source to which this control is bound.

DataSource

  • By now you can see the records in the gallery. Now lets set the navigation for each record in collection. Select the arrow icon and from the property dropdown select “OnSelect” property. For this property, set below formula-
Navigate(LookUp(HomeScreenData, Title = Gallery1.Selected.Title, Screen), None)

Here we have called “Navigate” function which accepts 2 parameters – Screen and Transition. To get the correct screen, we have used “Lookup” function which looks for the current “Title” value in “HomeScreenData” collection and returns the associated “Screen”. Screen transition is set to None.

End result should be something like this-

ndresult

References

Please let me know your view in comments.

2 thoughts on “PowerApps: Display static menu using Gallery control

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s