• Skip to main content
  • Skip to primary sidebar
  • Skip to footer
  • Home
  • Blog
  • Power Platform
    • Power Apps
    • Power Automate
    • Power BI
    • Power Virtual Agents
  • Dynamics 365
  • Azure
  • About Me
Joe Gill Logo

Joe Gill

Microsoft MVP - Power Platform Consultant

Home » Power Platform » Power Apps » Create Powerapps Nav Bar Component for Canvas App

Create Powerapps Nav Bar Component for Canvas App

26th November 2019 by Joe Gill

I wanted to get more familiar with building Canvas Apps in Power Apps so I thought I would try and create a Wizard type app, that guides a user through a series of input screens. My intention was to use it in Dynamics 365 instead of the deprecated Dialogs. As part of this exercise, I wanted to create some reusable components that I could use in my Wizards screens. This seemed a sensible approach and the recently introduced Canvas Apps Components looked a good fit to accomplish this. Canvas Apps Components allows you to create UI components that you can reuse across screens in your application. You can also export Canvas Apps Components for reuse in other Apps. You can read more details on the PowerApps component framework for canvas apps here

I thought I would start with a navigation bar with previous and next buttons that I could use on each page of my Wizard. The logic behind the buttons to determine which form to navigate to would need be data driven so I could reuse the component across multiple apps.

Create Powerapps Nav Bar Component for Canvas App Joe Gill Dynamics 365 Consultant

Step 1: Component functionality in Canvas Apps

To use the new component functionality in Canvas Apps you need to go to App settings -> Advanced Settings -> Experimental features and turn Components on.

Create Powerapps Nav Bar Component for Canvas App Joe Gill Dynamics 365 Consultant

Step 2: Creating a component called WizbarNavBar

Once this is turned on the components tab will appear under your tree view. From there I then created a component called WizbarNavBar with Next and Prev icons.

Create Powerapps Nav Bar Component for Canvas App Joe Gill Dynamics 365 Consultant

The basic logic behind each button is to pass the current screen name to a function which will use it to determine which screen to navigate to. It sounds simple enough but it is not that straightforward in Canvas Apps. Firstly components don’t support the use of the App function so I can’t use the App.ActiveScreen.Name function within the component to get the name of the current screen. Instead I created an input called CurrentScreenName to pass the name of the current screen to the component. Properties are you how you send to and receive data from a component.

Step 3: Storing Navigation Rules

I also needed a data table of some sort to store the navigation rules. I tried passing a table as an input parameter but in the end I decided to create a collection to drive the navigation process. Collections are global accessible within an app so can be accessed within components. I added the code below to my App OnStart event to create the collection.

ClearCollect(
collWizardNavBarScreens,
{
ScreenName: “Screen1”,
Prev: Screen1,
Next: Screen2
}, {
ScreenName: “Screen2”,
Prev: Screen1,
Next: Screen3
}, {
ScreenName: “Screen3”,
Prev: Screen2,
Next: Screen1} );

I then added the following code to the nav bar next icon select event. The code takes the current screen input parameter from the nav bar and uses it to lookup the next screen from the global collection. I used similar code for the Prev although I could have used the back function instead.

Navigate(
LookUp(
collWizardNavBarScreens,
ScreenName = cmpWizardNavBar.CurrentScreenName,
Next
),
None
);

Create Powerapps Nav Bar Component for Canvas App Joe Gill Dynamics 365 Consultant

Step 4: Adding Nav Bar Component to App

Now I have created my Nav Bar component I can add it any screen in my App from the Custom option.

Create Powerapps Nav Bar Component for Canvas App Joe Gill Dynamics 365 Consultant

Step 5: Set the current screen name input parameter

Once I have added the Nav Bar to a screen I need to set the current screen name input parameter using the App function as shown.

Create Powerapps Nav Bar Component for Canvas App Joe Gill Dynamics 365 Consultant

I now can easily create a set of Power Apps screens to guide the users through a process. All I need to do is add the Nav Bar to each screen and update the collWizardNavBarScreens collection with the navigation rules. Be interesting to try and extend this to cater for conditional navigation.

Unfortunately, the component framework is not yet available for Power Apps embedded in Dynamics 365/Model driven apps so I will need to revisit this task at a later date. Never the less it was interesting trying to get data-driven navigation working.

Share This On Social:
  • Tweet
  • Create Powerapps Nav Bar Component for Canvas App Joe Gill Dynamics 365 Consultant

Filed Under: Power Apps, Power Platform

Primary Sidebar

Popular Categories

  • Power Platform
    • Power Apps
    • Power Automate
    • Power Virtual Agents
  • Azure
    • Logic Apps
  • Dynamics 365
  • .NET
  • AI
  • SQL

More to See

Power Platform Requests – Base Request Capacity

17th December 2020 By Joe Gill

Power Automate Desktop

Power Automate Desktop – UI Flow

26th November 2020 By Joe Gill

extract table from pdf and write as csv file using Power Automate Desktop

Extract Tables from a PDF using Power Automate Desktop

23rd May 2022 By Joe Gill

Dataverse Anonymization

25th April 2022 By Joe Gill

Tweets

Footer

Joe Gill

Microsoft Business Applications MVP – Power Platform, Dynamics 365 and Azure.

An architect with over twenty years experience designing and developing technology solutions. Specializing in the Microsoft technology stack including Power Platform, Dynamics 365 and Azure. Microsoft MVP Profile

Connect on Social

Useful Links

  • Home
  • Blog
  • About Joe Gill
  • Power Platform
  • Dynamics 365
  • Azure

Featured Posts

Power Platform Requests – Base Request Capacity

Power Automate Desktop – UI Flow

Synapse Link for Dataverse – Metadata

Extract Tables from a PDF using Power Automate Desktop

Dataverse Anonymization

Dataverse Metadata in Synapse

© 2022 · Joe Gill