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.

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 –

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.

Previous articleCommunity Partner of Experts Live Netherlands
Next articleWindows Virtual Desktop: Public Preview Available
My name is Rik de Koning and I work as a Functional Consultant for Portiva, which is one of the larger Office 365 implementation partners in The Netherlands. I started my career in 2011 as a SharePoint support engineer and in 2013, I went to become a SharePoint consultant where I did various projects on SharePoint Server 2010 and SharePoint Server 2013. In the last couple of years I started focusing more and more on Office 365, especially on SharePoint Online, PowerApps and Microsoft Flow. I like being challenged and for PowerApps and Flow being quite new, there are always some challenges when implementing these services. When I’m not working, I like spend some time with my family (girlfriend and son), hang out with friends, do some sports (like fitness, running, kitesurfing and snowboarding) playing videogames and just relax a little. If you have any questions, please do not hesitate to contact me!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.