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
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
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
48.
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
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
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
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.