cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
kywest
Level: Powered On

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
SaWu
Level 8

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

4 REPLIES 4
SaWu
Level 8

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

Community Support Team
Community Support Team

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.
kywest
Level: Powered On

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.
kywest
Level: Powered On

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!

Helpful resources

Announcements
Better Together’ Contest Finalists Announced!

'Better Together’ Contest Finalists Announced!

Congrats to the finalists of our ‘Better Together’-themed T-shirt design contest! Click for the top entries.

thirdimage

Power Apps Community User Group Member Badge

Fill out a quick form to claim your user group badge now!

sixthImage

Join THE global Microsoft Power Platform event series

Attend for two days of expert-led learning and innovation on topics like AI and Analytics, powered by Dynamic Communities

Power Platform 2019 release wave 2 plan

Power Platform 2019 release wave 2 plan

Features releasing from October 2019 through March 2020

thirdimage

Microsoft Business Applications Virtual Launch

Join us for the Microsoft Business Applications Virtual Launch Event on Thursday, April 2, 2020, at 8:00 AM PST.

thirdimage

Community Summit North America

Innovate, Collaborate, Grow - The top training and networking event across the globe for Microsoft Business Applications

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