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 Platform World Tour Copenhagen 2019

66 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 Platform World Tour Copenhagen 2019

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

×