Host Actions

Overview

In addition to the Card Actions, a card can have optional application-level actions depending on the host environment. Examples may include, but are not limited to options like: share a card, remove a card.

When there are host actions defined, an additional toolbar is displayed in the card:

Each host action is represented as a button in the toolbar. The button options can be specified. The host action may be managed as enabled or visible depending on the card.

Each host action can be specified with the following settings:

Property Type Required Description
type string Yes The type of the action. Possible values: "Navigation", "Submit" and "Custom".
text string No The text of the action button.
icon string No The icon of the action button.
tooltip string No The tooltip of the action button.
buttonType string No The type of the action button.
enabled boolean/function No If the action is enabled. Default value is true.
visible boolean/function No If the action is visible. Default value is true.
action function No The action function.
parameters Object No The parameters of the action.

Example

An example with a card and host actions would look like:

Controller
var oHost = new sap.ui.integration.Host({
	actions: [
		{
			type: 'Custom',
			icon: 'sap-icon://add',
			text: 'Action name',
			action: function (oCard, oButton) {
				// do some action
			},
			enabled: function (oCard) {
				// return whether this host action
				// should be enabled in the card
				return true;
			},
			visible: function (oCard) {
				// return whether this host action
				// should be visible in the card
				return true;
			}
		},
		...
	]
});

this.getView().byId('card1').setHost(oHost);
XML View
<mvc:View xmlns:w="sap.ui.integration.widgets">
	<w:Card id="card1" manifest="./manifest.json" />
</mvc:View>
Try it Out