Answered

Keep border color on multiple items until submitted

(0) Share

Report

Posted on by RobHel

Hello Gurus,

In need of assistance - I am using Emojis for Feedback for both customers and agents, I've uploaded Emoji's and placed them as a media file in the edit form and then placed a button around each of them to display corresponding color of the Emoji.

The border color does work on selecting an Emoji however, it doesn't keep the selected one highlighted when clicking on anything else.

What I am after is for both the CustEmoji and AgentEmoji selections to be highlighted until the form is submitted.

Categories:

Building Power Apps

All responses (5)

Answers (2)

Sort by

Verified answer

mdevaney 29,993 Moderator on at

Like
a
(1)

Report
Copy link

Link copied!
@RobHel
#1 Put this code in the "Angry" customer emoji's OnSelect property

Set(clickedCustEmoji, "Angry");

#2 Change the BorderColor of the Angry emoji to this color

Red

#3 Then make the BorderThickness equal to this formula

If(clickedCustEmoji="Angry", 3, 0)

Repeat steps #1-3 for each cust emoji. Then replicate the method for AgentEmoji.

To clear the box when the form is submitted use this code in the OnSuccess property of the form.

Set(clickedCustEmoji, Blank())

---
Please click "Accept as Solution" if my post answered your question so that others may find it more quickly. If you found this post helpful consider giving it a "Thumbs Up."
RobHel 33 on at

Like
a
(0)

Report
Copy link

Link copied!

Thank you, your solution worked for renaming the Emoji's for by CustEmoji and AgentEmoji; both now are highlighted when selected.

I changed from having color border to colored text when selecting - however I still haven't managed to clear the form after submitting it - would you be able to provide further details of how I can achieve this?

Emoji OnSelect = UpdateContext({CustEmojiValue: 1}); UpdateContext({CustEomji: "Angry"})

I tried putting Set(CustEmoji, "Angry") and updating the Form with OnSuccess Set(CustEmoji, Blank()), but it is not resetting it
Verified answer

v-xida-msft Microsoft Employee on at

Like
a
(0)

Report
Copy link

Link copied!
Hi @RobHel ,

How do you list these Emojis Icons in your app? One by One using Image control?

Regarding the needs that you mentioned, I think a Gallery control and a collection could achieve your needs. You could use a Gallery control to list corresponding Emojis Icons for both the CustEmoji and AgentEmoji. Within the Gallery, you need to use image control to display the Emojis. I assume that you could only select only one Emojis option for CustEmoji or AgentEmoji type.

I have made a test on my side, please try the following workaround:

Set the OnStart property of App to following:

ClearCollect( EmojiCollection, {EmojiTarget: "CustEmoji", Option: ""}, {EmojiTarget: "AgentEmoji", Option: ""} )

Set the Items property of the Gallery to following:

EmojiCollection

Add 5 image controls inside the Gallery to display Emojis Icons. Set the BorderThickness property of all 5 image controls to following:

2

'Angry' image:

-> OnSelect property:

Patch(EmojiCollection, ThisItem, {Option: "angry"})

-> BorderColor property:

If(ThisItem.Option = "angry",Color.Red,RGBA(0, 0, 0, 0))

'Sad' image:

-> OnSelect property:

Patch(EmojiCollection, ThisItem, {Option: "sad"})

-> BorderColor property:

If(ThisItem.Option = "sad",Color.Orange,RGBA(0, 0, 0, 0))

'Neutral' image:

-> OnSelect property:

Patch(EmojiCollection, ThisItem, {Option: "neutral"})

-> BorderColor property:

If(ThisItem.Option = "neutral",Color.Coral,RGBA(0, 0, 0, 0))

'Smiling' image:

-> OnSelect property:

Patch(EmojiCollection, ThisItem, {Option: "smiling"})

-> BorderColor property:

If(ThisItem.Option = "smiling",Color.Green,RGBA(0, 0, 0, 0))

'happy' image:

-> OnSelect property:

Patch(EmojiCollection, ThisItem, {Option: "happy"})

-> BorderColor property:

If(ThisItem.Option = "happy",Color.SpringGreen,RGBA(0, 0, 0, 0))

The GIF screenshot as below:

If you want to reference the selected Emoji option from the collection in your Edit form, you could use the following formula to get the selected option directly:

For CustEmoji selected Emoji option:

LookUp(EmojiCollection, EmojiTarget = "CustEmoji").Option

For AgentEmoji selected Emoji option:

LookUp(EmojiCollection, EmojiTarget = "AgentEmoji").Option

If you want to reset the EmojiCollection after you submit your form successfully, please set the OnSuccess property of the Edit form to following:

ClearCollect( // add this formula to reset EmojiTarget collection EmojiCollection, {EmojiTarget: "CustEmoji", Option: ""}, {EmojiTarget: "AgentEmoji", Option: ""} ); Back()

Please try above solution, then check if it could help in your scenario.

Regards,
mdevaney 29,993 Moderator on at

Like
a
(0)

Report
Copy link

Link copied!
@RobHel
Yes, of course I can help with an additional question. Put this code in the OnSuccess property of the Form to clear it after submission.

NewForm(Form1); Set(CustEmoji, Blank());

I don't think its necessary to do all of that coding suggested by @v-xida-msft if your app is already partially-working. It seems like too much effort for very little rewards...

---

Please click "Accept as Solution" if my post answered your question so that others may find it more quickly. If you found this post helpful consider giving it a "Thumbs Up."
v-xida-msft Microsoft Employee on at

Like
a
(0)

Report
Copy link

Link copied!

Hi @RobHel ,

For your original design, you need to add the 5 Emoji icons for both CustEmoji and AgentEmoji, in other words, you need to add 10 image control in your app to display the Emoji icon. It's so complex.

Based on the solution I provided above, you could only need to add 5 image controls inside the Gallery. To be honest, the global variable or context variable would be another choice for your scenario.

Please also consider take a try with the solution I provided, hope it also help in your scenario.

Regards,