how to provide customer extensions for the sap tm...

33
How to Provide Customer Modifications for the SAP® TM Collaboration Portal Sabine Hamlescher, SAP SE Version: 2017-04-21 Legal Disclaimer The content of this document is not part of SAP product documentation. SAP does not guarantee the correctness of the information provided. You may not infer any product documentation claims against SAP based on this information.

Upload: vannhi

Post on 06-Feb-2018

237 views

Category:

Documents


1 download

TRANSCRIPT

Page 1: How to provide customer extensions for the SAP TM ...a248.g.akamai.net/n/248/420835/739285d35ae13ad53a7044d1e306197… · how to provide customer modifications for the sap tm collaboration

How to Provide Customer Modifications for the SAP® TM Collaboration Portal Sabine Hamlescher, SAP SE Version: 2017-04-21 Legal Disclaimer The content of this document is not part of SAP product documentation. SAP does not guarantee the correctness of the information provided. You may not infer any product documentation claims against SAP based on this information.

Page 2: How to provide customer extensions for the SAP TM ...a248.g.akamai.net/n/248/420835/739285d35ae13ad53a7044d1e306197… · how to provide customer modifications for the sap tm collaboration

TABLE OF CONTENTS

PURPOSE OF THIS DOCUMENT .................................................................................................................... 4THE BIG PICTURE ........................................................................................................................................... 4Architecture overview ..................................................................................................................................... 4IMPORTANT INFORMATION ........................................................................................................................... 5HOW TO DEFINE THE EXTENSION TYPES ................................................................................................... 61. Provide customer-specific fields for existing functionality ....................................................... 62. Preliminary work ............................................................................................................................ 62.1. Create own customer BSP application ............................................................................................. 62.2. Publish BSP application in SICF ...................................................................................................... 72.3. Create the index.html ....................................................................................................................... 82.4. URL to the custom application ....................................................................................................... 103. Fiori like logon screen ................................................................................................................. 104. Create a custom Component ...................................................................................................... 115. Overwrite labels delivered by SAP as standard ........................................................................ 125.1. Find the technical text key to be changed ...................................................................................... 125.2. Create the new text ........................................................................................................................ 125.3. Enhance the custom Component.js ............................................................................................... 126. Remove standard controls from the SAP® TM collaboration portal ........................................ 136.1. Find the technical ID of the control ................................................................................................. 136.2. Hide the control .............................................................................................................................. 136.3 Hide thingGroup, thingGroup row, navigationItem or panel on an overlay dialog .......................... 137. Provide a new navigation area or navigation item in the navigation bar for existing SAP® TM functionality ............................................................................................................................................. 167.1. Provide a new Gateway service ..................................................................................................... 167.2. Provide a new navigation area ....................................................................................................... 167.3. Provide a new navigation item ....................................................................................................... 178. Provide new home tiles with KPIs to the Home View ............................................................... 188.1. Append a new tile in the SAP standard application areas ............................................................. 188.2. Add new home tiles for a new application area .............................................................................. 208.3. Enhance Gateway entity KeyFigure in Gateway Service /SCMTMS/GENERAL ........................... 218.4. Enhance Gateway Function Import GetKeyFigures in Gateway Service /SCMTMS/GENERAL ... 219. Add new buttons to a table toolbar ............................................................................................ 229.1. Custom Component ....................................................................................................................... 239.2. Fragment ........................................................................................................................................ 239.3. Read data from the table / dataset ................................................................................................. 2410. Hide view switch to always display table view .......................................................................... 2411. Freight Orders for Execution ...................................................................................................... 2611.1 Remove event type from list of unexpected events after reporting event ...................................... 2612. Freight Requests for Quotation .................................................................................................. 2712.1 Bypass cache for open freight requests for quotation .................................................................... 2713. Provide new work sets for SAP® functionality outside SAP® TM .......................................... 2814. Provide content from third-party data sources ......................................................................... 28HOW TO BUILD AN ODATA SERVICE BASED ON SAP NETWEAVER GATEWAY ................................. 291. Introduction .................................................................................................................................. 292. Description ................................................................................................................................... 293. Gateway Service Manager ........................................................................................................... 29HOW TO BUILD THE USER INTERFACE ..................................................................................................... 31APPENDIX A: FURTHER INFORMATION ..................................................................................................... 32

Page 3: How to provide customer extensions for the SAP TM ...a248.g.akamai.net/n/248/420835/739285d35ae13ad53a7044d1e306197… · how to provide customer modifications for the sap tm collaboration

HOW TO PROVIDE CUSTOMER MODIFICATIONS FOR THE SAP TM COLLABORATION PORTAL

2017-04-21 3

APPENDIX B: TECHNICAL IDS OF VIEWS .................................................................................................. 32APPENDIX C: TECHNICAL IDS OF TABLES ............................................................................................... 32APPENDIX D: TECHNICAL IDS OF DATASETS .......................................................................................... 33APPENDIX E: AVAILABLE EXTENSION POINTS ........................................................................................ 33

Page 4: How to provide customer extensions for the SAP TM ...a248.g.akamai.net/n/248/420835/739285d35ae13ad53a7044d1e306197… · how to provide customer modifications for the sap tm collaboration

HOW TO PROVIDE CUSTOMER MODIFICATIONS FOR THE SAP TM COLLABORATION PORTAL

2017-04-21 4

PURPOSE OF THIS DOCUMENT If you use the SAP® TM collaboration portal for collaboration between you and your business partners, you may need to enhance the delivered standard functionality with customer extensions. This document provides an overview of which extensions are possible and how to create them. THE BIG PICTURE Architecture overview The SAP® TM collaboration portal is an HTML5 based UI which consumes several application areas of the SAP® TM solution through stateless OData services which are exposed by SAP® NetWeaver Gateway.

RFC

OData, HTTP(S)HTML, JS, CSS via HTTP(S)

Front-End

Web Browser (IE 9.0, Firefox, Chrome)

SAP NetWeaver 7.40 (with component SAP Gateway

Foundation 7.40)

Reverse Proxy / Web Dispatcher

SAPTM9.1

BSP

OData Services

R

R R

R

DMZ

The figure above shows the preferred deployment option for the SAP® TM collaboration portal. All the modification options outlined in this document, refer to this option. In this deployment variant, the web browser on the carrier side accesses a web dispatcher in the DMZ. This web dispatcher routes the calls to the relevant Gateway Hub. Having the Gateway server as a central Hub instance provides additional security and flexibility in connecting to several different SAP® back-end systems. The SAP® TM Add-On, SAPTMUI 120, is installed on the Gateway system, containing the HTML5 / Javascript sources wrapped in a BSP container. Additionally, the Gateway services for the existing SAP® TM collaboration portal scenarios are registered there, so that the data calls can be forwarded from the Gateway Hub system to the SAP® TM back-end system, where the Gateway services are implemented.

Page 5: How to provide customer extensions for the SAP TM ...a248.g.akamai.net/n/248/420835/739285d35ae13ad53a7044d1e306197… · how to provide customer modifications for the sap tm collaboration

HOW TO PROVIDE CUSTOMER MODIFICATIONS FOR THE SAP TM COLLABORATION PORTAL

2017-04-21 5

IMPORTANT INFORMATION The previous extension concept required a custom modification: also when creating a new file in the BSP application, such as the Component.js file, the system treats this as a modification. This had one negative consequence: With each upgrade of software component SAPTMUI, your SAP TM collaboration portal extensions were removed from the BSP application. There is a SAP consulting note that explains how removed pages can be recovered with the help of transaction SPAU: 1231158 - BSP pages deleted or overwritten by upgrade. To avoid all this, a new, slightly different approach was implemented, which will keep all the existing extensions across upgrades of software component SAPTMUI. A prerequisite for the new extension concept is the implementation of SAP Note 2244451 - Collaboration Portal: Customer extensions get lost in upgrade.

Page 6: How to provide customer extensions for the SAP TM ...a248.g.akamai.net/n/248/420835/739285d35ae13ad53a7044d1e306197… · how to provide customer modifications for the sap tm collaboration

HOW TO PROVIDE CUSTOMER MODIFICATIONS FOR THE SAP TM COLLABORATION PORTAL

2017-04-21 6

