What are Power Apps Components?
Components are reusable building blocks for canvas apps so that app makers can create custom controls to use inside an app, or across apps using a component library. Components can use advanced features such as custom properties and enable complex capabilities. This blog introduces component concept and example.
Creating a Component
Step 1:
To Create a component within an app, go to Tree View, select the Components tab, and then select New Component:
Step 2:
Resizing the Component according to need. In my case im gonna set the Height of the Component to "100" and the Width to "600" (You can set it however you want).
Step 3:
Insert an HTML Text Control in the Component,
Insert > Text > HTML Text
Step 4:
Now were gonna set the Set the "X" & "Y" Property of the HTML Text to "0"
Now set the padding to "0" as well.
Step 5:
Now to make the HTML block responsive to the Height and Width of the Container
1: Set the Height property of HTML Text to "Parent.Height"
2: Set the Width property of HTML Text to "Parent.Width"
It will now look like this:
Step 6:
In the HTML Text Property of the HTML block we're gonna add a some code. We're gonna create a DIV (container) and add inline CSS Code.
1: Set the height and width of the div to "Parent.Height" & "Parent.Width" to make it responsive,
2: Add Background color or gradient according to your needs.
3: Set the border-radius to 20px (You can change it however you like)
You can copy and paste the following code inside the Double Quotations ( "")
"<div style=
'width: "& Parent.Width - 0 &"px;height: "& Parent.Height - 1 &"px;
border-radius: 20px;
background: radial-gradient(ellipse at top, #77A1D3, transparent) 40%,
radial-gradient(circle at center, #076585, transparent) 40%,
radial-gradient(ellipse at bottom, #77A1D3, transparent)40%;
'></div>"
Note: Here i have overlaped 3 gradients on top of each other. You can change the gradient color values to your own.
Step 6:
Insert a Text Label inside your component
Insert > Input > Button
2: Set the TextColor to White
3: Set the TextAlign to Center
4: Set the FontSize to 32
5: Set the FontWeight to SemiBold
Step 7:
Now were gonna add two Custom Properties to get data in and out of the component
1: Select the Component
2: On right side of the screen Click on New Custom Property
3: Set its Name to "ButtonText"
4: Set its Property Type to Text
5: Click on Create
Step 8:
Select the Text Label inside the component and change its Text Property to "ComponentName.ButtonText"
In my case its "Component1.ButtonText"
Step 9:
Add a new Custom Property to set the OnSelect Navigate Function
1: Select the component
2: Create a Custom Property
3: Set its name to "Navigate"
4: Set its Property type to Input
5: Set its Data Type to Screen
6: Click on Create
Step 10:
Now we'll add the navigation function to the Text Label
1: Select the Text Label inside the component
2: Set its On Select Property to "Navigate(YourComponentName.Navigate)"
in my case its "Navigate(Component1.Navigate)"
Now You can simply use your component anywhere in the app
Change its Navigate Property to a screen name you want the button to navigate to
Change the ButtonText Property to change the button text
I hope you found this blog useful. Leave a like and be sure to subscribe to the blog to get updated.
Comments
Post a Comment