Showing and hiding content in Adaptive Cards

Published Feb 09 2022 03:31 AM 2,912 Views
New Contributor

In Adaptive Cards there are multiple ways to show and hide content depending on other content or conditions, or even user interaction. But despite that most of them is available since the version 1.2 (so quite early) it requires a bit of knowledge how to actually implement them.

 

There are 3 major ways for showing and hiding content in Adaptive Cards:

  1. Action.ShowCard
  2. Action.ToggleVisibility
  3. Condition defined under "Only show when" property

Let's go now through each of them.

 

Action.ShowCard

To use it first you need to add "ActionSet" element to the designer canvas and then select Action.ShowCard from the list of available options:

 

image

 

Once that is done, define button's properties inside "Element properties" window, such as its title and id.

 

Hint! To display the other card, that will be shown after clicking on the added button, double click it! It will trigger the hidden card to appear, so you can easily author its contents.

 

Next double-click the button, to display the hidden card and author its contents:

 

image-1

 

Next, switch to "Preview mode" to see how the card is being shown and hidden after clicking the button:

 

image-2-1536x336

 

Important! If you add "Action.Submit" to the hidden card it will send data from all fields present from that card and "up" - so from all parents of that hidden card. The "Action.Submit" button on a top-most card will only send data from that top card.

 

E89C8BF5-4397-4694-944C-A7FBA7D86288

 

Data from cards is always submitted from parent to child cards.

 

Action.ToggleVisibility

To use it first you need to add "ActionSet" element to the designer canvas and then select Action.ToggleVisibility from the list of available options:

 

image-3

 

 

Next, the same as with ShowCard scenario, define properties of the added button.

 

Important! Unlike with ShowCard, the ToggleVisibility requires you to do some work directly within the generated JSON payload of the card. There is no UI to configure it any other way.

 

Now add elements to the card that you want to show and hide after clicking the button. Then define their properties:

 

  1. Id - it is absolutely required to define unique ids of the added elements. Ids are used to target elements and toggle their visibility.
  2. Initially visible - define whether elements should be visible as the card is rendered, or hidden. Toggle will then either show them, or hide them. When you unclick the checkbox, element will be overlayed with a greyed pattern.

 

image-4-1536x397

 

 

Now navigate to JSON payload and find ToggleVisibility button's definition. Add there the following code:

"targetElements": [ "colon delimited list of elements' Ids to toggle" ]

 

image-5-1536x701

 

 

Important! The only "downside" of that approach is in case you add an always visible submit button, then it will always send data from all fields even when they are hidden.

 

Last step is to test it. Switch to "Preview" mode and examine behavior of your card:

 

3F6CAEA8-5B83-47D1-A35D-98704C2C206C

 

Only show when

This approach uses "Adaptive Cards Templating Language". To be able to use it, first you need to define Data that will be bind with the card. And once you have the data, then you are able to create a condition that determines when an element should be visible:

 

image-6-1536x478

 

You can use different types of comparisons, to both integer, dates, boolean or string data types.

 

Important! Unlike "Toggle", showing and hiding elements based on conditions is actually happening when a card is being rendered. As of today, Data that card is using is only static, so it cannot be changed after the card is displayed. This means, that if a field is having a condition that prevents it from being displayed, even when it has a default value set, its value will not be submitted as long as the field is not visible.

 

Finally, enter "Preview" mode to see how your card behaves:

 

27642CAD-D34E-4EA8-9D10-AE4D0C440503

 

And that's it! Hope you will find this tutorial useful. If you have any comments, write them down below. Thanks!

