Create a Custom Power Apps Text-Input Component

on





 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:



Note: The Default Width and Height of a component is set to 640. You'll have to change it according to your requirements.



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 Input Control inside your component
Insert >  Input > Text Input




1:Now place it in the center of the container and set its Fill & BorderColor property to "Transparent"


2:Now Remove the Text in the Default Property of the Text Input

Step 7:

Now were gonna create some Custom Properties of the Component to get data in and out.
1: Select the Component.
2: On the right side of your screen you can see Custom Properties
3: Add a new custom property
4: Name the Property "Text"
5: Be sure to set the Data type to "Text" and Property Type to Output


6: Click on Save and a custom property will appear on your Component Properties 
 

Step 8:

1: Select the component and go to its Properties. You'll see a new Property called "Text"
2: Set the Text Property to your textinputname.Text 
    In my case Textinput2.Text

Now you can get the text present in TextInput inside of the Compnent from anywhere in the app by just adding your component to anywhere.



Simply use, "YourComponentName.Text "to get the text from the component to anywhere in the App.

I hope you found this blog useful. Leave a like and be sure to subscribe to the blog to get updated.

Feel free to ask questions and give suggestions in the comment box down below:


Comments

Post a Comment