Componentize your PowerApps

April Dunnam

0 comments

This EBook focusses on the components of Power Apps, we’ll look at the functionality, benefits, and types of components, before sharing some demonstrations showing how to implement these most effectively in your apps.

So, what are components? Think of them as reusable building blocks for your Power Apps applications. They allow you to define a set of controls that you can reuse inside all of your applications. These are great for those scenarios when there’s something that you’re constantly building and repeatedly using in your other applications. These can be things like menus, footers, headers, stuff like that.

They work in the back end with a master/child implementation. If you create the main component, then add that same component to multiple apps, should you need to update it at a later stage, you can update the master and those updates automatically flow down and apply to the child applications that are also using the component.

There are many different reasons for wanting to use Components.

The main reason is reusability, you only need to create something once and then can use it over and over again. Consistency is another huge benefit. When you’re building things like a standard menu or footer, you need to make sure that it’s consistent. The colors, font, and alignment all need to match. Components help you achieve this because you create them once, and then no matter where they are used, they will always be displayed the same. Flexibility goes hand in hand with this.

There are a lot of things that can affect the performance of your applications. One of those is having too many controls. If you build a menu, create lots of icons and then use those same controls on 12 different screens, then that adds up to a lot of separate individual controls. Instead, if you create a menu Component, that just counts as one control and can help performance.

The total of all of these benefits adds up to much less work for you because you just create the Component upfront once and then reuse it. Who doesn’t like less work?

Types of Components

There are two different types of Components that you can use. In this eBook, I’m going to be focusing on is what I’m calling Classic Components.

If you have done any research or read about Components so far, you’ve probably come across these already. They are mainly targeted at citizen developers, people who would be building the Power Apps in the first place. They are created inside Power Apps natively, and you can export and import them into your Apps. Anything you can create in Power Apps can be made into a component.

Code Components are the new kid on the block and are targeted at pro developers. They provide a method, through the Power Apps command-line interface, for devs to create custom Components that can do things beyond even the native functionality of Power Apps. This is a great way for devs to extend the Power Apps platform by creating Code Components and then exporting them so that regular end-users can implement them inside their Power Apps.

Considerations before you begin

This eBook aims to help the end-user citizen developer, so it will continue to focus on Classic Components. Before we jump into a demo, we need to go over some considerations when using Components.

Components are technically still in preview at the time of writing, so you probably don’t want to use these in your production Power Apps just yet. However, this shouldn’t stop you from playing around with these Components right now because you can get ahead of the game. If you start researching and looking into Components now, maybe try creating some for standard menu items, then as soon as they are formally released, you’ll be able to start putting these inside your applications and see the benefits.

Collections in connectors aren’t fully supported right now. So you can’t have a Component that goes out and pulls data from another connector, for example, a SharePoint list. They also cannot be nested inside your galleries or form controls.

Demo: Creating a basic Header component

So we’ll take a look at a few common scenarios in Power Apps. First create a Canvas App From Blank.

Then name your App.

As components are still in preview, this may mean when you create a new Power App; the Component functionality might not be enabled by default.

It’s pretty easy to tell if components are enabled in your App because you’ll see a new tab in your tree view, for Components.

Turning on the Component Functionality

If you don’t see that in your application, that means you need to go and turn on the components feature. To do this, go to the file tab, clicking on settings, then advanced settings as shown.

Scroll down until you find the option for components and toggle it on and then save your App so that Components will be available to you.

Go back to your Power App, and you should now see that component tab, which means you can start using these inside your apps.

Creating a Header

Let’s start with the simple scenario of creating a header. Every application needs a header, and we’ll start by creating a header in the traditional way.

Go to the insert Icon.

Select rectangle for the background and size it to fit the screen. In the example below, I’ve added a label for the name “Component Example,” pulled in the current logged in users profile information to show their full name in another label, along with their profile picture. I also added an icon with a little home button to allow the user always to get back to the home screen here.

Before Components were available, if you wanted to use this on another screen, you’d have to use “Control” + “a” to copy all of the individual items in the header and then paste that into a new screen. This would effectively create two versions of the same header, one on each screen.

Now, if the end-user looks at this App and decides they don’t like the blue background and they want it to be red instead, you’ll have to update each individual screen. Also, this header contains a total of five controls (blue background, name, username, picture, and home icon) which have been duplicated on another screen. So as more screens are added, each time, five additional controls are being used, which probably isn’t ideal for performance.

Creating the header as a component

To create this standard header as a component, click our components tab and choose the option for new component.

And when we do that, we get a screen just like we do on our screens tab, a blank canvas to which we can add content.

Firstly, rename this component by clicking the ellipsis and choose rename.

Next, I want to make sure that the width of the canvas for the component matches the width of my screen. To find out the width of my screen, go back to the rectangle control used in the first example (as it was full width) and look in the size properties.

