How to Implement a Color Picker for BorderColor Property in React PowerApp Component?

85 Views Asked by At

I have created a React-based PowerApp Component that includes a date picker with various property controls such as selectedDateTime, showDate, showTime, dateFormat, borderColor, borderRadius, firstDayOfWeek, and minutesInterval. All properties are functioning as expected, except for the borderColor property, which currently only accepts a string value. I would like to implement a color picker similar to the PCF Component's vertical Gallery in Power App, but I'm unable to find a suitable solution using the available tools and methods. Can anyone provide guidance on how to achieve this functionality within my PowerApp Component?

This is what I have right now and it's acccepting string RGBA

<property name="borderColor"
                  display-name-key="Border Color"
                  description-key="The border color of the component"
                  of-type="SingleLine.Ticker"
                  usage="input"
                  default-value="RGBA(128,128,128, 0.5)"
                  required="false" />

I want something like

<property name="borderColor"
                  display-name-key="Border Color"
                  description-key="The border color of the component"
                  of-type="colorPicker"
                  usage="input"
                  default-value="RGBA(128,128,128, 0.5)"
                  required="false" />
1

There are 1 best solutions below

0
Greg On

Power Apps PCF Custom Control properties should be one of the listed types shown at the link below. Notice also some data types are listed as not supported.

https://learn.microsoft.com/en-us/power-apps/developer/component-framework/manifest-schema-reference/type

For model driven apps, the type of the property should match a DataVerse column data type, for which you are going to load from and save back to. As when you add the control to a page you will only be able to pick a column for this property that has a matching data type.

SingleLine.URL and SingleLine.Ticker do exist; however, what you want to use for the color does not exist. Your options appear to be SingleLine.Text or Object. (Notice Object is only legal for Output only properties.)

Assuming you want to store the value back into the DataVerse, then SingleLine.Text would seem to me to be your best option. You'd then choose for some such text fields on given forms to use your control instead of the default.