Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Having fun power apps components HandsOn - Power User Days Belgium 2019

69 views

Published on

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

Published in: Software
  • Be the first to comment

  • Be the first to like this

Having fun power apps components HandsOn - Power User Days Belgium 2019

  1. 1. Having fun with PowerApps Components Rebekka Aalbers
  2. 2. Rebekka Aalbers #PowerAddict Technology consultant Co-organizer
  3. 3. PowerAppsComponents Audience Role Power User / Citizen Developer Level Intermediate Knowledge Basic knowledge of building canvas apps
  4. 4. PowerAppsComponents Session Objectives & Agenda Objectives • Learn to use PowerApps Components • Learn how to build composite controls
  5. 5. PowerAppsComponents Session Objectives & Agenda Agenda
  6. 6. Components - Overview
  7. 7. PowerAppsComponents Reusable Export Import Share Components
  8. 8. PowerAppsComponents Experimental Feature
  9. 9. Turn on components 1 2 3
  10. 10. UI Changes
  11. 11. Component designer Component Tree view Canvas Propertiespane Create your own properties
  12. 12. PowerAppsComponents Quick demo
  13. 13. Hands-on
  14. 14. PowerAppsComponents Preparation
  15. 15. PowerAppsComponents 1. Create a blank Canvas app
  16. 16. PowerAppsComponents Step 2: Turn on the Components feature App settings > Advanced settings > Components 1 2 3
  17. 17. PowerAppsComponents Step 3: Save your app
  18. 18. PowerAppsComponents Regional formula syntax Region Formula US / UK Set( Number , 0.5 ) ; Navigate( Screen2 , Fade ) BE / NL Set( Number ; 0,5 ) ;; Navigate( Screen2 ; Fade )
  19. 19. PowerAppsComponents Scenarios
  20. 20. PowerAppsComponents Numerical up and down component
  21. 21. PowerAppsComponents Step 1 Create a new component
  22. 22. PowerAppsComponents Step 2 Rename your component
  23. 23. PowerAppsComponents Step 3 Add controls to the component canvas • Text input • Up icon • Down icon
  24. 24. PowerAppsComponents Step 4 Rename your controls
  25. 25. PowerAppsComponents Step 5 Reposition the text input
  26. 26. PowerAppsComponents Step 6 Reposition and resize the Up button Properties: • X: Parent.Width - UpButton.Width • Y: 0 • Height: TextInput.Height / 2
  27. 27. PowerAppsComponents Step 7 Reposition and resize the Down button Properties: • X: UpButton.X • Y: UpButton.Height • Width: UpButton.Width • Height: UpButton.Height
  28. 28. PowerAppsComponents Step 8 Resize your canvas
  29. 29. PowerAppsComponents Step 9 Resize the Text input Properties: • Width: Parent.Width - UpButton.Width • Height: Parent.Height – TextInput.BorderThickness
  30. 30. PowerAppsComponents Step 10 Format, border radius & text alignment Text input Properties: • Format: Number • Radius: 0 • Text Alignment: Align.Right
  31. 31. PowerAppsComponents Step 11 Button design UpButton & DownButton Properties: • Fill: TextInput.BorderColor • Color: White • BorderColor: TextInput.BorderColor • BorderThickness: TextInput.BorderThickness
  32. 32. 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
  33. 33. PowerAppsComponents Step 12 Add reset logic to component Property: • OnReset: Set( NumValue, 0 )
  34. 34. PowerAppsComponents Try it out! • Add your component to a screen
  35. 35. 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 )
  36. 36. 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
  37. 37. 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
  38. 38. 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
  39. 39. PowerAppsComponents Dialog component
  40. 40. PowerAppsComponents Step 1 Create a new component and name it Dialog
  41. 41. PowerAppsComponents Step 2 resize the component canvas Properties: • Height: Max(App.Height, App.DesignHeight) • Width: Max(App.Width, App.DesignWidth)
  42. 42. PowerAppsComponents Step 3 Change the fill color • Pick a color you like • Make sure the A-factor is 50% or 0.5
  43. 43. PowerAppsComponents Step 4 Add a rectangle and change fill to white Change control name to ‘MessageBackground’
  44. 44. PowerAppsComponents Step 5 position the rectangle X: Parent.Width/2 - MessageBackground.Width/2 Y: Parent.Height/2 - MessageBackground.Height/2
  45. 45. PowerAppsComponents Step 6 Add 2 labels on top of the rectangle
  46. 46. 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
  47. 47. 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
  48. 48. PowerAppsComponents Step 9 Add custom properties
  49. 49. 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
  50. 50. PowerAppsComponents Step 10 Connect the labels and properties Title label – Text property: Dialog.Title Message label – Text property: Dialog.Message
  51. 51. PowerAppsComponents Try it out – add the component to a screen
  52. 52. PowerAppsComponents Step 11 Add an OK button. • Add button • Name: OKButton • Text property: OK
  53. 53. PowerAppsComponents Step 12 Position the button Properties: • X: Parent.Width/2 - OKButton.Width/2 • Y: DialogMessage.Y + DialogMessage.Height
  54. 54. PowerAppsComponents Step 13: Add logic to height MessageBackground Height: OKButton.Height + DialogMessage.Height + Title.Height + 40
  55. 55. 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
  56. 56. PowerAppsComponents Dialog custom properties
  57. 57. PowerAppsComponents Step 15 Set variable on select of OK button Set( varDialogVisible, false )
  58. 58. 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”
  59. 59. PowerAppsComponents Step 17 Add a button + dialog component to screen
  60. 60. 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
  61. 61. PowerAppsComponents Congratulations! You just build your first reusable components.
  62. 62. Some more info
  63. 63. 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.
  64. 64. 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.
  65. 65. PowerAppsComponents http://bit.ly/componentsblog
  66. 66. Q & A
  67. 67. Rebekka Aalbers www.powersweet.nl @RebekkaAalbers
  68. 68. PowerAppsComponents Thank you!

×