Presentation and hands on content of my session during Power User Days 2019.

2. Having fun with
PowerApps
Components
Rebekka Aalbers

3. Rebekka
Aalbers
#PowerAddict
Technology consultant
Co-organizer

4. PowerAppsComponents
Audience
Role
Power User / Citizen Developer
Level
Intermediate
Knowledge
Basic knowledge
of building canvas apps

5. PowerAppsComponents
Session Objectives & Agenda
Objectives
• Learn to use PowerApps Components
• Learn how to build composite controls

6. PowerAppsComponents
Session Objectives & Agenda
Agenda

7. Components - Overview

8. PowerAppsComponents
Reusable Export Import Share
Components

9. PowerAppsComponents
Experimental
Feature

10. Turn on components
1
2
3

11. UI Changes

12. Component designer
Component
Tree view
Canvas
Propertiespane
Create your own
properties

13. PowerAppsComponents
Quick demo

14. Hands-on

15. PowerAppsComponents
Preparation

16. PowerAppsComponents
1. Create a blank Canvas app

17. PowerAppsComponents
Step 2: Turn on the Components feature
App settings > Advanced settings > Components
1
2
3

18. PowerAppsComponents
Step 3: Save your app

19. PowerAppsComponents
Regional formula syntax
Region Formula
US / UK Set( Number , 0.5 ) ;
Navigate( Screen2 , Fade )
BE / NL Set( Number ; 0,5 ) ;;
Navigate( Screen2 ; Fade )

20. PowerAppsComponents
Scenarios

21. PowerAppsComponents
Numerical up and down component

22. PowerAppsComponents
Step 1 Create a new component

23. PowerAppsComponents
Step 2 Rename your component

24. PowerAppsComponents
Step 3 Add controls to the component canvas
• Text input
• Up icon
• Down icon

25. PowerAppsComponents
Step 4 Rename your controls

26. PowerAppsComponents
Step 5 Reposition the text input

27. PowerAppsComponents
Step 6 Reposition and resize the Up button
Properties:
• X: Parent.Width - UpButton.Width
• Y: 0
• Height: TextInput.Height / 2

28. PowerAppsComponents
Step 7 Reposition and resize the Down button
Properties:
• X: UpButton.X
• Y: UpButton.Height
• Width: UpButton.Width
• Height: UpButton.Height

29. PowerAppsComponents
Step 8 Resize your canvas

30. PowerAppsComponents
Step 9 Resize the Text input
Properties:
• Width: Parent.Width - UpButton.Width
• Height: Parent.Height – TextInput.BorderThickness

31. PowerAppsComponents
Step 10 Format, border radius & text alignment
Text input Properties:
• Format: Number
• Radius: 0
• Text Alignment: Align.Right

32. PowerAppsComponents
Step 11 Button design UpButton & DownButton
Properties:
• Fill: TextInput.BorderColor
• Color: White
• BorderColor: TextInput.BorderColor
• BorderThickness: TextInput.BorderThickness

33. PowerAppsComponents
Step 11 Add counter logic to buttons & text input
UpButton:
• OnSelect: Set(NumValue,
NumValue + 1 )
DownButton:
• OnSelect: Set(NumValue,
NumValue - 1 )
TextInput:
• Default:
If( IsBlank(NumValue), 0, NumValue )
• OnChange:
Set( NumValue, Value( TextInput.Text ))
• DelayOutput: true

34. PowerAppsComponents
Step 12 Add reset logic to component
Property:
• OnReset: Set( NumValue, 0 )

35. PowerAppsComponents
Try it out!
• Add your component to a screen

36. PowerAppsComponents
Step 13 Add output property to your component
• Display name: Value
• Name: Value
• Description: Current value of the counter
• Property type: Output
• Data type: Number
• Set property to:
Value( TextInput.Text )

37. PowerAppsComponents
Step 14 Add input property to your component
• Display name: Border Color
• Name: BordorColor
• Description:
Color of the border and the button background of component.
• Property type: Input
• Datatype: Color
• Set property to:
DarkBlue
Change property of TextInput:
• BorderColor: NumericalUpDown.BorderColor

38. PowerAppsComponents
Try it out!
• Add a label to the screen
• Set the Text property to the Value
of your component
• Change the border color of the
component

39. PowerAppsComponents
Optional step: component design
TextInput
• X: TextInput.BorderThickness / 2
• Y: TextInput.BorderThickness / 2
• Height:
Parent.Height - TextInput.BorderThickness
• Width:
Parent.Width - UpButton.Width -
TextInput.BorderThickness
• Padding Left & Right: 20
UpButton
• X: Parent.Width - UpButton.Width
• Y: TextInput.Y
DownButton
• Y: UpButton.Height + UpButton.Y

