Download pdf - Extensibility-Customer CookBook SP04 1

SAP

SAP SRM Add-On 1.0 Extensibility Cookbook

2/21/2014

Copyright 2013 SAP AG or an SAP affiliate company. All rights reserved.

No part of this publication may be reproduced or transmitted in any form or for any purpose without the express

permission of SAP AG. The information contained herein may be changed without prior notice.

Some software products marketed by SAP AG and its distributors contain proprietary software components of other

software vendors.

Adobe, the Adobe logo, Acrobat, PostScript, and Reader are trademarks or registered trademarks of Adobe Systems

Incorporated in the United States and other countries.

Apple, App Store, FaceTime, iBooks, iPad, iPhone, iPhoto, iPod, iTunes, Multi-Touch, Objective-C, Retina, Safari, Siri,

and Xcode are trademarks or registered trademarks of Apple Inc.

Bluetooth is a registered trademark of Bluetooth SIG Inc.

Citrix, ICA, Program Neighborhood, MetaFrame now XenApp, WinFrame, VideoFrame, and MultiWin are trademarks or

registered trademarks of Citrix Systems Inc.

Computop is a registered trademark of Computop Wirtschaftsinformatik GmbH.

Edgar Online is a registered trademark of EDGAR Online Inc., an R.R. Donnelley & Sons Company.

Facebook, the Facebook and F logo, FB, Face, Poke, Wall, and 32665 are trademarks of Facebook.

Google App Engine, Google Apps, Google Checkout, Google Data API, Google Maps, Google Mobile Ads, Google Mobile

Updater, Google Mobile, Google Store, Google Sync, Google Updater, Google Voice, Google Mail, Gmail, YouTube,

Dalvik, and Android are trademarks or registered trademarks of Google Inc.

HP is a registered trademark of the Hewlett-Packard Development Company L.P.

HTML, XML, XHTML, and W3C are trademarks, registered trademarks, or claimed as generic terms by the

Massachusetts Institute of Technology (MIT), European Research Consortium for Informatics and Mathematics

(ERCIM), or Keio University.

IBM, DB2, DB2 Universal Database, System i, System i5, System p, System p5, System x, System z, System z10, z10,

z/VM, z/OS, OS/390, zEnterprise, PowerVM, Power Architecture, Power Systems, POWER7, POWER6+, POWER6,

POWER, PowerHA, pureScale, PowerPC, BladeCenter, System Storage, Storwize, XIV, GPFS, HACMP, RETAIN, DB2

Connect, RACF, Redbooks, OS/2, AIX, Intelligent Miner, WebSphere, Tivoli, Informix, and Smarter Planet are

trademarks or registered trademarks of IBM Corporation.

Microsoft, Windows, Excel, Outlook, PowerPoint, Silverlight, and Visual Studio are registered trademarks of Microsoft

Corporation.

INTERMEC is a registered trademark of Intermec Technologies Corporation.

IOS is a registered trademark of Cisco Systems Inc.

The Klout name and logos are trademarks of Klout Inc.

Linux is the registered trademark of Linus Torvalds in the United States and other countries.

Motorola is a registered trademark of Motorola Trademark Holdings LLC.

Mozilla and Firefox and their logos are registered trademarks of the Mozilla Foundation.

Novell and SUSE Linux Enterprise Server are registered trademarks of Novell Inc.

OpenText is a registered trademark of OpenText Corporation.

Oracle and Java are registered trademarks of Oracle and its affiliates.

QR Code is a registered trademark of Denso Wave Incorporated.

RIM, BlackBerry, BBM, BlackBerry Curve, BlackBerry Bold, BlackBerry Pearl, BlackBerry Torch, BlackBerry Storm,

BlackBerry Storm2, BlackBerry PlayBook, and BlackBerry AppWorld are trademarks or registered trademarks of

Research in Motion Limited.

SAVO is a registered trademark of The Savo Group Ltd.

The Skype name is a trademark of Skype or related entities.

Twitter and Tweet are trademarks or registered trademarks of Twitter.

UNIX, X/Open, OSF/1, and Motif are registered trademarks of the Open Group.

Wi-Fi is a registered trademark of Wi-Fi Alliance.

SAP, R/3, ABAP, BAPI, SAP NetWeaver, Duet, PartnerEdge, ByDesign, SAP BusinessObjects Explorer, StreamWork,

SAP HANA, the Business Objects logo, BusinessObjects, Crystal Reports, Crystal Decisions, Web Intelligence,

Xcelsius, Sybase, Adaptive Server, Adaptive Server Enterprise, iAnywhere, Sybase 365, SQL Anywhere, Crossgate,

B2B 360 and B2B 360 Services, m@gic EDDY, Ariba, the Ariba logo, Quadrem, b-process, Ariba Discovery,

SuccessFactors, Execution is the Difference, BizX Mobile Touchbase, It's time to love work again, SuccessFactors Jam

and BadAss SaaS, and other SAP products and services mentioned herein as well as their respective logos are

trademarks or registered trademarks of SAP AG in Germany or an SAP affiliate company.

All other product and service names mentioned are the trademarks of their respective companies. Data contained in

this document serves informational purposes only. National product specifications may vary.

These materials are subject to change without notice. These materials are provided by SAP AG and its affiliated

companies ("SAP Group") for informational purposes only, without representation or warranty of any kind, and SAP

Group shall not be liable for errors or omissions with respect to the materials. The only warranties for SAP Group

products and services are those that are set forth in the express warranty statements accompanying such products

and services, if any. Nothing herein should be construed as constituting an additional warranty.

Icons in Body Text

Icon Meaning

Caution

Example

Note

Recommendation

Syntax

Additional icons are used in SAP Library documentation to help you identify different types of information at a glance. For more information, see Help on Help General Information Classes and Information Classes for Business Information Warehouse on the first page of the any version of SAP Library.

Typographic Conventions

Type Style Description

Example text Words or characters quoted from the screen. These include field names, screen titles, pushbuttons labels, menu names, menu paths, and menu options.

Cross-references to other documentation.

Example text Emphasized words or phrases in body text, graphic titles, and table titles.

EXAMPLE TEXT Technical names of system objects. These include report names, program names, transaction codes, table names, and key concepts of a programming language when they are surrounded by body text, for example, SELECT and INCLUDE.

Example text Output on the screen. This includes file and directory names and their paths, messages, names of variables and parameters, source text, and names of installation, upgrade and database tools.

Example text Exact user entry. These are words or characters that you enter in the system exactly as they appear in the documentation.

Variable user entry. Angle brackets indicate that you replace these words and characters with appropriate entries to make entries in the system.

EXAMPLE TEXT Keys on the keyboard, for example, F2 or ENTER.

Table of Contents 1.0 Extensibility Overview ....................................................................................................................................................................... 5

2.0 Types of Extensibility ........................................................................................................................................................................ 6

2.1 Extending screens via SPRO configurations ............................................................................................................................ 6

2.1.1 Extending screens that support Metadata framework ................................................................................................... 6

2.1.2 Extending screens that does not support Metadata ..................................................................................................... 10

2.1.3 Extending entities in Default Settings .............................................................................................................................. 12

2.1.4 Enable Search Helps for Custom Fields (Available for SP03 onwards) .................................................................... 15

2.2 Extending screens using Pre Exit and Post Exit approach .................................................................................................. 16

2.2.1 General information ............................................................................................................................................................. 16

2.2.2 Preparation ............................................................................................................................................................................ 16

2.2.3 Examples ............................................................................................................................................................................... 18

2.3 Extending Screens using SPRO and Custom JS Pre Exit and Post Exit apporach ........................................................ 25

2.4 Generic BADI ................................................................................................................................................................................ 25

2.4.1 /SRMNXP/BD_ENHANCE_MODEL ............................................................................................................................................. 25

2.4.2 /SRMNXP/BD_CHANGE_DATA .................................................................................................................................................. 25

2.5 Extending other screens on the UI ........................................................................................................................................... 26

2.5.1 Extending Filter Categories ....................................................................................................................................................... 26

3.0 Theming ............................................................................................................................................................................................. 26

3.1 General Information ..................................................................................................................................................................... 26

Steps to load custom CSS/JS file .................................................................................................................................................. 26

3.3 Approaches ................................................................................................................................................................................... 26

Create a new style class in custom CSS file and add style to element via custom javascript ....................................... 26

Example 1 ......................................................................................................................................................................................... 26

Override existing style class in custom CSS ............................................................................................................................ 27

Example 1 ......................................................................................................................................................................................... 27

Example 2 ........................................................................................................................................................................................ 28

4.0 Additional Utilities and Transactions........................................................................................................................................... 28

5.0 Appendix ............................................................................................................................................................................................ 29

1.0 Extensibility Overview

The 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. The application is built to cater to the needs of casual and semi-professional users while creating shopping carts in SRM.

The 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. With this application, it is also possible to go to details, if the user needs detailed information. 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 four ways.

This document contains systematic procedures for system administrators and consultants to extend the existing screens on the User Interface (UI) provided by the SAP SRM User Interface Add-On 1.0 SP01. Using the Extensibility feature provided by the SAP SRM User Interface Add-On 1.0 SP01, you can extend the existing screens by

Adding new fields

Assigning validations for the new fields

Adding new field controls

This document divides the screens on the UI provided by SAP SRM User Interface Add-On 1.0 SP01 into the following:

Screens that support metadata framework like Item, Header, and Item details

Screens that do not support metadata framework like Cant find and Free text item

Screens like Users default data where additional BADI is used to set user context

2.0 Types of Extensibility

2.1 Extending screens via SPRO configurations

2.1.1 Extending screens that support Metadata framework This chapter guides describes the steps to add new fields to the screens on the UI, for which the entities do not

have metadata associated with them.

The entities, which support the metadata framework, are associated with the following screens provided by the

SAP SRM User Interface Add-On SP01:

Shopping Cart Item

Shopping Cart Item Basic Data

Shopping Cart Item Service & Delivery

Shopping Cart Item details

Note: Entities, in the namespace SRMNXP/SRMSHOPPING_CART have metadata associated with them.

Adding new fields and Metadata fields to structures

Adding new field to the CLL structure [optional step]

You can add the newly created fields to the include structure or skip this step if customer fields are already present. 1. Log on to your SAP system.

2. Enter the transaction SPRO.

3. Go to SAP Supplier Relationship Management Cross-Application Basic Settings Extensions and Field

Control (Personalization) Configure Customer Fields Define Customer fields on Item Level Append

for Customer Fields on Shopping Cart Item.

4. Enter the customizing, select Item Basic Data and add the new field.

5. Click Create Append.

6. Enter the Append Name in the customer namespace.

7. Enter a short description for the append structure.

8. Add a new component with the respective component type for the new field.

9. Save your entries and activate.

The new field is added to the include structure INCL_EEW_PD_ITE_CSF_SC.

Save new fields to database [optional] You can use this step, if you choose to save the new field to the database.


2. Go to Supplier Relationship Management SRM Server Cross Application Basic Settings

Extension and Field Controls (Personalization) Configure Customer Fields Define Customer Fields

on Item Level Append for Customer Cross-Document Item Database Fields.

3. Click Append Structure.

4. Enter the append name in the customer namespace.


6. Add a new component with respective component type for the new field.

Note: The name of the components added must be the same as the name of the component provided

in the append structure in the activity Append for Customer Fields on Shopping Cart Item.


Add fields to staging structures [mandatory] Add same fields to the staging structure in a same way as described above, please see appendix for

determining the staging structure name.

Add metadata for new field to include structure [Mandatory] Add Metadata fields as following for the new fields to the metadata structure, see appendix for determining the

metadata structure.

1. Enter the names for the components in this structure in the following format:

FieldName_V (visible property)

Note: FieldName is the component name provided in the append structure created in activity,

Append for Customer Fields on Shopping Cart Item.

FieldName_E (Enabled property)

FieldName_R (Required property)

2. Provide the component type as XFELD for all the metadata fields.

3. Save and activate the structure.

Details for item, header, and account assignment view

View Entity Name Staging

Structures

Customer

Include

Customer

Include for PD

and below

Cust-MD

Structure

Header.view

.js SRMShoppingCart

/SRMNXP/S_CUST

_HEADER

INCL_EEW_PD

_HEADER_CSF

_SC

INCL_EEW_PD_

HEADER_CSF

/SRMNXP/S_H

EADER_UI_MET

_CUST

ItemList.vie

w.js

SRMShoppingCartI

tem

/SRMNXP/S_CUST

_ITEM_LIST

INCL_EEW_PD

_ITEM_CSF_SC

INCL_EEW_PD_I

TEM_CSF

/SRMNXP/S_IT

EM_UI_MET_CU

ST

SingleItemD

etails.view.j

s

SRMShoppingCartI

temData

/SRMNXP/S_CUST

_ITM_BASIC_DATA

INCL_EEW_PD

_ITEM_CSF_SC

INCL_EEW_PD_I

TEM_CSF

/SRMNXP/S_IT

M_DETAILS_ME

T_CUST

AccountAss

ignment.vie

w.js

AccountAssignmen

t

/SRMNXP/S_CUST

_ACC_ASSIGN

INCL_EEW_PD

_ACC_CSF

INCL_EEW_PD_

ACC_CSF

/SRMNXP/S_A

CC_ASSIGN_ME

T_CUST

Create field in Maintenance View 1. Enter the transaction SPRO.

2. Go to SAP Supplier Relationship Management SAP SRM User Interface Add-on Extension and

Field Controls Configuration for Extension of Fields.

3. Create a new entry at first level or select delivered customizing , refer appendix.

4. Enter the definition for the field by entering the following data in the respective fields:

Field name

Enter a name for the new field.

Control type

Select a new control type.

Note: You can choose any of these control types: text view, input fields, checkbox, and drop-down.

Binding element

Click F4 and choose any existing field or a new field.

Include field in model

Select this check box, if the new field has to be included as a part of the model.

Note: You can include a field in the model only if the field property is not part of the model. See section

Check for the Field Property in a Model for user defaults.

Max length for field

Enter maximum length of the field.

Label text for field

Enter a title for the new field. This title appears as the field label on the UI.

Note: If you do not enter the label text for field and if the component type (data element) of the field

has a field label, this field label must be the label for the newly added field.

Note: If there is no field label for the component type of the newly added field, then the label for the

field should be of the format, viewkey_Field Name_L.

Tooltip for field

Enter an OTR text. This will be the tool tip for the newly added field.

5. To enable search help for the field, see section 2.1.4

6. Click Save.

Note: You can select an item from either the free text item, or catalog item, or item through search.

Check for field property in model 1. Enter the transaction /IWFND/MAINT_SERVICE.

The Activate and Maintain Services screen appears.

2. Select entry /SRMNXP/SRMSHOPPING_CART in the External Service Name column.

3. Click Explore Service.

The SAP NetWeaver Gateway: Service Explorer screen appears.

4. In the Scenario section, select the Get Service Metadata radio button.

5. Execute.

The HTTP Response file appears.

6. Check the properties under the Entity Type Name, SRMShoppingCartItemData in the HTTP response.

