Component Library in Power Apps

Create your Component Library

One of the cool features that you can find in Power Apps is Components. A Component is a reusable piece of code or control in your screen(s) within your app. The major drawback with components is that you can’t use them across your apps as they are saved into your app itself.  With Component Libraries; well basically you get rid of that kind of situations. App makers creates their app and easily share/update the components with other makers across multiple apps.

In other words; A component library provides a centralized and managed repository of components for reusability.

To create your first Power App Component Library, connect to your environment and on the left navigation bar select Apps – and be sure to be on the Component Libraries as shown on the picture.

Select New Component Library and provide a Name for your App Component and create your library.

I like to show the screen names of my app _somewhere_ in my application, so I know where I’m. This is extremely useful when you have a bunch of screens in your environment. Let’s build this for you as well. Rename your component and add a Label. Add some basic design such as color, size and font and bring the focus on the component. You’ll see that you can add a custom property to your component. The component can receive input or emit output using custom properties and will show up in the properties panel of components. Hit, and add a new one.

Provide a Display Name, Name and Description to your Custom Property. You can change the data type to anything you want to, but for this exercise I’m leaving this to Text as we’ll show the screen name.

Bring the focus on your Label and select the Text Property. By default, “Text” will be displayed. Please change this to the component name and add the newly created custom property. Basically, it should be anything like:

COMPONENTNAME.CUSTOMPROPERTY.

But you’ll see that nothing will happen. This is because the custom property still has “Text” as Text, and we need to change this to reflect the screen name.

Hit on the customer property and add remove the “Text”. Instead of adding something static I’d like to get the name of my screen. The function therefore is:

App.ActiveScreen.Name.

Now, the Label will be empty. And that’s normal as there is no screens on your app.

Save your app. Once all done, you’ll be able to use the Component in your applications. We are done with the first part of the exercise by creating the component. Let’s now create the canvas app.

Create your Canvas Apps

Within Power Apps, create a new app and hit on the left navigation bar to the “+” icon. You probably have seen this before, but on the bottom, hit “Get More Components”.

Hit on the link and bring your component into your app. What you need to understand is that this will NOT create a copy in your application. It will reference that component in your app. This means, that if the app maker decides to change something to the component, that this will also reflect in your app. Your component is stored into one central location and can be used by multiple other applications.

Whenever you decide to add a component into your app – TADAM, the component will come into your screen, and the screen name will be automatically showed in your application. Just add the component to the other screens to have the same experience everywhere.

Update your changes into your component library app

If you make a change into your component library app and decide to change the color, size or simply add new controls, you need to update the component in your app. Very simple, on the left navigation bar hit on the “+” icon and with the three dots you’ll be able to update your components.

Share your Component Library App

You, as the app maker are the owner of your app. By design your app can’t be used by others. If you create a companywide Power App and want to have a common design -or common layout, it’s more than necessary to share your app with the appropriate persons so they can use this as well in their apps.

Sharing a component library works the same way you share a canvas app. When you share a component library, you allow others to reuse the component library. Once shared, others can edit the component library and import components from this shared component library for creating and editing apps. If shared as a co-owner, a user can use, edit, and share a component library but not delete or change the owner.

Conclusion

Very powerful tool that can be used in every scenario. I can’t imagine different styles, different layouts for every app, a minimum of guidance will be needed. The most common parts should/will be part of components. Think about Headers, footers, … This feature is still in experimental mode – but I really enjoy working with it!

I own a company and work a lot with #SharePoint. Entrepreneur. Microsoft Regional Director and @MVPAward for Office Servers and Services.

Leave a reply:

Your email address will not be published.

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

%d bloggers like this: