Answered

Red Yellow Green Status Buttons

(0) Share

Report

Posted on by Lyondenn

I am looking to make 3 buttons on an Edit Form - one red, one yellow, one green - that depending on which one is chosen, it will choose the corresponding value in a Sharepoint choice column, values of which are only red, yellow, and green.

I can't find anything definitive online. Was hoping you could help me. Happy to provide additional context if needed.

Categories:

Building Power Apps

I have the same question (0)

All responses (9)

Answers (1)

Sort by

StalinPonnusamy Super User 2024 Season 1 on at

Like (0)

Report
Copy link

Link copied!
Hi @Lyondenn

Set the OnSelect property of the Red Button to
UpdateContext({SelectedColor: "Red"}); ClearCollect(ColSPData, Filter(SPList, ColorChoiceColumnName.Value=SelectedColor));

The same goes for other colors as well
UpdateContext({SelectedColor: "Green"}); ClearCollect(ColSPData, Filter(SPList, ColorChoiceColumnName.Value=SelectedColor));

In the above example, I user collection to illustrate the filter data. We don't need the collection If you want to display data in the dropdown or combo box or gallery based on the color selection.
Sort(Filter(SPList, ColorChoiceColumnName.Value=SelectedColor).ColumnToDisplay,ColumnToDisplay)

Example (Items property of dropdown)
Sort(Filter(IssueTracker, Colors.Value=SelectedColor).Title,Title)

Let us know what you are looking after filter so that we can guide you.

Thanks,
Stalin - Learn To Illuminate

Was this reply helpful? Yes No
Verified answer

Gerard Simpson 2,987 Moderator on at

Like (1)

Report
Copy link

Link copied!
Hi @Lyondenn

I see you already have a response above, though when I read this my take was slightly different, so I will go ahead and post.

Apologies if incorrect - my interpretation is that instead of using a drop down to select the colour, you want to use one of three coloured buttons. Selecting the button will choose the correct colour for your RAG choice field. This is then the value that will get saved to your datasource when the form is submitted/saved?

If so, please follow these steps:

Add your 3 buttons and add text to each that matches each colour choice in the backend choice field
For the OnSelect property of all 3 buttons, create a context variable to store the selected colour as follows – UpdateContext({varlRAG:Self.Text})
Add the RAG choice field to your form, go to advanced and unlock it
Go to the ‘DefaultSelectedItems’ property of the RAG combobox control and change it to Table({Value:varlRAG})
If you test your buttons now they should change the value in your choice field.
If all is good, turn the visibility of your RAG choice data card to false, so users can just use the buttons
Note, if you do hide the drop down, for a good UI you want users to know what option they have chosen before they save the entry - so you may want to condition the button colour / fill subject to the button chosen (i.e. it could be white fill for all buttons if nothing selected, but then flip this to say the chosen colour fill and white text to highlight the selection prior to submission).
Lastly, I'm assuming this is a customised form for a SharePoint list (?), so if someone is selecting an item they want to edit, which already has a colour assigned, you want to make sure the respective button will clearly identify the selection when your form opens. To do this, you will set the OnVisible property of the form screen to UpdateContext({varlRAG:SharePointIntegration.Selected.RAG.Value}).

Hope this helps and my understanding is correct, bet let me know if you have any queries - Thanks and Good Luck!

Was this reply helpful? Yes No
Lyondenn 23 on at

Like (1)

Report
Copy link

Link copied!

This is more in line with what I was wanting to do! Thanks for your reply 🙂 I will give this a try and report back with the results.

Was this reply helpful? Yes No
Gerard Simpson 2,987 Moderator on at

Like (1)

Report
Copy link

Link copied!

That's great. Just one last thing, I suggest using the displaymode to change each button appearance I.e. if( varlRAG = Self.Text, displaymode.disabled, displaymode.edit). Then adjust the disabled colour and fill for each button accordingly for the desired effect.

Was this reply helpful? Yes No
Lyondenn 23 on at

Like (1)

Report
Copy link

Link copied!

Update: @AmDev Your solution worked very well, in regards to clicking a button and updating the dropdown, then effectively hiding the dropdown so all the user is looking at is the RAG buttons. The two items I am having difficulty with are the following:

@AmDev wrote:
7. Note, if you do hide the drop down, for a good UI you want users to know what option they have chosen before they save the entry - so you may want to condition the button colour / fill subject to the button chosen (i.e. it could be white fill for all buttons if nothing selected, but then flip this to say the chosen colour fill and white text to highlight the selection prior to submission).
and
@AmDev wrote:
That's great. Just one last thing, I suggest using the displaymode to change each button appearance I.e. if( varlRAG = Self.Text, displaymode.disabled, displaymode.edit). Then adjust the disabled colour and fill for each button accordingly for the desired effect.
Here are what the buttons look like now, in their neutral state:

What I would like is to have the user's selection filled in with the appropriate color, and stay that way on offclick. In my tests so far, it doesn't remain filled after the user clicks the button, as it reverts back to as you see above.

I've been messing around with the Disabled Color and the Fill Color, but I'm not as well versed in controlling the way things look as I thought.

Was this reply helpful? Yes No
Gerard Simpson 2,987 Moderator on at

Like (0)

Report
Copy link

Link copied!

Hi, can you check to make sure the button text exactly matches the text in each respective choice in the backend RAG column. Also I have found in the past when you modify the data with a form, you sometimes need to delete and re-add the data card as well as the refresh of the dataset for any changes in the backend to surface in the form.

If that's all good, make sure this formula is in the displaymode property of each button - if( varlRAG = Self.Text, displaymode.disabled, displaymode.edit)

Last thing to check is that the 'disabledcolor' and 'disabledfill' of the buttons are changed accordingly to match the desired appearance when selected (I.e when disabled by the above formula..)

Hope this makes sense, but let me know if you have any issues. Good luck!

Was this reply helpful? Yes No
Gerard Simpson 2,987 Moderator on at

Like (0)

Report
Copy link

Link copied!

Hi @Lyondenn - just checking if you had any luck in getting this one over the line or if you need any further assistance?

Was this reply helpful? Yes No
Lyondenn 23 on at

Like (1)

Report
Copy link

Link copied!

@AmDev Thanks for checking in. Everything has worked so far! There are a few design tweaks I need to make as requested by stakeholders but everything you've suggested has worked thus far! Thanks again for your assistance 🙂

Was this reply helpful? Yes No
Gerard Simpson 2,987 Moderator on at

Like (0)

Report
Copy link

Link copied!

@Lyondenn - that's great, sounds like you're well on your way. Good luck with the rest of your build! 💪

Was this reply helpful? Yes No