Recently, Microsoft introduced canvas components for PowerApps which is running in preview now.

With components you can easily create a set of reusable controls for all of your PowerApps, like headers, navigation menus, and so on. More on canvas components can be found here.

Microsoft has also published 10 sample components which you can use directly.

Office 365 suitebar component

I was curious about this new functionality and started working on a reusable component myself: the Office 365 suitebar, which as of today can be used freely by all of you (for download and instructions, see below).

The thing with PowerApps is that when you use it as a lossless app (not in the browser), you loose the Office 365 context. In some cases you might want to have that context into your PowerApp as well. That’s why I started working on this component.

The component layout is very basic and might look familiar to you: it has a topbar which includes the waffle icon, a static Office 365 | PowerApps text, your company logo (optional), your display name and profile image. When you click the waffle icon, the App Launcher will appear. When you click the waffle icon again, the App Launcher will close. When you click your display name, the settings menu will appear. When you click the close button, the settings menu will close. Triggering the App Launcher will close the settings menu and vice versa.

I also made sure you can use the component for both tablet and phone layout.

Adding the component

If you want to use this component, you can download the ZIP file below which contains everything you need:

• The component itself (Office 365 Suitebar – Component.msapp)
• The image files used in the App Launcher

Office 365 Suitebar – Component.zip

Please note that this is still an experimental feature which means that things can change and might not work as expected!

First thing you need to do is to enable the Components feature by going to File > App settings > Advanced settings. All the way down is the toggle to enable the Components feature:

Second, you need to add the image files to your Media library by going to File > Media > Browse and select all the image files from the ZIP file:

After that, you need to add the Office 365 Users data source. This data source will be used for fetching user properties, such as profile image, display name and OneDrive location. You can do this by going to View > Data sources > + Add data source > Office 365 Users. If the data source isn’t listed yet, you can add it by selecting + New connection:

Next thing we need to do is to import the component by going to Insert > Components > Import component and selecting the Office 365 Suitebar – Component.msapp file:

After that, we need to add the Component to our screen by going to Insert > Components > Office365 suitebar:

Now that the component is added to our screen we can configure the component by:

• adjusting its size (if it’s too small, a warning will show instead of the actual suitebar)

• the background color of the suitebar – RibbonFill
• the color of the icons and text in the suitebar – RibbonColor
• the company logo – Logo (optional)

Please note: You may need to click the waffle icon and the close icon of the settings menu a few times the first time to close them on your screen.