Skip to end of metadata
Go to start of metadata



This wiki page provides an overview about the SRM shopping cart UI add-on, the system requirements and the available features.



The new shopping cart UI's main advantage is to provide a more self-evident and easy-to-use alternative for the non-professional purchasers. Compared to the normal WebDynpro shopping cart UI this UI is more like a webshop, what users see during their everyday life, therefore much less training is required for those who will use the system. You can simply search in multiple catalogs quickly, open a catalog directly or create a free text item (if you cannot find what you wish to order with the other methods). You can also mark items as favourites, create templates and track your old shopping carts.

The key feature of the new UI is the reworked cross catalog search and the possibility to filter the search results after the search is finished. The users can simply search in multiple catalogs or categories and they see a lot more information about the items: technical details, price information, product details and measures, pictures about the item and even ratings or reviews from other buyers. After the search is finished, the user can set or remove filters what will automatically update the search results based on the price, product and catalog or vendor, to name a few. Furthermore also possible to change the sorting of the results.

The focus of the new shopping cart application is to help the casual users and therefore a few functionalities of the professional shopping cart are currently not available, but most of the old features are still available. The user can set the default settings for the shopping cart, use the buy on behalf scenario, check the print preview or create team shopping carts. It is important that some of the features are only available by implementing and activating feature packs in the system or by activating them in the customizing.


System requirements

The SRM UI add-on deployment is different from the core SRM part. It has different system requirement and limitations.
The shopping cart UI add-on can be installed as an add-on to an SRM system with release 700, 701, 702 or 713. The newer SRM releases, for example 714, include the shopping cart UI add-on without further component installation steps. For the operation of the UI add-on a gateway server is required. The system uses SAPUI5 for the user interface, TREX/HANA search for the cross catalog search and MDM API to communicate with MDM catalogs if you would like to use extraction from MDM catalog


Available functionalities and feature packs

Main page for this topic: Feature packs and functionalities

The SRM UI add-on is intended to help the casual users who are not necessarily trained for the use of the system or only use it occasionally. Therefore it has different functionalities as the normal or professional WebDynpro shopping cart application.

In the SRM UI add-on not all functionalities available from the first release, some of them only became available through feature packs. These feature packs are part of the system after a certain support pack level but you could also manually implement them with a collection of notes if the system is on a lower support pack level.




UI add-on specific customizing options: Customizing options for the shopping cart UI add-on
Core shopping cart related customizing options: Customizing options for shopping cart

As the final result of the new UI is a same shopping cart document what you can create also from the WebDynpro application, the same customizing that impact a shopping cart are also present here but there are also unique customizing options.


Sections of the UI add-on

The UI of the new shopping cart application has two main parts, the starting or main screen, where you can create the items, and the review cart screen, where you can update the shopping cart header and item data.

Starting or main screen

Main page for this screen: Main screen

You can see the main section after logon or when starting the application from the portal or NWBC. The main section has multiple tabs to provide you multiple ways for item creation.
On the right hand side of the main screen you can see the mini cart section what is unique for the UI add-on.
On the starting screen, you can also open the defaults settings pop-up, set the buy-on-behalf user, directly order the shopping cart or navigate to the review cart screen.


Review cart screen

 More details about this screen: Review cart screen

You can get to this screen if you click on the review cart button or when you open an already existing shopping cart. On the review cart screen there is a toolbar for the shopping cart header related buttons. On the left side of the review cart screen, you can find the overview section what contains the header fields and a quick overview about the actual item data of the shopping cart. On the other side, you can see the item list where you can find the main data of the items and navigate to the item details with the more details button.

On the item details view, you can navigate to other items using the item list on the left-hand side, go back to the overview or transfer data from the selected item to other items.
Unlike the normal shopping cart, where you need to navigate between tabs to see the different sections of the item data, in the item details view you can see all of the sections in one screen by opening the different panels. You can also expand and collapse any panel or simply use the expand all and collapse all buttons.


Multi section views

More details about these view: Multi section views

There are also screens what can be opened from both of the starting view and the review cart view. These are the search helps for the fields and the product details pop-up, which can be opened from the search results, from the mini cart and from the review cart section too.

The product details pop-up summarizes the information about the item and intended to provide more details about the cross catalog items. The displayed data is based on the extracted item data so even though it is possible to open it for items that are not cross catalog items, the product details will be limited.


Item creation options

More details about the different item creation options: Item creation options in the shopping cart UI add-on


Except the item duplication all the item creation options are only available on the main screen of the shopping cart UI add-on.

Items can be created with the following options:

  1. From cross catalog
  2. Directly from catalog
  3. Create a free text item
  4. Create a limit item
  5. Add a favourite item
  6. Add item from a template shopping cart
  7. Add item from an old shopping cart

BAdI implementations and extensibility

More details about the BAdIs and extensibility options: Extensibility

The UI add-on provides new possibilities to influence the system behaviour to better adapt to the business requirements. Compared to the WebDynpro environment, in the SRM UI add-on the customer has a lot more possibility to influence the fields on the screen, how they are displayed and what should happen after a certain action.


Data extraction

More details about catalog item extraction: Catalog item extraction

If the user would like to use the cross catalog search in the SRM UI add-on, first the catalog data needs to be extracted to the system. The extraction can be done in several ways for example from an HTTP service, from an MDM catalog, by uploading the data using JSON files or by extracting the SRM product master data.


The architecture of the UI add-on

The SAP SRM UI add-on requires a deployed SAP NetWeaver Gateway. The system uses the services activated in the gateway to communicate with the SRM backend. For the communication between the UI and backend, the system uses the OData protocol. The users make their interactions with the system through the gateway and the data flow to the SRM's UI add-on section and later to the core SRM part.

In the SRM UI add-on, you can find multiple models assigned to certain types of data used on the UI (to services). Each model has a definition, where the system maintains the list of fields are in the model. These model definitions are returned by the assigned model provider class (the class is linked to the service). These classes are only responsible for the definition/metadata of the models.  The logic related to the creation, change and delete of the actual data is implemented in the data provider or data access class of the service.


SAPUI5 and JavaScript

More details: SAPUI5 and JavaScript

The SRM UI add-on uses SAPUI5 and JavaScript to create the user interface and handle the interactions from the user.
The JavaScript functions that are used not necessary part of every browser version. This is why important to use the supported versions and modes of the browsers.
The SAPUI5 versions are constantly updated and have limited maintaince. The use of old or not supported SAPUI5 versions and patch levels could lead to render issues or other problems on the user interface.


Related Content

Related Documents

System requirements for shopping cart UI add-on

Feature packs and functionalities

Customizing options for the shopping cart UI add-on

Customizing options for shopping cart

Main screen

Review cart screen

Multi section views

Item creation options in the shopping cart UI add-on


Catalog item extraction

SAPUI5 and JavaScript


  • No labels