Update the width of the component to match (in this case, 1366).

Finally, you can copy and paste the elements from the original header into the component.

If you already have some of these items built that you want to make into a component, it is literally that simple copying and pasting it into the new component.

Now we’ll just do a few little things to fine-tune this. There is currently a lot of dead space underneath the blue background rectangle. The height of the component is currently 640, but the height of the background rectangle control is 130. You can change the height of the component to match the largest control within it. In this example I made it slightly larger at 132, so now it’s the actual height and width that we need.

Adding the Component to a new screen

The component is now ready to be used, and it’s easy to add it to a new screen. Firstly, add a new screen.

Then in the new Screen 3, we can just click Insert from the top ribbon menu, then the available components are shown in the custom option.

Select Header and the header we created appears on the screen as one object.

Now, create another screen in the same way and add the header again. You should now have four screens with identical headers, screen one and screen two have headers created the old school way, but screens three and four have the component header.

What happens when requirements change?

Sticking with the scenario of users wanting to change the background color to red. If we update the Header component by changing the background color to red in the component screen and then review what has happened to our four screens, you’ll notice that screens three and four now have red backgrounds, but screens one and two still have blue backgrounds.

Changing the background color in screens one and two need to be done manually.

This nicely illustrates the master child relationship that was mentioned at the start. The component is your master, which can be used in several different places, but only needs to be updated once to make the changes to flow through your App wherever that component is used. This shows the power of components in a very simple example.

Using Custom Properties

Let’s build on the initial example and look at some more sophisticated options with components.

It may be useful to make the title in a header dynamic, so the text displayed in the header is different on different pages. Maybe a landing screen needs to say one thing, but on a new item screen, it needs to say something different. We can achieve this by making the header configurable and using input properties on the component.

If we click on the component itself, you’ll see on the properties pane we have a few different things that we can configure. One of those at the bottom is custom properties. This is where you can define those input properties.

What is a property?

When you add an icon or an image to your Power App, all of the related properties that you can configure, are shown in this dropdown.

This includes Fill, OnSelect, Height, etc. which are properties of the item you have selected, and all of them can be defined as you wish.

When you create a component, a few standard properties are already included. If we look at the header component we created earlier, we can configure properties for fill, height, visibility, width, X and Y coordinates.

We can add to this and include additional properties. Let’s go back to the component and on the bottom, right-hand side of the screen, add a new custom property.

We need to give it a display name, so let’s call this header title, note the internal name can’t have any spaces and add a description. As you scroll down, you will see there are two different types of properties.

  • Input. This allows the user puts in data that will be displayed in the component
  • Output. This allows you to actually take data from the component and use it in your App.

In my example, we need this to be an input.

Next, you need to choose the Data type to use for this property. There are lots of options, from text, number, yes-no Booleans, day, times, even screens. So when you want to use this for a header navigation, you can pass in screens and tell it which screen to go to. You can also input records, tables, images, video and audio, color, and currency.

As we are creating a title, we need to use text, then click create. Now when you select the header in the component, and click the dropdown again, we’ll see our new custom property for header title in the available list.

Now that we have that custom property available, we can map our text. Go to the label in the component (currently hard coded with the text “Component Example”) and change this to point to our custom property.

Type the name of the component, which is “Header” in our case, and then add a dot, to show all of the custom properties for that component. We want to get “Header.HeaderTitle” as shown below.

As soon as we do that, it will adjust to state “Text” because that was the default text of our header title property, but we can change this to our preferred title to update the component.

In the same way, we can configure these custom properties on the different screens where I’m using this component. So, while the style and layout of the headers on each screen remain the same, the text each display can be different.

So far, we’ve walked through a simple example of creating a component from scratch for a header and how to use that component in the same application that you created it in.

Using Components in a separate Power App

After you’ve created components, you can also benefit by using them in a separate Power App. To illustrate this, we’re going to use the header control we built in a new app.

Begin by creating a new App and make sure that the component features are activated.

The new App doesn’t have any components to begin with. Components in other apps can be introduced by clicking on the Insert tab, then Custom and from the dropdown menu select “Import component.”

A list of available components is then shown for you to choose from; however, our new Header component isn’t included yet.

Only components from published apps can be used in this way. So we need to go back to the original App, save it.

And also publish.

Then we can go back to our new App, refresh the Import components screen, select the Component Demo application and click import.

This will add ALL of the components from the Demo app we were working on earlier and add them as components in this new application. Select the header component by using Insert, Custom, and selecting it from the dropdown menu.

If you expand the header out, you will see that our custom property and all of the controls are there.

It’s important to remember that these components are tied to an actual Power Apps application.

A good tip is to create a Power App to use as a component samples app and build components there, then import that one application into all of your other Power Apps whenever you want to use those components.

