Issue with Displaying Timer in Adaptive Cards Using Data URI in Microsoft Teams Bot

Copper Contributor

I'm facing an issue while trying to display a timer in adaptive cards within a Microsoft Teams bot. My goal is to show a countdown timer within the card, but I've encountered some challenges due to the limitations of adaptive cards in Microsoft Teams.

To address this, I've attempted to display a timer using a GIF image. I've encountered two main problems, and I'd appreciate some guidance on how to resolve them 

Issue 1: Image URL Behavior Initially, when I tried to display a countdown timer using an image URL within adaptive cards, I observed a peculiar behavior. The timer GIF image displayed correctly in the first card. However, when the timer reached zero and the next card was displayed, the image did not reset. Instead, it retained its state from the previous card, showing the timer at zero, even if the countdown had started anew. This is problematic because I want the timer to reset to its initial state in each new card.

I understand your concern. Let's clarify the issue with the image URL and the problem with the initial render for all cards:

Issue 1: Image URL Behavior Initially, when I tried to display a countdown timer using an image URL within adaptive cards, I observed a peculiar behavior. The timer GIF image displayed correctly in the first card. However, when the timer reached zero and the next card was displayed, the image did not reset. Instead, it retained its state from the previous card, showing the timer at zero, even if the countdown had started anew. This is problematic because I want the timer to reset to its initial state in each new card.

Issue 2: Initial Broken Image To address the issue mentioned above, I decided to use data URIs to dynamically update the timer in adaptive cards. This approach allowed me to achieve the desired behavior of resetting the timer in each new card. However, I encountered a new problem. During the initial render of the card (the first card where the timer appears), the GIF image appears broken or distorted. but the initial rendering is problematic. This issue affects all cards, not just the first one.

Shubham1105_0-1699269885873.png

 




3 Replies
@Shubham1105-Thanks for reporting your issue.
We will check this at our end and will get back to you.

@Sayali-MSFTThank you for your prompt response and for looking into this issue. I appreciate your assistance, and I'll eagerly await your findings. Please feel free to reach out if you need any additional information from my end. Looking forward to your feedback!

@Shubham1105 As per the documentationAnimated GIF isn't supported. Also, if a card includes an image URL that is redirected before the final image, the redirect in image URL is not supported. This occurs for images shared on the public cloud.

Update: Animated GIF isn't supported and it is already documented:
Reference doc: Types of cards - Teams | Microsoft Learn