Extensibility in SAP SRM User Interface Addon 1.0

SAP SRM User Interface Add-on 1.0 is one of the first few transactional applications by SAP which is built over HTML5 and ODATA technology, Application is built to cater needs of a casual and semi-professional user while creating shopping carts in SRM.

Application contains many HTML5 views and it is built in a way that user can easily search for items and add to cart and order, but also in case if some users they need to get into details of line items than application offers a possibility to go into details . As application contains many views so there was a need of strong extensibility framework which could be used by customers to address their specific business needs.

Extensibility in SAP SRM User Interface Add-on 1.0 is offered in two ways:-

1. Adding custom fields to views using Abap SPRO customizing which doesn’t need any JavaScript/ CSS skills , these fields are mapped to views and they work automatically if they are working correctly in old webdynpro UI’s,  In this case very minimal coding in Abap may be needed in very few cases.

Controls which could be added with this approach are

1. Checkbox
2. Dropdown
3. Texfield ( aka Inputfield)
4. Textview

To maintain customizing you need to follow SPRO path: SAP Supplier Relationship Management–>SAP SRM User Interface Addon 1.0 –>Extension and field Control–>Configure extension and Field Controls

Here you will see a dialog structure like this :-

To give some brief information here,

1. First level Views/Service mapping: – here a mapping between a UI5 view and ODATA service is maintained, this customizing is pre-delivered by SAP, please check client 000 where all customizing data is installed by default, customers may need to cascade this to your dev/test client.
2. Second level is Field Definition: – here customer need to define new controls at view level and need to specify details like ODATA binding element, control type, text etc, here one field which is very important is “Include field in model”, if this checkbox is selected than ODATA service is enhanced and element is added as property , Please check ODATA service and if this property is already part of ODATA entity than do not check this checkbox.
3. Search Help field mapping :- this feature would be available with SP03 of UI add-on, customer can specify a elementary search help against input field in step 2  and in this step customer need to specify mapping between ODATA property and search help parameters, please note that only elementary search help would be supported here.

• Please do not forget to clear ODATA cache by transaction /IWFND/CACHE_CLEANUP and /IWBEP/CACHE_CLEANUP.

• Please see Extensibility cookbook published in  SAP Service Market place for more details .

   2. Another Extensibility approach which is very useful is Custom JS/CSS approach, here customer can write their own JavaScript/CSS files and they can inject this code into standard application by help of simple ABAP customizing, here consultants should have JavaScript/CSS knowledge, this is a very useful for branding of application, changing complete look and feel, adding new views, hiding controls, this extensibility feature is very strong in itself  and it opens application completely to consultants to enhance it. This feature should be used carefully.

          Application continuously looks for following external hooks; It is expected to write custom code within scope of these functions.

• CUSTOM_POST_EXIT
• CUSTOM_PRE_EXIT

          Here are some steps which need to be followed to achieve this

1. Create a local BSP application and add some page fragments like custom.js and styles.css in this local BSP.
2. Add BSP pages path in SPRO customizing: – SAP Supplier Relationship management–>SAP SRM User Interface Add-on 1.0->Extension and field Controls-> Maintain Custom file path, please maintain relative path in case if you want to transport this entry to test systems.

1. Create hook methods with name CUSTOM_POST_EXIT and CUSTOM_PRE_EXIT in custom.js file, application continuously calls these hook methods and user has possibility of accessing any control in application wither using Jquery or using SAPUI5 method sap.ui.getCore().byId(“controlId”)  and methods from UI5 could be called, you can check UI5 library to see methods.

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

          if (sap.ui.getCore().byId(‘searchPC’)) {

                sap.ui.getCore().byId(‘searchPC’).setVisible(false);

                sap.ui.getCore().byId(‘searchPCDesc’).setVisible(false);

           }

           } .

          As explained customer can create multiple files and specify path in SPRO, Please note that either you keep a single implementation of           CUSTOM_POST_EXIT and CUSTOM_PRE_EXIT and route calls to various methods which are placed in different custom BSP pages or if you have a use           case where you need to have multiple implementation of these methods then you need to use prototype property in JavaScript and implementation need           to change little bit like this :-

        CUSTOM3 = function ()

//with same name as the file name
}

CUSTOM3.prototype.CUSTOM_POST_EXIT = function(methodName, view, controller, methodSignature){
if (sap.ui.getCore().byId(‘searchPC’)) {
sap.ui.getCore().byId(‘searchPC’).setVisible(false);
sap.ui.getCore().byId(‘searchPCDesc’).setVisible(false);
}
}

Note: – Please ensure that object name here CUSTOM3 is name of BSP page fragment.

• We will publish a cookbook for this type of extensibility , meanwhile you can reach us for a draft version. Please write at anuj.goyal@sap.com

Feedback/suggestions/questions are welcome

Anuj Goyal

anuj.goyal@sap.com