Dynamics 365 PowerApps – Automate Flexible and Expandable Menu

 

Creating a Flexible and Expandable menu with the help of the Gallery in Dynamics 365 PowerApps.

Outcome and benefits: We will be focusing on creating a simple Dynamics 365 Canvas Apps with Flexible and Expandable menu sing the Collect and Gallery components.

Learn more about our Microsoft Dynamics 365 services

Learn More

 

Intro PowerApps:

In the current Dynamics 365 eco-system, users cannot construct economic enterprise apps without having a coding background. However, Microsoft offers a product named PowerApps, which customers can use to construct custom apps that can be run on browsers, mobile phones, and tablets due to their responsive designs.

PowerApps allows users with little or no coding background to create apps through a simple and easy process. The PowerApps product has an intuitive design interface that helps user’s custom-create functionality according to business needs. Data can be integrated depending upon the scenario that either it will be already available or utilizing the built-in platform to get it. PowerApps can be leveraged to take full advantage of device features as well as provide a platform that can evolve quickly based upon business needs.

PowerApps users can use the program to build two types of applications:

  1. Canvas Applications
  2. Model-Driven Applications

For this blog, we will solely be focusing on Canvas Applications.  Canvas apps are capable of extracting data from over 200 different integration sources right out of the box and allow you to directly control the look and feel of the user interface. This provides more flexibility than model-driven PowerApps.

There are a couple of pain points that arise when users attempt to build a menu screen for large PowerApps. Aligning everything in the correct place can be a painful task. If we need to modify anything or make and extension to the existing implementation, rearranging is very nerve-racking and time-consuming.

To tackle these pain points, we will be using galleries and collections to automate the menus in PowerApps.

Step 2: Go to Apps > New app > click on Canvas. Refer to the screenshot below.

Step 3: After that, it will ask for the selection of canvas. Here we will select from the Blank app and Tablet layout.

Step 4: We will create some target screens for navigation. In the current scenario, we will be creating the following screens.

  • User Screen
  • Sales Screen
  • Field Service Screen
  • Project Service Screen
  • Help Desk Screen

These screens will contain a label and a go back control for our demonstration. As shown in the image below:

Step 6: For the demonstration purpose, we are utilizing collections to hold the data in PowerApps. We can use Master Data or Transaction data depending on the scenario. Collection can be built on-demand at the start of and app, screen visibility, or push button. Collection can be filled from an existing data source or can contain data manually. Below is the sample of collection we are using for this demonstration.

Collect(    col_MenuScreen,    {        ScreenName: UserScreen,        MenuName: “Users”,        Icon: Icon.People,        Type: “CRMModule”,        SortNumber: 1    },    {        ScreenName: SalesScreen,        MenuName: “Sales Module”,        Icon: Icon.Laptop,        Type: “CRMModule”,        SortNumber: 2    },    {        ScreenName: ‘Field Service Screen’,        MenuName: “Field Service Module”,        Icon: Icon.Devices,        Type: “CRMModule”,        SortNumber: 3    },    {  ScreenName: ‘Project Servics Screen’,        MenuName: “Project Service Module”,        Icon: Icon.ShoppingCart,        Type: “CRMModule”,        SortNumber: 4    },    {  ScreenName: ‘Help Desk Screen’,        MenuName: “Help Desk”,        Icon: Icon.Draw,        Type: “CRMModule”,        SortNumber: 5    } )

We will be placing the above-mentioned collection on the Nonvisible Event for Main Screen.

Step 7: We will add horizontal “Gallery” to our PowerApps, and the layout will be “Title and subtitle on overlay“. Next, we will resize the gallery according to our needs. For this demonstration, we will remove the subtitle, center-align the title, and apply “sorting” on the Item Event.

Step 8: To give it a nice, subtle effect on the hover, we will apply some color code changes on Fill, HoverFill, and PressedFill. Then we will use the OnSelect property for the Gallery items to be navigated on the desired screen.

Step 9: We can split the menus by merely cloning the “Gallery” and just applying Filter on the Items event.

After that, we will run the app for testing purposes.

When we run the Apps, we will see the Main Screen, as shown below.

Afterward, we will navigate to the sales screen.

Once we click on the sales module, we will be navigated to the sales screen.

We can navigate back to the sales module screen by simply clicking on the return arrow.

Conclusion

In this blog, we utilized simple components of PowerApps like Gallery & Collection to implement the automated creation of the menu. This blog elaborates on how we can use simple components to build automated menus by utilizing native components provided in PowerApps. I hope this blog has helped you! If you have any questions, insights, or comments, don’t hesitate to reach out to us!

If you have any question or queries, do not hesitate to reach out to us!