cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
sajarac
Super User
Super User

Adaptive Card like Tutorial Style

Hello.

I was wondering if is possible to build an Adaptive card to show several pictures like a tutorial style. Something like this:

 

sajarac_0-1651577771387.png  

sajarac_1-1651577788616.png

 

Thanks in advance for any help

 

10 REPLIES 10
akandis
Responsive Resident
Responsive Resident

Yes you can. You can manage the Visiblity of the image and buttons based on click event then with the IDs you will be able to know which image and text have to present. Use the Input.Toggle.

sajarac
Super User
Super User

That is great. Would you mind to provide a sample? I am very new to Adaptive Cards

akandis
Responsive Resident
Responsive Resident

Sure here you can find the Sample. As you can see I have a Container that contains 1 image and 1 text (1 slide) and I manage the visiblity of all components at the level of Container and then with the ToggleVisiblity -> targetElements I manage when present each container.

 

{
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "type": "AdaptiveCard",
    "version": "1.4",
    "body": [
        {
            "type": "TextBlock",
            "text": "Here are some cool photos",
            "size": "Large",
            "wrap": true
        },
        {
            "type": "TextBlock",
            "text": "Sorry some of them are repeats",
            "size": "Medium",
            "weight": "Lighter",
            "wrap": true
        },
        {
            "type": "Container",
            "items": [
                {
                    "type": "ImageSet",
                    "images": [
                        {
                            "type": "Image",
                            "url": "${value[0].contentUrl}",
                            "altText": "${value[0].name}",
                            "size": "Medium",
                            "id": "img1"
                        }
                    ]
                },
                {
                    "type": "TextBlock",
                    "text": "Some text",
                    "wrap": true
                },
                {
                    "type": "ActionSet",
                    "actions": [
                        {
                            "type": "Action.ToggleVisibility",
                            "title": "Next image",
                            "targetElements": [
                                {
                                    "elementId": "container2",
                                    "isVisible": true
                                },
                                {
                                    "elementId": "container1",
                                    "isVisible": false
                                }
                            ]
                        }
                    ]
                }
            ],
            "id": "container1",
            "isVisible": false
        },
        {
            "type": "Container",
            "items": [
                {
                    "type": "ImageSet",
                    "images": [
                        {
                            "type": "Image",
                            "url": "${value[0].contentUrl}",
                            "altText": "${value[0].name}",
                            "size": "Medium",
                            "id": "img2"
                        }
                    ]
                },
                {
                    "type": "TextBlock",
                    "text": "Another some text",
                    "wrap": true
                },
                {
                    "type": "ActionSet",
                    "actions": [
                        {
                            "type": "Action.ToggleVisibility",
                            "title": "Previous image",
                            "targetElements": [
                                {
                                    "elementId": "container2",
                                    "isVisible": false
                                },
                                {
                                    "elementId": "container1",
                                    "isVisible": true
                                }
                            ]
                        }
                    ]
                }
            ],
            "id": "container2"
        }
    ]
}

 

Please accept as a solution if was helpful.

sajarac
Super User
Super User

OK,

So you mean that if I have 10 pictures I need to repeat this structure showing next and hidden the rest?

like this:

For Container3

"elementId": "container3",

"isVisible": true

},

{

"elementId": "container2",

"isVisible": false

 

"elementId": "container1",

"isVisible": false

sajarac_0-1651845790469.png

 

akandis
Responsive Resident
Responsive Resident

Exactly you will have to repeat for each container.

sajarac
Super User
Super User

I think that I got it.

I will keep you posted. 

Thank you very much.

sajarac
Super User
Super User

Hello @akandis , I hope you had a good weekend.

I was playing yesterday with this and I guess I know how to navigate between pictures now.

 

Do you know how can I see the picture once I click on it? The picture size is too small 

 

sajarac_0-1652096096127.png

 

 

akandis
Responsive Resident
Responsive Resident

Good to see that! For the image size you can use the following property

 

 

"size": "Large"

 

 

Also it could be interesting to see how you generate these images. 

 

sajarac
Super User
Super User

Thank you very much for your prompt response.

I guess I have that property already.

Sorry to be a pain. This is hard to me

 

sajarac_0-1652101122733.png

 

akandis
Responsive Resident
Responsive Resident

Okay, if this is not enough please use the following property and define the size

 

"width" :"100px"

 

Helpful resources

Announcements
Microsoft 365 Conference – December 6-8, 2022

Microsoft 365 Conference – December 6-8, 2022

Join us in Las Vegas to experience community, incredible learning opportunities, and connections that will help grow skills, know-how, and more.

Users online (5,454)