Card Actions

Overview

Card actions are used to trigger events. The events can be predefined - handled by the card or custom. Actions can be attached to different parts of the card, for example header, content, list items, table rows.

Action Properties

Property Type Default Value Required Description Schema Version Since
type CardActionType Yes The type of the action. Predefined types are "Navigation" and "Submit". If custom handling is needed use "Custom". 1.15.0 1.65
enabled boolean true No If the action is enabled. 1.15.0 1.65
parameters Object No The parameters of the action. Predefined actions require certain parameters to be present. Any parameter can be added to action of type "Custom". 1.15.0 1.65

Parameters for Action of Type "Navigation"

Property Type Default Value Required Description Schema Version Since
url string Yes The URL to navigate to. 1.15.0 1.65
target string "_blank" No If the browser should open a new window or use the same window. Possible values are "_blank" and "_self". 1.15.0 1.65

In Component Card or Extension

You can use the oCard.triggerAction() method to programmatically trigger an action when inside a Component card or from an extension. For more info see the API documentation and the sample.

Examples

Header level navigation action with static URL:

{
	"sap.card": {
		"header": {
			"title": "Some title",
			"actions": [
				{
					"type": "Navigation",
					"parameters": {
						"url": "/some/url"
					}
				}
			]
		},
		...
	}
}

Content level navigation action with static URL and target:

{
	"sap.card": {
		"content": {
			...
			"actions": [
				{
					"type": "Navigation",
					"parameters": {
						"url": "/some/url",
						"target": "_self"
					}
				}
			]
		},
		...
	}
}

Table row navigation action. In the example below the enabled flag is set based on if the item has a URL or not:

{
	"sap.card": {
		"type": "Table",
		"content": {
			"data": {
				"json": [
					{
						"Name": "Comfort Easy",
						"Category": "PDA & Organizers",
						"url": "some/url1"
					},
					{
						"Name": "ITelO Vault",
						"Category": "PDA & Organizers"
					},
					{
						"Name": "Notebook Professional 15",
						"Category": "Notebooks",
						"url": "some/url3"
					}
				]
			},
			"row": {
				"columns": [
					{
						"title": "Name",
						"value": "{Name}"
					},
					{
						"title": "Category",
						"value": "{Category}"
					}
				],
				"actions": [
					{
						"type": "Navigation",
						"enabled": "{= ${url}}",
						"parameters": {
							"url": "{url}"
						}
					}
				]
			}
		}
	}
}
Try it Out