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
October Events

Mark Your Calendars

So many events happening this month - don't miss out!

 WHAT’S NEXT AT MICROSOFT IGNITE 2022

WHAT’S NEXT AT MICROSOFT IGNITE 2022

Explore the latest innovations, learn from product experts and partners, level up your skillset, and create connections from around the world.

Register for a Free Workshop.png

Register for a Free Workshop

Learn to digitize and optimize business processes and connect all your applications to share data in real time.

Users online (4,022)