You can also import components from several different apps into a new one. In the picture below, I’ve imported components from a Time Entry app, so they are now also available to reuse alongside the original Header one.

Note: When you import components from an app, you can’t select which components to import, you have to import them all. You can delete ones that you don’t need by selecting the ellipsis and then delete.

Hopefully, you’re seeing the power of these components and are getting excited about using them in your applications. Now that we’ve looked at how to create one of these components from scratch and import them into other applications let’s look at other ways that you can utilize components.

Using existing sample components

Now I’m a big fan of not reinventing the wheel and learning from example. Thankfully samples of components are already available for you to download and start using in your applications. If they are not exactly what you were looking for, sometimes it’s easier to import them and then adjust to your needs.

This Microsoft blog provides a top ten of reusable components: https://powerapps.microsoft.com/en-us/blog/powerapps-ten-reusable-components/

I’ve personally used several of these samples quite a bit in my apps. There is a dialogue sample, for example, a Preloader and a calendar one that I’ve used heavily. This blog post shows you details, including screenshots of each of these components and how they work. To download and start using them, you need to go to the GitHub links here

https://github.com/Microsoft/powerapps-tools/tree/master/Components

As components are stored within an actual Power App, all of the download files are .msapp files.

Accessing these components

To use these yourself, you’ll need to clone or download this repository. If you’ve never used GitHub and are a developer, it’s pretty simple. You don’t even have to login. You just click the “Clone or Download” button then download the zip file.

Extract the files from within the zip and save them on your local computer.

Demo: Using the Preloader Component

This component is one I use a lot. I’m a big proponent of optimizing apps for the best user experience. One of the common things that frustrate users is not having any kind of response or notification from an App when a long-running process is loading.

To use the Preloader Component, extracted from the Zip file, in your App, go to the Components tab, select “Import Components” then “Upload File.”

Browse to where you downloaded those samples, select this Preloader component, and click open.

Now we have this Preloader component in our App. If we expand this out and inspect it a little bit, we can see it’s just an image that’s an animated GIF with a text box and a hidden button.

To understand how this component works, we can expand its custom properties by clicking on the ellipsis by each one.

By looking at the component, we can tell that it’s optimized for a phone and not a tablet (based on the portrait style screen dimensions).

Now the App we imported it into is a tablet-based application. If we add the Preloader in right now (from the Insert tab, Custom, select Preloader), you can see it doesn’t look the best, it covers the middle section of the screen, partially obscuring the header.

We can correct that by amending the properties of the component to have a width of 1366.

If we go back to the screen that we had it on, we see it’s taking up the full width of the screen, and it looks much better. Finally, we need a tidy up of items, to ensure that other items (like my photo in the top left corner), are hidden behind the Preloader image.

Now with a Preloader type control, we need to dynamically show and hide it dependent on whether the action is in progress, or completed. The IsLoading property controls this. We need to toggle that to on or off so that the visibility of the control itself is set.

This can be controlled by using the OnVisible and Set function. Go to OnVisible, use the set command and create a variable called show Preloader. Initially set that to true so that when the screen is first loaded, it’ll show and then we can perform some action (in this example to call a data source) once the data has loaded, we can just set that same variable back to false. Finally, go to the IsLoading and set that to showPreLoader.

Now the PreLoader will initially show, and as soon as the data is loaded, it will be hidden using that boolean custom input property of the component.

That’s the great thing with these components. They’re so easy to put in and customize.

A quick recap

Now let’s take a step back, if you recall, we originally created a Header in a component demo application and then imported that Header into a separate App. When we did that, we essentially created a copy of that component to use in the new App.

This allows you to take advantage of reusing the original component. However, we face a problem if we want to make changes to the original component in the first App as they won’t flow through into the second App as this is effectively a copy of the original.

One of the things that we’ve been missing with components is a true master/child relationship. If you come from a SharePoint background as I do, what we want here is really the equivalent of a content type. The ability to create a content type to define an object like, for example, an announcements list, and then to be able to reference that content type and when you make changes at the content type level, those changes flow through.

Introducing Component Libraries

Just recently, Microsoft released a new experimental preview feature called component libraries as a solution to this problem, which allows you to create true master child relationships in your components.

If you go to the Apps tab, you should see a new tab for component libraries as below.

Click the “New component library” option.

To demonstrate how this works, create a new component library called “Headers” and just click create. All this is really going to do is create a Power App in which you can add your components.

You can import your existing components into the new component library app in the normal way, remember to save your work at this point.

There is a new process to add a component into a new App from a component library. From the left-hand menu, click the plus icon.

You’ll then see an option at the bottom for getting more components.

This will allow you to import those components from the component library.

All components from within each component library are shown, which is really similar to content type libraries in SharePoint. Select the header component and click import.

