1. Home
  2. Forum
  3. Xamarin.Forms
  4. CardHero in the sfchat

CardHero in the sfchat

Hi,

I receive cardheros https://docs.microsoft.com/fr-fr/microsoftteams/platform/task-modules-and-cards/cards/cards-reference#hero-card from my api.

How can I show them in the sfchat?

Thanks,

5 Replies
PK Pradeep Kumar Balakrishnan Syncfusion Team January 4, 2021 02:36 PM UTC

Hi Alexis, 
 
Thank you contacting Syncfusion support. 
 
We have prepared a sample for your requirement “How to add Hero add to sfchat control”  in the attached flight ticket booking sample, we added a hero card collection to choose the city to travel. Please refer the following code snippet and sample for more reference. 
 
 
Code snippet: 
 
private void AddCardMessage(Activity activity) 
{ 
    CardMessage cardMessage = new CardMessage(); 
    cardMessage.Text = activity.Text; 
    cardMessage.Author = this.ViewModel.Bot; 
    ObservableCollection<Card> cards = new ObservableCollection<Card>(); 
    System.Collections.Generic.IList<Microsoft.Bot.Schema.Attachment> attachments = activity.Attachments as System.Collections.Generic.IList<Microsoft.Bot.Schema.Attachment>; 
    HeroCard heroCard = new HeroCard(); 
 
    foreach (Attachment attachment in attachments) 
    { 
        var type = attachment.ContentType; 
        if (type == "application/vnd.microsoft.card.hero") 
        { 
            var temp = JsonConvert.SerializeObject(attachment.Content); 
            heroCard = JsonConvert.DeserializeObject<HeroCard>(temp); 
        } 
 
        WebClient Client = new WebClient(); 
        var byteArray = Client.DownloadData(heroCard.Images[0].Url.ToString()); 
        Card card = new Card() 
        { 
            Title = heroCard.Title.ToString(), 
            Description = heroCard.Text.ToString(), 
            Image = ImageSource.FromStream(() => new MemoryStream(byteArray)) 
        }; 
 
        card.Buttons.Add(new CardButton() { Value = heroCard.Buttons[0].Value.ToString(), Title = heroCard.Buttons[0].Title }); 
        cards.Add(card); 
    } 
 
    cardMessage.Cards = cards; 
    this.ViewModel.Messages?.Add(cardMessage); 
} 
 
 
Please Let us know if you need any further assistance on this requirement. 
 
Regards, 
Pradeep Kumar B 
 


AL Alexis January 4, 2021 03:24 PM UTC

Thank you.

But I connected the chat to the azure bot. 

I receive some text and url inside such as:

 "answers": [
        {
            "questions": [
                "SCHOOLS"
            ],
            "answer": "Helps your students\n[FIND OUT MORE](https://xxxxx.fr/schools/)\n\n![Img 823](https://www.xxxx.io/uploads/2020/05/1.jpg)\n\n# What is xxxx?\n\xxxis an app.",
            "score": 100.0,
            "id": 64,
            "source":
....

How can I show the text with url inside clickable and images shown? Do I need to parse the answer?

PK Pradeep Kumar Balakrishnan Syncfusion Team January 5, 2021 08:29 AM UTC

Hi Alexis, 
 
Thank you for the update. 
 
Query : How can I show the text with url inside clickable and images shown? Do I need to parse the answer? 
 
Yes, we need to parse the value obtained from azure and create a sfchat Card message based on your requirements. Please refer to the online user guide documentation for more information on the sfchat card message. 
 
 
Please Let us know if you need any further assistance on this requirement.  
 
Regards, 
Pradeep Kumar B 


AL Alexis January 5, 2021 01:53 PM UTC

Do you provide ways to parse the message or I need to create specific code?

Thanks,

KK Karthikraja Kalaimani Syncfusion Team January 6, 2021 10:42 AM UTC

Hi Alexis,
 
Thank you for your update.
 
Send activity with hero card attachment from Azure Bot to application and refer to the previously given sample that is helpful for hero card retrieval from activity.
 
Regards,
Karthik Raja


Loader.
Up arrow icon