本文我們介紹如何將 Business Rule Control 即規則控制元件，嵌入到 SAP UI5 應用程式檢視中。

RuleBuilder 元件是一個規則控制元件的容器，可以捆綁不同的視覺化手段。 目前唯一可用的視覺化是決策表(Decision Table)。 RuleBuilder 定義了 UI 開發者要遵循的通用規則 UI 消費模式和 API。

在這個例子中，我們建立了一個決策表，它將使用引導輸入模式。

效果如下：
![](https://img-blog.csdnimg.cn/img_convert/b8dd56ce441274297b275aef770c93a5.png)

可以切換條件：
![](https://img-blog.csdnimg.cn/img_convert/5e186f3a422d5c400bb678d83a18970f.png)

可以編輯 if 條件 和 then 結果：
![](https://img-blog.csdnimg.cn/img_convert/bd9f7cdcbf635cde6235480c9d583671.png)

我們在 xml 檢視裡，使用的控制元件來自名稱空間 `sap.rules.ui` 的標準控制元件：`RuleBuilder`，types 屬性為 `DecisionTable`

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

現在我們需要將 ExpressionLanguage 物件關聯連線到 RuleBuilder，然後控制元件透過 OData 模型載入其資料。

表示式語言(`Expression languages`)為規則創作、規則視覺化和規則內容驗證提供所需的服務。 表示式語言物件提供的服務包括表示式驗證、表示式解析、自動完成建議、表示式後設資料和令牌的檢索，以及執行執行時服務，例如獲取資料物件、輸出等。

特定詞彙表的詞彙表 OData 模型和繫結上下文路徑是表示式語言的強制輸入。

表示式語言物件是 RuleBuilder 物件的關聯，它可以關聯多個 RuleBuilder 物件。

我們可以根據專案實際要求：自定義 Page.controller.js。

設定表示式語言物件：

```javascript
oExpressionLanguage = new sap.rules.ui.services.ExpressionLanguage();
oRuleBuilder.setExpressionLanguage(oExpressionLanguage);
```

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

如果使用 DMN SFEEL(Expression language 2.0)，則程式碼如下：

```javascript
oAstExpressionLanguage = new sap.rules.ui.services.AstExpressionLanguage();
oRuleBuilder.setAstExpressionLanguage(oAstExpressionLanguage);
```

確保在設定表示式語言的詞彙模型之前已設定資料，如圖所示：

```javascript
oExpressionLanguage.setData(data);
oExpressionLanguage.setModel(that.oVocabularyModel);
```

控制器完整程式碼如下：

```javascript
sap.ui.define([
	'jquery.sap.global',
	'sap/ui/core/mvc/Controller',
	'sap/ui/model/odata/v2/ODataModel',
	'sap/rules/ui/services/ExpressionLanguage',   //For DMN SFEEL language, use 'AstExpressionLanguage'.
	'sap/ui/core/util/MockServer',
	'sap/m/MessageToast'
], function (jQuery, Controller, ODataModel, ExpressionLanguage, MockServer, MessageToast) {    //For DMN SFEEL language, use 'AstExpressionLanguage' instead of 'ExpressionLanguage'.
	"use strict";

return Controller.extend("sap.rules.ui.sample.GuidedDecisionTable.Page", {

onInit: function () {

sap.ui.getCore().applyTheme("sap_belize");

// apply compact density for desktop, the cozy design otherwise
			this.getView().addStyleClass(sap.ui.Device.system.desktop ? "sapUiSizeCompact" : "sapUiSizeCozy");

var mPath = sap.ui.require.toUrl("sap/rules/ui/sample/GuidedDecisionTable") + "/";
			
			// Initialize Expression Language services
			this.oVocabularyMockServer = new MockServer({rootUri: "/sap/opu/odata/SAP/vocabulary_srv/"});
			this.oVocabularyMockServer.simulate(
				mPath + "localService/vocabulary/metadata.xml",
				{'sMockdataBaseUrl': mPath + "localService/vocabulary/mockdata/"}
			);
			this.oVocabularyMockServer.start();
			this.oVocabularyModel = new ODataModel("/sap/opu/odata/SAP/vocabulary_srv/");
			this.oExpressionLanguage = new ExpressionLanguage();               //For DMN SFEEL, use 'new AstExpressionLanguage();'.
			this.oExpressionLanguage.setModel(this.oVocabularyModel);
			this.oExpressionLanguage.setBindingContextPath("/Vocabularies('FA163E38C6481EE785F409DCAD583D43')");

// Initialize the Rule Builder
			this.oRuleMockServer = new MockServer({rootUri: "/sap/opu/odata/SAP/RULE_SRV/"});
			this.oRuleMockServer.simulate(
				mPath + "localService/rule/metadata.xml",
				{'sMockdataBaseUrl': mPath + "localService/rule/mockdata/"}
			);

var aRequests = this.loadRequests(mPath);
			this.oRuleMockServer.setRequests(aRequests);
			this.oRuleMockServer.start();
			this.oRuleModel = new ODataModel({
				serviceUrl: "/sap/opu/odata/SAP/RULE_SRV/",
				defaultBindingMode: sap.ui.model.BindingMode.TwoWay
			});

var oRuleBuilder = this.byId("ruleBuilder");
			oRuleBuilder.setModel(this.oRuleModel);
			oRuleBuilder.setExpressionLanguage(this.oExpressionLanguage);
			oRuleBuilder.setBindingContextPath("/Rules(Id='FA163E38C6481EE785F409DCAD583D43',Version='000000000000000001')");
		},

handleEditButton: function () {
			var oEditButton = this.byId("editButton");
			var oRuleBuilder = this.byId("ruleBuilder");
			var bEdit = (oEditButton.getText() === "Edit");
			oRuleBuilder.setEditable(bEdit);
			oEditButton.setText(bEdit ? "Display" : "Edit");
		},

onAfterRendering: function () {

// Line actions are not supported in this demo
			var oRuleBuilder = this.byId("ruleBuilder");
			var oDecisionTable = oRuleBuilder.getAggregation("_rule");
			var oToolbar = oDecisionTable.getAggregation("_toolbar");
			var arrContent = oToolbar.getContent();
			for (var i = 0; i < arrContent.length; i++) {
				if (arrContent[i].getMetadata().getName() === "sap.m.Button") {
					arrContent[i].detachPress(arrContent[i].mEventRegistry.press[0].fFunction, arrContent[i].mEventRegistry.press[0].oListner);
					arrContent[i].attachPress(function (oEvent) {
							var msg = 'Line action pressed';
							MessageToast.show(msg);
						}
					);
				} else if (arrContent[i].getMetadata().getName() === "sap.m.MenuButton") {
					var oMenu = arrContent[i].getMenu();
					oMenu.detachItemSelected(oMenu.mEventRegistry.itemSelected[1].fFunction, oMenu.mEventRegistry.itemSelected[1].oListner);
					oMenu.attachItemSelected(function (oEvent) {
							var msg = 'Line action pressed';
							MessageToast.show(msg);
						}
					);
				}
			}

},

loadRequests: function (mPath) {

// The mock server does not support 1 to 1 navigation.
			// Hence we provide the responses directly by adding custom requests to the MockServer
			var oRresponses = jQuery.sap.sjax({
				type: "GET",
				url: mPath + "localService/rule/responses.json",
				dataType: "json"
				}	
			).data;
			
			var aRequests = this.oRuleMockServer.getRequests();
			var sMethod = "GET";
			var sPath = /Rules$Id='FA163E38C6481EE785F409DCAD583D43',Version='000001'$\/DecisionTable\/DecisionTableRows\/\$count/;
			var fnResponse1 = function (xhr) {
				xhr.respond(200, {
					"Content-Type": "text/plain;charset=utf-8"
				}, "5");
			};
			aRequests.push({method: sMethod, path: sPath, response: fnResponse1});
			
			sPath = /Rules$Id='FA163E38C6481EE785F409DCAD583D43',Version='000001'$\/DecisionTable\/DecisionTableRows\?\$skip=0&\$top=\d+&\$orderby=Sequence%20asc&\$expand=Cells/;
			var response_1 = this.response_1;
			var fnResponse2 = function (xhr) {
				xhr.respondJSON(200, {
					"Content-Type": "application/json;charset=utf-8"
				}, oRresponses.response_1);
			};
			aRequests.push({method: sMethod, path: sPath, response: fnResponse2});

sPath = /Rules$Id='FA163E38C6481EE785F409DCAD583D43',Version='000001'$\/DecisionTable\/DecisionTableColumns\/\$count/;
			var fnResponse3 = function (xhr) {
				xhr.respond(200, {
					"Content-Type": "text/plain;charset=utf-8"
				}, "5");
			}
			aRequests.push({method: sMethod, path: sPath, response: fnResponse3});

sPath = /Rules$Id='FA163E38C6481EE785F409DCAD583D43',Version='000001'$\/DecisionTable\/DecisionTableColumns\?\$skip=0&\$top=\d+&\$expand=Condition%2cResult/;
			var response_2 = this.response_2;
			var fnResponse4 = function (xhr) {
				xhr.respondJSON(200, {
					"Content-Type": "application/json;charset=utf-8"
				}, oRresponses.response_2);
			}
			aRequests.push({method: sMethod, path: sPath, response: fnResponse4});
 
			return aRequests;
		}
	});
});
```

使用 SAP UI5 繪製 Business Rule Control

相關文章