App Extensibility: Print Labels

Using Your Own Non-SAP Label Printing Solution

You run your own non-SAP label printing solution on a print server that is different from the one used by SAP ERP. Therefore, information regarding label types and printers, as well as requesting printouts, has to be handled by the foreign printing solution. Due to this, the standard application implements two different services (models) defined in the Configuration.js file, which use the same service URL:

oServiceParams: {
   serviceList: [
      {
         name: "RETAILSTORE_PRINT_LABELS_SRV",
         masterCollection: "StoreProducts",
         serviceUrl: "/sap/opu/odata/sap/RETAILSTORE_PRINT_LABELS_SRV/",
         isDefault: true,
         useBatch: true
      },
      {
         name: "RETAILSTORE_ERP",
         masterCollection: "Stores",
         serviceUrl: "/sap/opu/odata/sap/RETAILSTORE_PRINT_LABELS_SRV/",
         isDefault: false,
         useBatch: true
       }
   ]
},
 

The first entry is used to execute requests to get information about label types or printers, and send print requests. The second one requests information from the SAP ERP back-end system to perform the product identification and to read user settings. In this case, you can replace the first service entry (or both) with your own service, depending on your OData service enhancements. There are three options for the OData service enhancement, which require different changes on the UI. You can:

• Use the enhancement capabilities of the implemented OData service in the backend, which allows you to reuse the existing service URL - therefore no changes on the UI are necessary

• Create a new OData service in the gateway system with a new URL, and implement the necessary enhancements, which means you also have to create a UI extension project and replace both entries in the service list

• Create a new OData service to get label types and printers and send print requests with your own service URL, which means you also have to create a UI extension project and replace the first entry in the service list

Execute the following steps (option 3):

• Replace the OData service in your project with your own one. In the Component.js file in your extension project, you find a corresponding replacement entry:

config: {
   "sap.ca.serviceConfigs": [
   {
      name: "RETAILSTORE_PRINT_LABELS_SRV",
      serviceUrl: "<your service URL>”
      isDefault: true,
      mockedDataSource: "./model/metadata.xml"
}
 

If you need your own fields and/or entity names, you can exchange these metadata as described at the end of the section "Adding New Screen Elements".

Integrating a Hardware Scanner

You need to create a new file in your extension project (for example BarcodeScanHandler.js), which enhances the bar code scan handler of the reuse library. This scan handler contains a hook method utilityExtHookOnBarcodeScanHandler, which needs to be enhanced as follows:

jQuery.sap.declare("retail.store.printlabel.<yourExtendedApp>.<folder>.BarcodeScanHandler");
jQuery.sap.require("sap.retail.store.lib.reuse.util.BarcodeScanHandler");

sap.retail.store.lib.reuse.util.BarcodeScanHandler.utilityExtHookOnBarcodeScanHandler = function(fnGetBarcodeScanHandling) {
  // the getter function is kept as a member of the current object
  this._fnGetScanHandling = fnGetBarcodeScanHandling;

  jQuery(document).bind('scanReceived', jQuery.proxy(function(oEvent) {
     var oOriginalEvent = oEvent.originalEvent;
     var oData = oOriginalEvent.data || oOriginalEvent.detail.data;
     if (oData) {
       var fnScanHandling = this._fnGetScanHandling();
       if (fnScanHandling) {
         fnScanHandling(oData);
      }
    }
  }, this));
};
 

Adding New Screen Elements

To add new screen elements to the print list overview screen or print confirmation screen, several extension points are available to adapt the screens in the extension project. The following extensibility points are offered:

Example: Add New Fields to the Print List

You want to add a new field to the item details of the print list:

Implement the extension point scannedItemDetailExtension from the ProductDetailTemplate fragment. An empty fragment ProductDetailTemplate_ scannedItemDetailExtensionCustom.fragment.xml is created in your extension project, in which you can insert the additional fields.

<core:FragmentDefinition xmlns:core="sap.ui.core" xmlns="sap.m">
   <ObjectNumber
   number="{ path: 'scannedProduct>SalesPrice',
        formatter:'retail.store.printlabelExt.utils.Formatter.formatCurrencyValueLocalDependent' }"
        unit="{scannedProduct>SalesPriceCurrency}"/>
</core:FragmentDefinition>
 

Furthermore, the implementation of this extension point is registered in the Component.js in your extension project:

customizing: {
   "sap.ui.viewExtensions": {
       "retail.store.printlabel.view.ProductDetailTemplate": {
           "scannedItemDetailExtension": {
                className: "sap.ui.core.Fragment",
                fragmentName: "retail.store.printlabel.retail.store.printlabelExt.view.ProductDetailTemplate_scannedItemDetailExtensionCustom",
                type: "XML"
           }
        }
   }
}
 

If you need to add fields that are not yet available in the underlying OData service, you have to enhance or create your own OData service in the backend, and you have to call your OData service instead of using the standard OData service.

• Create an implementation of the extension hook method extHookAfterOnInit from Main.controller.js in your extension project within MainCustom.controller.js

• Enhance or replace the selection field list and/or the names of entities in the data provider metadata object at application start within your extHookAfterOnInit function

// add Properties to metadata provider
var oMetadata = retail.store.printlabel.provider.DataProviderMetaData.StoreProduct;
oMetadata.selectFields = oMetadata.selectFields + ",<your own comma-separated field list>");

