Star rating control in Adaptive Cards

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:

Star rating example

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:

Set buttons’ 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 ID for each button

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

Adaptive Card with star 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:

Send Adaptive Card to Teams from cloud flow

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

Adaptive Card with 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:

Use Update an adaptive card in a chat or channel action

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

Enchanced response from Adaptive Card

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