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

516 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 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!

×