40. PowerAppsComponents
Dialog component

41. PowerAppsComponents
Step 1 Create a new component and name it Dialog

42. PowerAppsComponents
Step 2 resize the component canvas
Properties:
• Height: Max(App.Height, App.DesignHeight)
• Width: Max(App.Width, App.DesignWidth)

43. PowerAppsComponents
Step 3 Change the fill color
• Pick a color you like
• Make sure the
A-factor is 50% or
0.5

44. PowerAppsComponents
Step 4 Add a rectangle and change fill to white
Change control name
to
‘MessageBackground’

45. PowerAppsComponents
Step 5 position the rectangle
X: Parent.Width/2 - MessageBackground.Width/2
Y: Parent.Height/2 - MessageBackground.Height/2

46. PowerAppsComponents
Step 6 Add 2 labels on top of the rectangle

47. PowerAppsComponents
Step 7 Format the top label as Title label
Rename control: Title Properties:
• Auto height: true or On
• Width: MessageBackground.Width
• X: MessageBackground.X
• Y: MessageBackground.Y
• Padding Top/Bottom: 20
• Padding Left/Right: 40
• Text alignment: Center
• Font size: 20
• Font weight: Bold

49. PowerAppsComponents
Step 8 Format the bottom label as Message label
Rename control: DialogMessage Properties:
• Auto height: true or On
• Width:
MessageBackground.Width
• X: MessageBackground.X
• Y: Title.Y + Title.Height
• Padding Top/Bottom: 20
• Padding Left/Right: 40
• Font size: 18

50. PowerAppsComponents
Step 9 Add custom properties

51. PowerAppsComponents
Custom properties
• Display name: Title
• Name: Title
• Description: The title of the dialog
message.
• Property type: Input
• Date type: Text
• Display name: Message
• Name: Message
• Description: The message of the
dialog.
• Property type: Input
• Date type: Text

52. PowerAppsComponents
Step 10 Connect the labels and properties
Title label – Text property: Dialog.Title
Message label – Text property: Dialog.Message

53. PowerAppsComponents
Try it out – add the component to a screen

54. PowerAppsComponents
Step 11 Add an OK button.
• Add button
• Name: OKButton
• Text property: OK

55. PowerAppsComponents
Step 12 Position the button
Properties:
• X: Parent.Width/2 - OKButton.Width/2
• Y: DialogMessage.Y + DialogMessage.Height

56. PowerAppsComponents
Step 13: Add logic to height MessageBackground
Height: OKButton.Height + DialogMessage.Height + Title.Height + 40

57. PowerAppsComponents
Step 14 : Add 2 properties to the component
• Display name: Show
• Name: Show
• Description:
Boolean to define if the dialog
needs to become visible.
• Type: Input
• Data type: Boolean
• Display name: DialogVisible
• Name: DialogVisible
• Description:
Gives a message if the dialog
should be visible or not.
• Type: Output
• Data type: Boolean

58. PowerAppsComponents
Dialog custom properties

59. PowerAppsComponents
Step 15 Set variable on select of OK button
Set( varDialogVisible, false )

60. PowerAppsComponents
Step 16 Add toggle to component
• Name: ShowHideToggle
• Properties:
• OnCheck: Set( varDialogVisible, true )
• OnUncheck:Set( varDialogVisible, false )
• Default: Dialog.Show
• FalseText: “Hide”
• TrueText: “Show”

61. PowerAppsComponents
Step 17 Add a button + dialog component to screen

62. PowerAppsComponents
Step 18 Configure button and dialog
Button - property:
• OnSelect:
UpdateContext({ShowDialog: false }); UpdateContext({ShowDialog: true })
Dialog – properties:
Properties:
• Visible: Dialog_1.DialogVisible
• Show: ShowDialog

63. PowerAppsComponents
Congratulations!
You just build your first
reusable components.

64. Some more info

65. PowerAppsComponents
Component specifics
• Scope:
• A componentfunctions as incapsulated black box.
• No interaction on control level between app and component.
• Interaction only through input/output properties
• Only global variables (Set).
Variable functions within context of component.

66. PowerAppsComponents
Known limitations (for now)
• Add to form or gallery control not available
• No support for collections within components
• Data sources are not saved within components > you cannot add form
or data table control to a component.
• Component is local master instance.
• Component used in multiple apps?
After update import update into all apps it is used in.

67. PowerAppsComponents
http://bit.ly/componentsblog

68. Q & A

69. Rebekka
Aalbers
www.powersweet.nl
@RebekkaAalbers

70. PowerAppsComponents
Thank you!