Moving data, with custom properties, between your app and components in Power Apps can be difficult. In this post I will look at updating data inside a component.
An introduction to Custom Properties
Table of Contents
Compared to groups or Containers in Power Apps components will give you custom properties. Like with groups and containers, components will give you the grouping of multiple controls. Custom properties however will give you a way to pass data into your component and to collect data out of your component.
The custom properties can have all sorts of different data types.
Moving data from the app to the component
When you have created your component in Power Apps and you added a custom property then you can simply view the value of this custom property, or when you have a property of the type Table you will see that it is set to a table.
If you want to set the Table you can use the expression editor. In my example below I’m setting the MyTable property to AppTable. AppTable is a Table that I created during the App’ OnStart using the following Set code
Set(AppTable, [1,2,3,4])
Ok, that was the easy bit!
In one of my test apps, I’ve created a gallery to display the Table in a Gallery and a button Update App Table that will update the values of the AppTable.
Then within the Component (The section in green) I’m displaying the same Table in a Gallery that is part of my component.
In my button’s OnSelect code I can now use the following to update my variable and the Galleries in my app and the one in my component will both be updated with new values
Set(AppTable, ForAll(AppTable.Value, Value + 1))
This is great as the data inside my app can be used by the component. If I do a similar thing with the button inside my component however I found that the data isn’t updated outside the component. For the right reasons of course as my custom property is an input property/
Moving data from the component to the app
To move data from a component back to the app, you can create a custom properties similar to shown above, however this time you will need to select Output as the Property Type.
I’m now creating a custom property MyTableOut
To update all numbers in my gallery I’m now setting a variable varMyTable and this variable is used in the Components MyTableOut property that I created.
Set(varMyTable, ForAll(Component1.MyTable.Value, Value + 1))
This now means that I can use the data send from the component to a 3rd gallery (orange in the below screen shot).
This 3rd gallery uses the MyTableOut Custom property from my component.
Ok, this is nice, but not great! We can now get to the data inside the component from within the app.
Update data outside the component
As we have seen so far we can take a table of data and push this into a component. We can then take the data out of the component’s custom output property and display this somewhere in Power Apps.
One problem here!
We want to use the data that we pushed into the component back into the same gallery where we initially used it. We can do that with the above code.
Set(AppTable, Component1_1.MyTableOut)But when do we do this?
We need to run the code when there is an update ready and only when the update of the data is ready.
This is why in my example I’m using a table. You cannot do an expression in PowerApps where you compare two tables with something like:
If(Table1 = Table2, ...)This is where I’m introducing another output property in my component of the Type Boolean. I’m calling this property Dirty.
Now when I update the table inside my component I’m also going to set th Dirty property.
So every time my table is updated by varDirty will be set to True. Then I set the Dirty value to varDirty.
And the OnReset of my component is set to make sure that my varDirty variable defaults to false.
Now I’m adding a timer to my screen and set the Start to Component1_1.Dirty
And Finally I’m setting the OnStart code to
If(Component1_1.Dirty, Set(AppTable, Component1_1.MyTableOut)); Reset(Component1_1)
The reset in the above code ensures that the component is reset and the onreset code is run to set the Dirty Property back to false and the timer code isn’t run until my table data is updated within the component again.