Skip to Content
Technical Articles

SAPUI5 TPM Solution UX/UI enhancement

User experience is the overall experience of a person using a product such as a website or a computer application, especially in terms of how easy or pleasing it is to use.

User Interface is the means by which the user and a computer system interact, in particular, the use of input devices and software.

While using CRM 7.0 Trade Promotion Management Solution delivered by SAP our clients were not satisfied with the User Experience. They said that for implementing simple things they need to navigate between many screens. So they asked us to improve its UX keeping in mind that the UI should also look appealing.

So you might come across many such scenarios, and for reference, I will walk you through a generalized scenario; where you will be able to understand how to analyze the code and enhance it with your components, functions, and style.

Pre-Requisites

Should have a basic understanding of Javascript, HTML, and CSS.

Target Audience

Beginner’s in SAPUI5 development.

Scenario

This is a hypothetical need and not the business requirement.

Suppose we have to load business partners list in the combo box in the Detailed Promotion home screen of the SAPUI5 TPM solution.

Currently, if you want to see the list of business partners then it could be found after the following 7 steps.

  1. Open Detailed Trade Promotion in CRM.
  2. Click on the Admin Button on the General Data Panel.
  3. Scroll down and Expand the parties involved panel.
  4. Click on the plus button to create a new entry in the table.
  5. Click on the value help button of the “Name” column in the created entry.
  6. A Dialog Box will open, press on the apply button.
  7. A list of business partners will be loaded.

We will be analyzing our code and finding how it is retrieved there and will use those functions to load data in the combo box in the home screen of the detailed trade promotion. This will reduce the numeric navigation steps as the user will be able to see the list on the home screen. This will lead to pleasant user experience, with the enhancement of the user interface.

You will be learning

  1. Retrieving the code in eclipse studio.
  2. Inspecting code in Google Chrome to find how the business partners are fetched currently. So that we will be reusing the optimized code.
  3. Creating a required fragment and controller. (Creation of sapui5 project in eclipse, deploying it on SAP ABAP Repository and  UI Extensions configurations are not covered here. That will be in separate blogs.)
  4. Styling Using JQuery

Retrieving the code in eclipse studio

To retrieve the SAPUI5 application project from the SAPUI5 repository, proceed as follows:

  1. Create a generic project in Eclipse: Choose New Project General Project . Enter the same name that is used for the SAPUI5BSP application artifact in the ABAP system. Choose Finish.
  2. Share the SAPUI5 application project with Team Provider by choosing the existing BSP application “/JBPC/UI5_MAIN”.
  3. Synchronize the SAPUI5 application project as follows: In the context menu of the selected project, choose   Team Retrieve . Next, choose Select All to select the conflicting files as well.
  4. Choose Finish.
  5. You will be able to see the following files.

Application-project-related files have been retrieved from the SAPUI5 Repository.

Inspecting code in Google Chrome

  • Login to CRM in google chrome.

  • Select a business role:  /JBPC/KAM – CBP: Key Account Manager
  • Navigate to

  • Go to Plan and create a new detailed Promotion.

  • As you have already navigated through the scenario. Let’s find the corresponding view in eclipse.
  • Press CTRL + SHIFT + I to open Inspect tool of chrome. Go to the Elements Tab.
  • Click    on highlighted button.
  • Click on the Admin button. And see the highlighted code in the elements tab of the chrome.

  • Copy id of span: here the id is a combination of the id of view and parent span. You will select one of them. Here we will be coping idAdminAreaHeader.
  • Find the element with this id in the Detailed Promotion view in eclipse.

  • Goto the controller and find the method handleMoreButtonPress which is called on press event of admin button.

  • This function is calling a handleShowAdminUi function which sets the Admin View visible.

  • Find the above id in the view. “idAdminAreaContainer”

  • Proceed to add a row in the parties involved panel of Admin Area

  • Click on the F4 Help of the Name Field. “getNameValueHelpDialog”   function is called which calls a fragment “BusinessPartnerSearch”.

  • Open the Fragment

  • We have to search for the Apply button because on click on this button business partner are loaded.

  • Find “handleApplyFiltersToTable” method in the admin controller.

  • In this method, it is calling an ICF method to retrieve the business partners with the filters.

So we will ignore the filter part for now and extract the ICF name and code to call it to extract business partners

Extract Create Url code

var u = app.getPromoServiceUrl();

     u = util.getUrlParts(u);

     u.controllerID = u.controllerID + “_701_PROMO_PARTIESINVOLVED”

Then extract calling code to get the array of business partners.

app.biData.biComm.sendRequest([{

       name: ‘SEARCH_PARTNER’,

       params: s

     }], u.url, u.controllerID, u.xsrfToken, this.getPartnerDataFromIcf, this);

Here in this function, it is returning the array to the callback function getPartnerDataFromIcf

So we will replace this callback function with our own custom function.

Now that we know how we are going to fetch the business partner lets start with the view and controller extension.

Create an application in eclipse

