Hi Folks,

Picking up from my last post about UI modifications I went further and tried modifying the out of the box Fiori App to create Sales Orders.

In this post we will talk about and see how to modify an existing standard app to meet the custom needs.

Although this has been discussed in some of the previous posts from other Authors on SAP Developer forum, I thought it would be a good idea to discuss, since I could not locate any example where there was data creation scenario was involved.

Most of the posts I could find were about making extensions for extending the model structure, and populating the details via a BADI.

But since my problem could not be solved by either, I had to extend the standard Odata Service and rewrite some methods. Let’s explore WHY?

Problem Statement:

The sales order creation app (SD_SO_CRE) delivered by SAP in the role Sales Rep looks like following.

https://www.sapfioritrial.com/sites?helpset=trial&sap-client=001#SalesOrder-create

When you try creating an order with the app, you have to follow steps like adding products to the cart, review the order, review shipping and then finally place the order.

Out of all these processes our concern was to enter the Ship-To Address manually which is not possible with the standard version delivered.

 

The screen for Ship To party review looks like below:

Our requirement is to enable the above screen to input address details such as Address, City, and State etc. and allow the user to create an order with this address.

Observations for making this change:

Usually while making such change the process is to analyze the options both on UI5 and Odata end of the application.

When I observed the UI5 part of the application I could locate some existing structures in which I can pass these details back to Odata.

I followed the same Extensibility Pane for modifications and figured out the following two Views and controllers which need modifications in order to make this change:

The Odata service used here is SRA017_SALESORDER_CREATE. The DPC_Extension class (Data Provider for the odata) has a method called SALESORDER_CREATE_DEEP_ENTITY. This method is responsible creating the sales order at the final step when we place the order from the UI5 application.

Challenge:

I observed there is no BADI available for making sure the values passed from the UI5 application are processed properly in order to use them as partner address for Ship-To.

Unfortunately this particular method does not provide any extension such as a BADI call, for making sure the values passed from the UI5 application are processed properly in order to use them as partner address for Ship-To.

A BADI call is not there which can be implemented to fork the existing way of creating an order. That’s exactly what our challenge was.

Solution:

The solution to this problem is divided in three main parts:

  1. Modifications to the UI5 app by extending the standard app SD_SO_CRE.
  2. Extending the standard Odata Service SRA017_SALESORDER_CREATE, to enable redefinition of the method SALESORDER_CREATE_DEEP_ENTITY in the subclass.
  3. Register the new Odata Service with the UI5 extended app.

Let us now look at the solution in detail:

  1. Modifications to the UI5 app by extending the standard app SD_SO_CRE.

As figured out we have following files for making modifications to allow the address fields for inputs and submit the order by putting the values in the right structures before it’s sent out to backend Odata service.

  • Make the following modifications to the extended version of the view SalesOrderCartDetailsCustom.view.xml

Old code:

New Code:

  • Make sure the controller for this view SalesOrderCartDetailsCustom.view.xml handles the input by user and updates the model with relevant details. For this we will modify the file SalesORderCartDtailsCustom.controller.js.

 

  • Finally we need to pull the values from the model and put it in the right structure before the function call sends the data back to the odata service.
  • We modify the controller for the final step which is SalesOrderReviewCartCustom.controller.js.

 

  • 2. Extending the standard Odata Service SRA017_SALESORDER_CREATE, to enable redefinition of the method SALESORDER_CREATE_DEEP_ENTITY in the subclass.

As we are done with the UI5 part now is the time for getting those values and put those into right structures before order creation happens.

  • https://wiki.scn.sap.com/wiki/display/Fiori/SAP+Fiori+-+ExtensibilitySo I created an extension of the Odata Service named ZSRA017_SALESORDER_CR based on the model of the standard OData service.
  • For this we need to create an extension of the standard OData service SRA017_SALESORDER_CREATE. How to do that? Well, plenty material available on the link below which will come handy:
  • I redefined the method SALESORDER_CREATE_DEEP_ENTITY to write my code:
  • Finally the code, all I am doing here is to pass the values we get from the UI5 app to the relevant structure before the BAPI call for order creation takes place.One quick note, when we extend any method it will be empty you can either write a fresh code here, or copy from the Super Class method. It’s a good practice to execute your custom code only based on the custom requirements. For anything else like a standard scenario I would recommend the call to the Super class version of the method like below:*TRY.
    *CALL METHOD SUPER->SALESORDER_CREATE_DEEP_ENTITY
    *  EXPORTING
    *    LS_SALESORDER   = ls_salesorder
    *    IT_KEY_TAB             = it_key_tab
    *    IV_ENTITY_NAME   = iv_entity_name
    *  IMPORTING
    *    ER_DEEP_ENTITY   = er_deep_entity
    *    ES_SALESORDER   = es_salesorder
    *    .
    * CATCH /IWBEP/CX_MGW_BUSI_EXCEPTION .
    * CATCH /IWBEP/CX_MGW_TECH_EXCEPTION .
    *ENDTRY. 

    This approach will ensure the application works with the standard code when there is not custom requirement involved.

     

    Once you are done with this you need to activate and publish this Odata service to the Gateway. You know what I mean right? Or follow the tutorials to do so on the wiki page mentioned above.

    3. Register the new Odata Service with the UI5 extended app.

  • As a final piece in the puzzle we need to make sure our custom UI5 app version is pointed to the custom version of the Odata service. To achieve this we can follow the steps mentioned in the steps below:
    Select the custom app in the workspace and rightclick on the main folder-> Select New-> Extension.
  • Follow the steps clicking next until you reach a step Extension Selection, here chose Replace Service.In the next step select the Odata Service from backend:And that’s it!

     

    Now if you look at the output it the screens allow editing:

When you place an order the order has the custom Ship-To address.

Thanks for reading, and I look forward to your replies, responses, and criticism too. Hope it helps in someway to a fellow developer like me. Will keep sharing whatever I learn that was hard hard to find online.

-Samir Kulkarni

To report this post you need to login first.

2 Comments

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

Leave a Reply