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.
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.
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:
- 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’.
- 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.
- ‘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 on the screen below.
- Now save the ‘Component Library’.
- 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:
- 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.
- 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.
- Save and publish.
- Go to ‘Canvas App’ and you would notice banner as below
How to update ‘Component Library’ in Canvas App
- Click on ‘Review’ and click on ‘Update’ to get the latest Component updates.
- Canvas apps Header changes are as below.
Stay tuned for my next blog.
—
Written by Nitin Puri
Nitin is SharePoint Developer at Evolvous Limited – specialists in Microsoft Technologies.
=====
Read more
How to Make an Animated Search Field in PowerApps
