Power Apps: Working with Component Library

Introduction

Components in Power Apps are reusable blocks of functionality that can be reused across the tenant in the apps. This way once a common functionality has been created by the app maker, he can publish it as a component in the Component Library which will be visible to other app makers, and can consume it by importing it to their app.

Once published, any changes made to the component can be propagated to already using instances of the component after being reviewed in the existing instances. Some samples of Components are Left navigation, Top Header, Bottom Footer, etc.

In this article, we will see how to create a Component and publish it to the Component Library and consume it within an app

Scenario

Let’s take a situation where we have 10 Screens in an App and we need to have the App Logo, App Name, Logged in user Name, Logged in User Picture in the header. Implementing this functionality manually across all 10 screens will be time-consuming and monotonous work. By moving this logic to a header component, we can reuse the header by just selecting the control on to the multiple screens without having to write any implementation logic in any of the screens.

Implementation

To Create a Component let’s head over to https://make.powerapps.com/ and select Apps from the Left Navigation. We can see the Component Libraries in the tab. Select New Component Library.

Graphical user interface, application, Teams

Description automatically generated

We will mention the name as AppHeader and click on Create

Graphical user interface, application

Description automatically generated

It will open before us the Component Screen which is named Component1 which we will rename as Header.

Graphical user interface, application

Description automatically generated

To the Component Screen we will add the below controls and rename them as per the table:

Control

Name

Functionality

Image

MedicalLogo

Upload an Image and use as the App Logo

Label

Label-AppName

A label to hold the name of the app

Rectangle

Rectangle-HeaderComponentBG

Container to hold the individual component controls

Image

Image-LoggedInImage

Logged In user’s Image

Graphical user interface, application, Teams

Description automatically generated

To keep the Component concise, let’s remove the white space by ensuring that the Height and Width are adjusted from the Properties section to house the component sub controls and leaving no white space outside.

Graphical user interface, text, application

Description automatically generated

Since we have completed the creation of the basic component, let’s go ahead save it and publish it so that it will become available to other App makers as well.

Graphical user interface, application, Teams

Description automatically generated

Consume the Component

So as to use the component, let’s create a blank Canvas App

Graphical user interface, application

Description automatically generated

We will create a Multi-Screen App with 3 Screens where we will try to reuse the component.

Graphical user interface, application, Word

Description automatically generated

As of now, the Components are not listed intuitively in the controls section. We can see the available custom components by clicking on the “Get More Components” link at the bottom.

Graphical user interface, text, application

Description automatically generated

It will list the Header Component that we had created, which we can import into the screen.

Graphical user interface, application

Description automatically generated

Though it was imported into the screen, we can see that the header is not stretching to full width even though we tried to drag it across the app screen.

Graphical user interface, application

Description automatically generated

Component Width Issue

The problem is that we have set a fixed width for the rectangle that houses the Container which will need to be dynamically set to change w.r.t Header Width.

Graphical user interface, text, application, chat or text message, Teams

Description automatically generated

Resolution

To resolve this issue, we will set the Width of the Rectangle Component to match the Width of the Header by setting the Width Attribute to Header.Width. In the same way we will set the Height to Header.Height

Graphical user interface, text

Description automatically generated

Thus, we have made the changes to the Component, let’s go ahead and save it.

Propagate Component Changes

Now, let’s head back to the app, we can see that the change we made to the component is now available for use in the App.

Graphical user interface, website

Description automatically generated

Clicking on Review will ask whether we need to update the Header Component in the App.

Note: If we are working on a complex component, we may not want to risk accepting changes frequently. So in a Production environment, accepting updates from a component from another app maker should be done with due diligence after ensuring that there are no breaking changes.

Graphical user interface, application, Teams

Description automatically generated

Upon updating, we can see that the Header has now gone to the full width of the App. However, the Logged In Name and Image are still halfway through.

Graphical user interface, text, application, chat or text message

Description automatically generated

Resolving the Logged in Name and Image Alignment

The Logged In Username and Logged In Image have their X attribute set to fixed values due to which they are statically displayed at their respective locations.

So as to make the positioning of the Logged in name and Image relative to the Header we will open the component and set the X Attribute of the Image-LoggedInImage control to the formula

Header.Width-Self.Width

This way, the image will be positioned at the location that will be Left most aligned to the Header

Graphical user interface, text, application

Description automatically generated

Same way, to ensure that the LoggedIn User Name is displayed next to the Image, we will use the below formula for X Attribute of the Label-LoggedInName

Header.Width-‘Image-LoggedInImage’.Width-Self.Width

This way the name will start from the position so that it will be aligned to the left side of the Logged In User’s Image.

Graphical user interface, text, application

Description automatically generated

Let’s propagate the changes by saving them and publishing them one more time. We will head back to the App, review the changes and click on Update.

Graphical user interface, application

Description automatically generated

This time, we can see that the Header Component has been extended to full width, and the Logged in Username and image are aligned to the right extreme as intended.

Graphical user interface, text, application

Description automatically generated

We will head over to other screens as well and add the Header Component by which we will be reusing the functionality across the screens.

Graphical user interface, text, application

Description automatically generated

Summary

Thus, we saw how to create a component in Power Apps and use it across the screens as a reusable functionality block to avoid the manual effort in replicating functionality. Same way, the reusability can be extended across the apps available in the Tenant leading to savings in time and effort while implementing common functionalities.

Related Articles

Author

Author

Priyaranjan KS is a Modern Workplace Architect primarily focused on developing and architecting solutions around Office 365,Power Platform and Azure.He is also a Microsoft Most Valuable Professional(MVP) and a Microsoft Certified Trainer(MCT)

Latest Articles