HOW TO DEFINE THE EXTENSION TYPES

1. Provide customer-specific fields for existing functionality You can extend the shipped collaboration portal by adding customer-specific fields to the predefined Gateway services. These fields are added to the user interface in pre-defined places. If you want to extend the Gateway services, you have to provide a BAdI implementation for BAdI /SCMTMS/BADI_GW_CUST_ENH which is contained in enhancement spot /SCMTMS/ES_GW_CUST_ENH. The BAdI has to implement the interface /SCMTMS/IF_GW_CUST_ENH. For more information, see SAP implementation guide path SAP Transportation Management -> Transportation Management -> Business Add-Ins (BAdIs) for Transportation Management -> Collaboration Portal -> BAdI: Enhancement to Gateway Services.

2. Preliminary work

2.1. Create own customer BSP application • Start the ABAP workbench (transaction SE80) • Create a new BSP application with the following settings:

o Application Name: any name in customer namespace (e.g. Z_CP_EXTENSION) o Short description: any description you like o Application class: /UI5/CL_UI5_BSP_APPLICATION o XSRF protection: false o Stateful: false o Supports portal integration: false

Page 7: How to provide customer extensions for the SAP TM ...a248.g.akamai.net/n/248/420835/739285d35ae13ad53a7044d1e306197… · how to provide customer modifications for the sap tm collaboration

HOW TO PROVIDE CUSTOMER MODIFICATIONS FOR THE SAP TM COLLABORATION PORTAL

2017-04-21 7

2.2. Publish BSP application in SICF • Start transaction SICF (Define Services) • Execute (F8) • Open the path: default_host -> sap -> bc -> ui5_ui5 -> sap • Right-click on sap and select “New Sub-Element” • If you use a namespace for your BSP application, such as /MY_NAMESPACE/Z_CP_EXTENSION, you

have to create a new sub-element below ui5_ui5: default_host -> sap -> bc -> ui5_ui5 -> my_namespace; in this case right-click on my_namespace to create the BSP application service.

• Provide the name of the BSP application

• Provide at least one description • To define the logon page, go to Error Pages -> System Logon

Page 8: How to provide customer extensions for the SAP TM ...a248.g.akamai.net/n/248/420835/739285d35ae13ad53a7044d1e306197… · how to provide customer modifications for the sap tm collaboration

HOW TO PROVIDE CUSTOMER MODIFICATIONS FOR THE SAP TM COLLABORATION PORTAL

2017-04-21 8

• Make the following settings

• Finally, maintain the portal name in “Adjust Links and Images”

• Navigate back to the services list • Right-click the newly created service and select activate service

2.3. Create the index.html

To be able to run your custom portal, you have to create an index.html. • Start the ABAP workbench (transaction SE80) • Open the newly created BSP application • Create the new file:

o Right-click on the application

Page 9: How to provide customer extensions for the SAP TM ...a248.g.akamai.net/n/248/420835/739285d35ae13ad53a7044d1e306197… · how to provide customer modifications for the sap tm collaboration

HOW TO PROVIDE CUSTOMER MODIFICATIONS FOR THE SAP TM COLLABORATION PORTAL

2017-04-21 9

o Choose Create Page o Enter the following information:

Page: index.html Page Type: Page with flow logic

o Continue • Provide the following template • Activate the file

<!DOCTYPE HTML> <html> <head> <title>SAP Transportation Management collaboration portal</title> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="Cache-control" content="no-cache" /> <script src="1/resources/sap-ui-cachebuster/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-libs="sap.ui.commons, sap.ui.ux3, sap.ui.table, sap.ui.vbm" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-appCacheBuster="./" data-sap-ui-preload = "async" data-sap-ui-resourceroots='{ "zcoll_portal" : "./", "sap.tl_collaboration_portal" : "../../tmui/coll_portal/", "sap.tl_collaboration_portal.helpers" : "../../tmui/coll_portal/js/helpers/", "sap.tl_collaboration_portal.controls" : "../../tmui/coll_portal/js/controls/", "sap.tl_collaboration_portal.dialogs" : "../../tmui/coll_portal/js/dialogs/", "sap.tl_collaboration_portal.types" : "../../tmui/coll_portal/js/types/", "sap.tl_collaboration_portal.language_bundle" : "../../tmui/coll_portal/i18n/", "sap.tl_collaboration_portal.view" : "../../tmui/coll_portal/tl_collaboration_portal/", "sap.ui2.srvc" : "/sap/public/bc/ui2/services/sap/ui2/srvc/" }'> </script> <script> function getCookieParameter(cname) { var pos = document.cookie.indexOf(cname); var cookieStringSplit = document.cookie.substr(pos, document.cookie.length); cookieStringSplit = cookieStringSplit.split("&"); if(cookieStringSplit){ return cookieStringSplit[0].split("=")[1]; }else{ return ""; } } if(document.cookie){ var sapLanguage = getCookieParameter("sap-language"); if (sapLanguage){ sap.ui.getCore().getConfiguration().setLanguage(sapLanguage); } } sap.ui.getCore().attachInit(function(){ jQuery.sap.includeStyleSheet("../../tmui/coll_portal/css/tl_collaboration_portal_styles.css"); jQuery.sap.log.setLevel(jQuery.sap.log.LogLevel.WARNING); var oComponentShell = sap.ui.getCore().createComponent({ name: "zcoll_portal", id: "ComponentShell" }); // Create a Ui container var oComponentContainer = new sap.ui.core.ComponentContainer("CompContainerMain", { component: oComponentShell }); // place this Ui Container with the Component inside into UI Area oComponentContainer.placeAt("content"); }); </script> </head> <body class="sapUiBody" role="application"> <div id="content"></div> </body>

Page 10: How to provide customer extensions for the SAP TM ...a248.g.akamai.net/n/248/420835/739285d35ae13ad53a7044d1e306197… · how to provide customer modifications for the sap tm collaboration

HOW TO PROVIDE CUSTOMER MODIFICATIONS FOR THE SAP TM COLLABORATION PORTAL

2017-04-21 10

</html>

2.4. URL to the custom application Your custom application can be found with the following link https://<server>:<port>/sap/bc/ui5_ui5/<sap or namespace>/<BSP application>/index.html?sap-client=<client>&sap-language=EN. Continue from here with the creation of the Component.js.

3. Fiori like logon screen The SAP TM collaboration portal comes with the following logon screen layout:

If you want to use a Fiori like logon screen with a nice background image, follow the instructions below:

Page 11: How to provide customer extensions for the SAP TM ...a248.g.akamai.net/n/248/420835/739285d35ae13ad53a7044d1e306197… · how to provide customer modifications for the sap tm collaboration

HOW TO PROVIDE CUSTOMER MODIFICATIONS FOR THE SAP TM COLLABORATION PORTAL

2017-04-21 11

Prerequisites: • SAP Note 2273971 - Collaboration portal: Implementation of Fiori like logon screen

• Create a new class that inherits from class /TMUI/CL_UI_LOGIN. • Overwrite method INIT_DEFAULT_PROPERTIES and call its parent method. • In this method, you can overwrite the title “SAP Transportation Management collaboration portal” and

provide the path to another background image, if you do not want to use the pre-delivered image. • Instead of entering class CL_ICF_NW07_LOGIN_HASH in the previous chapter, enter the class, which

was newly created. 4. Create a custom Component

Some of the following chapters require you to create a custom component. Here are the steps to do this: • Create the file Component.js. o Start the ABAP workbench (transaction SE80) o Open the custom BSP application o Right-click on Page Fragments o Choose Create o Enter the following information:

o Page: Component.js o Page Type: Page Fragment

o Continue • The bare skeleton of the file Component.js looks as follows:

jQuery.sap.declare("zcoll_portal.Component"); jQuery.sap.require("sap.tl_collaboration_portal.Component"); // new custom component sap.tl_collaboration_portal.Component.extend("zcoll_portal.Component", { metadata : {

customizing : { //customizing code to be added

} }, init : function() { this._oResourceModel = new sap.ui.model.resource.ResourceModel({bundleName: "sap.tl_collaboration_portal.language_bundle.i18nGeneral"}); } });

A few remarks:

• To use the custom component you have to open the Collaboration Portal by starting the custom BSP application.

