cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Highlighted
Helper I
Helper I

Creating a visualization to record user feedback

I have a power app that is connected to a SharePoint list. I want some visualization with icons or a gradient scale where the user will provide a rating (1-5 for example). Then I need to capture their selection in my SharePoint list. For instance, I could place 3 icons on the screen with a sad, neutral, and smiley face. If the user selects the smiley face, I need a data card to automatically record "5" and if they select the sad face, it would record "1". Ideally the user would not see the data card. How can I code the data card to change the value based on the which icon the user selects? Is there a better way to design the power app screen? At the end of the day, I just want to ask the user for a rating and have a comment field. I am not sure what is the best visualization to use but I am looking for something simple and intuitive.
1 ACCEPTED SOLUTION

Accepted Solutions
Highlighted
Impactful Individual
Impactful Individual

Re: Creating a visualization to record user feedback

One suggestion for your 3 smiley thing:

  1. In your Edit Form add your "rating" field to Fields
  2. In your Gallery Screen, (or from wherever you use Navigate to go to your Edit Screen/Form) change OnSelect Event of the navigation button to something like
    Select(Parent);
    Navigate(EditScreen1, ScreenTransition.None, {selectedItem: Gallery1.Selected})
  3. In the properties of the Screen holding your Edit Form, add the following to OnVisible
    UpdateContext({rating: If(!IsBlank(selectedItem.rating),selectedItem.rating,3)})
  4. In your Edit Form, find the Data Card for your rating field
    1. Unlock this Data Card in the Advanced tab
    2. Change Default of the Data Card to
      rating
    3. From the Icons add Emoji - Frown, Emoji - Neutral, Emoji - Smile
    4. For the Frown Icon, change OnSelect to
      UpdateContext({rating: 1})
      and Color to
      If(rating=1, RGBA(255, 0, 0, 1), RGBA(0,0,0,1))
    5. For the Neutral Icon, change OnSelect to
      UpdateContext({rating: 3})
      and Color to
      If(rating=3, RGBA(255, 255, 0, 1), RGBA(0,0,0,1))
    6. For the Smile Icon, change OnSelect to
      UpdateContext({rating: 5})
      and Color to
      If(rating=5, RGBA(0, 255, 0, 1), RGBA(0,0,0,1))
    7. Intermediate result
      image.pngimage.pngimage.png
    8. Find DataCardValue (the Text Input element) of the rating DataCard, and set Visible to making the default text field invisble, it's still there though, so no need to worry about SubmitForm etc.
      false
      image.png

View solution in original post

5 REPLIES 5
Highlighted
Impactful Individual
Impactful Individual

Re: Creating a visualization to record user feedback

One suggestion for your 3 smiley thing:

  1. In your Edit Form add your "rating" field to Fields
  2. In your Gallery Screen, (or from wherever you use Navigate to go to your Edit Screen/Form) change OnSelect Event of the navigation button to something like
    Select(Parent);
    Navigate(EditScreen1, ScreenTransition.None, {selectedItem: Gallery1.Selected})
  3. In the properties of the Screen holding your Edit Form, add the following to OnVisible
    UpdateContext({rating: If(!IsBlank(selectedItem.rating),selectedItem.rating,3)})
  4. In your Edit Form, find the Data Card for your rating field
    1. Unlock this Data Card in the Advanced tab
    2. Change Default of the Data Card to
      rating
    3. From the Icons add Emoji - Frown, Emoji - Neutral, Emoji - Smile
    4. For the Frown Icon, change OnSelect to
      UpdateContext({rating: 1})
      and Color to
      If(rating=1, RGBA(255, 0, 0, 1), RGBA(0,0,0,1))
    5. For the Neutral Icon, change OnSelect to
      UpdateContext({rating: 3})
      and Color to
      If(rating=3, RGBA(255, 255, 0, 1), RGBA(0,0,0,1))
    6. For the Smile Icon, change OnSelect to
      UpdateContext({rating: 5})
      and Color to
      If(rating=5, RGBA(0, 255, 0, 1), RGBA(0,0,0,1))
    7. Intermediate result
      image.pngimage.pngimage.png
    8. Find DataCardValue (the Text Input element) of the rating DataCard, and set Visible to making the default text field invisble, it's still there though, so no need to worry about SubmitForm etc.
      false
      image.png

View solution in original post

Highlighted
Community Support
Community Support

Re: Creating a visualization to record user feedback

Hi @kywest,

Do you want to use a visualization icon to record the rating level within your SP list?

Based on the needs that you mentioned, I have made a test on my side, please take a try with the following workaround:2.JPG

 

3.JPG

 

4.JPG

 

5.JPG

Within the Edit screen, set the OnVisible property of the screen to following:

UpdateContext({RatingValue: Blank()});
UpdateContext({Emoji: Blank()})

Unlock the Rating Data card, remove the Original TextInput box from the Data card, then add three Emoji icons -- Sad, Neutral and Smile. Set the OnSelect property of the Sad icon to following:

UpdateContext({RatingValue: 1});
UpdateContext({Emoji: "Sad"})

Set the Color property of the Sad icon to following:

If(Emoji= "Sad",RGBA( 255, 0, 0, 1 ), RGBA(0, 18, 107, 1))

Set the OnSelect property of the Neutral icon to following:

UpdateContext({RatingValue: 3});
UpdateContext({Emoji: "Neutral"})

Set the Color property of the Neutral icon to following:

If(Emoji= "Neutral",RGBA( 255, 165, 0, 1 ),RGBA(0, 18, 107, 1))

Set the OnSelect property of the Smile icon to following:

UpdateContext({RatingValue: 5});
UpdateContext({Emoji: "Smile"})

Set the Color property of the Smile icon to following:

If(Emoji= "Smile",RGBA( 154, 205, 50, 1 ),RGBA(0, 18, 107, 1))

Set the Update property of the Rating Data card to following:

RatingValue

Note: The Rating column in my SP list is a Number type column.

Please check the attached GIF screenshot for more details:

 

In addition, I think the Rating control could also achieve your needs. You could consider add a Rating control within your Rating Data card as below:6.JPG

Set the Update property of the Rating Data card to following:

Rating1.Value   /* <- Rating1 represents the Rating control within the Rating Data card */

 

Best regards,

Kris

Community Support Team _ Kris Dai
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.
Highlighted
Helper I
Helper I

Re: Creating a visualization to record user feedback

Thanks so much! I will give this a try, but I think this is exactly what I need.
Highlighted
Helper I
Helper I

Re: Creating a visualization to record user feedback

Thank you! This will work. I am not sure whether I want the rating visible or if I want the icon to populate the SP rating, but either way this is a great help!
Highlighted
Helper I
Helper I

Re: Creating a visualization to record user feedback

Hi,

 

I followed the instructions and it works! 🙂 However, when I am setting the Update to RatingValue, it gives me error. And it doesn't show in the number rating in the SP. Do you have an idea how to solve this? Thank you! 🙂

 

Regards,

May

Helpful resources

Announcements
Community Conference

Power Platform Community Conference

Check out the on demand sessions that are available now!

Power Platform ISV Studio

Power Platform ISV Studio

ISV Studio is designed to become the go-to Power Platform destination for ISV’s to monitor & manage published applications.

secondImage

Power Platform 2020 release wave 2 plan

Features releasing from October 2020 through March 2021

Tech Marathon

Maratón de Soluciones de Negocio Microsoft

Una semana de contenido con +100 sesiones educativas, consultorios, +10 workshops Premium, Hackaton, EXPO, Networking Hall y mucho más!

Top Solution Authors
Top Kudoed Authors
Users online (4,308)