Photo by Towfiqu barbhuiya on Unsplash

Star rating control in Adaptive Cards

The rating control in Adaptive Cards was on a roadmap. Long time ago. However, no updates were published and still no such control is available oob. Despite that, it is still possible to build a star rating, maybe not the perfect one, but working one for sure.

Possibly the star rating control you are thinking of displays eg. 5 starts in a row and has filled stars from the left side until the one that is being hovered. And also, returns a precise value of the selected star. Like this one:

Well… This is not possible in Adaptive Cards 😉 As a compensation I can propose you the solution I am using, that utilizes buttons. Follow after me, step by step, as always:

Step 1 – design card

First design the card and drag&drop ActionSet element in the place, where you want to create star rating control:

Drag&drop ActionSet element

Next add 5 Action.Submit actions:

Add 5 Action.Submit actions

After you did that, configure them the following way: remove the Titles’ values and instead populate Icon URL properties with a link to your favorite star icon:

Remove Titles and set Icon URLs properties

What is extremely important, because when you send the card to Microsoft Teams, what will be returned is the Id of the clicked element, therefore be sure to populate Id properties of each button. They must be unique!

Set unique IDs

You can later play a little with layout if you need, but basically the general idea is done! Rating control is in place:

Rating control

Step 2 – copy cards JSON and send to Teams

Next and basically the final step is to copy your authored card’s JSON code and paste it inside the “Post adaptive card and wait for a response” action in a cloud flow, together with a logic to handle the selected star and its value:

Post adaptive card and wait for a response action in cloud flow

After you run the flow, you’ll be able to find your card in the selected Channel or conversation:

Rating control in Teams

After you press any star, you’ll notice, that the action in cloud flow is resumed and the Id of the pressed button is returned.

Step 3 – enhance user experience

You can later use the “Update an adaptive card in a chat or channel” action to replace the existing card with your fancy confirmation:

So that user will see the selected rate by their own:

Update Adaptive Card using Update an adaptive card in a chat or channel action

And that’s it! I hope you like it and find it useful.

Tomasz Poszytek

Hi, I am Tomasz. I am expert in the field of process automation and business solutions' building using Power Platform. I am Microsoft MVP and Nintex vTE.

  • B K

    What did you enter for the URL link? Nothing I try seems to work

    July 14, 2023 at 5:32 pm Reply
  • AW

    Thanks for the star rating tutorial!
    I am trying to build an Actionable Message with two individual 5-star-ratings (using the action.toggleVisibility when the user clicks on a star to directly show the rating). That’s working perfectly fine. My problem is how to get the rating result. I wanted to use the visibility states of the stars to get the information, but that’s is not working -> “body”: “{\”R1\”: \”{{R1-full.isVisible}}\”, \”comment\”:\”{{Comment.value}}\”}”,
    The comment field works as usual. Is there a way to get the visibility status of an element? Or is there another way? Have you tried 2 star ratings?

    September 4, 2023 at 3:27 pm Reply
    • Tomasz Poszytek

      Well, you can try to put 10 submit buttons, but then to give them IDs like 1-1, 1-2 etc… and then second control: 2-1, 2-2 etc… So any star is clicked, you know which. However this will allow only a single rating to be clicked. If you want to get data for both controls… Maybe use dropdowns instead?

      September 28, 2023 at 7:26 pm Reply
  • Wasay Noori

    Surprisingly I am having trouble adding an ICON url. Any star icon I use from UXwing doesn’t seem to render.

    February 12, 2024 at 5:53 am Reply

Post a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.