Only 1 Input property needed for all Power Apps components

Do you end up with many input properties when you develop Power Apps components? You only need 1 input property!

Power Apps components

Earlier today I mentioned Power Apps components in my post about call a flow from Power apps components. That post made me think about passing parameters into Power Apps components. When you end up with many parameters it becomes a bit of a pain to deal with

Record type Input property

I’m going to use a similar method as I’ve done with Power automate in the past, where I reduced the number of parameters sent to a flow.

In this case i’m going to use the same component as mentioned in my earlier post. I’m just going to add a new property calls IN. This property will be of the type Record.

This IN parameter is going to hold all the details that my component needs.

Now there is one important things to note! Tick that box! Raise OnReset when value changes.

To make sure that the component gets a change made to your input property, you will need to tick this box. If you don’t, well it will work once.

JSON

Inside my component I’m setting the IN parameter to the following bit of json. The ButtonName is going to be used by the label button to display a text and the Colour is used to set the background (Fill) of my component.

{ButtonName: "Red", Colour: Red}

I’m going to leave the original fields there but there is no real need for them anymore.

The component instances in the app

Now i created my traffic light in my Power App again and all i need to do is set the IN property for each of the instances of my component to the following code.

{ButtonName: "Green", Colour: Green}

And I use a similar code for the amber component. If you want to you can of course also use the RGBA function inside the above json code to get more control over the colours that you want.

So now I’m setting 2 things in one property.

Creating new properties?

Creating new properties is as simple as just editing the json. Just add some new test properties within your component and then update the component instances in your app to use the same format.

Arrays in the parameter

So far I’ve looked at simple code with text and colours and in a similar way you can also use numbers. But how about arrays of data?

It is all equally simple.

The example below includes an array of data as well.

{ButtonName: "Green", Colour: Green, MyArray: [1,2,3,4,5]}

It is even possible to use something like items inside an array that are more complicated.

{
    ButtonName: "Green",
    Colour: Green,
    MyArray: [
        {number: 1},
        {number: 2},
        {number: 3},
        {number: 4},
        {number: 5}
    ]
}

Output properties

In a similar way as the input property, you can also create a single output property. So that the component can pass data back to the app.

After I have created my OUT property I will set the OUT property to Self .IN

For more about Self please read my post about Parent, Self and ThisItem

And from within the app I can now get to all my data in the output parameter using the following expressions.

First(MyComponent_2.OUT.MyArray.Value).Value.number

Tables

In all the examples here i used the Record data type as a base. For any of this I could also have considered using the table data type instead as that will give me an array of data at the root level of my json code.

So if I wanted to get or return multiple items then that might be a good options. However in most cases a single record will be good enough.