Skip to content

Latest commit

 

History

History
310 lines (228 loc) · 9.34 KB

defining-custom-actions-c3de5c0.md

File metadata and controls

310 lines (228 loc) · 9.34 KB

Defining Custom Actions

Define custom actions by using the extensions in the app descriptor file. You can also define these custom actions so that they appear on charts, tables, or header toolbars based on the filter property value (chart/table/global).

Note:

Note:

To correctly integrate your app extension coding with SAP Fiori elements, use only the extensionAPI of SAP Fiori elements. For more information, see Using the extensionAPI.

Use the getSelectedContexts() API in the extensionAPI class to get the selection context. For buttons in the chart toolbar, pass the event ID as a parameter.

The analytical list page supports keyboard shortcut keys for custom actions defined in the manifest for global actions and chart/table toolbar actions.

In your app's manifest.json file, under sap.ui5 → extends → extensions, you can specify extensions for the AnalyticalListPage controllers.

You can specify the following information and extend the manifest files as described here:

Property

Description

<entity set>

Entity set that is displayed on the analytical list page. (For example ZCostCenterCostQuery0020)

Note:

If you use multiple views with different entity set properties on the analytical list page, define the Actions only for the main entity set.

<Action 1>, <Action 2>, etc.

The names of actions.

<id>

The ID that is used for the action button.

<button text>

The nullText that is displayed on the button (typically a binding to an i18n entry). For example, null<button text>nullnull{i18n>MY_BUTTON_TEXT}

<handler function>

The handler function that is called when the user selects the action button.

<global> (required)

Indicates whether this is a global action. The default value is false.

Note:

If a determining property is set along with the global property, the action is rendered as a global action since it takes precedence.

<requiresSelection> (optional: relevant only for table toolbar actions in the analytical list page)

Indicates whether the action requires a selection of items. The default value is true.

<determining> (optional: relevant only for the analytical list page actions)

Indicates whether the action should be displayed in the footer of the page. The default value is false.

<command>

Represents the command mapped to a keyboard shortcut defined under sap.ui.commands.

Note:

If you are adding the command settings to an existing custom action, the oEvent parameter that is passed to the event handler of that custom action is changed. It requires code adaptation if the code in the event handler depends on the oEvent parameter. For example, [Ctrl] + [B]

 

"sap.ui5": {
    "_version": "1.1.0",
    "extends": {
        "extensions": {
		"sap.ui.commands": {
			"sap.suite.generic.template.AnalyticalListPage#sap.suite.generic.template.AnalyticalListPage::ZCostCenterCostQuery0020": {
		"GlobalActionCommand": {
			"shortcut": "Ctrl+B"
		}
	}		
		},
            "sap.ui.controllerExtensions": {
                "sap.suite.ui.generic.template.AnalyticalListPage.view.AnalyticalListPage": {
                    "controllerName": "my_app.ext.controller.AnalyticalListPageExt",
                        "sap.ui.generic.app": {
                            "ZCostCenterCostQuery0020": {
                            "EntitySet": "ZCostCenterCostQuery0020",
                            "Actions": {
                                "Action A": {
                                    "id": "ActionA",
                                    "text": "{{Action A}}",
                                    "press": "onClickActionA",
                                    "global": true,
 					   "command": "GlobalActionCommand ",

                                },
                                "Action B": {
                                    "id": "ActionB_requiresSelection",
                                    "text": "{{Action B}}",
                                    "press": "onClickActionB",
                                    "filter": "table",
                                    "requiresSelection":true
                                }
                                "Action C: {
                                    "id": "ActionC_requiresSelection",
                                    "text": "{{Action C}}",
                                    "press": "onClickActionC",
                                    "filter": "chart",
                                    "requiresSelection":true
                                }
                                "Action D": {
                                    "id": "ActionD",
                                    "text": "{{Action D}}",
                                    "press": "onClickActionD",
                                    "filter": "table"
                                }
                                "Action E: {
                                    "id": "ActionE",
                                    "text": "{{Action E}}",
                                    "press": "onClickActionE",
                                    "filter": "chart"
                                }
                            } //End of Custom Actions
                        } // End of entity type ZCostCenterCostQuery0020
                    }
                } // End of ALP controllerExtensions       
            } // End of controllerExternsions
        }
    },
        ....,
        ....
}

Custom actions defined in the application's custom controller:

Sample Code:

sap.ui.define([], function () {
    return {
        onBeforeRebindTableExtension: function (oEvent) {
            console.log('onBeforeRebindTableExtension called!');
        },
        onBeforeRebindChartExtension: function (oEvent) {
            console.log('onBeforeRebindChartExtension called!');
        },
        onClickActionA() {
            console.log('Global Action Shortcut Key triggers');
            alert('Button A shows up only in table toolbar and is clicked toolbar!');
        },
        onClickActionB() {
            // The "getSelectedContexts" should be invoked from synchronous code block.
            //
            // The results of "getSelectedContexts" is cached on "aContexts" and 
            // passed as a parameter to the callback function "onActionConfirm".
            var aContexts = this.extensionAPI.getSelectedContexts();
            sap.m.MessageBox.confirm("Would you like to perform the action", {
                title: "Confirm",
                actions: [sap.m.MessageBox.Action.OK, sap.m.MessageBox.Action.CANCEL],
                emphasizedAction: sap.m.MessageBox.Action.OK,
                onClose: this.onActionConfirm.bind(this, aContexts)
            });
        },
        onActionConfirm(aContexts, sAction) {
            if (sAction === sap.m.MessageBox.Action.OK) {
                this.extensionAPI.invokeActions("/ActionB", aContexts).then(function () {
                    ///
                });
            }
        },
        onClickActionC() {
            var contexts = this.extensionAPI.getSelectedContexts(oEvent.ID);
            alert('Button C which shows up in chart toolbar only is clicked!');
        },
        onClickActionD() {
            alert('Button D which shows up in table toolbar only is clicked!');
        },
        onClickActionE() {
            alert('Button E which shows up in chart toolbar only is clicked!');
        }
    }
})

Invoke Actions

This extension API lets you invoke any back-end action from the controller extensions (standard SAPUI5 API methods). For example:

onClickActionSTTA_C_SO_SalesOrder_ND1: function(oEvent) {
  var oApi = this.extensionAPI;    
  var mParameters = {
        "SalesOrderID": "500000052"
     };
  oApi.invokeActions("STTA_SALES_ORDER_ND_SRV_01/AFF8CCF97ACESave_stta_i_so_salesorder_nd", [], mParameters);
}

Related Information

Configuring Analytical List Page App Extensions

Smart Table Extensions