You will have to create a sapui5 project in eclipse in which you will be creating the below fragment and controller. And then deploying it on the ABAP System. After deployment, you will be configuring the UI Extension Points in the SPRO.

View Extension

Create a fragment with any name you like; in eclipse studio project, add a combo box for Business Partners.

DetailePromoExtention.fragment.js

<core:FragmentDefinition   xmlns:core="sap.ui.core" xmlns="sap.m" >
   <HBox class="sapUiTinyMarginBegin customBackground">         
      <Label width="200px" text="Business Partners"></Label>         
      <ComboBox class="sapUiTinyMarginBegin" id="myPartyInvolved" />
   </HBox>
</core:FragmentDefinition>

Here we have also added a CSS class for which we will be styling using JQuery.

Controller Extension

Create a controller with any name, here our controller name is “com.company.sapui5.DetailePromoExtention”

sap.ui.controller("com.company.sapui5.DetailePromoExtention", {     
        onBeforeRendering : function(){  //Loading Business Partners       
               var u = app.getPromoServiceUrl();      
                   u = util.getUrlParts(u);      
                   u.controllerID = u.controllerID + "_701_PROMO_PARTIESINVOLVED";       
               app.biData.biComm.sendRequest([{       
                             name: 'SEARCH_PARTNER'      
                 }], u.url, u.controllerID, u.xsrfToken, this.getPartiesFilterDataFromIcf, this);
                 //Call the styling function
               this.customStyle();   
         },  
        businessPartners : new sap.ui.model.json.JSONModel(),
        getPartiesFilterDataFromIcf:function(j){      
            app.setBlockInput(sap.crm.mkt.cbp.lib.commons.util.Constants.busyIndicator.BI, false);       
            try {        
                     if (j !== "") {           
                         app.partiesInvolvedData.addBusinessPartnerSearchResultstoModel(j);           
                         var d = JSON.parse(j);          
                         this.businessPartners.setData(d.data);          
                         var myPartyInvolved= this.byId("myPartyInvolved");          
                         var oItemSelectTemplate = new sap.ui.core.Item({
                              "key" : "{BP_NUMBER}",                                     
                               "text" : "{BP_NUMBER}"});           
                         myPartyInvolved.setModel(this.businessPartners);            
                         myPartyInvolved.bindAggregation("items", "/", oItemSelectTemplate);        
                     }      
               } catch (e) {         
           app.setBlockInput(sap.crm.mkt.cbp.lib.commons.util.Constants.busyIndicator.BI, false);             jQuery.sap.log.error("Invalid JSON data received because " + e);        
            return false;      
             }  
         },                  
      /* Styling
             Create an inline style tag, and add the styles for the css class
              Append the style to the head of the Document using JQuery                
       */ 
        customStyle: function(){            
           $("<style type='text/css'> .customBackground{ background: #ffffff !important; margin-bottom:15px; padding: 10px; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); transition: 0.3s; border-radius: 5px;} </style>").appendTo("head");
        } 
    });

 

Here we are using a lifecycle method onBeforeRender which is called every time before rendering of an element in the DOM.

In this method, we are calling the Icf to fetch the data from the backend and passing it to our call back function  “getPartiesFilterDataFromIcf”

getPartiesFilterDataFromIcf: This function set the received data in the global business partner model, and then sets the model and aggregations for the combo box added in the fragment.

Now our controller and fragment are ready and you can deploy it on the ABAP System and configure the extension point to see the result.

Maintain the UI Extension configurations as follows:

Tcode SPRO Customer Relationship Management  TradeManagement 

GeneralSettings UI Extention 

  •  Maintain Extention Namespace :
    • Ext Namespace:  com.company.sapui5
    • Ext. Path:   ../../sap/appname/extention_foldername

Note: “extention_foldername” is a folder inside Web content folder. If you have placed your                           files inside this folder then only mention the folder name.

  •   Define View Extension Point
    • Ext. View Name: sap.crm.mkt.cbp.lib.commons.view.tma.DetailedPromotion
    • Ext. Point Name: extDetailedPromoGenData
    • Ext. Fragment: com.company.sapui5.DetailePromoExtention
    • Extension Type: Fragment
    • Ext. File Type: XML
  •  Extend UI Controller
    • Controller Name: sap.crm.mkt.cbp.lib.commons.controller.tma.DetailedPromotion
    • Ext. Controller: com.company.sapui5.DetailePromoExtention

Output

Before seeing the changes you need to clear the client and server side cache.

  1. Tcode SMICM Goto HTTP Plug In  Server Cache Invalidate Globaly .
  2. Clear Browser cache.

Now login to CRM and check the output.

Sample Enhancements

  1. Selecting multiple tactics based on a specific objective.
  2. Load Parties Involved based on the selected customers. And Choose rebate recipient if rebate trade spends are configured.
  3. Customer Plan Number

Thank you for reading!!

 

Be the first to leave a comment
You must be Logged on to comment or reply to a post.