%3CLINGO-SUB%20id%3D%22%5C%26quot%3Blingo-sub-3142385%5C%26quot%3B%22%20slang%3D%22%5C%26quot%3Ben-US%5C%26quot%3B%22%3EShowing%20and%20hiding%20content%20in%20Adaptive%20Cards%26lt%3B%5C%2Flingo-sub%26gt%3B%3CLINGO-BODY%20id%3D%22%5C%26quot%3Blingo-body-3142385%5C%26quot%3B%22%20slang%3D%22%5C%26quot%3Ben-US%5C%26quot%3B%22%3E%3CP%3E%5Cx3C!--%20wp%3Aparagraph%20--%5C%26gt%3B%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FP%3E%3CP%3EIn%20Adaptive%20Cards%20there%20are%20multiple%20ways%20to%20show%20and%20hide%20content%20depending%20on%20other%20content%20or%20conditions%2C%20or%20even%20user%20interaction.%20But%20despite%20that%20most%20of%20them%20is%20available%20since%20the%20version%201.2%20(so%20quite%20early)%20it%20requires%20a%20bit%20of%20knowledge%20how%20to%20actually%20implement%20them.%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FP%3E%3CP%3E%26nbsp%3B%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FP%3E%3CP%3E%3CSPAN%20style%3D%22%5C%26quot%3Bfont-family%3A%22%20inherit%3D%22%22%3EThere%20are%203%20major%20ways%20for%20showing%20and%20hiding%20content%20in%20Adaptive%20Cards%3A%26lt%3B%5C%2FSPAN%26gt%3B%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%5Cx3C!--%20%2Fwp%3Aparagraph%20--%5C%26gt%3B%20%5Cx3C!--%20wp%3Alist%20%7B%5C%22ordered%5C%22%3Atrue%7D%20--%5C%26gt%3B%26lt%3B%5C%2FP%26gt%3B%5Cn%3COL%3E%5Cn%3CLI%3EAction.ShowCard%26lt%3B%5C%2FLI%26gt%3B%5Cn%3C%2FLI%3E%3CLI%3EAction.ToggleVisibility%26lt%3B%5C%2FLI%26gt%3B%5Cn%3C%2FLI%3E%3CLI%3ECondition%20defined%20under%20%22Only%20show%20when%22%20property%26lt%3B%5C%2FLI%26gt%3B%5Cn%26lt%3B%5C%2FOL%26gt%3B%5Cn%3CP%3E%5Cx3C!--%20%2Fwp%3Alist%20--%5C%26gt%3B%20%5Cx3C!--%20wp%3Aparagraph%20--%5C%26gt%3B%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FP%3E%3CP%3ELet's%20go%20now%20through%20each%20of%20them.%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FP%3E%3CP%3E%26nbsp%3B%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FP%3E%3CP%3E%5Cx3C!--%20%2Fwp%3Aparagraph%20--%5C%26gt%3B%20%5Cx3C!--%20wp%3Aheading%20--%5C%26gt%3B%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FP%3E%3CH2%20id%3D%22%5C%26quot%3Baction-showcard%5C%26quot%3B%22%20id%3D%22%5C%26quot%3Btoc-hId-362297780%5C%26quot%3B%22%20id%3D%22toc-hId-362298744%22%20id%3D%22toc-hId-362298744%22%20id%3D%22toc-hId-362298744%22%3EAction.ShowCard%26lt%3B%5C%2FH2%26gt%3B%5Cn%3CP%3E%5Cx3C!--%20%2Fwp%3Aheading%20--%5C%26gt%3B%20%5Cx3C!--%20wp%3Aparagraph%20--%5C%26gt%3B%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FP%3E%3CP%3ETo%20use%20it%20first%20you%20need%20to%20add%20%22ActionSet%22%20element%20to%20the%20designer%20canvas%20and%20then%20select%3CCODE%3EAction.ShowCard%26lt%3B%5C%2FCODE%26gt%3Bfrom%20the%20list%20of%20available%20options%3A%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FCODE%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22%5C%26quot%3Blia-inline-image-display-wrapper%22%20lia-image-align-center%3D%22%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Fgxcuf89792%2F%5C%26quot%3Bhttps%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F346660iDA8E814A2E4B6004%2Fimage-size%2Flarge%3Fv%3Dv2%26amp%3Bpx%3D999%5C%26quot%3B%22%20role%3D%22%5C%26quot%3Bbutton%5C%26quot%3B%22%20title%3D%22image%22%20alt%3D%22%5C%26quot%3Bimage%5C%26quot%3B%22%20%2F%3E%26lt%3B%5C%2Fspan%26gt%3B%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FP%3E%3CP%3EOnce%20that%20is%20done%2C%20define%20button's%20properties%20inside%20%22Element%20properties%22%20window%2C%20such%20as%20its%20title%20and%20id.%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FP%3E%3CP%3E%26nbsp%3B%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FP%3E%3CP%3E%5Cx3C!--%20%2Fwp%3Aparagraph%20--%5C%26gt%3B%20%5Cx3C!--%20wp%3Aparagraph%20%7B%5C%22backgroundColor%5C%22%3A%5C%22vivid-green-cyan%5C%22%7D%20--%5C%26gt%3B%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FP%3E%3CP%20class%3D%22%5C%26quot%3Bhas-vivid-green-cyan-background-color%22%20has-background%3D%22%22%3E%3CFONT%20color%3D%22%5C%26quot%3B%23007A4B%5C%26quot%3B%22%3E%3CSTRONG%3EHint!%26lt%3B%5C%2FSTRONG%26gt%3B%20To%20display%20the%20other%20card%2C%20that%20will%20be%20shown%20after%20clicking%20on%20the%20added%20button%2C%20double%20click%20it!%20It%20will%20trigger%20the%20hidden%20card%20to%20appear%2C%20so%20you%20can%20easily%20author%20its%20contents.%26lt%3B%5C%2FFONT%26gt%3B%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FSTRONG%3E%3C%2FFONT%3E%3C%2FP%3E%3CP%20class%3D%22%5C%26quot%3Bhas-vivid-green-cyan-background-color%22%20has-background%3D%22%22%3E%26nbsp%3B%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FP%3E%3CP%3E%5Cx3C!--%20%2Fwp%3Aparagraph%20--%5C%26gt%3B%20%5Cx3C!--%20wp%3Aparagraph%20--%5C%26gt%3B%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FP%3E%3CP%3ENext%20double-click%20the%20button%2C%20to%20display%20the%20hidden%20card%20and%20author%20its%20contents%3A%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FP%3E%3CP%3E%26nbsp%3B%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FP%3E%3CP%3E%3CSPAN%20style%3D%22%5C%26quot%3Bfont-family%3A%22%20inherit%3D%22%22%3E%3CSPAN%20class%3D%22%5C%26quot%3Blia-inline-image-display-wrapper%22%20lia-image-align-center%3D%22%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Fgxcuf89792%2F%5C%26quot%3Bhttps%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F346662iFC3D70A605460034%2Fimage-size%2Flarge%3Fv%3Dv2%26amp%3Bpx%3D999%5C%26quot%3B%22%20role%3D%22%5C%26quot%3Bbutton%5C%26quot%3B%22%20title%3D%22image-1%22%20alt%3D%22%5C%26quot%3Bimage-1%5C%26quot%3B%22%20%2F%3E%26lt%3B%5C%2Fspan%26gt%3B%26lt%3B%5C%2FSPAN%26gt%3B%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FSPAN%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FP%3E%3CP%3E%3CSPAN%20style%3D%22%5C%26quot%3Bfont-family%3A%22%20inherit%3D%22%22%3ENext%2C%20switch%20to%20%22Preview%20mode%22%20to%20see%20how%20the%20card%20is%20being%20shown%20and%20hidden%20after%20clicking%20the%20button%3A%26lt%3B%5C%2FSPAN%26gt%3B%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FP%3E%3CP%3E%3CSTRONG%20style%3D%22%5C%26quot%3Bfont-family%3A%22%20inherit%3D%22%22%3E%3CSPAN%20class%3D%22%5C%26quot%3Blia-inline-image-display-wrapper%22%20lia-image-align-center%3D%22%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Fgxcuf89792%2F%5C%26quot%3Bhttps%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F346663i18429794BE7AEE82%2Fimage-size%2Flarge%3Fv%3Dv2%26amp%3Bpx%3D999%5C%26quot%3B%22%20role%3D%22%5C%26quot%3Bbutton%5C%26quot%3B%22%20title%3D%22image-2-1536x336%22%20alt%3D%22%5C%26quot%3Bimage-2-1536x336%5C%26quot%3B%22%20%2F%3E%26lt%3B%5C%2Fspan%26gt%3B%26lt%3B%5C%2FSTRONG%26gt%3B%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FSPAN%3E%3C%2FSTRONG%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FP%3E%3CP%3E%3CFONT%20color%3D%22%5C%26quot%3B%23DF0000%5C%26quot%3B%22%3E%3CSTRONG%20style%3D%22%5C%26quot%3Bfont-family%3A%22%20inherit%3D%22%22%3EImportant!%26lt%3B%5C%2FSTRONG%26gt%3B%3CSPAN%20style%3D%22%5C%26quot%3Bfont-family%3A%22%20inherit%3D%22%22%3E%20If%20you%20add%20%22Action.Submit%22%20to%20the%20hidden%20card%20it%20will%20send%20data%20from%20all%20fields%20present%20from%20that%20card%20and%20%22up%22%20-%20so%20from%20all%20parents%20of%20that%20hidden%20card.%20The%20%22Action.Submit%22%20button%20on%20a%20top-most%20card%20will%20only%20send%20data%20from%20that%20top%20card.%26lt%3B%5C%2FSPAN%26gt%3B%26lt%3B%5C%2FFONT%26gt%3B%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FSPAN%3E%3C%2FSTRONG%3E%3C%2FFONT%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FP%3E%3CP%3E%3CFONT%20color%3D%22%5C%26quot%3B%23DF0000%5C%26quot%3B%22%3E%3CSPAN%20style%3D%22%5C%26quot%3Bfont-family%3A%22%20inherit%3D%22%22%3E%3CSPAN%20class%3D%22%5C%26quot%3Blia-inline-image-display-wrapper%22%20lia-image-align-center%3D%22%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Fgxcuf89792%2F%5C%26quot%3Bhttps%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F346664iE11AE058AD74685A%2Fimage-size%2Flarge%3Fv%3Dv2%26amp%3Bpx%3D999%5C%26quot%3B%22%20role%3D%22%5C%26quot%3Bbutton%5C%26quot%3B%22%20title%3D%22E89C8BF5-4397-4694-944C-A7FBA7D86288%22%20alt%3D%22%5C%26quot%3BE89C8BF5-4397-4694-944C-A7FBA7D86288%5C%26quot%3B%22%20%2F%3E%26lt%3B%5C%2Fspan%26gt%3B%26lt%3B%5C%2FSPAN%26gt%3B%26lt%3B%5C%2FFONT%26gt%3B%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FSPAN%3E%3C%2FSPAN%3E%3C%2FFONT%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FP%3E%3CP%3E%5Cx3C!--%20%2Fwp%3Aparagraph%20--%5C%26gt%3B%20%5Cx3C!--%20wp%3Aimage%20%7B%5C%22id%5C%22%3A3320%2C%5C%22sizeSlug%5C%22%3A%5C%22full%5C%22%2C%5C%22linkDestination%5C%22%3A%5C%22media%5C%22%7D%20--%5C%26gt%3B%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FP%3E%3CP%3E%5Cx3C!--%20%2Fwp%3Aimage%20--%5C%26gt%3B%20%5Cx3C!--%20wp%3Aparagraph%20--%5C%26gt%3B%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FP%3E%3CP%3EData%20from%20cards%20is%20always%20submitted%20from%20parent%20to%20child%20cards.%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FP%3E%3CP%3E%26nbsp%3B%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FP%3E%3CP%3E%5Cx3C!--%20%2Fwp%3Aparagraph%20--%5C%26gt%3B%20%5Cx3C!--%20wp%3Aheading%20--%5C%26gt%3B%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FP%3E%3C%2FH2%3E%3CH2%20id%3D%22%5C%26quot%3Baction-showcard%5C%26quot%3B%22%20id%3D%22%5C%26quot%3Btoc-hId--1445156683%5C%26quot%3B%22%20id%3D%22toc-hId--1445155719%22%20id%3D%22toc-hId--1445155719%22%20id%3D%22toc-hId--1445155719%22%3EAction.ToggleVisibility%26lt%3B%5C%2FH2%26gt%3B%5Cn%3CP%3E%5Cx3C!--%20%2Fwp%3Aheading%20--%5C%26gt%3B%20%5Cx3C!--%20wp%3Aparagraph%20--%5C%26gt%3B%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FP%3E%3CP%3ETo%20use%20it%20first%20you%20need%20to%20add%20%22ActionSet%22%20element%20to%20the%20designer%20canvas%20and%20then%20select%3CCODE%3EAction.ToggleVisibility%20%26lt%3B%5C%2FCODE%26gt%3Bfrom%20the%20list%20of%20available%20options%3A%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FCODE%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22%5C%26quot%3Blia-inline-image-display-wrapper%22%20lia-image-align-center%3D%22%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Fgxcuf89792%2F%5C%26quot%3Bhttps%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F346665i993527E1D1AED92E%2Fimage-size%2Flarge%3Fv%3Dv2%26amp%3Bpx%3D999%5C%26quot%3B%22%20role%3D%22%5C%26quot%3Bbutton%5C%26quot%3B%22%20title%3D%22image-3%22%20alt%3D%22%5C%26quot%3Bimage-3%5C%26quot%3B%22%20%2F%3E%26lt%3B%5C%2Fspan%26gt%3B%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FP%3E%3CP%3E%26nbsp%3B%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FP%3E%3CP%3E%5Cx3C!--%20%2Fwp%3Aimage%20--%5C%26gt%3B%20%5Cx3C!--%20wp%3Aparagraph%20--%5C%26gt%3B%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FP%3E%3CP%3ENext%2C%20the%20same%20as%20with%20ShowCard%20scenario%2C%20define%20properties%20of%20the%20added%20button.%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FP%3E%3CP%3E%26nbsp%3B%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FP%3E%3CP%3E%5Cx3C!--%20%2Fwp%3Aparagraph%20--%5C%26gt%3B%20%5Cx3C!--%20wp%3Aparagraph%20%7B%5C%22backgroundColor%5C%22%3A%5C%22luminous-vivid-amber%5C%22%7D%20--%5C%26gt%3B%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FP%3E%3CP%20class%3D%22%5C%26quot%3Bhas-luminous-vivid-amber-background-color%22%20has-background%3D%22%22%3E%3CFONT%20color%3D%22%5C%26quot%3B%23DF0000%5C%26quot%3B%22%3E%3CSTRONG%3EImportant!%26lt%3B%5C%2FSTRONG%26gt%3B%20Unlike%20with%20ShowCard%2C%20the%20ToggleVisibility%20requires%20you%20to%20do%20some%20work%20directly%20within%20the%20generated%20JSON%20payload%20of%20the%20card.%20There%20is%20no%20UI%20to%20configure%20it%20any%20other%20way.%26lt%3B%5C%2FFONT%26gt%3B%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FSTRONG%3E%3C%2FFONT%3E%3C%2FP%3E%3CP%20class%3D%22%5C%26quot%3Bhas-luminous-vivid-amber-background-color%22%20has-background%3D%22%22%3E%26nbsp%3B%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FP%3E%3CP%3E%5Cx3C!--%20%2Fwp%3Aparagraph%20--%5C%26gt%3B%20%5Cx3C!--%20wp%3Aparagraph%20--%5C%26gt%3B%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FP%3E%3CP%3ENow%20add%20elements%20to%20the%20card%20that%20you%20want%20to%20show%20and%20hide%20after%20clicking%20the%20button.%20Then%20define%20their%20properties%3A%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FP%3E%3CP%3E%26nbsp%3B%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FP%3E%3CP%3E%5Cx3C!--%20%2Fwp%3Aparagraph%20--%5C%26gt%3B%20%5Cx3C!--%20wp%3Alist%20%7B%5C%22ordered%5C%22%3Atrue%7D%20--%5C%26gt%3B%26lt%3B%5C%2FP%26gt%3B%5Cn%3COL%3E%5Cn%3CLI%3E%3CSTRONG%3EId%20%26lt%3B%5C%2FSTRONG%26gt%3B-%20it%20is%20absolutely%20required%20to%20define%20unique%20ids%20of%20the%20added%20elements.%20Ids%20are%20used%20to%20target%20elements%20and%20toggle%20their%20visibility.%26lt%3B%5C%2FLI%26gt%3B%5Cn%3C%2FSTRONG%3E%3C%2FLI%3E%3CLI%3E%3CSTRONG%3E%3CSTRONG%3EInitially%20visible%20%26lt%3B%5C%2FSTRONG%26gt%3B-%20define%20whether%20elements%20should%20be%20visible%20as%20the%20card%20is%20rendered%2C%20or%20hidden.%20Toggle%20will%20then%20either%20show%20them%2C%20or%20hide%20them.%20When%20you%20unclick%20the%20checkbox%2C%20element%20will%20be%20overlayed%20with%20a%20greyed%20pattern.%26lt%3B%5C%2FLI%26gt%3B%5Cn%26lt%3B%5C%2FOL%26gt%3B%5Cn%3CP%3E%5Cx3C!--%20%2Fwp%3Alist%20--%5C%26gt%3B%20%5Cx3C!--%20wp%3Aimage%20%7B%5C%22align%5C%22%3A%5C%22center%5C%22%2C%5C%22id%5C%22%3A3322%2C%5C%22sizeSlug%5C%22%3A%5C%22large%5C%22%2C%5C%22linkDestination%5C%22%3A%5C%22media%5C%22%7D%20--%5C%26gt%3B%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FP%3E%3CDIV%20class%3D%22%5C%26quot%3Bwp-block-image%5C%26quot%3B%22%3E%5Cn%3CFIGURE%20class%3D%22%5C%26quot%3Baligncenter%22%20size-large%3D%22%22%3E%5Cn%3CP%3E%26nbsp%3B%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FP%3E%3CP%3E%3CSPAN%20style%3D%22%5C%26quot%3Bfont-family%3A%22%20inherit%3D%22%22%3E%3CSPAN%20class%3D%22%5C%26quot%3Blia-inline-image-display-wrapper%22%20lia-image-align-center%3D%22%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Fgxcuf89792%2F%5C%26quot%3Bhttps%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F346666i85AEE1E8D569D5E9%2Fimage-size%2Flarge%3Fv%3Dv2%26amp%3Bpx%3D999%5C%26quot%3B%22%20role%3D%22%5C%26quot%3Bbutton%5C%26quot%3B%22%20title%3D%22image-4-1536x397%22%20alt%3D%22%5C%26quot%3Bimage-4-1536x397%5C%26quot%3B%22%20%2F%3E%26lt%3B%5C%2Fspan%26gt%3B%26lt%3B%5C%2FSPAN%26gt%3B%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FSPAN%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FP%3E%3CP%3E%26nbsp%3B%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FP%3E%3CP%3E%3CSPAN%20style%3D%22%5C%26quot%3Bfont-family%3A%22%20inherit%3D%22%22%3ENow%20navigate%20to%20JSON%20payload%20and%20find%20ToggleVisibility%20button's%20definition.%20Add%20there%20the%20following%20code%3A%26lt%3B%5C%2FSPAN%26gt%3B%26lt%3B%5C%2FP%26gt%3B%5Cn%26lt%3B%5C%2FFIGURE%26gt%3B%5Cn%26lt%3B%5C%2FDIV%26gt%3B%5Cn%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%5Cx3C!--%20%2Fwp%3Aparagraph%20--%5C%26gt%3B%20%5Cx3C!--%20wp%3Aparagraph%20--%5C%26gt%3B%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FP%3E%3CP%3E%3CCODE%3E%5C%22targetElements%5C%22%3A%20%5B%20%5C%22colon%20delimited%20list%20of%20elements%5C'%20Ids%20to%20toggle%5C%22%20%5D%26lt%3B%5C%2FCODE%26gt%3B%3CCODE%3E%26lt%3B%5C%2FCODE%26gt%3B%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FCODE%3E%3C%2FCODE%3E%3C%2FP%3E%3CP%3E%5Cx3C!--%20%2Fwp%3Aparagraph%20--%5C%26gt%3B%20%5Cx3C!--%20wp%3Aimage%20%7B%5C%22align%5C%22%3A%5C%22center%5C%22%2C%5C%22id%5C%22%3A3323%2C%5C%22sizeSlug%5C%22%3A%5C%22large%5C%22%2C%5C%22linkDestination%5C%22%3A%5C%22media%5C%22%7D%20--%5C%26gt%3B%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FP%3E%3CDIV%20class%3D%22%5C%26quot%3Bwp-block-image%5C%26quot%3B%22%3E%5Cn%3CFIGURE%20class%3D%22%5C%26quot%3Baligncenter%22%20size-large%3D%22%22%3E%5Cn%3CP%3E%26nbsp%3B%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FP%3E%3CP%3E%3CSTRONG%20style%3D%22%5C%26quot%3Bfont-family%3A%22%20inherit%3D%22%22%3E%3CSPAN%20class%3D%22%5C%26quot%3Blia-inline-image-display-wrapper%22%20lia-image-align-center%3D%22%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Fgxcuf89792%2F%5C%26quot%3Bhttps%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F346667i25712B31B7AC72F0%2Fimage-size%2Flarge%3Fv%3Dv2%26amp%3Bpx%3D999%5C%26quot%3B%22%20role%3D%22%5C%26quot%3Bbutton%5C%26quot%3B%22%20title%3D%22image-5-1536x701%22%20alt%3D%22%5C%26quot%3Bimage-5-1536x701%5C%26quot%3B%22%20%2F%3E%26lt%3B%5C%2Fspan%26gt%3B%26lt%3B%5C%2FSTRONG%26gt%3B%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FSPAN%3E%3C%2FSTRONG%3E%3C%2FP%3E%3CP%3E%3CSTRONG%20style%3D%22%5C%26quot%3Bfont-family%3A%22%20inherit%3D%22%22%3E%26nbsp%3B%26lt%3B%5C%2FSTRONG%26gt%3B%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FSTRONG%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FP%3E%3CP%3E%3CFONT%20color%3D%22%5C%26quot%3B%23DF0000%5C%26quot%3B%22%3E%3CSTRONG%20style%3D%22%5C%26quot%3Bfont-family%3A%22%20inherit%3D%22%22%3EImportant!%26lt%3B%5C%2FSTRONG%26gt%3B%3CSPAN%20style%3D%22%5C%26quot%3Bfont-family%3A%22%20inherit%3D%22%22%3E%20The%20only%20%22downside%22%20of%20that%20approach%20is%20in%20case%20you%20add%20an%20always%20visible%20submit%20button%2C%20then%20it%20will%20always%20send%20data%20from%20all%20fields%20even%20when%20they%20are%20hidden.%26lt%3B%5C%2FSPAN%26gt%3B%26lt%3B%5C%2FFONT%26gt%3B%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FSPAN%3E%3C%2FSTRONG%3E%3C%2FFONT%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%26lt%3B%5C%2FP%26gt%3B%5Cn%26lt%3B%5C%2FFIGURE%26gt%3B%5Cn%26lt%3B%5C%2FDIV%26gt%3B%5Cn%3C%2FP%3E%3CP%3E%5Cx3C!--%20%2Fwp%3Aparagraph%20--%5C%26gt%3B%20%5Cx3C!--%20wp%3Aparagraph%20--%5C%26gt%3B%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FP%3E%3CP%3ELast%20step%20is%20to%20test%20it.%20Switch%20to%20%22Preview%22%20mode%20and%20examine%20behavior%20of%20your%20card%3A%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FP%3E%3CP%3E%26nbsp%3B%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22%5C%26quot%3Blia-inline-image-display-wrapper%22%20lia-image-align-center%3D%22%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Fgxcuf89792%2F%5C%26quot%3Bhttps%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F346669i865CA6C5B745283B%2Fimage-size%2Flarge%3Fv%3Dv2%26amp%3Bpx%3D999%5C%26quot%3B%22%20role%3D%22%5C%26quot%3Bbutton%5C%26quot%3B%22%20title%3D%223F6CAEA8-5B83-47D1-A35D-98704C2C206C%22%20alt%3D%22%5C%26quot%3B3F6CAEA8-5B83-47D1-A35D-98704C2C206C%5C%26quot%3B%22%20%2F%3E%26lt%3B%5C%2Fspan%26gt%3B%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FP%3E%3CP%3E%5Cx3C!--%20%2Fwp%3Aimage%20--%5C%26gt%3B%20%5Cx3C!--%20wp%3Aheading%20--%5C%26gt%3B%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FP%3E%3CH2%20id%3D%22%5C%26quot%3Bonly-show-when%5C%26quot%3B%22%20id%3D%22%5C%26quot%3Btoc-hId-1042356150%5C%26quot%3B%22%20id%3D%22toc-hId--1445155719%22%20id%3D%22toc-hId--1445155719%22%20id%3D%22toc-hId--1445155719%22%3EOnly%20show%20when%26lt%3B%5C%2FH2%26gt%3B%5Cn%3CP%3E%5Cx3C!--%20%2Fwp%3Aheading%20--%5C%26gt%3B%20%5Cx3C!--%20wp%3Aparagraph%20--%5C%26gt%3B%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FP%3E%3CP%3EThis%20approach%20uses%20%22%3CA%20href%3D%22%5C%26quot%3Bhttps%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fadaptive-cards%2Ftemplating%2Flanguage%5C%26quot%3B%22%20target%3D%22%5C%26quot%3B_blank%5C%26quot%3B%22%20rel%3D%22%5C%26quot%3Bnoreferrer%20nofollow%20noopener%20noreferrer%22%20noopener%3D%22%22%3EAdaptive%20Cards%20Templating%20Language%26lt%3B%5C%2FA%26gt%3B%22.%20To%20be%20able%20to%20use%20it%2C%20first%20you%20need%20to%20define%20Data%20that%20will%20be%20bind%20with%20the%20card.%20And%20once%20you%20have%20the%20data%2C%20then%20you%20are%20able%20to%20create%20a%20condition%20that%20determines%20when%20an%20element%20should%20be%20visible%3A%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FA%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FP%3E%3CP%3E%5Cx3C!--%20%2Fwp%3Aparagraph%20--%5C%26gt%3B%20%5Cx3C!--%20wp%3Aimage%20%7B%5C%22align%5C%22%3A%5C%22center%5C%22%2C%5C%22id%5C%22%3A3325%2C%5C%22sizeSlug%5C%22%3A%5C%22large%5C%22%2C%5C%22linkDestination%5C%22%3A%5C%22media%5C%22%7D%20--%5C%26gt%3B%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FP%3E%3CDIV%20class%3D%22%5C%26quot%3Bwp-block-image%5C%26quot%3B%22%3E%5Cn%3CFIGURE%20class%3D%22%5C%26quot%3Baligncenter%22%20size-large%3D%22%22%3E%5Cn%3CP%3E%3CSPAN%20style%3D%22%5C%26quot%3Bfont-family%3A%22%20inherit%3D%22%22%3E%3CSPAN%20class%3D%22%5C%26quot%3Blia-inline-image-display-wrapper%22%20lia-image-align-center%3D%22%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Fgxcuf89792%2F%5C%26quot%3Bhttps%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F346670iD04231259F73738B%2Fimage-size%2Flarge%3Fv%3Dv2%26amp%3Bpx%3D999%5C%26quot%3B%22%20role%3D%22%5C%26quot%3Bbutton%5C%26quot%3B%22%20title%3D%22image-6-1536x478%22%20alt%3D%22%5C%26quot%3Bimage-6-1536x478%5C%26quot%3B%22%20%2F%3E%26lt%3B%5C%2Fspan%26gt%3B%26lt%3B%5C%2FSPAN%26gt%3B%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FSPAN%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FP%3E%3CP%3E%3CSPAN%20style%3D%22%5C%26quot%3Bfont-family%3A%22%20inherit%3D%22%22%3EYou%20can%20use%20different%20types%20of%20comparisons%2C%20to%20both%20integer%2C%20dates%2C%20boolean%20or%20string%20data%20types.%26lt%3B%5C%2FSPAN%26gt%3B%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%26lt%3B%5C%2FP%26gt%3B%5Cn%26lt%3B%5C%2FFIGURE%26gt%3B%5Cn%26lt%3B%5C%2FDIV%26gt%3B%5Cn%3C%2FP%3E%3CP%3E%5Cx3C!--%20%2Fwp%3Aparagraph%20--%5C%26gt%3B%20%5Cx3C!--%20wp%3Aparagraph%20%7B%5C%22backgroundColor%5C%22%3A%5C%22luminous-vivid-amber%5C%22%7D%20--%5C%26gt%3B%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FP%3E%3CP%20class%3D%22%5C%26quot%3Bhas-luminous-vivid-amber-background-color%22%20has-background%3D%22%22%3E%3CFONT%20color%3D%22%5C%26quot%3B%23DF0000%5C%26quot%3B%22%3E%3CSTRONG%3EImportant!%26lt%3B%5C%2FSTRONG%26gt%3B%20Unlike%20%22Toggle%22%2C%20showing%20and%20hiding%20elements%20based%20on%20conditions%20is%20actually%20happening%20when%20a%20card%20is%20being%20rendered.%20As%20of%20today%2C%20%3CEM%3EData%20%26lt%3B%5C%2FEM%26gt%3Bthat%20card%20is%20using%20is%20only%20static%2C%20so%20it%20cannot%20be%20changed%20after%20the%20card%20is%20displayed.%20This%20means%2C%20that%20if%20a%20field%20is%20having%20a%20condition%20that%20prevents%20it%20from%20being%20displayed%2C%20even%20when%20it%20has%20a%20default%20value%20set%2C%20its%20value%20will%20not%20be%20submitted%20as%20long%20as%20the%20field%20is%20not%20visible.%26lt%3B%5C%2FFONT%26gt%3B%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FEM%3E%3C%2FSTRONG%3E%3C%2FFONT%3E%3C%2FP%3E%3CP%20class%3D%22%5C%26quot%3Bhas-luminous-vivid-amber-background-color%22%20has-background%3D%22%22%3E%26nbsp%3B%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FP%3E%3CP%3E%5Cx3C!--%20%2Fwp%3Aparagraph%20--%5C%26gt%3B%20%5Cx3C!--%20wp%3Aparagraph%20--%5C%26gt%3B%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FP%3E%3CP%3EFinally%2C%20enter%20%22Preview%22%20mode%20to%20see%20how%20your%20card%20behaves%3A%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FP%3E%3CP%3E%26nbsp%3B%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FP%3E%3CP%3E%5Cx3C!--%20%2Fwp%3Aparagraph%20--%5C%26gt%3B%20%5Cx3C!--%20wp%3Aimage%20%7B%5C%22id%5C%22%3A3327%2C%5C%22sizeSlug%5C%22%3A%5C%22full%5C%22%2C%5C%22linkDestination%5C%22%3A%5C%22media%5C%22%7D%20--%5C%26gt%3B%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FP%3E%3CP%3E%5Cx3C!--%20%2Fwp%3Aimage%20--%5C%26gt%3B%20%5Cx3C!--%20wp%3Aparagraph%20--%5C%26gt%3B%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22%5C%26quot%3Blia-inline-image-display-wrapper%22%20lia-image-align-center%3D%22%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Fgxcuf89792%2F%5C%26quot%3Bhttps%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F346671i28BEFB85C8F243D8%2Fimage-size%2Flarge%3Fv%3Dv2%26amp%3Bpx%3D999%5C%26quot%3B%22%20role%3D%22%5C%26quot%3Bbutton%5C%26quot%3B%22%20title%3D%2227642CAD-D34E-4EA8-9D10-AE4D0C440503%22%20alt%3D%22%5C%26quot%3B27642CAD-D34E-4EA8-9D10-AE4D0C440503%5C%26quot%3B%22%20%2F%3E%26lt%3B%5C%2Fspan%26gt%3B%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FP%3E%3CP%3EAnd%20that's%20it!%20Hope%20you%20will%20find%20this%20tutorial%20useful.%20If%20you%20have%20any%20comments%2C%20write%20them%20down%20below.%20Thanks!%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FP%3E%3CP%3E%5Cx3C!--%20%2Fwp%3Aparagraph%20--%5C%26gt%3B%20%5Cx3C!--%20wp%3Atadv%2Fclassic-paragraph%20%2F--%5C%26gt%3B%26lt%3B%5C%2FP%26gt%3B%26lt%3B%5C%2Flingo-body%26gt%3B%3CLINGO-TEASER%20id%3D%22%5C%26quot%3Blingo-teaser-3142385%5C%26quot%3B%22%20slang%3D%22%5C%26quot%3Ben-US%5C%26quot%3B%22%3E%3C%2FLINGO-TEASER%3E%3C%2FP%3E%3CP%3EIn%20Adaptive%20Cards%20there%20are%20multiple%20ways%20to%20show%20and%20hide%20content%20depending%20on%20other%20content%20or%20conditions%2C%20or%20even%20user%20interaction.%20But%20despite%20that%20most%20of%20them%20is%20available%20since%20the%20version%201.2%20(so%20quite%20early)%20it%20requires%20a%20bit%20of%20knowledge%20how%20to%20actually%20implement%20them.%26lt%3B%5C%2FP%26gt%3B%26lt%3B%5C%2Flingo-teaser%26gt%3B%3CLINGO-LABS%20id%3D%22%5C%26quot%3Blingo-labs-3142385%5C%26quot%3B%22%20slang%3D%22%5C%26quot%3Ben-US%5C%26quot%3B%22%3E%3CLINGO-LABEL%3EGetting%20started%26lt%3B%5C%2Flingo-label%26gt%3B%3CLINGO-LABEL%3EHow%20to%26lt%3B%5C%2Flingo-label%26gt%3B%26lt%3B%5C%2Flingo-labs%26gt%3B%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3C%2FP%3E%3C%2FFIGURE%3E%3C%2FDIV%3E%3C%2FH2%3E%3C%2FFIGURE%3E%3C%2FDIV%3E%3C%2FFIGURE%3E%3C%2FDIV%3E%3C%2FSTRONG%3E%3C%2FSTRONG%3E%3C%2FLI%3E%3C%2FOL%3E%3C%2FP%3E%3C%2FH2%3E%3C%2FLI%3E%3C%2FOL%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3C%2FLINGO-SUB%3E%3CLINGO-SUB%20id%3D%22lingo-sub-3142385%22%20slang%3D%22en-US%22%3EShowing%20and%20hiding%20content%20in%20Adaptive%20Cards%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-3142385%22%20slang%3D%22en-US%22%3E%3CP%3E%3C!--%20wp%3Aparagraph%20--%3E%3C%2FP%3E%0A%3CP%3EIn%20Adaptive%20Cards%20there%20are%20multiple%20ways%20to%20show%20and%20hide%20content%20depending%20on%20other%20content%20or%20conditions%2C%20or%20even%20user%20interaction.%20But%20despite%20that%20most%20of%20them%20is%20available%20since%20the%20version%201.2%20(so%20quite%20early)%20it%20requires%20a%20bit%20of%20knowledge%20how%20to%20actually%20implement%20them.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CSPAN%20style%3D%22font-family%3A%20inherit%3B%22%3EThere%20are%203%20major%20ways%20for%20showing%20and%20hiding%20content%20in%20Adaptive%20Cards%3A%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%3C!--%20%2Fwp%3Aparagraph%20--%3E%20%3C!--%20wp%3Alist%20%7B%22ordered%22%3Atrue%7D%20--%3E%3C%2FP%3E%0A%3COL%3E%0A%3CLI%3EAction.ShowCard%3C%2FLI%3E%0A%3CLI%3EAction.ToggleVisibility%3C%2FLI%3E%0A%3CLI%3ECondition%20defined%20under%20%22Only%20show%20when%22%20property%3C%2FLI%3E%0A%3C%2FOL%3E%0A%3CP%3E%3C!--%20%2Fwp%3Alist%20--%3E%20%3C!--%20wp%3Aparagraph%20--%3E%3C%2FP%3E%0A%3CP%3ELet's%20go%20now%20through%20each%20of%20them.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3C!--%20%2Fwp%3Aparagraph%20--%3E%20%3C!--%20wp%3Aheading%20--%3E%3C%2FP%3E%0A%3CH2%20id%3D%22action-showcard%22%20id%3D%22toc-hId-362297780%22%20id%3D%22toc-hId-1042357114%22%3EAction.ShowCard%3C%2FH2%3E%0A%3CP%3E%3C!--%20%2Fwp%3Aheading%20--%3E%20%3C!--%20wp%3Aparagraph%20--%3E%3C%2FP%3E%0A%3CP%3ETo%20use%20it%20first%20you%20need%20to%20add%20%22ActionSet%22%20element%20to%20the%20designer%20canvas%20and%20then%20select%3CCODE%3EAction.ShowCard%3C%2FCODE%3Efrom%20the%20list%20of%20available%20options%3A%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-center%22%20image-alt%3D%22image%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F346660iDA8E814A2E4B6004%2Fimage-size%2Flarge%3Fv%3Dv2%26amp%3Bpx%3D999%22%20role%3D%22button%22%20title%3D%22image%22%20alt%3D%22image%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EOnce%20that%20is%20done%2C%20define%20button's%20properties%20inside%20%22Element%20properties%22%20window%2C%20such%20as%20its%20title%20and%20id.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3C!--%20%2Fwp%3Aparagraph%20--%3E%20%3C!--%20wp%3Aparagraph%20%7B%22backgroundColor%22%3A%22vivid-green-cyan%22%7D%20--%3E%3C%2FP%3E%0A%3CP%20class%3D%22has-vivid-green-cyan-background-color%20has-background%22%3E%3CFONT%20color%3D%22%23007A4B%22%3E%3CSTRONG%3EHint!%3C%2FSTRONG%3E%20To%20display%20the%20other%20card%2C%20that%20will%20be%20shown%20after%20clicking%20on%20the%20added%20button%2C%20double%20click%20it!%20It%20will%20trigger%20the%20hidden%20card%20to%20appear%2C%20so%20you%20can%20easily%20author%20its%20contents.%3C%2FFONT%3E%3C%2FP%3E%0A%3CP%20class%3D%22has-vivid-green-cyan-background-color%20has-background%22%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3C!--%20%2Fwp%3Aparagraph%20--%3E%20%3C!--%20wp%3Aparagraph%20--%3E%3C%2FP%3E%0A%3CP%3ENext%20double-click%20the%20button%2C%20to%20display%20the%20hidden%20card%20and%20author%20its%20contents%3A%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CSPAN%20style%3D%22font-family%3A%20inherit%3B%22%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-center%22%20image-alt%3D%22image-1%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F346662iFC3D70A605460034%2Fimage-size%2Flarge%3Fv%3Dv2%26amp%3Bpx%3D999%22%20role%3D%22button%22%20title%3D%22image-1%22%20alt%3D%22image-1%22%20%2F%3E%3C%2FSPAN%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CSPAN%20style%3D%22font-family%3A%20inherit%3B%22%3ENext%2C%20switch%20to%20%22Preview%20mode%22%20to%20see%20how%20the%20card%20is%20being%20shown%20and%20hidden%20after%20clicking%20the%20button%3A%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CSTRONG%20style%3D%22font-family%3A%20inherit%3B%22%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-center%22%20image-alt%3D%22image-2-1536x336%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F346663i18429794BE7AEE82%2Fimage-size%2Flarge%3Fv%3Dv2%26amp%3Bpx%3D999%22%20role%3D%22button%22%20title%3D%22image-2-1536x336%22%20alt%3D%22image-2-1536x336%22%20%2F%3E%3C%2FSPAN%3E%3C%2FSTRONG%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CFONT%20color%3D%22%23DF0000%22%3E%3CSTRONG%20style%3D%22font-family%3A%20inherit%3B%22%3EImportant!%3C%2FSTRONG%3E%3CSPAN%20style%3D%22font-family%3A%20inherit%3B%22%3E%20If%20you%20add%20%22Action.Submit%22%20to%20the%20hidden%20card%20it%20will%20send%20data%20from%20all%20fields%20present%20from%20that%20card%20and%20%22up%22%20-%20so%20from%20all%20parents%20of%20that%20hidden%20card.%20The%20%22Action.Submit%22%20button%20on%20a%20top-most%20card%20will%20only%20send%20data%20from%20that%20top%20card.%3C%2FSPAN%3E%3C%2FFONT%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CFONT%20color%3D%22%23DF0000%22%3E%3CSPAN%20style%3D%22font-family%3A%20inherit%3B%22%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-center%22%20image-alt%3D%22E89C8BF5-4397-4694-944C-A7FBA7D86288%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F346664iE11AE058AD74685A%2Fimage-size%2Flarge%3Fv%3Dv2%26amp%3Bpx%3D999%22%20role%3D%22button%22%20title%3D%22E89C8BF5-4397-4694-944C-A7FBA7D86288%22%20alt%3D%22E89C8BF5-4397-4694-944C-A7FBA7D86288%22%20%2F%3E%3C%2FSPAN%3E%3C%2FSPAN%3E%3C%2FFONT%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3C!--%20%2Fwp%3Aparagraph%20--%3E%20%3C!--%20wp%3Aimage%20%7B%22id%22%3A3320%2C%22sizeSlug%22%3A%22full%22%2C%22linkDestination%22%3A%22media%22%7D%20--%3E%3C%2FP%3E%0A%3CP%3E%3C!--%20%2Fwp%3Aimage%20--%3E%20%3C!--%20wp%3Aparagraph%20--%3E%3C%2FP%3E%0A%3CP%3EData%20from%20cards%20is%20always%20submitted%20from%20parent%20to%20child%20cards.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3C!--%20%2Fwp%3Aparagraph%20--%3E%20%3C!--%20wp%3Aheading%20--%3E%3C%2FP%3E%0A%3CH2%20id%3D%22action-showcard%22%20id%3D%22toc-hId--1445156683%22%20id%3D%22toc-hId--765097349%22%3EAction.ToggleVisibility%3C%2FH2%3E%0A%3CP%3E%3C!--%20%2Fwp%3Aheading%20--%3E%20%3C!--%20wp%3Aparagraph%20--%3E%3C%2FP%3E%0A%3CP%3ETo%20use%20it%20first%20you%20need%20to%20add%20%22ActionSet%22%20element%20to%20the%20designer%20canvas%20and%20then%20select%3CCODE%3EAction.ToggleVisibility%20%3C%2FCODE%3Efrom%20the%20list%20of%20available%20options%3A%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-center%22%20image-alt%3D%22image-3%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F346665i993527E1D1AED92E%2Fimage-size%2Flarge%3Fv%3Dv2%26amp%3Bpx%3D999%22%20role%3D%22button%22%20title%3D%22image-3%22%20alt%3D%22image-3%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3C!--%20%2Fwp%3Aimage%20--%3E%20%3C!--%20wp%3Aparagraph%20--%3E%3C%2FP%3E%0A%3CP%3ENext%2C%20the%20same%20as%20with%20ShowCard%20scenario%2C%20define%20properties%20of%20the%20added%20button.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3C!--%20%2Fwp%3Aparagraph%20--%3E%20%3C!--%20wp%3Aparagraph%20%7B%22backgroundColor%22%3A%22luminous-vivid-amber%22%7D%20--%3E%3C%2FP%3E%0A%3CP%20class%3D%22has-luminous-vivid-amber-background-color%20has-background%22%3E%3CFONT%20color%3D%22%23DF0000%22%3E%3CSTRONG%3EImportant!%3C%2FSTRONG%3E%20Unlike%20with%20ShowCard%2C%20the%20ToggleVisibility%20requires%20you%20to%20do%20some%20work%20directly%20within%20the%20generated%20JSON%20payload%20of%20the%20card.%20There%20is%20no%20UI%20to%20configure%20it%20any%20other%20way.%3C%2FFONT%3E%3C%2FP%3E%0A%3CP%20class%3D%22has-luminous-vivid-amber-background-color%20has-background%22%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3C!--%20%2Fwp%3Aparagraph%20--%3E%20%3C!--%20wp%3Aparagraph%20--%3E%3C%2FP%3E%0A%3CP%3ENow%20add%20elements%20to%20the%20card%20that%20you%20want%20to%20show%20and%20hide%20after%20clicking%20the%20button.%20Then%20define%20their%20properties%3A%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3C!--%20%2Fwp%3Aparagraph%20--%3E%20%3C!--%20wp%3Alist%20%7B%22ordered%22%3Atrue%7D%20--%3E%3C%2FP%3E%0A%3COL%3E%0A%3CLI%3E%3CSTRONG%3EId%20%3C%2FSTRONG%3E-%20it%20is%20absolutely%20required%20to%20define%20unique%20ids%20of%20the%20added%20elements.%20Ids%20are%20used%20to%20target%20elements%20and%20toggle%20their%20visibility.%3C%2FLI%3E%0A%3CLI%3E%3CSTRONG%3EInitially%20visible%20%3C%2FSTRONG%3E-%20define%20whether%20elements%20should%20be%20visible%20as%20the%20card%20is%20rendered%2C%20or%20hidden.%20Toggle%20will%20then%20either%20show%20them%2C%20or%20hide%20them.%20When%20you%20unclick%20the%20checkbox%2C%20element%20will%20be%20overlayed%20with%20a%20greyed%20pattern.%3C%2FLI%3E%0A%3C%2FOL%3E%0A%3CP%3E%3C!--%20%2Fwp%3Alist%20--%3E%20%3C!--%20wp%3Aimage%20%7B%22align%22%3A%22center%22%2C%22id%22%3A3322%2C%22sizeSlug%22%3A%22large%22%2C%22linkDestination%22%3A%22media%22%7D%20--%3E%3C%2FP%3E%0A%3CDIV%20class%3D%22wp-block-image%22%3E%0A%3CFIGURE%20class%3D%22aligncenter%20size-large%22%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CSPAN%20style%3D%22font-family%3A%20inherit%3B%22%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-center%22%20image-alt%3D%22image-4-1536x397%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F346666i85AEE1E8D569D5E9%2Fimage-size%2Flarge%3Fv%3Dv2%26amp%3Bpx%3D999%22%20role%3D%22button%22%20title%3D%22image-4-1536x397%22%20alt%3D%22image-4-1536x397%22%20%2F%3E%3C%2FSPAN%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CSPAN%20style%3D%22font-family%3A%20inherit%3B%22%3ENow%20navigate%20to%20JSON%20payload%20and%20find%20ToggleVisibility%20button's%20definition.%20Add%20there%20the%20following%20code%3A%3C%2FSPAN%3E%3C%2FP%3E%0A%3C%2FFIGURE%3E%0A%3C%2FDIV%3E%0A%3CP%3E%3C!--%20%2Fwp%3Aparagraph%20--%3E%20%3C!--%20wp%3Aparagraph%20--%3E%3C%2FP%3E%0A%3CP%3E%3CCODE%3E%22targetElements%22%3A%20%5B%20%22colon%20delimited%20list%20of%20elements'%20Ids%20to%20toggle%22%20%5D%3C%2FCODE%3E%3CCODE%3E%3C%2FCODE%3E%3C%2FP%3E%0A%3CP%3E%3C!--%20%2Fwp%3Aparagraph%20--%3E%20%3C!--%20wp%3Aimage%20%7B%22align%22%3A%22center%22%2C%22id%22%3A3323%2C%22sizeSlug%22%3A%22large%22%2C%22linkDestination%22%3A%22media%22%7D%20--%3E%3C%2FP%3E%0A%3CDIV%20class%3D%22wp-block-image%22%3E%0A%3CFIGURE%20class%3D%22aligncenter%20size-large%22%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CSTRONG%20style%3D%22font-family%3A%20inherit%3B%22%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-center%22%20image-alt%3D%22image-5-1536x701%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F346667i25712B31B7AC72F0%2Fimage-size%2Flarge%3Fv%3Dv2%26amp%3Bpx%3D999%22%20role%3D%22button%22%20title%3D%22image-5-1536x701%22%20alt%3D%22image-5-1536x701%22%20%2F%3E%3C%2FSPAN%3E%3C%2FSTRONG%3E%3C%2FP%3E%0A%3CP%3E%3CSTRONG%20style%3D%22font-family%3A%20inherit%3B%22%3E%26nbsp%3B%3C%2FSTRONG%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CFONT%20color%3D%22%23DF0000%22%3E%3CSTRONG%20style%3D%22font-family%3A%20inherit%3B%22%3EImportant!%3C%2FSTRONG%3E%3CSPAN%20style%3D%22font-family%3A%20inherit%3B%22%3E%20The%20only%20%22downside%22%20of%20that%20approach%20is%20in%20case%20you%20add%20an%20always%20visible%20submit%20button%2C%20then%20it%20will%20always%20send%20data%20from%20all%20fields%20even%20when%20they%20are%20hidden.%3C%2FSPAN%3E%3C%2FFONT%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3C%2FFIGURE%3E%0A%3C%2FDIV%3E%0A%3CP%3E%3C!--%20%2Fwp%3Aparagraph%20--%3E%20%3C!--%20wp%3Aparagraph%20--%3E%3C%2FP%3E%0A%3CP%3ELast%20step%20is%20to%20test%20it.%20Switch%20to%20%22Preview%22%20mode%20and%20examine%20behavior%20of%20your%20card%3A%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-center%22%20image-alt%3D%223F6CAEA8-5B83-47D1-A35D-98704C2C206C%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F346669i865CA6C5B745283B%2Fimage-size%2Flarge%3Fv%3Dv2%26amp%3Bpx%3D999%22%20role%3D%22button%22%20title%3D%223F6CAEA8-5B83-47D1-A35D-98704C2C206C%22%20alt%3D%223F6CAEA8-5B83-47D1-A35D-98704C2C206C%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3C!--%20%2Fwp%3Aimage%20--%3E%20%3C!--%20wp%3Aheading%20--%3E%3C%2FP%3E%0A%3CH2%20id%3D%22only-show-when%22%20id%3D%22toc-hId-1042356150%22%20id%3D%22toc-hId-1722415484%22%3EOnly%20show%20when%3C%2FH2%3E%0A%3CP%3E%3C!--%20%2Fwp%3Aheading%20--%3E%20%3C!--%20wp%3Aparagraph%20--%3E%3C%2FP%3E%0A%3CP%3EThis%20approach%20uses%20%22%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fadaptive-cards%2Ftemplating%2Flanguage%22%20target%3D%22_blank%22%20rel%3D%22noreferrer%20noopener%22%3EAdaptive%20Cards%20Templating%20Language%3C%2FA%3E%22.%20To%20be%20able%20to%20use%20it%2C%20first%20you%20need%20to%20define%20Data%20that%20will%20be%20bind%20with%20the%20card.%20And%20once%20you%20have%20the%20data%2C%20then%20you%20are%20able%20to%20create%20a%20condition%20that%20determines%20when%20an%20element%20should%20be%20visible%3A%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3C!--%20%2Fwp%3Aparagraph%20--%3E%20%3C!--%20wp%3Aimage%20%7B%22align%22%3A%22center%22%2C%22id%22%3A3325%2C%22sizeSlug%22%3A%22large%22%2C%22linkDestination%22%3A%22media%22%7D%20--%3E%3C%2FP%3E%0A%3CDIV%20class%3D%22wp-block-image%22%3E%0A%3CFIGURE%20class%3D%22aligncenter%20size-large%22%3E%0A%3CP%3E%3CSPAN%20style%3D%22font-family%3A%20inherit%3B%22%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-center%22%20image-alt%3D%22image-6-1536x478%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F346670iD04231259F73738B%2Fimage-size%2Flarge%3Fv%3Dv2%26amp%3Bpx%3D999%22%20role%3D%22button%22%20title%3D%22image-6-1536x478%22%20alt%3D%22image-6-1536x478%22%20%2F%3E%3C%2FSPAN%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CSPAN%20style%3D%22font-family%3A%20inherit%3B%22%3EYou%20can%20use%20different%20types%20of%20comparisons%2C%20to%20both%20integer%2C%20dates%2C%20boolean%20or%20string%20data%20types.%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3C%2FFIGURE%3E%0A%3C%2FDIV%3E%0A%3CP%3E%3C!--%20%2Fwp%3Aparagraph%20--%3E%20%3C!--%20wp%3Aparagraph%20%7B%22backgroundColor%22%3A%22luminous-vivid-amber%22%7D%20--%3E%3C%2FP%3E%0A%3CP%20class%3D%22has-luminous-vivid-amber-background-color%20has-background%22%3E%3CFONT%20color%3D%22%23DF0000%22%3E%3CSTRONG%3EImportant!%3C%2FSTRONG%3E%20Unlike%20%22Toggle%22%2C%20showing%20and%20hiding%20elements%20based%20on%20conditions%20is%20actually%20happening%20when%20a%20card%20is%20being%20rendered.%20As%20of%20today%2C%20%3CEM%3EData%20%3C%2FEM%3Ethat%20card%20is%20using%20is%20only%20static%2C%20so%20it%20cannot%20be%20changed%20after%20the%20card%20is%20displayed.%20This%20means%2C%20that%20if%20a%20field%20is%20having%20a%20condition%20that%20prevents%20it%20from%20being%20displayed%2C%20even%20when%20it%20has%20a%20default%20value%20set%2C%20its%20value%20will%20not%20be%20submitted%20as%20long%20as%20the%20field%20is%20not%20visible.%3C%2FFONT%3E%3C%2FP%3E%0A%3CP%20class%3D%22has-luminous-vivid-amber-background-color%20has-background%22%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3C!--%20%2Fwp%3Aparagraph%20--%3E%20%3C!--%20wp%3Aparagraph%20--%3E%3C%2FP%3E%0A%3CP%3EFinally%2C%20enter%20%22Preview%22%20mode%20to%20see%20how%20your%20card%20behaves%3A%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3C!--%20%2Fwp%3Aparagraph%20--%3E%20%3C!--%20wp%3Aimage%20%7B%22id%22%3A3327%2C%22sizeSlug%22%3A%22full%22%2C%22linkDestination%22%3A%22media%22%7D%20--%3E%3C%2FP%3E%0A%3CP%3E%3C!--%20%2Fwp%3Aimage%20--%3E%20%3C!--%20wp%3Aparagraph%20--%3E%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-center%22%20image-alt%3D%2227642CAD-D34E-4EA8-9D10-AE4D0C440503%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F346671i28BEFB85C8F243D8%2Fimage-size%2Flarge%3Fv%3Dv2%26amp%3Bpx%3D999%22%20role%3D%22button%22%20title%3D%2227642CAD-D34E-4EA8-9D10-AE4D0C440503%22%20alt%3D%2227642CAD-D34E-4EA8-9D10-AE4D0C440503%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EAnd%20that's%20it!%20Hope%20you%20will%20find%20this%20tutorial%20useful.%20If%20you%20have%20any%20comments%2C%20write%20them%20down%20below.%20Thanks!%3C%2FP%3E%0A%3CP%3E%3C!--%20%2Fwp%3Aparagraph%20--%3E%20%3C!--%20wp%3Atadv%2Fclassic-paragraph%20%2F--%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-TEASER%20id%3D%22lingo-teaser-3142385%22%20slang%3D%22en-US%22%3E%3CP%3EIn%20Adaptive%20Cards%20there%20are%20multiple%20ways%20to%20show%20and%20hide%20content%20depending%20on%20other%20content%20or%20conditions%2C%20or%20even%20user%20interaction.%20But%20despite%20that%20most%20of%20them%20is%20available%20since%20the%20version%201.2%20(so%20quite%20early)%20it%20requires%20a%20bit%20of%20knowledge%20how%20to%20actually%20implement%20them.%3C%2FP%3E%3C%2FLINGO-TEASER%3E%3CLINGO-LABS%20id%3D%22lingo-labs-3142385%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EGetting%20started%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EHow%20to%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E
Co-Authors
Version history
Last update:
‎Feb 09 2022 03:17 AM
Updated by: