Author Details

avatar-teacher

Evolvous

We are a team of tech enthusiast and this section is where we love to share our experience and our knowledge. We try our best to help you understand technical topics by giving you live instances of how-to’s, guides, tips, FAQ’s and troubleshoots.

If you like it or have questions, do share your feedback in the comments section below.

Power Apps Components Library

In PowerApps, Components are reusable building blocks for canvas apps. You can define a set of controls to reuse inside an app.  

  • The component scope is local, which means you can create a component in an App and can reuse it within the screens of that particular App.   
  • A component can use advanced features such as custom properties and enable complex capabilities.

Power Apps Calgary - Evolvous

 

Why components are Useful 

Components are useful in building larger apps that have similar control patterns. If you update a component definition inside the app, all instances in the app reflect your changes. Components also reduce duplication of efforts by eliminating the need to copy/paste controls and improve performance.  Check out my previous blog to learn on how you can create components in PowerApps.

Microsoft PowerApps component Library - Evolvous

Component Library PowerApps

Component Libraries (Currently in preview) are the recommended way to reuse components across apps. 

Unlike the ‘Component’ scope for which is limited within the App, ‘Component Libraries’ can be reused across the Apps.   

In this article, we are going to learn the following topics 

  • Create a new ‘Component Library’ with ‘Header’ and ‘Footer’ components. 
  • How to share the ‘Component Library’? 
  • How to Use the ‘Component Library’ in Canvas App? 
  • To modify the ‘Component Library’ ?
  • How to update ‘Component Library’ in Canvas App ?

Create a new ‘Component Library’ with ‘Header’ and ‘Footer’ components: 

Why components are Useful - Evolvous

  • Provide the name and click on ‘Create’ 

  • . As we know ‘Component Library’ is a collection of reusable ‘Components’,  In the next screen, a default ‘Component’ would be presented. 
  • . Rename the defaults Component to ‘Header’ 
  • . Add a Label control ‘LblHeaderText’, as shown on the screen. 
  • . And Add a Media control Under Images ‘logoImage’, as shown in the Screen 

  • Add a new ‘Custom property’ of Data type ‘Text’ and name it as ‘Header Text’. 

Why components are Useful - Evolvous

  • A component can receive input values and emit data if you create one or more custom properties. 
  • Add a new ‘Custom property’ of Data type ‘Image’ and name it as Image 

  • Set the Label controls ‘Text’ property to the ‘Header Text’ property. 
  • ‘Header Text’ property will be handy while referring to the components in ‘Canvas’ apps. 

custom property power apps - Evolvous

  • ‘Image’ property will be handy while referring to the components in ‘Canvas’ apps. 

  • Also, set the ‘Header’ components ‘Width’ property to the ‘App.ActiveScreen.Width’.
  • App.ActiveScreen.Width sets the width of Components as per the Canvas app. 

  • Now let’s copy the ‘Header’ component using the ‘Duplicate component’ option and create the ‘Footer’ component

  •  I’ve added a Label and new ‘Custom property’ of type ‘Text’ and name it as ‘Footer Text’, as shown othe screen below. 

  • Now save the ‘Component Library’. 

save component library in power apps - Evolvous

  • Next, Publish the Component Library  
  • Press the Publish This version Header & Footer Component library has been created

  • In the maker portal ‘Component Library’ would show up. 

How to Share the ‘Component Library’ 

Now that we created the ‘Component Library’, we need to share the App. 

  • Post the ‘Save ‘, Click on Share ‘, 

  • Add people you would like to share. I have shared the Component Library with ‘Everyone’ in my account. 

How to use the ‘Component Library ‘in Canvas Apps: 

  • Create a new Canvas app 

  • Choose the layout Phone layout or Tablet layout Suppose I am choosing phone layout.  
  • To add the ‘Component Library’, click on ‘+ Insert’ and ‘Get more components’. 

  • From the list choose the ‘Components’. 
  • You would get the ‘Components’ that were shared with you. 

  • Added ‘Components’ would be available under ‘Library Components’. 

  • Add both ‘Header’ and ‘Footer’ Components to the Canvas app’s screen. 
  • Set the ‘HeaderText’ property of the ‘Header’ component. This would immediately change your Header label text. 

  • Select Media Then upload the Image & store it. 

  • After that, we can use the stored image in the header component. Set the ‘Image’ property of the ‘Header’ component to the image you uploaded in the previous step 

Power apps component library - Evolvous

  • Similarly, Set the ‘FooterText’ property of the ‘Footer’ component. This would immediately change your Footer label text. 

How to modify the ‘Component Library 

Let’s modify the ‘Component Library’ and see how it reflects in the Canvas App. 

  • Change the background color of the ‘Header’ component.  

Power apps component library - Evolvous

  • Save and Publish. 
  • Go to ‘Canvas App’ and you would notice banner as below 

Power apps component library - Evolvous

How to update ‘Component Library’ in Canvas App 

  • Click on ‘Review’ and click on ‘Update’ to get the latest Component updates. 

Power apps component library - Evolvous

  • Canvas apps Header changes are as below. 

Power Apps component Library - Evolvous

Stay tuned for my next blog.

 

Written by Nitin Puri

Nitin is SharePoint Developer at Evolvous Limited – specialists in Microsoft Technologies.