Now on this insert section, we’ll see library components and the header that we just imported.

To insert it and use it in our App, we can just click it in the Library Components section, and it automatically adds in that component to our App. Now that we have our component here from our new component library let’s look at the update process and test out that true parent-child relationship here.

Go back to the component library application where the original header component is saved, change the background color then save and publish the change. You’ll notice that the new App using this component does not reflect this change yet. This is because it’s using behind the scenes versioning to keep track of all the different versions of the components that you have.

To refresh the changes in the App in which you are using the component, click on the plus in the left-hand menu, then the three dots, and you will see a check for updates option.

This will look through all of the components utilized in this App and fetch updates for them. Click the Update button for these to be actioned.

This loads the changes and you should now notice that the header is now using the updated color.

These component libraries are really a game-changer. Now we truly have a one-stop-shop to create these reusable components for our apps.

Sharing Component Libraries

When you’re working with these component libraries, you’ll want to make sure that you share the component library app with anyone in your organization that you’d like to be able to utilize it and import into their applications. Because these component library apps are just a regular Power App, the process of sharing is the same.

Go to the file tab on our component app, click share and just add in the users that we’d like to be able to consume these component libraries.

The permissions are the same as in normal PowerApps. When you make someone a user, they will be able to add these into their Apps, but they won’t be able to edit the master component in the component library. You will also need to make them a co-owner to do that.

Component Version

There is also a screen where you can review all of the versions of your component.

If you change a component and make a mistake, you can always revert back by using the restore option to a previous version.

The components tab on the screen will show you all of the different components within this particular application. So you don’t have to go and open up the application just to see which components are inside the component library.

Component Libraries are really new, so there could be some little buggy things as you work with it, but it’s worth taking a look and taking advantage of it and be on the lookout for when this is rolled out globally.

Before I wrap up, I want to give you even more resources that you can go to and get samples of components and ideas for the things that you can do with them.

Power Apps Community Forum

The Power Apps Community forum is another great resource containing a gallery of canvas apps component samples. https://powerusers.microsoft.com/t5/Samples-Learning-and-Videos/ct-p/PA_Comm_Galleries

People from the Power Apps community are contributing to this every day and adding new samples.

Alphabet based slider App

Let’s take a look at this alphabet based slider for a canvas app created by yashag2255.

Scroll down the page until you find the download link.

Download the .msapp file and go through the same process to import it into your App. Click on new component, go to import, then upload the .msapp file you downloaded a minute ago for the alphabet slider.

Rename it to Alphabet Slider_1.

When we’re in the component itself, we can’t preview the functionality of it. To preview it you need to add the component into one of your screens to see what it does. Once we understand the functionality, we can go back to the component and amend it’s properties as required.

To filter a gallery based on what alphabet value the slider is selecting, create a filter as shown below.

When you play this and drag the slider down the alphabet, the returned values should change as each new letter is selected. That illustrates how you can consume and use output properties. In this case, to return items from a gallery that begin with the chosen letter.

Circle Progress Indicator

Another really useful component is this clickable progress indicator.

Download this as before and add it into the component library. If we look at this component sample, you can see it utilizes SVGs within your Power Apps.

In this example, an SVG (a special type of image format that is dynamic) has been componentized for you.

You can actually review the code in the background if you open the SPG image and a text editor then use that inside your apps. For this component you can see for the fill colors in this SVG here, they’re are pulling in data from the component itself. They have a custom property for circle radius and for incomplete fill and completed fill and they’re mapping that here in the SPG.

Again, the cool thing about samples like these is, if you don’t know anything about SVGs, it would have been pretty complicated to create on your own. Now it has been created as a component; all you have to do is know how to fill in the blanks.

Let’s do what we did before and we’ll add this into a screen just so that we can test out the functionality. So insert that circle progress indicator, click play and we can see as we drag the slider, the fill color changes.

Conclusion

Here are some articles that you might want to reference later on to learn more about components.

  • Canvas Component Blog:  https://powerapps.microsoft.com/en-us/blog/announcing-the-general-availability-of-the-power-apps-component-framework-for-canvas-apps/
  • Component Samples: https://github.com/microsoft/powerapps-tools/tree/master/Components
  • Componenet Framework: https://docs.microsoft.com/en-us/powerapps/developer/component-framework/overview

I hope that you’ve enjoyed this EBook. My main goal was to inspire you, give you knowledge about what components are, how you can start using them, especially with the new component libraries. Also, to give you ideas of where you can go to get inspiration and download samples of components that you can start using in your applications today.

If you do start creating components and build something really cool, sharing is caring. So go out to that community forum and give back and contribute your creations so that other people can take advantage of what you built.

0000-00-00 00:00:00


Leave a Reply

Your email address will not be published. Required fields are marked

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}