• If you want to use multiple different customizations from the following chapters, just add all of them to the same Component.js. There must only be one Component.js in the BSP application.

• Component.js is a JavaScript file, so its content has to be syntactically correct JavaScript. In particular, this means that the content of metadata : {} has to be valid JSON. Here is an example of what you should avoid and how it should look instead:

Bad Example

This won’t work because the JSON has a syntax error

Good Example objects/attributes are just defined once

metadata : { customizing : { "sap.ui.viewModifications" : {

metadata : { customizing : { "sap.ui.viewModifications" : {

Page 12: How to provide customer extensions for the SAP TM ...a248.g.akamai.net/n/248/420835/739285d35ae13ad53a7044d1e306197… · how to provide customer modifications for the sap tm collaboration

HOW TO PROVIDE CUSTOMER MODIFICATIONS FOR THE SAP TM COLLABORATION PORTAL

2017-04-21 12

"view_A” : { //some modifications for view A } }, "sap.ui.viewModifications" : { "view_B” : { //some modifications for view B }, "view_B” : { //another modification for view B } } } }

"view_A” : { //some modifications for view A }, "view_B” : { //some modifications for view B //another modification for view B } } } }

5. Overwrite labels delivered by SAP as standard

You can overwrite labels, which are delivered by SAP as standard. Prerequisites:

• SAP Note 2076739 - Collaboration Portal: Overwriting SAP labels • SAP Note 2154381 - Collaboration Portal: Window title not replaced when app title is changed (only

needed, if you want to overwrite the app title)

5.1. Find the technical text key to be changed • Start the ABAP workbench (transaction SE80) • Open BSP application /TMUI/COLL_PORTAL • Open the file /TMUI/COLL_PORTAL -> Page Fragments -> WebContent -> i18n ->

i18nGeneral.properties • Search for the text you want to overwrite, such as “Requested Start Date/Time” • Note the text key that preceeds the text, such as “lblrequestedstart”

5.2. Create the new text

• Start the ABAP workbench (transaction SE80) • Open the custom BSP application • Before creating the first text, the file has to be created:

o Right-click on Page Fragments o Choose Create o Enter the following information:

Page: custom.properties Page Type: Page Fragment

o Continue • Open the file Page Fragments -> custom.properties • Enter the new text as follows: <text key>=<new text>, such as lblrequestedstart=My Date • Activate the file

5.3. Enhance the custom Component.js

jQuery.sap.declare("zcoll_portal.Component"); jQuery.sap.require("sap.tl_collaboration_portal.Component"); // new custom component sap.tl_collaboration_portal.Component.extend("zcoll_portal.Component", { metadata : { customizing : { }

Page 13: How to provide customer extensions for the SAP TM ...a248.g.akamai.net/n/248/420835/739285d35ae13ad53a7044d1e306197… · how to provide customer modifications for the sap tm collaboration

HOW TO PROVIDE CUSTOMER MODIFICATIONS FOR THE SAP TM COLLABORATION PORTAL

2017-04-21 13

}, init : function() { this._oResourceModel = new sap.ui.model.resource.ResourceModel({bundleName:"sap.tl_collaboration_portal.language_bundle.i18nGeneral"}); this._oResourceModel.enhance({bundleName:"zcoll_portal.custom"}); sap.ui.core.UIComponent.prototype.init.apply(this,arguments); } });

6. Remove standard controls from the SAP® TM collaboration portal

You can remove controls, which are delivered by SAP as standard. Prerequisites:

• SAP UI5 version 1.26.0 (contained in software component SAP_UI 740 SP11) • SAP Note 2088353 - Enable view modifications in TM Collaboration Portal

6.1. Find the technical ID of the control

• Right-click on the control in the browser • Choose “Inspect Element” • In the HTML source code navigate up to the <div> relevant for this control and note its ID, such as

“requestsTable_RequestForQuotationID” • For the technical ID of the containing view refer to Appendix B: Technical IDs of views.

6.2. Hide the control

• Make sure that the file Component.js exists. If not, create it as described in chapter 4 “Create a custom

Component”. • Enhance the custom Component.js as shown below:

jQuery.sap.declare("zcoll_portal.Component"); jQuery.sap.require("sap.tl_collaboration_portal.Component"); // new custom component sap.tl_collaboration_portal.Component.extend("zcoll_portal.Component", { metadata : { customizing : { "sap.ui.viewModifications" : { "sap.tl_collaboration_portal.view.requestsForQuotationProf" : { "requestsTable_RequestForQuotationID" : { "visible" : false } } } } } });

6.3 Hide thingGroup, thingGroup row, navigationItem or panel on an overlay dialog

It is not possible to hide a thingGroup, row of a thingGroup, navigationItem or panel on an overlay dialog using the sap.ui.viewModifications as described in the previous chapter. In order to hide a thingGroup, one of its rows, a navigationItem or panel another concept using sap.ui.ControllerExtensions has to be applied.

Page 14: How to provide customer extensions for the SAP TM ...a248.g.akamai.net/n/248/420835/739285d35ae13ad53a7044d1e306197… · how to provide customer modifications for the sap tm collaboration

HOW TO PROVIDE CUSTOMER MODIFICATIONS FOR THE SAP TM COLLABORATION PORTAL

2017-04-21 14

If you want to modify an overlay dialog, for instance the „Transport Details“ dialog for Freight Requests for Quotation, you need to identify the controller which refers to this overlay dialog, in this case the controller of view "sap.tl_collaboration_portal.view.requestsForQuotation". Then you need to create a custom controller for exactly this view, which implements the following functions:

• getThingGroupIdsToBeRemovedFromOverlay(): To hide complete thingGroups on an overlay dialog, for instance group „Last Freight Quotation“ on overlay dialog „Transport Details“, implement this. Return an array with the technical IDs (string) of the thingGroup controls you want to hide.

• getRowsToBeHiddenFromOverlay(): To hide one or multiple rows of a thingGroup on an overlay dialog, for instance row „Dangerous Goods“ in group „Transport Details“ on overlay dialog „Transport Details“, implement this. Return an object of the following structure: { { thingGroupID : "<thingGroupID1>",

rowProperty : "<PropertyOfRow1>" }, { thingGroupID : "<thingGroupID2>", rowProperty : "<PropertyOfRow2>" } }

Within this object, ensure you set the following properties: • property „thingGroupID“ must reflect the technical ID (string) of the thingGroup control, which

contains the row • property „rowProperty“ must contain the name (string) of the property, which is bound to this

row, e.g. „DangerousGoodsIndicator“.

• getNavItemsToBeRemovedFromOverlay(): To hide complete navigation items on an overlay dialog, for instance item „Cargo“ on overlay dialog „Freight Order Details“, implement this. Return an array with the key property (string) of the navigationItem controls you want to hide.

• getPanelsToBeRemovedFromOverlay():

To hide complete panels on an overlay dialog, for instance panel „Attachments“ on overlay dialog „Freight Order Details“, implement this. Return an array with the technical IDs (string) of the panel controls you want to hide.

• Make sure that the file Component.js exists. If not, create it as described in chapter 4 “Create a custom

Component”.

• Enhance the custom Component.js as shown below: jQuery.sap.declare("zcoll_portal.Component"); jQuery.sap.require("sap.tl_collaboration_portal.Component"); // new custom component sap.tl_collaboration_portal.Component.extend("zcoll_portal.Component", { metadata : { customizing : { " sap.ui.controllerExtensions" : { "sap.tl_collaboration_portal.view.requestsForQuotation": { controllerName: "zcoll_portal.CustomRequestsForQuotation" } } } } });

Page 15: How to provide customer extensions for the SAP TM ...a248.g.akamai.net/n/248/420835/739285d35ae13ad53a7044d1e306197… · how to provide customer modifications for the sap tm collaboration

HOW TO PROVIDE CUSTOMER MODIFICATIONS FOR THE SAP TM COLLABORATION PORTAL

2017-04-21 15

• Implement the custom controller Custom<xxx>.controller.js as shown below:

sap.ui.controller("zcoll_portal.CustomRequestsForQuotation", { getThingGroupIdsToBeRemovedFromOverlay: function(){ var aIdsToBeRemovedFromOverlay = new Array(); // Hide Last Quotation Information aIdsToBeRemovedFromOverlay.push("thingGroupLastQuotation"); // Hide Business Partner Information aIdsToBeRemovedFromOverlay.push("thingGroupBusinessPartners"); return aIdsToBeRemovedFromOverlay; }, getRowsToBeHiddenFromOverlay: function(){ var oRowsToBeHidden = {}, oNewElement1 = {}, oNewElement2 = {}, oNewElement3 = {}; // Hide RFQ Status oNewElement1.thingGroupID = "thingGroupRfq"; oNewElement1.rowProperty = "LifecycleStatusDescription"; // Hide Contact Person Phone Number oNewElement2.thingGroupID = "thingGroupRfq"; oNewElement2.rowProperty = "ContactPersonPhoneNumber"; // Hide Dangerous Goods oNewElement3.thingGroupID = "thingGroupTransport"; oNewElement3.rowProperty = "DangerousGoodsIndicator"; jQuery.extend(true, oRowsToBeHidden, [oNewElement1, oNewElement2, oNewElement3]); return oRowsToBeHidden; } });

sap.ui.controller("zcoll_portal. CustomEventNotificationFreightOrder", { getNavItemsToBeRemovedFromOverlay: function(){ var aNavItemsToBeRemoved = new Array(); aNavItemsToBeRemoved.push("navItemEventNotificationCargo"); return aNavItemsToBeRemoved; }, getPanelsToBeRemovedFromOverlay: function(){ var aPanelIdsToRemove = new Array();

aPanelIdsToRemove.push("overlayEventNotificationFreightOrderDetailsPanelAttachments");

return aPanelIdsToRemove; }

Page 16: How to provide customer extensions for the SAP TM ...a248.g.akamai.net/n/248/420835/739285d35ae13ad53a7044d1e306197… · how to provide customer modifications for the sap tm collaboration

HOW TO PROVIDE CUSTOMER MODIFICATIONS FOR THE SAP TM COLLABORATION PORTAL

2017-04-21 16

});

Prerequisites: • SAP Note 2354736 - Collaboration Portal: It is not possible to hide thingGroup or thingGroup row on an

overlay • SAP Note 2356481 - Collaboration Portal: It is not possible to hide navigationItem or panel on an overlay

7. Provide a new navigation area or navigation item in the navigation bar for existing

SAP® TM functionality You want to support a new scenario, which is not yet covered by the SAP® TM collaboration portal and consumes functionality from a SAP® TM installation. Prerequisites:

• SAP UI5 version 1.26.0 (contained in software component SAP_UI 740 SP11) • SAP Note 2088353 - Enable view modifications in TM Collaboration Portal • SAP Note 2119688 - CP: Customer Extension on navigation item and home tiles

7.1. Provide a new Gateway service

Define a new Gateway service with the business entities that you want to consume in the SAP® TM collaboration portal (see How to build an OData Service based on SAP Netweaver Gateway).

7.2. Provide a new navigation area The SAP® TM collaboration portal shows several navigation areas in the header area. You could add a new navigation area on the first level based on your own business requirement. For example, if you would like to add a new navigation area “Freight Schedule Management”, follow the steps below: • Make sure that the file Component.js exists. If not, create it as described in chapter 4 “Create a custom

Component”. • Implement the file Component.js as given in the following:

jQuery.sap.declare("zcoll_portal.Component"); jQuery.sap.require("sap.tl_collaboration_portal.Component"); // new custom component sap.tl_collaboration_portal.Component.extend("zcoll_portal.Component", { metadata : { customizing : { "sap.ui.controllerExtensions": { "sap.tl_collaboration_portal.view.shell": { controllerName: "zcoll_portal.CustomShell" } } } } });

• In your custom BSP application, create a controller file with name for instance CustomShell.controller.js • Implement method addNewNavigationArea(). For example, you could add the code below to add a new

navigation area “Freight Schedules”. Provide a unique key for navigation items such as the view name.

Page 17: How to provide customer extensions for the SAP TM ...a248.g.akamai.net/n/248/420835/739285d35ae13ad53a7044d1e306197… · how to provide customer modifications for the sap tm collaboration

HOW TO PROVIDE CUSTOMER MODIFICATIONS FOR THE SAP TM COLLABORATION PORTAL

2017-04-21 17

sap.ui.controller("zcoll_portal.CustomShell", {

addNewNavigationArea: function(aNavItems){

var navigation = sap.tl_collaboration_portal.helpers.navigation;

var oSchedule = {

text :"Freight Schedules Management",

subItems : []

};

oSchedule.subItems.push({

key : "freightSchedule", // usually same as view name

text : "Freight Schedules",

viewName : "zcoll_portal.freightSchedule",

type : "JS"

});

// freightSchedule as navigation item key.

navigation.setNavItems("tendering", oFreightOrderNavItem);

} });

• Create a new SAP UI5 JS View, such as freightSchedule.view.js and freightSchedule.controller.js in your

custom BSP application (see How to build the user interface). 7.3. Provide a new navigation item

You could add a new navigation item on the second level to the existing items, which are delivered by SAP as standard. This is realized by using the controllerExtensions feature provided by SAP UI5. In the collaboration portal, there are four controller extension points (methods to be overwritten in your own extension controller) defined that allow you to customize respectively.

1. Home => customizeHomeNavItem() 2. Freight Order Management => customizeFreightOrderNavItem() 3. Freight Settlement Management => customizeFreightSettlementNavItem() 4. Freight Agreement Management => customizeFreightAgreementNavItem()

For instance, if you would like to add a navigation item “Freight Order” inside of “Freight Order Management” then follow the steps below: • Make sure that the Component.js exists. If not, create it as described in the previous chapter. • Implement the file Component.js as given in the following:

jQuery.sap.declare("zcoll_portal.Component"); jQuery.sap.require("sap.tl_collaboration_portal.Component"); // new custom component sap.tl_collaboration_portal.Component.extend("zcoll_portal.Component", { metadata : { customizing : { "sap.ui.controllerExtensions": { "sap.tl_collaboration_portal.view.shell": { controllerName: "zcoll_portal.CustomShell" } } } }

Page 18: How to provide customer extensions for the SAP TM ...a248.g.akamai.net/n/248/420835/739285d35ae13ad53a7044d1e306197… · how to provide customer modifications for the sap tm collaboration

HOW TO PROVIDE CUSTOMER MODIFICATIONS FOR THE SAP TM COLLABORATION PORTAL

2017-04-21 18

});

• In your custom BSP application, create a controller file with a name, for instance, CustomShell.controller.js

• Implement method customizeFreightOrderNavItem().

sap.ui.controller("zcoll_portal.CustomShell", { customizeFreightOrderNavItem: function(oFreightOrderNavItem){ var navigation = sap.tl_collaboration_portal.helpers.navigation; oFreightOrderNavItem.subItems.push({ key : "freightOrder", text : "Freight Order", viewName : "zcoll_portal.freightOrder", type : "JS" }); // refer key mapping table of application area navigation.setNavItems("tendering", oFreightOrderNavItem); } });

Application Area Navigation Item Key

Home home Freight Order Management tendering Freight Settlement Management invoicing Freight Agreement Management freightProcurement

• Create a new SAP UI5 JS View, such as freightOrder.view.js and freightOrder.controller.js in your custom

BSP application (see How to build the user interface). • Similar to extend customizeFreightOrderNavItem(), you could implement other navigation areas as

mentioned above.

8. Provide new home tiles with KPIs to the Home View You could add new home tiles with KPIs to the home screen. This is realized by using the controllerExtensions feature provided by SAP UI5. Prerequisites:

• SAP UI5 version 1.26.0 (contained in software component SAP_UI 740 SP11) • SAP Note 2088353 - Enable view modifications in TM Collaboration Portal • SAP Note 2119688 - CP: Customer Extension on navigation item and home tiles • SAP Note 2121617 - CP: Enable customization on KeyFigure Gateway service

8.1. Append a new tile in the SAP standard application areas

Three extension points (properties to be overwritten in your own component.js) were defined that allow you to customize tiles on home view:

1. extTileFreightOrderManagement 2. extTileFreightSettlementManagement 3. extTileFreightAgreementManagement

Let us say you would like to add a new tile inside of “Freight Order Management” after “Event Handling”. You could implement the view extension by following the steps below. • Make sure that the file Component.js exists. If not, create it as described in chapter 4 “Create a custom

Component”. • Implement the file Component.js as given in the following:

jQuery.sap.declare("zcoll_portal.Component"); jQuery.sap.require("sap.tl_collaboration_portal.Component");

Page 19: How to provide customer extensions for the SAP TM ...a248.g.akamai.net/n/248/420835/739285d35ae13ad53a7044d1e306197… · how to provide customer modifications for the sap tm collaboration

HOW TO PROVIDE CUSTOMER MODIFICATIONS FOR THE SAP TM COLLABORATION PORTAL

2017-04-21 19

// new custom component sap.tl_collaboration_portal.Component.extend("zcoll_portal.Component", { metadata : { customizing : { "sap.ui.viewExtensions": { "sap.tl_collaboration_portal.view.home": { "extTileFreightOrderManagement": { className: "sap.ui.core.Fragment", fragmentName: "zcoll_portal.TileFreightOrderExtension", type: "JS" } } } } } });

• Create a new fragment JavaScript file in your custom BSP application, such as

TileFreightOrderExtension.fragment.js. Follow the SAPUI5 naming convention XXX.fragment.js, otherwise in the application runtime, your file won’t be found by the SAPUI5 framework.

• Write the following code as an example to provide a new tile “Freight Schedule - Custom”, which is appended after “Freight Orders for Execution”. If you click on your tile, it will navigate you to freightSchedule.view.js view, which you implemented.

sap.ui.jsfragment("zcoll_portal.TileFreightOrderExtension", { createContent: function(oController ) { // 1 var oExtTileFreightSchedule = new sap.tl_collaboration_portal.controls.HomeTile("ZZFreightScheduleCustomNumber", { applicationArea : "Freight Schedule - Custom", // 2 targetNavigation : "nav-tendering-freightSchedule", keyFigureValue : "0", numberState : "N", title : "Schedules", subtitle : "Open", // your Order status tooltip : "Tooltip when you mouse over on the hometile control", tileNumberTooltip : "Tooltip when you mouse over the KPI Number" }); // 3 return [oExtTileFreightSchedule]; } }

1. You need to use control sap.tl_collaboration_portal.controls.HomeTile to provide Tile information.

“ZZFreightScheduleCustomNumber” is the ID of your Tile. Note: The ID is very important in custom naming space as your Gateway service needs to calculate and provide the keyFigureValue. Read the following chapter to get more information.

2. For property targetNavigation, you need to follow the naming convention here to navigate to your view: “nav-[navigation item key]-[view name]”, such as nav-tendering-freightSchedule.

Page 20: How to provide customer extensions for the SAP TM ...a248.g.akamai.net/n/248/420835/739285d35ae13ad53a7044d1e306197… · how to provide customer modifications for the sap tm collaboration

HOW TO PROVIDE CUSTOMER MODIFICATIONS FOR THE SAP TM COLLABORATION PORTAL

2017-04-21 20

Application Area Navigation Item Key Home home Freight Order Management tendering Freight Settlement Management invoicing Freight Agreement Management freightProcurement

3. You could define more than one HomeTile and return it as an array.

8.2. Add new home tiles for a new application area

Extension point extAdditionalTilesWithHeader was defined that allows you to customize the tiles on home view. • Make sure that the file Component.js exists. If not, create it as described in chapter 4 “Create a custom

Component”. • Implement the file Component.js as given in the following:

jQuery.sap.declare("zcoll_portal.Component"); jQuery.sap.require("sap.tl_collaboration_portal.Component"); // new custom component sap.tl_collaboration_portal.Component.extend("zcoll_portal.Component", { metadata : { customizing : { "sap.ui.viewExtensions": { "sap.tl_collaboration_portal.view.home": { "extAdditionalTilesWithHeader": { className: "sap.ui.core.Fragment", fragmentName: "zcoll_portal.AdditionalTileWithHeader", type: "JS" }, } }, } } });

• Create a new view fragment file AdditionalTileWithHeader.fragment.js in your custom BSP application.

sap.ui.jsfragment("zcoll_portal.AdditionalTileWithHeader", { createContent: function(oController) { // 1 var oHomeHeader = new sap.ui.commons.FormattedTextView({ htmlText : "<div class='sapHomeContainerTitle'>Freight Schedule – Custom</div>" }); // 2 var oAdditionalGrid = new sap.ui.layout.Grid("additionalGrid", { hSpacing: 1, vSpacing: 2, position: sap.ui.layout.GridPosition.Center, content: [], defaultSpan : "L2 M2 S2" }); // 3 var oMyTile = new sap.tl_collaboration_portal.controls.HomeTile("ZZFreightScheduleCustomNumber", {

Page 21: How to provide customer extensions for the SAP TM ...a248.g.akamai.net/n/248/420835/739285d35ae13ad53a7044d1e306197… · how to provide customer modifications for the sap tm collaboration

HOW TO PROVIDE CUSTOMER MODIFICATIONS FOR THE SAP TM COLLABORATION PORTAL

2017-04-21 21

applicationArea : "Additional Tiles", targetNavigation : "nav-freightSchedule-freightSchedule", title : "Executive", keyFigureValue : "0", numberState : "C", subtitle : "Awesome", tooltip : "Hi there", tileNumberTooltip : "HTML5 Rocks" }); oAdditionalGrid.addContent(oMyTile); // 4: It has to return a control instance or collection of controls return [oHomeHeader, oAdditionalGrid]; } });

1. Define your application area header. 2. Define a Grid which could contain a collection of HomeTile controls. 3. Define your own HomeTile instance with a custom name space property as its ID. You will use this ID

to define a new KPI figure from back end. 4. Return the header and tile as an array such as [oHeader1, oControl1, oHeader2, oControl2…].

8.3. Enhance Gateway entity KeyFigure in Gateway Service /SCMTMS/GENERAL

You have to enhance the back-end implementation of the collaboration portal to provide the number value for your newly implemented HomeTile. Refer to chapter Provide customer-specific fields for existing functionality, for information on how to enhance Gateway services. When you define a new KPI for a HomeTile, make sure that the KPI in the Gateway service is named with the ID of the HomeTile.

8.4. Enhance Gateway Function Import GetKeyFigures in Gateway Service /SCMTMS/GENERAL To calculate a newly added key figure in BAdI method /SCMTMS/IF_GW_CUST_ENH~MAP_DATA_TO_PROPERTIES based on a specific date, there are two alternatives available. If you want to use one of the existing dates, which are derived from the respective number of days in the past in the user settings, you can find them as an input parameter it_parameter in BAdI method /SCMTMS/IF_GW_CUST_ENH~MAP_DATA_TO_PROPERTIES and no further action has to be taken. If you want to introduce a new date field on the UI, for instance by introducing new user settings for your own area and use this later on as an input parameter in BAdI method /SCMTMS/IF_GW_CUST_ENH~MAP_DATA_TO_PROPERTIES, you need to apply the following enhancements:

• In the ABAP back-end, you need to add new function import parameters for function import GetKeyFigures in Gateway Service /SCMTMS/GENERAL. In order to do so, you need to add lines similar to the following example in BAdI method /SCMTMS/IF_GW_CUST_ENH~ADD_PROPERTIES:

Page 22: How to provide customer extensions for the SAP TM ...a248.g.akamai.net/n/248/420835/739285d35ae13ad53a7044d1e306197… · how to provide customer modifications for the sap tm collaboration

HOW TO PROVIDE CUSTOMER MODIFICATIONS FOR THE SAP TM COLLABORATION PORTAL

2017-04-21 22

DATA: lo_action TYPE REF TO /iwbep/if_mgw_odata_action, lo_parameter TYPE REF TO /iwbep/if_mgw_odata_parameter. TRY. CASE iv_service_name. WHEN '/SCMTMS/GENERAL'. lo_action = io_model->get_action( iv_action_name = 'GetKeyFigures' ). lo_parameter = lo_action->create_input_parameter(iv_parameter_name = 'ZZCustomerEnhancementDate1' iv_abap_fieldname = 'ZZCUSTOMERENHANCEMENTDATE1' ). lo_parameter->/iwbep/if_mgw_odata_property~set_type_edm_datetime( ). lo_parameter = lo_action->create_input_parameter(iv_parameter_name = 'YYCustomerEnhancementDate2' iv_abap_fieldname = 'YYCUSTOMERENHANCEMENTDATE2' ). lo_parameter->/iwbep/if_mgw_odata_property~set_type_edm_datetime( ). ENDCASE. CATCH /iwbep/cx_mgw_med_exception. ENDTRY.

It is important to use prefix “ZZ” or “YY” for the function import parameter field names and ABAP field names. For further details about enhancing Gateway services in general, please refer to chapter Provide customer-specific fields for existing functionality, for information on how to enhance Gateway services.

• In the UI, you need to ensure that the respective date value is passed to the function import GetKeyFigures. Therefore, you need to create a new controller extension for the controller of the home view. Add the following extension customizing to your customer Component.js: jQuery.sap.declare("zcoll_portal.Component"); jQuery.sap.require("sap.tl_collaboration_portal.Component"); // new custom component sap.tl_collaboration_portal.Component.extend("zcoll_portal.Component", { metadata : { customizing : { "sap.ui.controllerExtensions": { "sap.tl_collaboration_portal.view.home": { controllerName: "zcoll_portal.CustomHome" } } } } });

Then you need to create a CustomHome.controller.js file in your custom BSP application, similar to the CustomShell.controller.js as described in chapter Provide a new navigation item. In this, you need to overwrite function getCustomerExtensionDate(sCustomerExtensionDateName). Within this function, you receive the names of your customer specific function import parameters, so that you can return a respective date in format "1970-01-01T00:00:00Z“.

sap.ui.controller("zcoll_portal.CustomHome", { getCustomerExtensionDate: function(sCustomerExtensionDateName){ if (sCustomerExtensionDateName === ‘ZZCustomerEnhancementDate1’){ return "1970-01-01T00:00:00Z"; } else if (sCustomerExtensionDateName === ‘YYCustomerEnhancementDate2’){ return "2000-01-01T00:00:00Z"; } } });

Prerequisites:

• SAP Note 2351348 - Collaboration Portal: Function import GetKeyFigures cannot be enhanced (Front-End)

• SAP Note 2351350 - Collaboration Portal: Function import GetKeyFigures cannot be enhanced (Back-End)

9. Add new buttons to a table toolbar

Page 23: How to provide customer extensions for the SAP TM ...a248.g.akamai.net/n/248/420835/739285d35ae13ad53a7044d1e306197… · how to provide customer modifications for the sap tm collaboration

HOW TO PROVIDE CUSTOMER MODIFICATIONS FOR THE SAP TM COLLABORATION PORTAL

2017-04-21 23

Prerequisites: • SAP UI5 version 1.26.0 (contained in software component SAP_UI 740 SP11) • SAP Note 2163072 - Collaboration Portal: Custom buttons in toolbars

The process to add new buttons to a table toolbar is very similar to adding new tiles to the home screen. You need two parts:

1. a custom Component.js 2. a fragment 9.1. Custom Component

Make sure that the file Component.js exists. If not, create it as described in chapter 4 “Create a custom Component”. Here is an example Component.js to add buttons to the toolbar of the professional view of the Event Notification area. jQuery.sap.declare("zcoll_portal.Component"); jQuery.sap.require("sap.tl_collaboration_portal.Component"); // new custom component sap.tl_collaboration_portal.Component.extend("zcoll_portal.Component", { metadata : { customizing : { "sap.ui.viewExtensions" : { "sap.tl_collaboration_portal.view.eventNotification.eventNotificationFreightOrderProf" : { "extViewToolbar" : { className: "sap.ui.core.Fragment", fragmentName: "zcoll_portal.EventToolbar", type: "JS" } }, } } } }); The line after sap.ui.viewExtensions specifies the technical ID of the view. Please refer to Appendix B: Technical IDs of views to find the correct view ID.

9.2. Fragment The fragment is a JavaScript file in your custom BSP application. In our example above, we have named the fragment EventToolbar, so the file EventToolbar.fragment.js has to be created in the custom BSP application (right next to the Component.js). Here is the content of our example fragment: sap.ui.jsfragment("zcoll_portal.EventToolbar", { createContent : function(oController) { var printButton = new sap.ui.commons.Button({ text : "custom button text", press : function(oEvent) {

Page 24: How to provide customer extensions for the SAP TM ...a248.g.akamai.net/n/248/420835/739285d35ae13ad53a7044d1e306197… · how to provide customer modifications for the sap tm collaboration

HOW TO PROVIDE CUSTOMER MODIFICATIONS FOR THE SAP TM COLLABORATION PORTAL

2017-04-21 24

var orderTable = sap.ui.getCore().byId("eventNotificationFreightOrderTable"); var tableModel = orderTable.getModel(); //retrieve data from the model and do something with it } }) return printButton; } } ) If you want to add more than one button, you can also return an array of buttons at the end of function createContent().

9.3. Read data from the table / dataset For the buttons added before, it might be necessary to read the content of the selected table row to get the context for the button action. Example for reading the data from a table: var oTable = sap.ui.getCore().byId("eventNotificationFreightOrderTable"), oModel = oTable.getModel(), iSelectedIndex = oTable.getSelectedIndex(), oFreightOrder; if(iSelectedIndex != -1){ oFreightOrder = oTable.getContextByIndex(iSelectedIndex).getObject(); }

Example for reading the data from a dataset: var oDataSet = sap.ui.getCore().byId("eventNotificationFreightOrderDataSet"); if(oDataSet){ var oDataModel = oDataSet.getModel(), aSelectedUUIDs = oDataSet.getSelectedUUIDs(), oSelectedEntity; if(!jQuery.isEmptyObject(aSelectedUUIDs)){ var sPath = ["/FreightOrderCollection(guid'", aSelectedUUIDs[0], "')"].join(''); oDataModel.createBindingContext(sPath, null, {}, function(oContext){ oSelectedEntity = oContext.getObject(); }, false/**bReload*/); } }

Please refer to Appendix C: Technical IDs of tables or Appendix D: Technical IDs of datasets to find the correct table or dataset IDs.

10. Hide view switch to always display table view As standard, each area offers the possibility to switch between a table view and a detail view of the business documents that are displayed. This feature is available for desktop browsers only – if you display the Collaboration Portal on a smartphone or tablet, the view switch is hidden and the detail view is always displayed. If you do not want to offer the detail view in a desktop browser and want to always display the table view, this can be done by implementing a function forceTableView() in a custom controller as follows:

Page 25: How to provide customer extensions for the SAP TM ...a248.g.akamai.net/n/248/420835/739285d35ae13ad53a7044d1e306197… · how to provide customer modifications for the sap tm collaboration

HOW TO PROVIDE CUSTOMER MODIFICATIONS FOR THE SAP TM COLLABORATION PORTAL

2017-04-21 25

• Make sure that the file Component.js exists. If not, create it as described in chapter 4 “Create a custom Component”.

• Enhance the custom Component.js as shown below, for example for the RequestForQuotation controller:

jQuery.sap.declare("zcoll_portal.Component"); jQuery.sap.require("sap.tl_collaboration_portal.Component"); // new custom component sap.tl_collaboration_portal.Component.extend("zcoll_portal.Component", { metadata : { customizing : { " sap.ui.controllerExtensions" : { "sap.tl_collaboration_portal.view.requestsForQuotation": { controllerName: "zcoll_portal.CustomRequestsForQuotation" } } } } });

• Implement the custom controller Custom<xxx>.controller.js as shown below:

sap.ui.controller("zcoll_portal.CustomRequestsForQuotation", { forceTableView: function() { return true; } });

Further, you need to hide the view switch. To do so, add the following view modifications to your custom Component.js for each view. You can use the following code snippet as an example how to hide the view switch for the RequestForQuotation view: jQuery.sap.declare("zcoll_portal.Component"); jQuery.sap.require("sap.tl_collaboration_portal.Component"); // new custom component sap.tl_collaboration_portal.Component.extend("zcoll_portal.Component", { metadata : { customizing : { " sap.ui.viewModifications" : { "sap.tl_collaboration_portal.view.requestsForQuotationProf": { "btnProfessionalRfqProfessional": { "visible": false }, "btnCasualRfqProfessional": { "visible": false }, "viewSwitchRfqLabel": { "visible": false } } } } }

Page 26: How to provide customer extensions for the SAP TM ...a248.g.akamai.net/n/248/420835/739285d35ae13ad53a7044d1e306197… · how to provide customer modifications for the sap tm collaboration

HOW TO PROVIDE CUSTOMER MODIFICATIONS FOR THE SAP TM COLLABORATION PORTAL

2017-04-21 26

}); Note that this only refers to desktop scenarios. On mobile devices, the detail view is still the only view which is displayed, and the table view is not supported. Prerequisite:

• SAP Note 2367220 - Collaboration Portal: Provide Extension Point for Forcing Table View

11. Freight Orders for Execution

11.1 Remove event type from list of unexpected events after reporting event In certain business scenarios, it might be required to disallow the reporting of certain unexpected events if another event has been reported that logically invalidates (or conflicts with) the first. For example, you don’t want to allow a carrier to report an unexpected loading begin if loading end has already been reported at a certain stop, even though initially the carrier may report both loading begin and end as unexpected events at a stop. To filter out certain event types based on other reported events, implement function defineCodesToBeFiltered () in a custom controller for EventNotificationFreightOrder as follows:

• Make sure that the file Component.js exists. If not, create it as described in chapter 4 “Create a custom Component”.

• Enhance the custom Component.js as shown below, for the EventNotificationFreightOrder controller: jQuery.sap.declare("zcoll_portal.Component"); jQuery.sap.require("sap.tl_collaboration_portal.Component"); // new custom component sap.tl_collaboration_portal.Component.extend("zcoll_portal.Component", { metadata : { customizing : { " sap.ui.controllerExtensions" : { "sap.tl_collaboration_portal.view.eventNotificationFreightOrder ": { controllerName: "zcoll_portal.CustomEventNotificationFreightOrder " } } } } });

• Implement the custom controller CustomEventNotificationFreightOrder.controller.js as shown below:

sap.ui.controller("zcoll_portal.CustomEventNotificationFreightOrder", { defineCodesToBeFiltered: function() { return [{Reported: "DEPARTURE", Remove: "POPU"}, {Reported: "COUPLING", Remove: "POD"}]; } });

In this example, reporting of event with event code „POPU“ will be prevented after reporting an event with event code „DEPARTURE“, and the same applies respectively to event code „POD“ after reporting „COUPLING“.

Page 27: How to provide customer extensions for the SAP TM ...a248.g.akamai.net/n/248/420835/739285d35ae13ad53a7044d1e306197… · how to provide customer modifications for the sap tm collaboration

HOW TO PROVIDE CUSTOMER MODIFICATIONS FOR THE SAP TM COLLABORATION PORTAL

2017-04-21 27

Prerequisite: • SAP Note 2371853 – Collaboration Portal: Post Filter of EventCodeCollection

12. Freight Requests for Quotation

12.1 Bypass cache for open freight requests for quotation

With the standard caching behavior, the refresh button on the different work lists on the UI triggers an asynchronous update of the back-end cache with data for all quick filters, while the data for the current quick filter is directly fetched for better performance. In the freight tendering context, this can lead to performance issues on the TM server. However, this will only happen, if tendering is set up in a way that all RFQs are published around the same time every day and many, many carrier users are logged on to their collaboration portal, have their work list with open freight RFQs open and are constantly refreshing their work list in order to quickly see new RFQs and be the first to accept them. In this special scenario, this will lead to a high number of asynchronous tasks being triggered on the TM server, which can have negative impact on system performance. If this is the case, it can make sense to bypass this caching behavior. In order not to influence the overall caching behavior, which is better for performance in other use cases, you can bypass the caching for the context of the refresh of a work list with open freight RFQs only. Therefore, you need to do the following:

• Make sure that the file Component.js exists. If not, create it as described in chapter 4 “Create a custom Component”.

• Enhance the custom Component.js as shown below, for the RequestsForQuotation controller: jQuery.sap.declare("zcoll_portal.Component"); jQuery.sap.require("sap.tl_collaboration_portal.Component"); // new custom component sap.tl_collaboration_portal.Component.extend("zcoll_portal.Component", { metadata : { customizing : { " sap.ui.controllerExtensions" : { "sap.tl_collaboration_portal.view.requestsForQuotation": { controllerName: "zcoll_portal.CustomRequestsForQuotation" } } } } });

• Implement the custom controller Custom RequestsForQuotation.controller.js as shown below:

sap.ui.controller("zcoll_portal.CustomRequestsForQuotation", { bypassCacheForOpenFreightRFQs: function() { return true; } });

Prerequisite:

• SAP Note 2461103 – Collaboration Portal: Bypass Cache for Open Freight RFQs (Back-End) • SAP Note 2460836 – Collaboration Portal: Bypass Cache for Open Freight RFQs (Front-End)

Page 28: How to provide customer extensions for the SAP TM ...a248.g.akamai.net/n/248/420835/739285d35ae13ad53a7044d1e306197… · how to provide customer modifications for the sap tm collaboration

HOW TO PROVIDE CUSTOMER MODIFICATIONS FOR THE SAP TM COLLABORATION PORTAL

2017-04-21 28

13. Provide new work sets for SAP® functionality outside SAP® TM If you want to consume non-SAP® TM functionality, there has to be a second system alias defined which points to the non-SAP® TM system. More details can be found here: http://help.sap.com/nwgateway20 -> Application Help -> Support Package 06 -> SAP NetWeaver Gateway -> SAP NetWeaver Gateway Configuration Guide -> OData Channel Configuration -> Connection Settings on the SAP NetWeaver Gateway Hub System -> Connection Settings: SAP NetWeaver Gateway to SAP Systems Keep in mind that the user name in the Gateway Hub system has to be the same in all referenced back-end systems.

14. Provide content from third-party data sources Third-party data sources have to provide their data through some kind of HTTP/web service. These services can be called from anywhere throughout the portal. Note that if the portal implementation refers to several servers to read data, the web dispatcher has to distribute the calls to the different servers but the browser may only connect to the web dispatcher. Otherwise up-to-date browsers block the calls due to a violation of the “Same-Origin-Policy”.

Page 29: How to provide customer extensions for the SAP TM ...a248.g.akamai.net/n/248/420835/739285d35ae13ad53a7044d1e306197… · how to provide customer modifications for the sap tm collaboration

HOW TO PROVIDE CUSTOMER MODIFICATIONS FOR THE SAP TM COLLABORATION PORTAL

2017-04-21 29

HOW TO BUILD AN ODATA SERVICE BASED ON SAP NETWEAVER GATEWAY 1. Introduction

There are several possibilities for consuming SAP software systems using SAP NetWeaver Gateway 2.0. For the online approach, SAP recommends the OData Channel programming paradigm. This allows development of OData content and metadata in back-end components. In this case, no content needs to be developed or deployed on the SAP NetWeaver Gateway server, which substantially simplifies development, deployment, and maintenance and results in lower total cost of development and total cost of ownership.

2. Description The objective of what is often called “content development” is to expose data from the back-end server as OData services through the SAP NetWeaver Gateway server. Ideally, consumption should be easy, or at least easier than consuming existing back-end functionality, and exposed services should be designed outside-in to support specific mobile applications. Note that this means OData services are explicitly designed for specific mobile apps and not for general purpose or reuse. Existing functions of the back end in general do not fulfill the requirements of mobile online applications; they are usually too complex, have too many fields and child nodes, are slow, or impose constraints regarding their transaction semantics. These issues also apply to service-oriented architecture (SOA) services, which is one of the reasons why it is not possible to simply reuse SOA for mobile apps. As a consequence, existing back-end functionality must be adapted for new OData service exposure. SAP decided to use OData as an application protocol on HTTP for UI consumption in general and for mobile in particular. OData builds on the known ATOM/PUB standard (which is used for news feeds, among other things). Instead of hypertext, OData transfers the state representation of tables and resources by means of structured XML. Besides that, Gateway supports JSON as another format. OData services are representational state transfer or REST services. Using the OData Channel, a modification happens completely on the back end, in a coded or generated component called the data adapter.

Detailed cookbooks can be found here: http://help.sap.com/nwgateway20 -> Application Help -> Support Package 06 -> SAP NetWeaver Gateway -> SAP Netweaver Developer Guide -> SAP NetWeaver Gateway Cookbooks. The service builder, which was introduced with SAP NetWeaver Gateway SP04, is the recommended way to create OData services.

3. Gateway Service Manager The SAP TM collaboration portal implements its Gateway services by using a Gateway service manager. This is instantiated in the Gateway data provider class which delegates data access calls to specific data access class instances. Afterwards it applies generic functions such as paging to the data access result and returns it to the Gateway data provider instance. A lot of redundant development effort for a new Gateway service can be saved as it is generically implemented in the Gateway service manager.

Page 30: How to provide customer extensions for the SAP TM ...a248.g.akamai.net/n/248/420835/739285d35ae13ad53a7044d1e306197… · how to provide customer modifications for the sap tm collaboration

HOW TO PROVIDE CUSTOMER MODIFICATIONS FOR THE SAP TM COLLABORATION PORTAL

2017-04-21 30

Apply paging, filtering, query options, ...

Gateway Server

/SCMTMS/CL_*_DPC_EXT

/SCMTMS/CL_GW_SERVICE_MGR

/SCMTMS/CL_GW_DAC_* BO Data

R GetdataModify

R

R

GetdataModify

To implement a new Gateway service manager data access class (GW_DAC) for a new service entity, you have to provide a new ABAP class which has class /SCMTMS/CL_GWD_SUPER as its superclass. All entity specific information has to be provided in the constructor.

The implementation of a gateway service should handle data as follows: The Gateway data provider should delegate the call directly to the Gateway service manager (shown with the example of Gateway data provider method get_entity() ):

To improve the performance of the Gateway calls, the Gateway Service Manager uses a caching mechanism. After the first Gateway call, all the data is asynchronously written into a cluster table. All the subsequent calls are answered using the content from that cluster table instead of requiring BOBF access. The cluster table is kept stable until the function import “ResetCache” of Gateway service /SCMTMS/USER is explicitly called from the UI. This happens when logging into the portal, pressing Refresh or switching views. When new instances are created, such as during accepting/rejecting of requests, the cache is only updated with the relevant instances to represent the current state.

/scmtms/cl_gw_service_mgr=>get_entity( EXPORTING iv_service_doc_name = mr_service_document_name->* iv_entity_name = iv_entity_name iv_entity_set_name = iv_entity_set_name iv_source_name = iv_source_name it_key_tab = it_key_tab it_navigation_path = it_navigation_path io_tech_request_context = io_tech_request_context io_dp_facade = /iwbep/if_mgw_conv_srv_runtime~get_dp_facade( ) IMPORTING es_entity = er_entity ).

Page 31: How to provide customer extensions for the SAP TM ...a248.g.akamai.net/n/248/420835/739285d35ae13ad53a7044d1e306197… · how to provide customer modifications for the sap tm collaboration

HOW TO PROVIDE CUSTOMER MODIFICATIONS FOR THE SAP TM COLLABORATION PORTAL

2017-04-21 31

HOW TO BUILD THE USER INTERFACE A detailed description of how to implement SAP UI5 based user interfaces can be found here: http://help.sap.com/nw-uiaddon -> Development information. Take a close look at chapter 1.1.3.11 Extensibility Concept: Adapting SAPUI5 Applications. If you have any requirements, concerning these extensibility options, please contact us.

Page 32: How to provide customer extensions for the SAP TM ...a248.g.akamai.net/n/248/420835/739285d35ae13ad53a7044d1e306197… · how to provide customer modifications for the sap tm collaboration

HOW TO PROVIDE CUSTOMER MODIFICATIONS FOR THE SAP TM COLLABORATION PORTAL

2017-04-21 32

APPENDIX A: FURTHER INFORMATION Administration Guide for Collaboration Portal for SAP TM 9.1: http://service.sap.com/instguides -> SAP Business Suite Applications -> SAP TM -> Using SAP TM 9.1 SAP NetWeaver Gateway developer center: http://scn.sap.com/community/developer-center/netweaver-gateway SAP NetWeaver Gateway: http://help.sap.com/nwgateway20 SAP UI5: http://help.sap.com/nw-uiaddon OData: http://www.odata.org APPENDIX B: TECHNICAL IDS OF VIEWS

Home • sap.tl_collaboration_portal.view.home

Freight Order Management - Freight Requests for Quotation

• sap.tl_collaboration_portal.view.requestsForQuotationProf • sap.tl_collaboration_portal.view.requestsForQuotationCasual

Freight Order Management - Freight Quotations

• sap.tl_collaboration_portal.view.quotationsProfessional • sap.tl_collaboration_portal.view.quotationsCasual

Freight Order Management - Freight Orders for Execution

• sap.tl_collaboration_portal.view.eventNotification.event NotificationFreightOrderProf

• sap.tl_collaboration_portal.view.eventNotification.event NotificationFreightOrderCasual

Freight Settlement - Freight Orders for Self-Billing

• sap.tl_collaboration_portal.view.invoicing.selfBillingTable • sap.tl_collaboration_portal.view.invoicing.selfBillingDetail

Freight Settlement - Freight Orders for Invoice Submission

• sap.tl_collaboration_portal.view.invoicing.invSubmissionFOTable • sap.tl_collaboration_portal.view.invoicing.invSubmissionFODetail

Freight Settlement - Invoices • sap.tl_collaboration_portal.view.invoicing.invSubmissionInvTable • sap.tl_collaboration_portal.view.invoicing.invSubmissionInvDetail

Freight Agreement Management - Freight Agreement RFQs

• sap.tl_collaboration_portal.view.freightProcurement.freight AgreementRequestForQuotationTable

• sap.tl_collaboration_portal.view.freightProcurement.freight AgreementRequestForQuotationDetail

Freight Agreement Management - Freight Agreements

• sap.tl_collaboration_portal.view.freightProcurement.freight AgreementTable

• sap.tl_collaboration_portal.view.freightProcurement.freight AgreementDetail

APPENDIX C: TECHNICAL IDS OF TABLES

Freight Order Management - Freight Requests for Quotation requestsTable

Freight Order Management - Freight Quotations quotationTable

Freight Order Management - Freight Orders for Execution eventNotificationFreightOrderTable

Freight Settlement - Freight Orders for Self-Billing selfBillingTableTable

Freight Settlement - Freight Orders for Invoice Submission invoiceSubmissionFOTableTable

Page 33: How to provide customer extensions for the SAP TM ...a248.g.akamai.net/n/248/420835/739285d35ae13ad53a7044d1e306197… · how to provide customer modifications for the sap tm collaboration

HOW TO PROVIDE CUSTOMER MODIFICATIONS FOR THE SAP TM COLLABORATION PORTAL

2017-04-21 33

Freight Settlement - Invoices invoiceSubmissionInvTableTable

Freight Agreement Management - Freight Agreement RFQs freightAgreementRequestTable

Freight Agreement Management - Freight Agreements freightAgreementTableTable

APPENDIX D: TECHNICAL IDS OF DATASETS

Freight Order Management - Freight Requests for Quotation rfqDataSet

Freight Order Management - Freight Quotations quotationDataSet

Freight Order Management - Freight Orders for Execution eventNotificationFreightOrderDataSet

Freight Settlement - Freight Orders for Self-Billing selfBillingDataSet

Freight Settlement - Freight Orders for Invoice Submission invoiceSubmissionFODataSet

Freight Settlement - Invoices invoiceSubmissionInvDataSet

Freight Agreement Management - Freight Agreement RFQs freightAgreementRequestDataSet

Freight Agreement Management - Freight Agreements freightAgreementDataSet

APPENDIX E: AVAILABLE EXTENSION POINTS

Toolbar extension for table / dataset extViewToolbar

Home tiles Freight Order Management extTileFreightOrderManagement

Home tiles Freight Settlement extTileFreightSettlementManagement Home tiles Freight Agreement Management extTileFreightAgreementManagement

Additional Home Tiles extAdditionalTilesWithHeader