Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

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

270 vues

Publié le

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

Publié dans : Logiciels
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

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!

×