Red Yellow Green Status Buttons

[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.

[StalinPonnusamy]

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

[AmDev · Accepted solution]

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:

1. Add your 3 buttons and add text to each that matches each colour choice in the backend choice field
2. For the OnSelect property of all 3 buttons, create a context variable to store the selected colour as follows – UpdateContext({varlRAG:Self.Text})
3. Add the RAG choice field to your form, go to advanced and unlock it
4. Go to the ‘DefaultSelectedItems’ property of the RAG combobox control and change it to Table({Value:varlRAG})
5. If you test your buttons now they should change the value in your choice field.
6. If all is good, turn the visibility of your RAG choice data card to false, so users can just use the buttons
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).

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!

[Lyondenn]

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.

[AmDev]

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.

[Lyondenn]

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. 

[AmDev]

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!

[AmDev]

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

[Lyondenn]

@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 🙂

[AmDev]

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