retail.store.printlabel.provider.DataProviderMetaData.addMetaData(oMetadata);
 

• If you want to use your own OData service instead of the SAP standard OData service, you have to reference your OData model to one or both application models defined in the standard configuration (file Configuration.js).

If you need to enhance the footer bar with new buttons, you will most likely need to enhance the corresponding controller as well, with a new event handler function.

Replacing Screen Elements

To replace screen elements on the print list overview screen or print confirmation screen with new ones, several extension points are available to enhance the screens in the extension project. The following extension points are offered:

You can do this in the same way as described in the section "Adding New Screen Elements".

Replacing Entire Views

You can replace the entire view for the print list items or the confirmation screen with your own view, if the provided extension points do not cover your business needs. You have to keep in mind that it could also be possible to rewrite the corresponding view controller implementation.

• Create a view replacement for the standard view that you want to replace in your extension project. If you have replaced the view S1PrintConfirm.view.xml (either as a copy from the original or as an empty view), you can find your custom view S1PrintConfirmCustom.view.xml in your extension project and a replacement configuration in the configuration file Configuration.js.

customizing: {
….
   "sap.ui.viewReplacements": {
         "retail.store.printlabel.view.S1PrintConfirm": {
             viewName: "retail.store.printlabel.retail.store.printlabelExt.view.S1PrintConfirmCustom",
             type: "XML"
          }
    }
}
 

• You might need to implement your own controller logic depending on your changes in the replacement view.

Changing Selected Standard Features

Repeated Bar Code Scan

If the same bar code is scanned twice or more in a sequence, then the number of copies is incremented instead of producing a new print item in the list. You might want to change this behavior according to your business needs:

• Create an implementation of the extension hook method extHookAddScannedItemToList from S1.controller.js in your extension.

Setting the Label Type After a Scan

The default label type is stored in the user settings. It is used by default every time the label printing application is started. Once the user changes the label type of the previously scanned print item, this different label type is used by default for the print items that are scanned next, unless the print list is cleared (either by printing or by deletion), or the user selects another label type for the previous print item. You might want to change this behavior according to your business needs:

• Create an implementation of the extension hook method extHookGetDefaultLabelType from S1.controller.js in your extension.

Changing the Print Sequence

The print process prints the items in the same sequence in which they were previously scanned. In the standard implementation, the first print item in the display is the last printout, and vice versa. You might want to change this behavior according to your business needs:

• Create an implementation of the extension hook method extHookHandlePrintButtonPress from S1.controller.js in your extension.