SAP Cloud Platform Business Rules- Part 3

Click here and follow my SAP UI5/FIORI snippets and information Page
SAP Cloud Platform Business Rules- Part 1
SAP Cloud Platform Business Rules- Part 2
In the Part-1 and Part-2, I have shown required configurations steps and BRM Rules project creation with all required components.In Part-3,I going to explain below point.Go through it and please let me know in case of any doubt/issue.

->How to use/call BRM project in SAPUI5/FIORI application

Advantages:

1. Without writing the code in the application, we are getting the offers below.

2. Easily we can change the offers without touching the UI5 application code.

3. Anyone can maintain BRM Rules project.

4. Technical knowledge is not required for BRM Rules project.

5. It is easy to develop.

6. It is easy to enhance.

Step 1- Create a SAPUI5 application and paste below snippet in neo-app.json         

     {

      "path": "/bpmrulesruntime/rules-service/v1/rules",

      "target": {

        "type": "destination",

        "name": "bpmrulesruntime",

        "entryPath": "/rules-service/v1/rules"

      },

      "description": "SAPUI5 Test Resources"

    }

According to the BRM Rules project, I have created UI5 view. Please have a look at below screenshots.

Application UI Screens 

There are three drop-downs in this UI screen.All are mandatory fields here.  

Select Card Type from first drop-down.

Select Brand from second drop-down.

Select Quantity from third drop-down.

Select all the fields and click on "check" button for knowing the best offer.Based on the selections you will get offer from BRM Rules.

I have selected these options.Please find below the screenshot.

I have got the offer based on my inputs.Please find below the screenshot.

Step 2- Paste below snippet in view.

<content>
<f:SimpleForm editable="true" layout="ResponsiveGridLayout" labelSpanXL="3" labelSpanL="4" labelSpanM="3" labelSpanS="12" adjustLabelSpan="false" emptySpanXL="4" emptySpanL="4" emptySpanM="4" emptySpanS="0" columnsXL="1" columnsL="1" columnsM="1" singleContainerFullSize="false">
<f:content>
<Label text="Card Type" required="true"/>
<ComboBox placeholder="Select Card Type" id="cardTypId">
<core:Item key="SBI" text="SBI"/>
<core:Item key="HDFC" text="HDFC"/>
<core:Item key="TATA" text="TATA"/>
<core:Item key="CITI" text="CITI"/>
<core:Item key="ICICI" text="ICICI"/>
<core:Item key="AMERICAN EXPRESS" text="AMERICAN EXPRESS"/>
<core:Item key="IDFC" text="IDFC"/>
<core:Item key="RBL" text="RBL"/>
<core:Item key="BAJAJ" text="BAJAJ"/>
<core:Item key="AXIS" text="AXIS"/>
</ComboBox>
<Label text="Brand" required="true"/>
<ComboBox placeholder="Select Brand" id="brandTypId">
<core:Item key="SONY" text="SONY"/>
<core:Item key="LG" text="LG"/>
<core:Item key="SAMSUNG" text="SAMSUNG"/>
<core:Item key="SPYKAR" text="SPYKAR"/>
<core:Item key="ARROW" text="ARROW"/>
<core:Item key="MUFTI" text="MUFTI"/>
<core:Item key="LEVIS" text="LEVIS"/>
<core:Item key="MOCHI" text="MOCHI"/>
<core:Item key="MATROLA" text="MATROLA"/>
<core:Item key="NIKE" text="NIKE"/>
</ComboBox>
<Label text="Quantity" required="true"/>
<ComboBox placeholder="Select Quantity" id="quanTypId">
<core:Item key="1" text="1"/>
<core:Item key="2" text="2"/>
<core:Item key="3" text="3"/>
<core:Item key="4" text="4"/>
<core:Item key="5" text="5"/>
<core:Item key="6" text="6"/>
<core:Item key="7" text="7"/>
<core:Item key="8" text="8"/>
<core:Item key="9" text="9"/>
<core:Item key="10" text="10"/>
<core:Item key="11" text="11"/>
<core:Item key="12" text="12"/>
<core:Item key="13" text="13"/>
<core:Item key="14" text="14"/>
<core:Item key="15" text="15"/>
</ComboBox>
</f:content>
</f:SimpleForm>
<FlexBox alignItems="Center" justifyContent="Center">
<items>
<Button text="Reset" type="Reject" class="sapUiSmallMarginEnd" press="handleRest"/>
<Button text="Check" type="Accept" press="handleCheck"/>
</items>
</FlexBox>
<ObjectIdentifier title="**Festival Offers on credit cards" class="marginClass"/>
</content>

Step 3- Paste below snippet in controller.

// When users click on 'CHECK' button then this method will fire....
handleCheck: function () {
jQuery.sap.require("sap.m.MessageBox");
var cardId = this.byId("cardTypId"),
brandId = this.byId("brandTypId"),
QAId = this.byId("quanTypId"),
that = this;
if (!cardId.getSelectedKey()) {
sap.m.MessageToast.show("Select Card Type");
return;
}
if (!brandId.getSelectedKey()) {
sap.m.MessageToast.show("Select Brand");
return;
}
if (!QAId.getSelectedKey()) {
sap.m.MessageToast.show("Select Quantity");
return;
}
//Input(Entity/Structure name in business rules)....
//CardType,BrandType,Quantity(Properties names in business rules)....
var payLoad = {
"__type__": "Input",
// Date type is string in business rules....
"CardType": cardId.getSelectedKey(), 
// Data type is string in business rules....
"BrandType": brandId.getSelectedKey(), 
// Date type is number in business rules....
"Quantity": Number(QAId.getSelectedKey()) 
};
// First get the CSRF token....
$.ajax({
url:"/bpmrulesruntime/rules-service/v1/rules/xsrf-token",
method: "GET",
headers: {
"X-CSRF-Token": "Fetch"
},
success: function (result, xhr, data) {
var token = data.getResponseHeader("X-CSRF-Token");
// Then invoke the business rules service via public API....
$.ajax({
// DemoRules1(Project Name in business rules)....
// OfferRulesService(Service Name in business rules)....
url: "/bpmrulesruntime/rules-service/v1/rules/invoke?rule_service_name=DemoRules1::OfferRulesService",
method: "POST",
contentType: "application/json",
data: JSON.stringify(payLoad),
async: false,
headers: {
"X-CSRF-Token": token
},
success: function (result1, xhr1, data1) {
var dis = null,
cashBack = null,
title = "",
icon = null;
if (result1.__type__) {
dis = result1.Discount + "%";
cashBack = result1.Cashback + " INR";
title = "CONGRATULATIONS";
icon = sap.m.MessageBox.Icon.SUCCESS;
} else {
dis = "0%";
cashBack = "0 INR";
title = "INFORMATION";
icon = sap.m.MessageBox.Icon.INFORMATION;
}
sap.m.MessageBox.show("Discount = " + dis + "\n" + "CashBack = " + cashBack, {
icon: icon,
title: title,
actions: [sap.m.MessageBox.Action.OK],
onClose: function (oAction) {
that.handleRest();
}
});
}
});
}
});
},

// When users click on 'RESET' button then this method will fire....
handleRest: function () {
this.byId("cardTypId").setSelectedKey("");
this.byId("brandTypId").setSelectedKey("");
this.byId("quanTypId").setSelectedKey("");

}