Card Actions

Overview

Actions provide mechanism to make card elements (header, content, list item, etc.) interactive. Card actions can be built-in or attached by the card developer to the desired element. Upon user interaction a corresponding event is dispatched for handling in specific order. If there is a predefined behavior for the action (like navigation) and it is not prevented, it will be executed.

Action Properties

Property Type Default Value Required Description Schema Version Since
type CardActionType Yes The type of the action. It determines the purpose, parameters and default behavior. Possible values are: 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. Based on the type different parameters are available. For details see the documentation page for the chosen action type. 1.15.0 1.65
navigationArrow boolean false No Shows a navigation arrow (chevron) on the list item or table row. Applicable only for Navigation actions on List and Table cards. Accepts a boolean value or a binding expression to control the arrow per item.
Note: Not yet implemented for mobile native cards. 		1.85.0 1.147.0

Note: Buttons and links without a valid action (no actions property, or empty actions array) are automatically disabled.

Order of Dispatching

Whether an action is defined by the card developer, or built-in, it is dispatched for handling in the following order:

  1. Extension
  2. Card
  3. Host

If any of the listed handles the action, it can prevent the dispatching to the next handlers and prevent default behavior by calling preventDefault() on the event object.

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"
					}
				}
			]
		},
		...
	}
}
Try it Out