Answered

Change Color of button in custom component based on formula on screen

(0) Share

Report

Posted on by Community Power Pla... Microsoft Employee

Hi everyone,

I do not know if the following is even possible, but I am struggling to get it to work.

I have a component with a custom property table build like this (and also a custom property called 'Main Color' with color 'Green'. This component functions as a footer with 4 buttons 1, 2, 3 and 4 on each page for navigation purposes.

Table(
{
Name: "1",
Icon: Icon.Devices,
Screen: scr1
},
{
Name: "2",
Icon: Icon.Settings,
Screen: scr2
},
{
Name: "3",
Icon: Icon.Settings,
Screen: scr3
},
{
Name: "4",
Icon: Icon.Settings,
Screen: scr4
}
)

Situation: On each of the screens I have 2 labels with 2 numbers (for example 11 and 12, 40 and 41, 50 and 51 and 60 and 62.

When I navigate to Screen1 and see that from the 2 labels that 12 > 11 I want the color of the table button with name '1' changes to Red (instead of the Main Color of the custom property).

Moreover, when I navigate to Screen2 it needs to indicate that the button with name '1' is Red.

Is something like this even possible?

Categories:

Building Power Apps

All responses (2)

Answers (1)

Sort by

WiZey 3,023 Moderator on at

Like
a
(0)

Report
Copy link

Link copied!
Hello @Anonymous ,

Sorry, could I ask you to rephrase this sentence please?

When I navigate to Screen1 and see that from the 2 labels that 12 > 11 I want the color of the table button with name '1' changes to Red (instead of the Main Color of the custom property).

By the way, I see you're using "Navigate()". You can exploit this function by sending a record as its third parameter to update the context of the screen.

For example the following code:

Navigate( Screen1, //Some navigation esthetics, {variable1:true} )

This is the equivalent of calling "UpdateContext()" on "Screen1". You can use this to modify a specific variable which in turn will alter your component.

https://docs.microsoft.com/en-us/power-platform/power-fx/reference/function-navigate#navigate

Hope this was helpful to you.
Verified answer

RandyHayes 76,299 Super User 2024 Season 1 on at

Like
a
(0)

Report
Copy link

Link copied!
@Anonymous

Yes, this is possible, but you will need to provide another input property to your component for colors or you will need to alter your table property to include the color as well, and then have your table populate in the app based on a formula that will provide the results you want.

Example for altering the table:

Your table property changes to:

Table( {Name: "1", Icon: Icon.Devices, Screen: scr1, Color: Green } )

In the component itself, you need not define all of the records that you are...this would be done in the app where the component is used.

Then apply logic to that table in your app (not entirely clear on your label logic though).

The Property on the component in your app would then be:

Table( {Name: "1", Icon: Icon.Devices, Screen: scr1, Color: If(Value(Label1.Text)> Value(Label2.Text), Red, Green) }, { Name: "2", ...etc..

I hope this is helpful for you.