步驟1：在 manifest.json 的 extends 區域裡，註冊 controllerExtensions：

![](https://img-blog.csdnimg.cn/img_convert/232d7bfa4693049e69986a13ded7fc04.png)

原始碼：

```json
"extends": {
            "extensions": {
                "sap.ui.controllerExtensions": {
                    "sap.suite.ui.generic.template.ListReport.view.ListReport": {
                      "controllerName": "com.sap.jerry.jerryfioriapp.ext.controller.ListReportExtension",
                        "sap.ui.generic.app": {
                          "SEPMRA_C_PD_Product": {
                            "EntitySet": "SEPMRA_C_PD_Product",
                            "Actions": {
                              "ActionName1": {
                                "id" : "ActionName1",
                                "text" : "Jerry的按鈕",
                                "press" : "onCustomAction1",
                                "global": true
                              }
                            }
                        }
                    }
                }        
            }
            }
        },
```

步驟2：

實現 controller extension：

```javascript
sap.ui.define("com.sap.jerry.jerryfioriapp.ext.controller.ListReportExtension", [], function() {
    return {
        onCustomAction1 : function(oEvent) {
            alert('Hello');
        },
        onAfterRendering: function (oEvent) {
            debugger;
            var oContentTable = this.byId("com.sap.jerry.jerryfioriapp::sap.suite.ui.generic.template.ListReport.view.ListReport::SEPMRA_C_PD_Product--responsiveTable");
            oContentTable.attachSelect(this._onSelectChanged);
    
        },
        _onSelectChanged: function (oEvent) {
            debugger;
	    }
    }
  });
```

步驟3：測試。

執行時，首先觸發 onAfterRendering 鉤子函式，透過byId API，根據 Smart Table 控制元件 ID，拿到其 table 例項：

![](https://img-blog.csdnimg.cn/img_convert/8bb70f6a62dc7508ddb9073911997280.png)

![](https://img-blog.csdnimg.cn/img_convert/f4f7eb2550c23ab00cbd5f320639baf1.png)

SAP UI5 裡所有的執行時建立例項，都儲存在全域性物件 mInstances 裡，鍵為 控制元件 id，值為控制元件例項。

![](https://img-blog.csdnimg.cn/img_convert/090a87c0f99612acd9b5c4641c8547d7.png)

拿到 table 例項後，呼叫其 attach 方法，掛接對應的事件處理函式。

![](https://img-blog.csdnimg.cn/img_convert/3686ecfcba1da04da9cb7f5f5b7e4cac.png)

![](https://img-blog.csdnimg.cn/img_convert/5e452a1f213e78e966cb335902977ef2.png)

一切完成後，點選 Smart Table 某行專案，我們使用 attachSelect 註冊的事件處理函式就會觸發：

![](https://img-blog.csdnimg.cn/img_convert/a08e4b5d7cd5b4829d67b5744083ea81.png)

![](https://img-blog.csdnimg.cn/img_convert/b595434c267f0ffc60a540cb0b69cbbd.png)

本文參考：[Fiori Element List Report – Adjust column size automatically](https://blogs.sap.com/2020/05/22/fiori-element-list-report-adjust-column-size-automatically/)

如何使用 controllerExtensions 給 SAP Fiori Elements 表格註冊事件響應函式

相關文章