Schema Explorer

Choose element:

Important note about accessibility: In version 1.3 of the schema we introduced a label property on Inputs to improve accessibility. If the Host app you are targetting supports v1.3 you should use label intead of a TextBlock as seen in some samples below. Once most Host apps have updated to the latest version we will update the samples accordingly.

Action.ToggleVisibility

An action that toggles the visibility of associated card elements.

Introduced in version 1.2

Property Type Required Description Version
type "Action.ToggleVisibility" Yes Must be "Action.ToggleVisibility". 1.2
targetElements TargetElement[] No The array of TargetElements. It is not recommended to include Input elements with validation under Action.Toggle due to confusion that can arise from invalid inputs that are not currently visible. See https://docs.microsoft.com/en-us/adaptive-cards/authoring-cards/input-validation for more information. 1.2

Inherited properties

Property Type Required Description Version
title string No Label for button or link that represents this action. 1.2
iconUrl uri No Optional icon to be shown on the action in conjunction with the title. Supports data URI in version 1.2+ 1.1
style ActionStyle No Controls the style of an Action, which influences how the action is displayed, spoken, etc. 1.2
fallback Action, FallbackOption No Describes what to do when an unknown element is encountered or the requires of this or any children can’t be met. 1.2
requires Dictionary<string> No A series of key/value pairs indicating features that the item requires with corresponding minimum version. When a feature is missing or of insufficient version, fallback is triggered. 1.2

Example

JSON 
{
	"type": "AdaptiveCard",
	"version": "1.2",
	"body": [
		{
			"type": "TextBlock",
			"text": "Press the buttons to toggle the images!",
			"wrap": true
		},
		{
			"type": "TextBlock",
			"text": "Here are some images:",
			"isVisible": false,
			"id": "textToToggle"
		},
		{
			"type": "ColumnSet",
			"columns": [
				{
					"type": "Column",
					"items": [
						{
							"style": "person",
							"type": "Image",
							"url": "https://picsum.photos/100/100?image=112",
							"isVisible": false,
							"id": "imageToToggle",
							"altText": "sample image 1",
							"size": "medium"
						}
					]
				},
				{
					"type": "Column",
					"items": [

						{
							"type": "Image",
							"url": "https://picsum.photos/100/100?image=123",
							"isVisible": false,
							"id": "imageToToggle2",
							"altText": "sample image 2",
							"size": "medium"
						}
					]
				}
			]
		}
	],
	"actions": [
		{
			"type": "Action.ToggleVisibility",
			"title": "Toggle!",
			"targetElements": [ "textToToggle", "imageToToggle", "imageToToggle2" ]
		},
		{
			"type": "Action.ToggleVisibility",
			"title": "Also Toggle!",
			"targetElements": [
				{
					"elementId": "textToToggle"
				},
				{
					"elementId": "imageToToggle"
				},
				{
					"elementId": "imageToToggle2"
				}
			]
		},
		{
			"type": "Action.ToggleVisibility",
			"title": "Show!",
			"targetElements": [
				{
					"elementId": "textToToggle",
					"isVisible": true
				},
				{
					"elementId": "imageToToggle",
					"isVisible": true
				},
				{
					"elementId": "imageToToggle2",
					"isVisible": true
				}
			]
		},
		{
			"type": "Action.ToggleVisibility",
			"title": "Hide!",
			"targetElements": [
				{
					"elementId": "textToToggle",
					"isVisible": false
				},
				{
					"elementId": "imageToToggle",
					"isVisible": false
				},
				{
					"elementId": "imageToToggle2",
					"isVisible": false
				}
			]
		},
		{
			"type": "Action.ToggleVisibility",
			"title": "Grain!",
			"targetElements": [
				{
					"elementId": "textToToggle",
					"isVisible": true
				},
				{
					"elementId": "imageToToggle",
					"isVisible": true
				},
				{
					"elementId": "imageToToggle2",
					"isVisible": false
				}
			]
		},
		{
			"type": "Action.ToggleVisibility",
			"title": "Water!",
			"targetElements": [
				{
					"elementId": "textToToggle",
					"isVisible": true
				},
				{
					"elementId": "imageToToggle",
					"isVisible": false
				},
				{
					"elementId": "imageToToggle2",
					"isVisible": true
				}
			]
		}
	]
}
Adaptive Card

Properties

targetElements

The array of TargetElements. It is not recommended to include Input elements with validation under Action.Toggle due to confusion that can arise from invalid inputs that are not currently visible. See https://docs.microsoft.com/en-us/adaptive-cards/authoring-cards/input-validation for more information.

  • Type: TargetElement[]
  • Required: No
  • Allowed values:
    • TargetElement
    • string

title

Label for button or link that represents this action.

  • Type: string
  • Required: No

iconUrl

Optional icon to be shown on the action in conjunction with the title. Supports data URI in version 1.2+

  • Type: uri
  • Version : 1.1
  • Required: No

style

Controls the style of an Action, which influences how the action is displayed, spoken, etc.

  • Type: ActionStyle
  • Required: No
  • Allowed values:
    • "default": Action is displayed as normal
    • "positive": Action is displayed with a positive style (typically the button becomes accent color)
    • "destructive": Action is displayed with a destructive style (typically the button becomes red)

fallback

Describes what to do when an unknown element is encountered or the requires of this or any children can't be met.

  • Type: Action, FallbackOption
  • Required: No
  • Allowed values:
    • Action.OpenUrl
    • Action.ShowCard
    • Action.Submit
    • Action.ToggleVisibility
    • "drop": Causes this element to be dropped immediately when unknown elements are encountered. The unknown element doesn't bubble up any higher.

requires

A series of key/value pairs indicating features that the item requires with corresponding minimum version. When a feature is missing or of insufficient version, fallback is triggered.

  • Type: Dictionary<string>
  • Required: No