Search code examples
microsoft-teamsadaptive-cards

Search Message extension oAuth card styling


I have requirement to style (change the color of link instead blue) and change the text in auth card in Search message extension. I tried to pass all parameters. But nothing appear to impact. I also tried to generate an Adpative card with text having link. But link doesnt have styling option.

This is code , I am using right now :

return new MessagingExtensionResponse
            {
                ComposeExtension = new MessagingExtensionResult
                {
                    Type = "auth",
                    SuggestedActions = new MessagingExtensionSuggestedAction
                    {
                        Actions = new List<CardAction>
                            {
                                new CardAction
                                {
                                    Type = ActionTypes.OpenUrl,
                                    Value = signInLink,
                                    Title = "Sign in"
                                },
                            },
                    },
                },
            };

Adaptive Card Json Tried:

{
      "type": "TextBlock", 
      "text": "Please [Sign in](https://adaptivecards.io)"
 }

I tried o replace crad action as suggested below, but it didnt work.

`

private async Task GetAuthCard(ITurnContext turnContext, CancellationToken cancellationToken) {

            // Retrieve OAuth Sign in Link
            string signInLink = await GetSignInLinkAsync(turnContext, cancellationToken).ConfigureAwait(false);

            AuthCardModel auth = new();
            auth.AdaptiveCardPath = Path.Combine(".", "Resources", "AuthCardTemplate.json");
            auth.signinLink = signInLink;

            Attachment adaptiveCard = CreateAdaptiveCardActivity(auth.AdaptiveCardPath, auth);

            _logger.LogWarning($"[TeamsBot LogIn adaptive card] -> {JsonConvert.SerializeObject(adaptiveCard)}");
            

            MessagingExtensionAttachment attachment = new MessagingExtensionAttachment
            {
                ContentType = ThumbnailCard.ContentType,
                Content = adaptiveCard.Content,
            };
            
            return new MessagingExtensionResponse
            {
                ComposeExtension = new MessagingExtensionResult
                {
                    Type = "auth",
                    AttachmentLayout = "list",
                    Attachments = new List<MessagingExtensionAttachment> { attachment },
                },
            };
        
        
       
    }

`

AuthCardTemplate.json :

` { "type": "AdaptiveCard", "body": [ { "type": "TextBlock", "text": "__ * * Sign in * * __" } ], "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "version": "1.3" }

`


Solution

  • Teams Does not support Card action button styling in cards. This is by design. Markdown is a simple way to format text that looks great on any device. It doesn’t do anything fancy like change the font size, color, or type — just the essentials.

    Document-https://learn.microsoft.com/en-us/adaptive-cards/authoring-cards/text-features#markdown-commonmark-subset