Create an SAPUI5 Application for SAP Variant Configuration and Pricing

1. Back in SAP Business Application Studio, add the copied code from the API Business Hub to your onInit function.

2. Replace in the code the data variable by using the example input JSON found for the service on API Hub.

   

   var data = JSON.stringify({
     "productKey": "CPS_BURGER",
     "date": "2018-08-09",
     "context": [{
       "name": "VBAP-VRKME",
       "value": "EA"
     }]
   });
   

   

ESLINT errors caused by console statement or hard-coded URL can be switched off in project settings or by inserting Java /* eslint-disable */ in the first line.

The result from the API consists of the configuration, characteristics, and characteristic values. Add a ComboBox to display characteristic CPS_OPTION_M value.
Open your main view and add a ComboBox. The ComboBox items and selected item will be set from the result of the API call.

<mvc:View controllerName="sap.tutorial.ProductConfigurationAPITutorial.controller.Main" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc" xmlns:core="sap.ui.core"  displayBlock="true" xmlns="sap.m">
        <App id="app">
            <pages>
                <Page title="{i18n>title}">
                    <content>
                        <ComboBox items="{/possible_values}" selectedKey="{/value}">
                            <core:Item key="{valueLow}" text="{valueLow}"/>
                        </ComboBox>
                    </content>
                </Page>
            </pages>
        </App>
</mvc:View>

Ensure that core namespace is declared via xmlns:core="sap.ui.core"

Back in the controller file, you will need to define the model used in the view. You need to add the JSONModel library to your controller. In the define at the top of the controller, add the JSONModel library by adding sap/ui/model/json/JSONModel and defining the JSONModel in the controller function.

sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/ui/model/json/JSONModel"
], function (Controller, JSONModel) {

In the onInit function, you need to save the current version so that you can access the view associated with the controller in the API call response. Create a new variable called self and set it to this.

var self = this;

Additionally, you need to create a new JSONModel to house the results of the API call. Bind a new empty JSONModel to the view.

this.getView().setModel(new JSONModel({}));

To actually bind the result to the model, you need to parse the API response in the xhr.addEventListener function. The result from the API comes back as text, so you need to parse it to JSON.

var jsonResults = JSON.parse(this.responseText);

Then, you can set the relevant properties into the model. The ComboBox needs CPS_OPTION_M possible values and its initial value.

 var CPS_OPTION_M = jsonResults.rootItem.characteristics.find(function (i) { return i.id === "CPS_OPTION_M"; });
self.getView().getModel().setProperty("/possible_values", CPS_OPTION_M.possibleValues);
if (CPS_OPTION_M.values.length > 0) {
    self.getView().getModel().setProperty("/value", CPS_OPTION_M.values[0].value);
} else {
    self.getView().getModel().setProperty("/value", "");
}

The used find() statement is not supported by Internet Explorer 11.

Save your changes. If you execute the application, you will see a ComboBox filled with CPS_OPTION_M characteristic possible values, having the selected value be the default value for this characteristic.

Next, update the configuration if the user changes the value of the ComboBox. First, you need to declare a new event on the ComboBox control in the view.

<mvc:View controllerName="sap.tutorial.ProductConfigurationAPITutorial.controller.Main" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc" xmlns:core="sap.ui.core"  displayBlock="true" xmlns="sap.m">
       <App id="app">
           <pages>
               <Page title="{i18n>title}">
                   <content>
                       <ComboBox items="{/possible_values}" selectedKey="{/value}" selectionChange="onChange">
                            <core:Item key="{valueLow}" text="{valueLow}"/>
                        </ComboBox>
                    </content>
                </Page>
            </pages>
        </App>
</mvc:View>

Back to the main controller, create an empty onChange function.

onChange: function (oEvent) {

}

As in step 3, head over to SAP API Business Hub, locate the PATCH /api/v2/configurations/{configurationId}/items/{itemId}/characteristics/{characteristicId} method and copy the JavaScript code.

Add the copied JavaScript code from API Business Hub to the newly created onChange function.

Change the data variable declaration to assign the value from the value property of the view model, which is bound to the ComboBox value.

var data = JSON.stringify({
    "values": [{
        "value": this.getView().getModel().getProperty("/value"),
        "selected": true
    }]
});

Since this API PATCH method does not return a response body, in the xhr.addEventListener call of the onChange function, you may change the console log so that the response code is logged instead of the response text.

console.log(this.status);

To fill out all parameters for this API method, you need to add a few fields in the view model, namely configuration id and item id. Add these new properties on the model in the xhr.addEventListener call of the onInit function so that the model is filled when the configuration is loaded.

self.getView().getModel().setProperty("/config_id", jsonResults.id);
self.getView().getModel().setProperty("/item_id", jsonResults.rootItem.id);

Once they are added in the model, replace hard-coded {configurationID} and {itemID} in the generated url in the onChange function by the values in the model. Likewise, replace hard-coded {characteristidID} by CPS_OPTION_M.

xhr.open("PATCH",
    "https://sandbox.api.sap.com/cpservices/prodconf/api/v2/configurations/" +
    this.getView().getModel().getProperty("/config_id") + "/items/" +
    this.getView().getModel().getProperty("/item_id") + "/characteristics/CPS_OPTION_M "
);

Almost done! The variant configuration API uses HTTP header fields etag and If-Match as an optimistic lock. You need to capture the etag header in the model from the HTTP response when loading the configuration and send back that value in the If-Match HTTP header when updating the configuration. In the xhr.addEventListener call of the onInit function, set the etag property of the model with the etag value of the response header.

self.getView().getModel().setProperty("/etag", this.getResponseHeader("etag"));

In the same way, you need to capture the etag value of the characteristic change response in case the user wants to update the value multiple times. Add the same line in the xhr.addEventListener call of the onChange function.
Back in the onChange function, fill the If-Match request header value with the etag value of the model.

xhr.setRequestHeader("If-Match", this.getView().getModel().getProperty("/etag"));

Do not forget variable self in this and the coming new functions.

Run your application. You should see a ComboBox filled with the possible values of characteristic CPS_OPTION_M, having the selected value be the default value for this characteristic. If you change the value of the ComboBox, the call is made to the API to change the value, and you can see the response code in the JavaScript console, which should be 200.

By how much is the eTag value in the service response header increased with each change to the characteristic CPS_OPTION_M? Check the development tools of your browser.

Currently, the value keys are displayed in the interface. In a real-world scenario, you might want to provide the value descriptions to the user and add a label to the combo box. This can be achieved by getting the knowledge base details.

First, create a new method readKb in the controller that takes a knowledge base id as parameter.
When creating a configuration (Step 4), the knowledge base id is returned from the API. To get the KB details, another API needs to be called. Go to the API Business Hub (as in step 3), locate the GET/api/v2/knowledgebases/{kbId} method, copy the JavaScript code then paste it in the readKb function.

Modify the URL of the request to include the knowledge base ID function parameter.

xhr.open("GET", "https://sandbox.api.sap.com/cpservices/prodconf/api/v2/knowledgebases/" + kbId + "?$select=products,classes,characteristics,characteristicSpecifics,bomItems,description");

Now you need to bind the possible values to the model by parsing the response text to JSON then retrieving the possible_values property of CPS_OPTION_M. Also, add the characteristic name to a new model property /name.

var jsonResults = JSON.parse(this.responseText);
var CPS_OPTION_M = jsonResults.characteristics.find(function (i) {
return i.id === "CPS_OPTION_M";
});

self.getView().getModel().setProperty("/possible_values", CPS_OPTION_M.possibleValues);
self.getView().getModel().setProperty("/name", CPS_OPTION_M.name);

Remember to remove the assignment of possible_values to the model in the addEventListener function of the onInit function.
Now, you need to call the new function readKb when the configuration is created with the knowledge base id, at the addEventListener of the onInit function.

In the view, add a SimpleForm which contains the previous ComboBox and a new Label. Set the label text to the new model property /name.

Finally, adjust the ComboBox control in the view so that elements id and name of possible_values are used as key and text respectively.

<sap.ui.layout.form:SimpleForm xmlns:sap.ui.layout.form="sap.ui.layout.form" editable="true" layout="ResponsiveGridLayout" id="form0">
<sap.ui.layout.form:content>
<Label text="{/name}" id="label"/>
<ComboBox items="{/possible_values}" selectedKey="{/value}" selectionChange="onChange">
<core:Item key="{id}" text="{name}"/>
</ComboBox>
</sap.ui.layout.form:content>
</sap.ui.layout.form:SimpleForm>

Run your application. The value descriptions are provided by the ComboBox, and the label text comes from the knowledge base.

In addition to the configuration, SAP Variant Configuration and Pricing also provides a way to calculate the pricing.

In the Burger model, the price is influenced by the menu option. By changing the menu option values, we should see a difference in the calculated price.

For the pricing API to correctly reflect the status of the configuration, the variant condition characteristic values needs to be provided. Which means that the configuration needs to be read after updating it in the app.

Locate the GET /api/v2/configurations/{configurationId} in the SAP API Business Hub, copy the JavaScript code and paste it in a new method _getConfig.
Modify the URL of the request to include the configuration ID from the model.

xhr.open("GET", "https://sandbox.api.sap.com/cpservices/prodconf/api/v2/configurations/" + this.getView().getModel().getProperty("/config_id"));

In the xhr.addEventListener function, assign the configuration JSON in a new attribute self._config.

Call this new method from the xhr.addEventListener function of the onChange method, so that the configuration is read again as soon as it is modified.

Next, add new read-only fields that will be used to show the base price and selected options as well as a button to calculate the price.

<mvc:View controllerName="sap.tutorial.ProductConfigurationAPITutorial.controller.Main" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc" xmlns:core="sap.ui.core"  displayBlock="true" xmlns="sap.m">
        <App id="app">
            <pages>
                <Page title="{i18n>title}">
                    <content>
                        <sap.ui.layout.form:SimpleForm xmlns:sap.ui.layout.form="sap.ui.layout.form" editable="true" layout="ResponsiveGridLayout" id="form0">
                        <sap.ui.layout.form:content>
                            <Label text="{/name}" id="label"/>
                            <ComboBox items="{/possible_values}" selectedKey="{/value}" selectionChange="onChange">
                                <core:Item key="{id}" text="{name}"/>
                            </ComboBox>
                            <Label text="{i18n>basePrice}"/>
                            <Input value="{/base_price}" editable="false"/>
                            <Label text="{i18n>selectedOptions}"/>
                            <Input value="{/selected_options}" editable="false"/>
                            <Label text="{i18n>price}"/>
                            <Input value="{/price}" editable="false"/>
                        </sap.ui.layout.form:content>
                        </sap.ui.layout.form:SimpleForm>
                    <Button text="{i18n>getPrice}" type="Accept" press="onPrice"/>
                    </content>
                </Page>
            </pages>
        </App>
</mvc:View>

Do not forget to update your i18n file with the new labels!

basePrice=Base price
selectedOptions=Selected options
price=Price
getPrice=Get pricing

Next, go to the SAP API Business Hub, locate the /api/v1/statelesspricing method in the Pricing service, copy the JavaScript code and paste it in a new method onPrice.

There are a lot of parameters in this API that you would fill out in a real-world application. But for this tutorial, hard code all values except for the KOMP-VARCOND attribute of the item 000010.
Get the variant condition values from the configuration and assign them to the KOMP-VARCOND attribute in the request data.

var varCond = this._config.rootItem.characteristics.find(function (i) {
    return i.id === "CPS_VARCOND";
});
var varCondValues = [];
for (var i = 0; i < varCond.values.length; i++) {
    varCondValues.push(varCond.values[i].value);
}

In the xhr.addEventListener function of the onPrice function, get the net value as well as the value of the condition purposes ZSS1 and ZSS2, which in this test model means Base Price and Selected Options, and assign them to the JSON model.

var jsonResults = JSON.parse(this.responseText);

self.getView().getModel().setProperty("/price", jsonResults.netValue);
self.getView().getModel().setProperty("/base_price", jsonResults.conditionsWithPurpose.find(function (i) {
    return i.purpose === "ZSS1";
}).value);
self.getView().getModel().setProperty("/selected_options", jsonResults.conditionsWithPurpose.find(function (i) {
    return i.purpose === "ZSS2";
}).value);

…

…

Run your application. The selected options and price values will change depending on the menu option you choose. The below result is excluding the External Conditions in the input for stateless pricing API. If the External Conditions are included then the results may vary.

Congratulations! You have successfully completed the tutorial. We hope that you find it useful and it helps you to start discovering our services.

In the example above, possible values of the characteristic are read at the end only from the knowledge base. List of possible values can change during runtime, therefore in a real world example possible values from configuration results must be considered.

In the example above, the sandbox environment of the API Hub is used with an API key when calling the services. In the productive environment, OAuth authentication with client credentials would be used.

In the example above, the configuration service is called without providing session context. For optimal performance and resource consumption, please ensure that the cookie retrieved with each configuration creation (implementation in the onInit event listener of the function in our example) is used when calling the other configuration service APIs for the same configuration session (functions onChange, readKB, and getConfig in our example).

self.getView().getModel().setProperty("/cookie", this.getResponseHeader("set-cookie"));

xhr.setRequestHeader("Cookie", this.getView().getModel().getProperty("/cookie"));

Please read the development guide (https://help.sap.com/viewer/p/SAP_VARIANT_CONFIGURATION_AND_PRICING) for more information about how to use the services.