As described in an earlier blog post, we implemented the new SAP UI5 based SRM UI at one of our customers. Following up on this, we want get more into the implementation details with this post and show more of how we created the custom user interface.

 The SAP SRM New UI Client Application framework (henceforth called Application Controller or AppController) is providing two JavaScript Exit methods:

• CUSTOM_PRE_EXIT
• CUSTOM_POST_EXIT

These exit methods are always called on various operations like:

•  onDataModelLoaded – When entity data is loaded after a OData ‘GET’ call
  Refresh – When a OData ‘POST’ or ‘PUT’ call is successfully executed
• onProcessEvent – When an AppController event is started

Both exit methods have same parameters:

• CUSTOM_PRE_EXIT(methodName, view, controller, methodSignature)
• CUSTOM_POST_EXIT(methodName, view, controller, methodSignature)

These methods can be used for example to display additional fields in a View after data is retrieved from a Gateway call. In the CUSTOM_POST_EXIT method you could write the JavaScript code to add new fields to the existing UI5 View.

In this case the parameters of Exit methods would be:

• methodName = ‘onDataModelLoaded’
• view and controller = the SAPUI5 view and Controller names
• methodSignature would contain the data that has been loaded from the Gateway call.

Now since you have the data, instance of the view and controller it’s easy to add new fields to the view.

Here is a gerneric example:

function CUSTOM_POST_EXIT(methodName, view, controller, methodSignature)
{
  if ( methodName == "onDataModelLoaded" && controller.oView.sId == "XXXX" )
  {
    //Create required SAPUI5 controls and add to the view.
  }
}

Now let's say we want to add the requestor name to the mini cart. This is the view in standard:

The code below shows now how to add the requestor name to the Mini Cart:

function CUSTOM_POST_EXIT(methodName, view, controller, methodSignature) {

  //If the method is onDataModelLoaded and the view is Mini Cart
  if ( methodName == "onDataModelLoaded" controller.parent.oView.sId == "wi_common_miniSC" )
  {
    //Get the instance of the MatrixLayout in the Mini Cart
    var oViewMLayout = controller.parent.oView.getContent()[0];
    var reqName = methodSignature.data.REQUESTOR;

    //Create the Elements
    var oCustomCell = new sap.ui.commons.layout.MatrixLayoutCell();
    var oRequestorLabel = new sap.ui.commons.TextView({text:'Requestor:'});
    var oRequestorName = new sap.ui.commons.TextView({text:reqName});

    oCustomCell.addContent(oRequestorLabel);
    oCustomCell.addContent(oRequestorName);

    //Create a new Row and add the custom controls to it
    oViewMLayout.createRow(oCustomCell);
  }
}
And this is how the cart looks like after we implemented the EXIT:

You could as well create new SAPUI5 Views or insert new content to the Shell Controller of the application.

Below you will find a code snippet that shows how to remove all the Standard content and how to add custom SAPUI5 views to the application:

function CUSTOM_POST_EXIT(methodName, view, controller, methodSignature){
  var workSetItem = Appcc.oShell.getWorksetItems()[0];
  //Renaming the first menu item
  workSetItem.getSubItems()[0].mProperties.text = 'MY COMPANY';

  //Removing all other Work Items
  var j = workSetItem.getSubItems().length;
  for (var i = 1; i < j; i++) {
    workSetItem.removeSubItem(workSetItem.getSubItems()[1]);
  }
  //create the new instance of the JS view you need to add the application
  //this is a SAPUI5 JS view in your BSP application
  homeView = sap.ui.view({
    id: "home_view",
    viewName: "custom.homeView",
    type: sap.ui.core.mvc.ViewType.JS
  });
  //Set the Custom View as the Shell Content.
  Appcc.oShell.setContent(homeView);

  //Refresh the content
  Appcc.oShell.rerender();
}

This shows the structure of the BSP Application with the homeView:

The homeView.js here would be a SAPUI5 JavaScript View with the following content:

sap.ui.jsview("custom.homeView", {
  getControllerName: function () {
    return " custom.homeView";
  },
  createContent: function (oController) {
    var oML_homepage = new sap.ui.commons.layout.MatrixLayout("homepage", {columns: 2}).addStyleClass("homepage");
    var oRow_hvh0 = new sap.ui.commons.layout.MatrixLayoutRow("rowHvh0");
    var oCell_hvh1 = new sap.ui.commons.layout.MatrixLayoutCell("cellHvh0
", {colspan: 1});

    var oImage = new sap.ui.commons.Image();
    oImage.setSrc("images/msc-mobile-logo.png");
    oCell_hvh1.addContent(oImage);
    oRow_hvh0.addCell(oCell_hvh1);
    oML_homepage_views_holder.addRow(oRow_hvh0);
    return oML_homepage_views_holder; }
});

With this the Application would look like this:

Similarly you could write custom code for each POST/PUT/DELETE operation as the Custom Exit methods would be called here as well.

Now since we know how we can add custom fields or add new JavaScript Views to the Application, now let’s see how and where should we add our CUSTOM_*_EXIT methods.

First you need to create a BSP Application and add Pages with Flow Logic which should contain a JavaScript file. In this JavaScript file you would write your CUSTOM_PRE_EXIT or CUSTOM_POST_EXIT methods.

Now once the BSP application is created and activated, you need to add the path of your custom JavaScript file (custom_srm.js in this case) in SPRO customizing. The Appcontroller would pick this information and load the custom_srm.js when the SAP SRM UI Application is loaded.

SPRO - Maintain Custom File Path

As you see in the above example you can add custom CSS files as well. With this you can control the styling of the whole application by overriding the standard SAP style classes.

The SAP UI5 based SRM user interface offers extension options to change the content of dialogs, add new dialogs and it allows to add a custom styling to the UI.