Schema Explorer

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

{
	"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",
							"size": "medium"
						}
					]
				},
				{
					"type": "Column",
					"items": [

						{
							"type": "Image",
							"url": "https://picsum.photos/100/100?image=123",
							"isVisible": false,
							"id": "imageToToggle2",
							"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
				}
			]
		}
	]
}
{ "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", "size": "medium" } ] }, { "type": "Column", "items": [ { "type": "Image", "url": "https://picsum.photos/100/100?image=123", "isVisible": false, "id": "imageToToggle2", "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 } ] } ] }
Try it Yourself »

Properties

targetElements

The array of TargetElements

  • 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