Show TOC

App Extensibility: Look Up Retail ProductsLocate this document in the navigation structure

Use

You can extend Look Up Retail Products according to your business needs for different aspects. For this purpose, extensibility options that allow you to do the following are available:

  • Customize the number of search results returned for a product
  • Show or hide the following information in the product detail view:

    • Product number, EAN/UPC code, product weight, and quantity available

    • Promotion information

    • Quantities expected in incoming shipments

    • Quantities available in nearby stores

    • Style, color, and size variants

  • Add new tabs to the product detail view
  • Add a new section under the Information tab in the product detail view and add new fields to it

  • Add a new section under the Promotions tab in the product detail view and add new fields to it

  • Add new fields in the Incoming Shipments and Nearby Stores sections under the Stock tab in the product detail view

  • Extend the accepted delivery period for a product under the Stock tab
  • Add a new section under the Similar Items tab in the product detail view and add new fields to it
  • Add a new tab in the product detail view, and extend it with new sections and new fields

  • Add a custom query for additional product information to display in the product detail, the promotion and similar products tabs.
  • Enhance product details at the line item level
  • Add a process to validate or enrich product information received from the back-end system
  • Configure navigation to the Adjust Stock, Transfer Stock, Order Products, and Print Labels apps

  • Connect a custom barcode scanning device to the app
Further Extensibility Entities
In addition to the extensibility elements described in the product BOM, the following extension elements are available:

Business Add-Ins (BAdIs)

The following Business Add-Ins are available for extensibility purposes. In most cases they are used in conjunction with specific extensibility elements, such as extension hooks or points, to fully implement the desired extensibility feature. The BOM provides this information in the list of available extensibility elements for the app.

BAdI

Use

Methods

RETAIL_ST_PL_PRODUCT_ENH

BAdI: Enhancement of Information Displayed in Product Details

Provides data to the additional product information fields

GET_PRODUCT_SUPP_DATA: Retrieves data from the back-end system when a product list is first displayed or refreshed, or when a product is searched

RETAIL_ST_PL_PROMOTION_ENH

BAdI: Enhancement of Information Displayed in the Promotions Tab

Provides promotion information for a product

GET_PROMOTION_SUPP_DATA: Provides product information data when a product is selected in the product list and promotion information is loaded

RETAIL_ST_PL_DELIVERY_ENH

BAdI: Enhancement of Information on Incoming Shipments

Provides information about incoming product shipments

GET_DELIVERY_SUPP_DATA: Provides data for the Incoming Shipmentssection under the Stock tab

RETAIL_ST_PL_NB_STORE_ENH

BAdI: Enhancement of Information on Nearby Stores

Provides information about nearby stores

GET_NB_STORE_SUPP_DATA: Provides data for the Nearby Stores section under the Stock tab

RETAIL_ST_PL_ALT_ARTICLES_ENH

BAdI: Enhancement of Information on Similar Items

Provides information about similar product items

GET_ALT_ARTICLE_SUPP_DATA : Provides data about similar product items

If there are additional fields available in the OData service, you can display these fields on the UI. For more information, see the extensibility documentation for the respective SAP NetWeaver release on your front-end server at http://help.sap.com/fiori_implementation Start of the navigation path Extensibility Information for SAP Fiori Next navigation step Extending the UI Layer Next navigation step UI Extensibility Workflow Next navigation step  Next navigation step Checking the SAP-Enabled Extension Options Next navigation step Extension Points End of the navigation path.

If there are additional UI controller hooks available in the controller code, you can add own code. For more information, see the extensibility documentation for the respective SAP NetWeaver release on your front-end server at http://help.sap.com/fiori_implementation Start of the navigation path Extensibility Information for SAP Fiori Next navigation step Extending the UI Layer Next navigation step UI Extensibility Workflow Next navigation step  Next navigation step Checking the SAP-Enabled Extension Options Next navigation step UI Controller Hooks End of the navigation path.

UI Utility Hooks

To plug in and execute custom code, the following hooks are available in the code:

Utility Class

Hook

Use

BarcodeScanHandler.js

utilityExtHookOnBarcodeScanHandler

Allows you to integrate your own scanning implementation.

To implement the UI utility hook, do the following:

  1. Add the following code to Component.js of the extension app:

    jQuery.sap.require("retail.store.z_your_extended_productlookup_app.util.BarcodeScanHandler");

  2. Add a new BarcodeScanHandler.js file to the util folder of the extension app with the following content:

    jQuery.sap.declare("retail.store.z_your_extended_productlookup_app.util.BarcodeScanHandler");

    jQuery.sap.require("retail.store.productlookup.util.BarcodeScanHandler");

  3. Implement the extension hook as follows:

    retail.store.productlookup.util.BarcodeScanHandler.utilityExtHookOnBarcodeScanHandler = function(fnGetBarcodeScanHandling) {//extension implementation};

Display of UI Controls

To enhance the product detail view, or to hide specific product details on the app, the following UI controls can be hidden on the app UI. You implement the control by setting the Visible attribute to True or False in the Components.js file, in the section where customization points are set. For more information, see sap.ui.viewModifications in the implementation.

For more information about hiding UI controls, see the extensibility documentation for the respective SAP NetWeaver release on your front-end server at http://help.sap.com/fiori_implementation Start of the navigation path Extensibility Information for SAP Fiori Next navigation step Extending the UI Layer Next navigation step UI Extensibility Workflow Next navigation step  Next navigation step Checking the SAP-Enabled Extension Options Next navigation step Hiding UI Controls End of the navigation path.

More Information

For a general description of the extensibility options and procedures of SAP Fiori apps, see http://help.sap.com/fiori_implementation Start of the navigation path Extensibility Information for SAP Fiori End of the navigation path.