The properties available under the selected entity are the properties available in the model.

Clear SAP NetWeaver Gateway Cache You can clear cache from two different places using the customizing, as mentioned below:


2. Go to SAP Web Application Server -> Gateway Service Enablement -> Backend OData Channel ->

Support Utilities -> Clear Cache.

The Cleanup of Model Cache screen appears.

3. Select the Cleanup Cache for all Models checkbox.

4. Execute.

5. Go to SAP Implementation Guide SAP Web Application Server Gateway OData Channel ->

Administration -> Cache Settings -> Metadata -> Clear Cache.


6. Select and enter the model in the Model Identifier field or select the Cleanup Cache for all Models

checkbox.

7. Execute.

The system clears the cache from the specified model.

Check for field in existing model To include a field into the model, proceed as follows:

1. Check if the field is not part of the properties in the above HTTP response, as mentioned in the section

Check for the Field property in the Model.

2. Perform step 4 in the section Create the Field in Maintenance View.

Note: The newly added field is bound to an existing binding element or to the one created in the include

structure.

3. Select the Include field in model checkbox.

4. Clear Cache as mentioned in section Clear SAP NetWeaver Gateway Cache.

Modify value in More Details Screen [optional] To add a new field to the Item More details screen, proceed as mentioned in section 1:

1. Enter the transaction se61.

2. Enter the BAdI method BBP_DOC_CHANGE_BADI and change the values of the newly added fields.

If you are extending the Item structure in the Cant Find screen, in order to persist value in the database in the

follow-on screen, for example, Item List and Item Basic Data, you have to extend Item structure in the next

screen also.

2.1.2 Extending screens that does not support Metadata This chapter helps you to add new or existing fields from the structure to the screens on the UI. This chapter

deals with screens for which the entities do not have metadata associated with them.

The entities, which support the metadata framework, are associated with the following screens provided by the

SAP SRM User Interface Add-On:

Cant Find

Free text item

Search Results screen

Note: Entities in the namespace /SRMNXP/SHOPPING_CART have metadata associated with them.

The following procedure provides detailed information to extend the UI associated with entities that are not

associated with metadata. The following procedures use the example of extending the Cant Find screen:

Add new field to Include Structure Using this step, you can include new fields to the structure.

1. Log on to your SAP system.

2. Enter the transaction SE11.

3. Select the Data type radio button.

4. Enter the structure /SRMNXP/S_SC_ITEM in the Data type field.

5. Click Display.

The Dictionary: Maintain Structure screen appears.

6. Click the Display Change icon.

7. Select Edit Include Insert.

The Insert Include dialog box appears.

8. Enter /SRMNXP/INCL_CUS_MINISC_ITM in the Structure field and select.

The included structure appears under the Component column of the Dictionary: Maintain Structure of

the selected structure.

9. Save the changes.

To extend other screens, repeat the above steps using the information provided in the following table:

Screen Data Type Structure

Search Results /SRMNXP/S_CATALOG_ITEM /SRMNXP/INCL_CAT_ITEM

Create field in Maintenance Views 1. Enter the transaction SPRO.


Field Controls Configuration for Extension of Fields.

3. Create a new entry or choose delivered customizing. Refer appendix for key information. Enter the

definition for the field by entering the following data in the respective fields:

Field name


Control type

Select a new control type from the drop down.

Note: You can choose any of the control types: text view, text field, checkbox, dropdown.

Binding element

Enter F4 and choose any existing field or a new field.


Select this check box, if the new field has to be included as part of the model.

Note: You can include a field in the model only if the field property is not part of the model.

Refer section Check for the Field Property in a Model for user defaults.




Enter a title for the new field. This title will appear as the field label on the UI.

Note: If you do not enter the label text for field and if the component type (data element) of the

field has a field label, this field label should be the label for the newly added field.

Note: If there is no field label for the component type of the newly added field, then the label for

the field should be of the format, viewkey_Field Name_L.

Tooltip for field

Enter an OTR text. This is the tool tip for the newly added field.

4. To enable search help for the field, refer section 5.0

5. Save your entries.

Check for Field Property in model 1. Enter transaction /IWFND/MAINT_SERVICE.


2. Select entry /SRMNXP/SHOPPING_CART from the column External Service Name.




5. Execute.

The HTTP Response file appears.

6. Check the properties under the Entity Type Name -ShoppingcartItem in the HTTP response


To extend other screens on the user interface, repeat the above steps using information provided in

the following table:

Screen External Service Name

Search Results /SRMNXP/CROSS_CATALOG_SEARCH

Clear SAP NetWeaver Gateway Cache Follow the procedure mentioned in the section Clear SAP NetWeaver Gateway Cache.

Check for field in model for Cant Find Screen To check for the newly added field in the model for the Cant Find screen,

1. Perform the steps as in section Check for the Field Property in a Model.

2. Perform the step 4 in the section Create the Field in Maintenance Views.


structure.

3. Select the checkbox Include field in model.

4. Clear Cache as mentioned in section Clear SAP NetWeaver Gateway Cache.

If you are extending the Item structure in the Cant Find screen and in order to persist value in the database in

the follow-on screen, for example, Item List and Item Basic Data, you have to extend the Item structure in the

next screen also.

2.1.3 Extending entities in Default Settings This chapter guides you through the steps, which help you add new fields to the Default Settings screen on

the UI.

Add new field to structure Using this step, you can add the newly created fields to the include structure.

1. Log on to your SAP system

2. Enter the transaction SPRO

3. Go to SAP Supplier Relationship Management SRM Server Cross-Application Basic Settings

Extensions and Field Controls (Personalization) Configure Customer Fields Define Customer

Fields on Item Level Append for Customer Fields on Shopping Cart Item.

4. Enter the customizing and select Item Basic Data and add the new field

5. Click Create Append.

6. Enter the append name, starting with the letter Z.


8. Add a new component with the respective component type for the new field


The new field is added to the include structure

Create field in Maintenance View 1. Enter the transaction SPRO.


Field Controls Configuration Extension and Field Controls.

3. Create a new entry for the item data by entering the following data in the respective fields:

View Key

Choose and enter any of the following values based on the section of the UI where the field should

appear:

singleitemdet_id_bd If the new field should be included in the Basic data for Items section.

UserDefaults_Note- If the new field should be included in the Internal Note section.

UserDefaults_ShipAddr - If the new field should be included in the Shipping Address section.

Tech. Service Name

/SRMNXP/SRMSHOPPING_CART

External name

Enter F4 and select User_Personalization

4. Enter the definition for the field by entering the following data in the respective fields:

Field name


Control type

Select a new control type from the drop down.

Note: You can choose any of the control types: text view, input fields, checkbox, and dropdown.

Binding element

Enter F4 and choose any existing field or new field.


Select this check box, if the new field has to be included as part of the model.

Note: You can include a field in the model only if the field property is not part of the model. Refer

section Check for the Field Property in a Model for user defaults.




Enter a title for the new field. This title appears as the field label on the UI.

Note: If you do not enter the label text for field and if the component type (data element) of the field

has a field label, this field label should be the label for the newly added field.

Note: If there is no field label for the component type of the newly added field, then the label for the

field should be of the format, viewkey_Field Name_L.

Tooltip for field

Enter an OTR text. This is the tool tip for the newly added field.

5. To enable search help for the field, refer section 5.0

6. Save your entries.

Note: You can select an Item from either the free text item, or catalog item, or item through search.

Check for field property in Model 1. Enter transaction /IWFND/MAINT_SERVICE.


2. Select entry /SRMNXP/SRMSHOPPING_CART in the column External Service Name.




The HTTP Response File file appears.

5. Check the properties under the Entity Type Name, 'SRMShoppingCartItemData' in the HTTP response.


Clear SAP NetWeaver Gateway Cache Follow the procedure mentioned in the section Clear SAP NetWeaver Gateway Cache.

Check for field in existing model 1. Perform the steps as mentioned in the section Check for the Field Property in a Model.

2. Perform the step 4 as mentioned in the section Create the field/data in Maintenance View.


structure.

3. Select the checkbox Include field in model.

Clear Cache as mentioned in the section Clear SAP NetWeaver Gateway Cache.

Modify value in More Details Screen Follow the steps in section 1 to add a new field to the Item More details screen:

1. The value that the newly added fields hold can be modified via the existing SRM BAdI (Business Add-

Ins) methods, such as the BBP_DOC_CHANGE_BADI BAdi.

2. Case1: Log on to the UI and go to Add items to a cart Review Cart More Details Item Basic Data.

3. Case2: Log on to the UI and go to Add items to a cart Review Cart More Details Item Basic Data

Order Cart My Carts Open the created SC.

Add new field in User Defaults Screen to Order Details screen Using this step, you can add the newly added field in the User Defaults screen to appear in Order Details

Screen.

Display custom fields in User Settings screen

The custom fields in the Basic data for items section of User settings screen can be uniformly displayed in the left and right side of the Basic data for items section with the following approach. The number of fields that needs to be displayed in the left side of the Basic data for items section is set using the function USERDEF_CUSTOM_FLD_COUNT. This function is implemented in the custom java script. Example: function USERDEF_CUSTOM_FLD_COUNT(){ return 9; }

A total of nine fields are displayed on the left side of the Basic data for items section, including the standard

fields, as shown in the screenshot below:

If the method USERDEF_CUSTOM_FLD_COUNT is not implemented in the custom java script file, three

custom fields are displayed on the left hand side of the Basic data for items section, and rest of the custom

fields are displayed on the right hand side of the Basic data for items section.

2.1.4 Enable Search Helps for Custom Fields (Available for SP03 onwards) F4 search helps can be enabled for the fields extended in the above views by following all the steps mentioned in the above sections. In addition, perform the below steps while in the section Create the Field in the Maintenance View.

1. Enter the transaction SPRO. 2. Go to SAP Supplier Relationship Management SAP SRM User Interface Add-on Extension and

Field Controls Configure Extension and Field Controls. 3. Select the required view 4. Double-click Field Definition in the screen area. 5. Make a new entry for the field for which F4 search help needs to be enabled:

