Working with Component Library in Power Apps

[Priyaranjan]

                                                       

 

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 lets 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.

We will mention the name as AppHeader and click on Create

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

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

To keep the Component concise, lets 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.

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.

Consume the Component

So as to use the component, lets create a blank Canvas App

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

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.

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

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.

Component Width Issue

The problem is because, 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.

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. Same way we will set the Height to Header.Height

Thus, we have made the changes to the Component, lets 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.

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 is no breaking changes.

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

Resolving the Logged in Name and Image Alignment

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

So as to make the positionining 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

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.

Lets propagate the changes by saving it and publishing it one more time. We will head back to the App, review the changes and click on Update.

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.

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.

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.