Forum Discussion

Shubham1105's avatar
Shubham1105
Copper Contributor
Nov 06, 2023

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

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's avatar
      Shubham1105
      Copper Contributor

      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!

Resources