Follow the steps from the relevant sections above to create the fields for the relevant views. In addition, enter the following details:

a. Search Help Select the checkbox.

b. Search Help Name Enter the search help name that needs to be called for this field. Note: Only elementary search help is supported. Enter only an elementary search help name.

6. Select Search Help Field Mapping New entries. Mapping of the field names needs to be defined here:

a. Srchhelp Fieldname UI Binding Element for the search help. Select the relevant field name of the given search help name to be mapped to this custom field.

b. Model Fieldname Model Binding Element for the search help. Select field name of the model that needs to be associated to the search help field name.

7. Proceed with the next steps as per the above relevant sections. 8. Save you entries.

Example: Creation of a Search Help field (FLDCAT) in Cant Find screen for selecting catalogs

a. Follow steps relevant for the Cant Find screen as mentioned in section 2.1.2 b. Steps for section 2.1.2 Step 4:

i. Field Definition: Check the Search Help checkbox ii. Enter Search Help Name: /SRMNXP/CATALOG

iii. Double-click Search Help Field Mapping in the left navigation panel New Entries In this section, you are mapping the importing field name of the search help with the fields in the oData service model fields. This is optional. If you do not map any search help field with the fields in oData service model, then the fields with the same names are mapped.

iv. Search the relevant fields for Srchelp Fieldname and add SERVICE_ID. v. Search the relevant fields for Model Fieldname and add CATALOGID.

Now follow the remaining steps after the section 2.1.2 step 4.

2.2 Extending screens using Pre Exit and Post Exit approach

2.2.1 General information Refer note 1879766

2.2.2 Preparation

Hooks in custom resources files The application searches for following external hooks. The application is expected to write the custom code within the scope of these functions:

CUSTOM_POST_EXIT CUSTOM_PRE_EXIT

Multiple resource files

As mentioned in the above sections, application searches for hook methods CUSTOM_PRE_EXIT and

CUSTOM_POST_EXIT. Two types of implementation is possible:

a. Single implementation

Both the methods are defined as global methods in a resource file. The user can maintain all the

custom code under the same method. This implementation affects the readability and

maintainability of the code.

b. Multiple implementation

The multiple implementation feature enhance the readability and maintainability of the code and as

custom code is distributed under multiple files.

c. Loading multiple resource files

Create a new js file and maintain the file path in the SPRO customizing

Create a global method with the same name as the filename. For example, if the file path is

HTTPS://LDCIXRR.WDF.SAP.CORP:44329/SAP/BC/BSP/SAP/ZDEMO/CUSTOM2.JS, the

function name should be CUSTOM2 in caps only. Then, add CUSTOM_PRE_EXIT and

CUSTOM_POST_EXIT method in the prototype object of the function.

You can maintain multiple files in the customizing and by following the above steps you can

implement multiple preExit and postExit methods also.

Note: During runtime, it will call all the preExit and postExit methods defined in the files.

Loading custom resources (JS/CSS) files

Create a local BSP as shown below. The BSP name could be any arbitrary name.

Create custom js files as shown above.

Activate the application.

Go to SPRO SRM SERVER SAP SRM User Interface Add-on Extension and Field Controls Maintain Custom File Path.

Add a new entry and provide a relative BSP URL.

Relative path For local testing and development purposes, a full qualified URL should be specified in SPRO, but before transporting these customizing to test clients, it is important to specify a relative URL. A relative URL can be created as the following example shows:

Application URL https://ldcim1t.wdf.sap.corp:44329/sap/bc/bsp/srmnxp/shoppingcart/defaults.htm

Local BSP URL https://ldcixrr.wdf.sap.corp:44329/sap/bc/bsp/sap/zcust_enh/custom_handling.js

Note URL is same uptil /bc/bsp/, it would be built using relative path concept. If we specify relative path as zcust_enh/custom_handling.js then it tries to locate this BSP in

shopping cart folder and URL will be incorrect. If we specify relative path as ../zcust_enh/custom_handling.js then it tries to build a URL with the

help of application URL by moving one up to parent directory during run time. Therefore, URL here would be following which is again incorrect as it contains srmnxp in URL. https://ldcixrr.wdf.sap.corp:44329/sap/bc/bsp/srmnxp/zcust_enh/custom_handling.js

Now if we specify custom relative path as following ../../zcust_enh/custom_handling.js, this will form the following URL: https://ldcixrr.wdf.sap.corp:44329/sap/bc/bsp/sap/zcust_enh/custom_handling.js . Since this is correct, the relative path will be ../../zcust_enh/custom_handling.js

2.2.3 Examples

