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.
- Open Detailed Trade Promotion in CRM.
- Click on the Admin Button on the General Data Panel.
- Scroll down and Expand the parties involved panel.
- Click on the plus button to create a new entry in the table.
- Click on the value help button of the “Name” column in the created entry.
- A Dialog Box will open, press on the apply button.
- 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
- Retrieving the code in eclipse studio.
- Inspecting code in Google Chrome to find how the business partners are fetched currently. So that we will be reusing the optimized code.
- 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.)
- Styling Using JQuery
Retrieving the code in eclipse studio
To retrieve the SAPUI5 application project from the SAPUI5 repository, proceed as follows:
- 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. - Share the SAPUI5 application project with Team Provider by choosing the existing BSP application “/JBPC/UI5_MAIN”.
- 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.
- Choose Finish.
- 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.
- Tcode SMICM Goto HTTP Plug In Server Cache Invalidate Globaly .
- Clear Browser cache.
Now login to CRM and check the output.
Sample Enhancements
- Selecting multiple tactics based on a specific objective.
- Load Parties Involved based on the selected customers. And Choose rebate recipient if rebate trade spends are configured.
- Customer Plan Number
Thank you for reading!!
- SAP Managed Tags:
12 Comments
