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 :-

Capture.PNG

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.Capture.JPG
      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

To report this post you need to login first.

10 Comments

You must be Logged on to comment or reply to a post.

  1. Ramakrishna Potluri

    Thanks for sharing the extensibility concept on SRM UI Add-on !

    SRM UI Add-on has been receving great response from organizations across the globe for the quality of User Experience never seen before in SAP applications.

    Many customers would have enhanced the SRM shopping cart to suit their org requirements and this blogs helps them in enabling these enhancements in this HTML5  application also.

    (0) 
  2. Kaustubh Mujumdar

    It is a well organised one stop for a user. Very well done. Now the usability will decide the flight ! Assessing at our client, 4 weeks unable to get the UI page up runnning…We will be there…keep following for more assessing results.

    (0) 
  3. Kaustubh Mujumdar

    Overall the product release could have been better. Installing and getting the application operate and churn is very bumpy. Rollout could have been more healthier. Its been 5 weeks and interest seems to die out, evaluating the ADD ON

    (0) 
    1. Anuj Goyal Post author

      Hi Kaustubh,

      Thanks for sharing this feedback, I would assure you that with next SP , which would be SP03 of UI ADD on it would be better.

      Regards

      Anuj

      (0) 
  4. Daniel Joubert

    thanks for this.  very usefull one.  We are on SRM 70 classic scenario with new ui add on.  We would like to add a field in the sc item level to captur additional info.  We followed the extensibility cook book.  It works when for the old (standard ) SRM ui.  But for the new ui add on we get error message error ‘Property ZZLVA is invalid’..  Its like it does not recognize our new zzlva field.  there might be a step missing in there for the new ui.  Your tips and comments are welcome.

    (0) 
    1. Anuj Goyal Post author

      Hi Daniel,

      this happens when ODATA metadata doesn’t get the new property in its XML,

      you need to do either :-

      1) cache cleanup

      2) make sure the field is added in corresponding data structure, also make sure same name fields is not added twice,

      Reach out to me for more doubts here.

      Regards

      Anuj

      (0) 
  5. Ansuman Parhi

    Hello,

    We have a requirement to add “email id” field in result table of user search for shop on behalf of link. Since field is not available in odata model, we have created a new odata service for the same. But it is affecting performance. Can anybody advise us on this.

    We have added 4 new fields to more details page of shopping cart item as per guides in extension cook book. But for this requirement we are not able to crack.

    Thanks

    Ansuman

    (0) 
  6. Arunkumar Balakrishnan

    Hi All,

    I am new to SRM UI5 Addon. I am having a requirement to add a dropdown field for a company code for limit shopping cart at item level in SRM UI5 add-on. Also some values needs to populated in the added dropdown from the user attributes. Please explain in detail how to achieve this.

    Suppose if I am adding a dropdown field through SPRO settings as you mentioned in the first point, where to do the validation to populate the dropdown ? I don’t have a knowledge in BSP and Java side. Is this requirement can be met with Webdynpro ABAP  knowledge itself ?

    This is very urgent requirement. Please help me to complete this.

    Regards,

    Arunkumar B.

    (0) 

Leave a Reply