Adding a Navigation Item Code Snippet: function NAVI(){ }; NAVI.prototype.CUSTOM_POST_EXIT = function(methodName,view,controller, methodSignature) { if (!sap.ui.getCore().byId("ni_home")) return; else add_navi_item(); }; function add_navi_item() {

After

Replace standard texts in UI

Use

In this Customizing activity, you can replace the standard texts on the UI with your own texts. The standard texts are maintained in the online text repository (OTR) in the system. The OTR texts in specific packages or specific OTR texts in any packages can be replaced with your own OTR texts.

Requirements

You have created your own OTR texts using the transaction SOTR_EDIT and are aware of the standard OTR texts.

Example

The following are two scenarios in which you can replace the standard OTR texts with your own OTR texts.

Scenario 1

In the Type of Mapping field, select All OTRs in the Package. In this scenario, all OTR texts with the same post fix are replaced with your OTR texts.

For example, the following three OTR texts are standard texts in the Source Package XXX:

XXX/A

XXX/B

XXX/C

You have entered the following two OTR texts as standard texts in the Target Package YYY:

YYY/A

YYY/B

When you replace the standard OTR texts in the system with your own OTR texts, the system replaces the texts in package XXX with the texts in package YYY.

Scenario 2

In the Type of Mapping field, select Specific OTRs. In this scenario, the Source Package and Target Package are deactivated. The source OTR text name is replaced by the target OTR text name. For example, if the source OTR text name is XXX/A and the target OTR text name is YYY/A, then YYY/A is displayed in the application.

Hiding a checkout/Order button Code snippet: function NAVI(){ }; NAVI.prototype.CUSTOM_POST_EXIT = function(methodName,view,controller, methodSignaure) { if(controller && controller.getView().getId() == 'wi_common_miniSC'){ debugger; if(!sap.ui.getCore().byId('direct_order')) return; else sap.ui.getCore().byId('direct_order').setVisible(false); } }; Desired output:

Hiding fields from Mini cart ( Rowrepeater ) Code snippet /** * In this example we will remove the Quantity shown in the Minicart */ MINICART = function(){ //Define instance variable if required }; //Custom post exit method MINICART.prototype.CUSTOM_POST_EXIT = function(methodName, view, controller, methodSignature){ //Checking the view Id if(controller && controller.getView && controller.getView() && controller.getView().getId() == 'wi_common_miniSC'){ //Getting the instance of RowRepeater using the id of the Row repeater var oRowRepeater = sap.ui.getCore().byId('rrBareShell'); var oTemplate = oRowRepeater.getBindingInfo('rows').template; //Find element with parameter true returns all the children and children of the child elements in an array var oRowElements= oTemplate.getRows()[0].findElements(true); for(var i =0 ; i < oRowElements.length - 1 ; i++){ //Checking if the element is bound to the QUANTITY property in model if(oRowElements[i].getBindingPath && oRowElements[i].getBindingPath('text') == 'QUANTITY'){ //Destroying the content of the Parent of the element which in turn destroys the label for the field oRowElements[i].getParent().destroyContent(); } } //Again binding the rows of the rowrepeater with the changed oRowRepeater.bindRows('/results', oTemplate); } }; Output:

Before

After:

Adding a button/text field in Cant find Screen Code snippet

//Creation of a new object named CANTFIND similar to the filename to implement multiple CUSTOM_POST_EXIT //and multiple CUSTOM_PRE_EXIT method /** * This object will modify the */ CANTFIND = function(){

//Declare instance varaible if required }; CANTFIND.prototype.CUSTOM_POST_EXIT = function(methodName, view, controller, methodSignature){ //Checking the view by using its view Id if(view == 'wi_home_assist'){ var oBtnLayout = sap.ui.getCore().byId('buttonsLayout'); var oCnclBtn = sap.ui.getCore().byId('cnclBtn-custom'); // if the button already exists then ignore if(!oCnclBtn){ var oCnclBtn = new sap.ui.commons.Button({ id : "cnclBtn-Custom", text : "Cancel", tooltip : Appcc.getText("Resets all the fields t defaults") }); oCnclBtn.attachPress(function(){ //Cancel clicked alert("Cancel Clicked"); }, controller); //Adds button to the layout oBtnLayout.addContent(oCnclBtn); } } };

Output: New button added and onClick event of button handled

Adding a button in toolbar in Review Cart screen Code snippet function ZTEST() { }; ZTEST.prototype.CUSTOM_POST_EXIT = function(methodName, view, controller, methodSignature) { if (!sap.ui.getCore().byId(__toolbar0)) return; //return if no toolbar is present

if (sap.ui.getCore().byId(mybtn))

return; //return if button is already added , logic is called multiple times. else prepare_toobar_button(); }; function prepare_toobar_button() { var oToolbar = sap.ui.getCore().byId(__toolbar0); //Custom Button

oButton_cstm = new sap.ui.commons.Button({ id : mybtn, text : Launch Search, press : handle_custom_press , }); oToolbar.addItem(oButton_cstm);

} function handle_custom_press() { window.open(http://www.sdn.sap.com) } Desired output:

2.3 Extending Screens using SPRO and Custom JS Pre Exit and Post Exit apporach

With this approach, you can specify custom fields in SPRO and then you can also modify them using custom JS pre and post exit approach. You need ABAP and JavaScript skills to achieve this.

2.4 Generic BADI There are two generic BAdIs that can be used to enhance the model to add new fields to the models and to change the data in the model.

2.4.1 /SRMNXP/BD_ENHANCE_MODEL

Use

This Business Add-In (BAdI) can be used to enhance the gateway service model and add fields to the UI.

Extending UI fields is a two-step process. First, you should add new fields to the UI structure that is bound to the entity. Second, using this BAdI, you should add new properties to the model of the entity.

2.4.2 /SRMNXP/BD_CHANGE_DATA

Use

This Business Add-In (BAdI) can be used to modify the data that you want to display on the UI.

2.5 Extending other screens on the UI

2.5.1 Extending Filter Categories For information on extending filter categories, refer to the following Notes: 1951052 - Cookbook for Extending Filter Categories 1942349 - Cookbook for Extending Filter Categories

3.0 Theming

3.1 General Information Styling can be influenced in the SAP SRM UI ADD-On either by custom javascript or custom css that needs to be created in local BSP and path needed to be maintained in SPRO customizing.

Steps to load custom CSS/JS file

Create a local BSP as shown below. The BSP name can be any arbitrary name.

Create custom css files as shown above.

Activate application.

Go to SPRO SRM SERVER SAP SRM User Interface Add-On Extension and Field Controls Maintain Custom File path.

Add a new entry and provide the relative BSP URL of the css file.

3.3 Approaches

Create a new style class in custom CSS file and add style to element via custom javascript

This approach can be used when a new style needs to be applied to a UI element.

The ID of the UI element for which the style needs to be applied is known.

The new style class needs to be added in the .CSS file that has been created, as explained.

Example 1:

Add style in custom CSS. In the customer.css file (custom css file created), the following style class can be added. .myStyle{ color:red !important; padding-right:30px; font-family:cursive !important; }

Note that the property should be flagged with !important as shown in the example so that this property will override any other color property applied for the field.

Apply style to control in custom JS In the customer.js file, the following code will apply the style to the Review cart button in the mini tray function CUSTOM_POST_EXIT (methodName, view, controller, methodSignature){ //Apply style to the review cart button sap.ui.getCore().byId("mini_chkt").addStyleClass("myStyle"); } Following screenshot shows output:-

Override existing style class in custom CSS

This approach can be used when:

The ID of UI element for which the style needs to be applied is not known (example, in the case of row repeater).

The ID of UI element is known, but the style property needs to be overridden.

If the application navigation item text color needs to be changed. But, if the color property is already marked as !important in the already applied style, this can be overridden by overriding the style class.

Example 1:

The style class favoritesTitleColor is overwritten with the change in color property. This style class needs to be added in the .CSS file .favoritesTitleColor { font-family: Arial, Helvetica, sans-serif !important; font-size: 12px !important; font-weight: bold !important; text-decoration: none !important; color:red !important; }

Example 2: The following style class needs to be added in the .CSS file: .sapUiUx3NavBarItem{ font-size: 13px !important; color: red !important; font-weight: normal !important; }

4.0 Additional Utilities and Transactions

4.1 Clear SAP NetWeaver Gateway Cache You need to clear cache from two different places using the customizing, as mentioned below:


2. Go to SAP Web Application Server Gateway Service Enablement Backend OData Channel Support

Utilities Clear Cache


3. Select the Cleanup Cache for all Models checkbox.

4. Execute.

5. Go to SAP Web Application Server Gateway OData Channel Administration Cache Settings

Metadata Clear Cache.


6. Select and enter the model in the Model Identifier field or select the Cleanup Cache for all Models

checkbox.

7. Execute.

You can also use the transaction /iwfnd/cache_cleanup and /iwbep/cache_cleanup.

4.2 Clear SAP ICM Cache You need to clear ICM cache, as mentioned below:

Enter the transaction SMICM.

Navigate to menu and then go to HTTP Server Cache Invalidate Global in System.

Click OK in the dialog box.

Navigate to the menu and then go to HTTP Server Cache Invalidate Local.

Execute.

5.0 Appendix

View Key Technical Service Name External Name of Meta-model Element

wi_home_checkout_hdr_id /SRMNXP/SRMSHOPPING_CART SRMShoppingCart

wi_home_checkout_hdr_da /SRMNXP/SRMSHOPPING_CART SRMShoppingCart

wi_home_checkout_hdr_aa /SRMNXP/SRMSHOPPING_CART SRMShoppingCart

wi_home_checkout_hdr_ao /SRMNXP/SRMSHOPPING_CART SRMShoppingCart

wi_home_checkout_hdr_tv /SRMNXP/SRMSHOPPING_CART SRMShoppingCart

singleitemdet_id_sd /SRMNXP/SRMSHOPPING_CART SRMShoppingCartItemData

Itemlist /SRMNXP/SRMSHOPPING_CART SRMShoppingCartItem

singleitemdet_id_bd /SRMNXP/SRMSHOPPING_CART SRMShoppingCartItemData

UserDefaults_ItmBasic /SRMNXP/SRMSHOPPING_CART User_Personalization

UserDefaults_Note /SRMNXP/SRMSHOPPING_CART User_Personalization

UserDefaults_ShipAddr /SRMNXP/SRMSHOPPING_CART User_Personalization

wi_home_assist /SRMNXP/SHOPPING_CART ShoppingcartItem

accountLineDetails /SRMNXP/SRMSHOPPING_CART AccountAssignment