Hello guys, welcome to the 12th session of using Microsoft Word framework Louise and cognitive services tutorials for beginners. In this session we will learn how to create hero card and thumbnail card in both framework. Both framework supports rich cards using which we can attach a various type of media within the message. Now it supports hero card, thumbnail card, audio card, video card, animation card, as well as the recipient signing card. In this session, we will see only hero and thumbnail card. Both cards can contain image title, subtitles, descriptive text and buttons.

Different between those two card is that eurocom contains an image of a larger size, where in thumbnail as a name it contains only thumbnail size of image. In this example, I'm going to retry text from user and display card that contains an email Which tags that user writes. for generating an image from the tags. I'm using dummy image.com. Let us start it. First of all, I'm going to create a new class under dialogue folder named hero car demo.

Unnecessary namespaces marked as serializable inherited from Ida log of type object. Implement status sync method. Here, I'm going to wait till I get response from message received a sync method that is generate this method. Make it a sync. Here we will get I have a table of iMessage activity, change it. Now create a message from context using make message method an opt in activity from the result.

Make it a sync reading message we can add various kinds of attachments to write a message dot attachments dot add. This method will take attachment as parameters. So right get car in past activity dot txt, which contains tax that user rights input. After creating a message, use post a sync method to send this message to or both create this method and change the text to the title and pasting variable containing links to dummy image APA and Microsoft docs. Note that here I have used string interpolation and pass a string that is a type so it will create an image with specified text that is click on this. Here is an image that equals 100.

Next tinge text to Hello. Here is an image that contains Hello. Create a new hero card within the exact title with a title that user type add value for Subtitle text that is subtitle for a car and descriptive text index property. Image property contains a list of card image that is add a new item to that list and pass the URL of the image. Now, add buttons create a list of card action create new tech action type for this button. Here we want to add links so we need to select Open URL and then pass the text that you want to display on the button.

Open docs. Value parameter contains the URL that should be opened. Fast Doc's URL. We can add multiple images as well as buttons in hero and thumbnail card. Change title to view image and pass image URL. At the end we need to return hero card as an attachment.

Here we have created hero card. Now we need to update it in message controller. Create delegate, which will create a new instance of hero card demo method. That is save file and run it and send Hello. Here we got a card that contains an image with text Hello, and hello in the title, as well as subtitle and text as we have said it also contains two button Let us click on doc button, it will open documentation. Let's click on View Page.

Here is an image. In this example, we just send a single card however, we can also add multiple cards in the attachment of the message. For these, copy, get cut line and paste it two times. Change parameter to one more image. And last image. Let's run it and say hello.

Can we got three cards. You can see that by default, those cards are displayed as list means one by one, which took more area and user need to scroll up down. Instead of these. We can use arrows layout, which will display all the carousel meaning horizontal. For this we need to set attachment layout of a message to carousel CV and run. Sent Hello.

Here you can see that difference in layer. Note that all channels do not support canceled mail. In this case it will display in list however, we have created carousels. As you know, Hero card and thumbnail card contains are similar. So they have also same properties. We just need to change the class name only to make thumbnail card.

Saving intent Hello You can see that image size is very small. Otherwise it is similar to hero card contains title, subtitle, text and buttons. Let us see what we have learned in this session. In this session, we saw differences between hero card and company card. Let me create created a message that returns attachments and create a method that originally produces the car. Here we can add title, subtitle, text and multiple images and multiple buttons.

Thanks for watching this video. If you have any doubts, feel free to contact me. Have a nice day.