Adding custom fields to promotion details UI5 screen in Trade Management solution
This blog explains the steps needed to add a custom field to trade promotions in the new Trade management solution based on UI5 screens. This exploration is based on TM 3.0 FP02 feature pack and i would request you to refer to the latest extension framework document from the below link for the version of the solution installed in your server,
We will be creating a new custom field for eg. ‘Linked Promotion’ under the ‘General Data’ section as shown below.
The field will be added to the promotion details screen – 7.0.1 in Virtual View Framework.
Creating the custom field and configuring the Virtual View Framework
Create the custom field ZZ_PROM from the old trade promotion UI using AET tool under HEADER object part of trade promotion.
AET SAP help – https://help.sap.com/viewer/62055d1ef81d43f3aa41473061d86046/7.0.4.06/en-US/20b0f4f819e844df9f47bc9c70c795f4.html
Adding the newly created field in the Virtual View Framework customizing
SPRO Path: CRM->Trade Management->General Settings ->System Settings->Maintain Virtual View framework Customizing.
Click on “Maintain Virtual Screens” in the dialog structure and select screen 7.0.1
Select “Maintain Logical Context Nodes” and select TRADE
Select “Map Logical Context Node Attributes” and add the above created custom field.
Click on “Maintain Virtual Views” and select “GENERAL_DATA” virtual view
Click on “Select Context Nodes Used” and select “Trade” context node.
Add the newly created custom attribute under “Select Context Node Attributes Used” section.
Adding the custom attribute to the trade promotion UI5 configuration
SPRO Path: CRM ->Trade Management -> Trade Promotion Planning and Management -> Trade Promotion Planning -> UI Configuration -> Define UI Configuration
Add the attribute to the standard ‘GEND’ profile.
Select screen 7.0.1
Select 701_GENERAL_DATA virtual view usage
We will already see ZZ_PROM field in this configuration. Check ‘Display’ and ‘Editable’ check boxes to enable it for display in the UI5 screen and mention a unique UI position in sequence.
To add new extensions in UI5 screens, refer to the below extension guide below to complete the initial setup on how to create SAPUI5 project and how to perform the deployment of custom UI5 app into backend server
Find the View Extension Point
We would need to find the extension point for the general data section in 7.0.1 screen from the extension guide.
In our case it is “extDetailedPromoGenData” extension point under standard view sap.crm.mkt.cbp.lib.commons.view.tma.DetailedPromotion as shown below.
Sample Fragment Code Snippet
Create a fragment under the custom SAPUI5 project and add the custom field ‘Linked Promotion’.
The custom fields added in customization will be available in SAPUI5 model ‘tradeModel’ which can be used to populate the data in the text box.
Sample Controller Code Snippet
You can refer to the below code to set the value entered in the Linked Promotion custom field.
Deploy the UI5 project as a BSP application
Once the project is ready, you can deploy it as a BSP application in the backend server. Please refer to the extensions guide for the same. Below is a snapshot of the deployed application with the view and controller.
UI5 extension configuration
SPRO Path: CRM ->Trade Management -> General Settings->UI Extension
Maintain the namespace maintained in the UI5 custom application.
Map the fragment to the extension corresponding to the general data section of the promotion details screen 7.0.1
Add an entry to register the controller extension
This completes the configuration and development steps needed for adding a custom field in the promotion details UI5 screen to display data.
Hope, this would be a starting point for doing extensions in trade management solution and further exploration.
Very nice and has all the steps to implement in customer projects. Thanks.
Hi Natesh Ramasamy,
I've tried to import the same application in SAP Web IDE. Am not able to extend the application. Even I cant run the application in SAP WEB IDE itself. Kindly help me.