1. PowerApps Components - Reza Dorrani

2. About Me Mohammad Reza Dorrani
Principal Consultant & Practice Technical Lead at Catapult Systems
Founder and User Group Leader of Houston PowerApps and Flow User Group
Microsoft Flow All Star
@rezadorrani

3. Houston PowerApps and Flow User Group
We are a group of Microsoft PowerApps and Flow enthusiasts that meet every 3rd Wednesday of each month from 6pm until 8pm at the Houston MTC to share our knowledge, ideas, and passion. Our group welcomes people of all skill levels and backgrounds and enjoys questions and group discussions pertaining to PowerApps and Flow. We strive to provide an inclusive, enjoyable, and comfortable learning atmosphere for everyone that attends. We look forward to learning and connecting with you! Food and drinks will be served Bookmark  quick access to our group!

4. Agenda Why Components? What are Components?
Setting up your App for Component Use
Demo – Build a Header Component
Demo – Build a Navigation Component
Demo – Build a Bing Maps Component
Demo – Build a Gauge Control Component
Known limitations
Learning Materials

5. Why Components

6. Why Components
Many a times we create a group of controls for a specific purpose within our PowerApps and then copy paste the controls across multiple screens
Examples: Header, Menu, Charts etc.
Any update to any property of these controls would require you to make the update across all the screens
Would it not be amazing if there was a master group control (Component) that can be edited and that would in turn make the updates on all the copies
PowerApps Components to the rescue !!!

7. What are Components

8. What are Components?
Components are reusable building blocks for canvas apps
A components comprises of a set of controls and properties that can be reused inside the app
The Component itself will act as the master template and once can create multiple instances of this template to be utilized across the app
Any update to the master template (controls or properties) will automatically push the changes to all the instances across the app
Create once and reuse across the App

9. What are Components? Components can contain properties
Input properties – send information to Component
Output properties – get information from Component
Components can be exported and imported across apps
Components is currently an experimental feature available in production
Variables within a Component are scoped to the Component instance only

10. Setting up your App for Component Use

11. How to turn on Components?
File > App Settings > Advanced Settings > Component – Turn it On
In the Tree View, select Components and start creating Components or Import/Export Components
Insert > Components – gives a list of components that you have created/imported within your App

12. Demo – Build a Header Component

13. Demo – Build a Navigation Component

14. Demo – Build a Bing Maps Component

15. Demo – Build a Gauge Component

16. Known Limitations

17. Known Limitations
Instance: a master-instance of a component is scoped to the app. It is a local master. This means that changes you make to the master-instance only affect the copies of the component within the app. The changes do not affect the copies in other apps
Collections: using a collection within a component is not yet fully supported, but you can use variables today
Data sources: data sources are not saved with components. Forms and data-grids are disabled due to this reason
Nesting: components cannot be inserted into galleries, forms, and data cards today. Likewise, forms and data-grids cannot be embedded into components

18. Known Limitations
Images: it is not yet possible to package media files when importing a component, but this feature is coming soon
Components are currently an Experimental feature !!!

19. Learning Materials

20. Learning Materials Canvas App Components
Components Start Your Journey
controls/
Create a Component
10 Reusable Components

21. Thank You