Create a PowerApps Custom Drop-down Component

 

 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 Drop-down Input Control inside your component

Insert > Input > Drop down

Step 7:

Place the dropdown in center and change its Fill, BorderColor & ChevronFill Property to "Transparent"

Now change the Text Color to white.

Step 8:

Now we have to add two custom properties to get data in and out of the component

1: Select the Component

2: On the right side of the screen select New Custom Property

3: Set its name to "SelectedText"

4: Set its Property Type to "Output"

5: Click Save

Note: This property is used to get the selected value from the component's dropdown to anywhere in the App.

Step 9:

1: Add a new custom property

2: Set its name to "Values"

3: Set its Property Type to "Input"

4: Set its data type to  "Table"

5: Click Save

Step 10:

Select the dropdown inside the component and change its "Items" property to "YourComponentName.Values"

In my case its "Component1.Values"

Now Select the Component and change its "SelectedText" Property to "YourDropdownName.Selected.SampleStringField"

Step 11:

Go ahead and check out the Values Property and see how the Data for the Dropdown is shown

You can connect it to a table or you can simply edit the existing columns in the table.

Note: Now you can get the selected value from the component to the app by using "YourComponentName.SelectedText"

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: