Documente Academic
Documente Profesional
Documente Cultură
How-To Guide
Document History
Document Version
Description
1.00
ii
Typographic Conventions
Type Style
Description
Example Text
Example text
Emphasized words or
phrases in body text, graphic
titles, and table titles
Example text
Example text
<Example
text>
EXAMPLE TEXT
Icons
Icon
Description
Caution
Important
Note
Recommendation or Tip
Example
iii
Table of Contents
1.
Objective ............................................................................................................................... 1
2.
Prerequisites ........................................................................................................................ 1
3.
4.
5.
Appendix ............................................................................................................................ 13
iv
1.
Objective
SAP NetWeaver Business Client (NWBC) is a rich UI client that offers a single point of entry for SAP
applications. As an application developer, you use NWBC functionalities to display a Web Dynpro
application, a FPM application, or a SAP GUI application in the content area and information relative
to these applications in the side panel of NWBC. You can use the side panel to display additional
context-sensitive information that relates to the main application in a separate screen area (a
container by the side of the content area of NWBC). A user role determines which side panel
application is to be shown for an application.
This document describes:
How to pass relative data from a FPM application running in the content area of NWBC to the
application running in the side panel of NWBC
2.
Prerequisites
You have:
...
1. Knowledge of FPM, SAPUI5, NWBC, ABAP Role Maintenance (PFCG) and JavaScript.
2. Installed SAP NetWeaver (NW) version 7.4 SP2 or higher.
3. Installed ABAP Development Tools (ADT) with SAPUI5 plugin.
Note
Knowledge of NW Reference Scenario, Enterprise Procurement Model (EPM) will be
useful.
3.
The SNWD_BPA table in the Enterprise Procurement Model serves as the data model for both FPM
and side panel applications. The table SNWD_BPA has sample Business Partner data.
Before getting started, generate data related to proper Enterprise Procurement Model (EPM). You can
use the transaction SEPM_DG to generate the data for EPM model. For more information about
EPM, see http://scn.sap.com/docs/DOC-31458.
The FPM application lists all the business partners from the table SNWD_BPA in the content area.
On selecting any row in the FPM Application, the SAPUI5 side panel application of NWBC displays
more details of the selected business partner.
April 2013
4.
Step-by-Step Procedure
The keys steps to integrate a FPM application to a side panel application are:
1. Working with a FPM application in the content area
2. Enabling a FPM application to pass data
3. Working with a SAPUI5 application in the side panel area
4. Integrating FPM application with the SAPUI5 application
5. Configuring NWBC desktop application
6. Running application in NWBC desktop
4.1
...
Create a FPM application that displays all business partners. You can fetch business partner data
from the SNWD_BPA table. Following are the high-level steps:
1. Create a class ZCL_BUSINESS_PARTNER.
2. Implement an interface IF_FPM_GUIBB_LIST.
3. Ensure empty implementation for all the interface methods of the class.
4. Add types in the class ty_bp and tt_bp as below:
TYPES:
BEGIN OF ty_bp,
bp_id
TYPE snwd_partner_id,
company_name TYPE snwd_company_name,
web_address
TYPE snwd_string,
email_address TYPE snwd_email_address,
phone_number TYPE snwd_phone_number,
fax_number
TYPE snwd_phone_number,
currency_code TYPE snwd_curr_code,
END OF ty_bp,
tt_bp TYPE STANDARD TABLE OF ty_bp.
5. Add the following code in the IF_FPM_GUIBB_LIST~GET_DEFINITION method:
"Create a structure for field catalog
eo_field_catalog ?= cl_abap_tabledescr=>describe_by_name('TT_BP').
6. Add the following code in the IF_FPM_GUIBB_LIST~GET_DATA method:
DATA: lt_bp TYPE tt_bp.
"load the data at the start of the application itself
IF iv_eventid->mv_event_id EQ if_fpm_constants=>gc_event-start.
"fetch required data of business partners
SELECT bp_id company_name web_address
email_address phone_number fax_number currency_code
INTO CORRESPONDING FIELDS OF TABLE lt_bp
FROM snwd_bpa
ORDER BY company_name.
ct_data = lt_bp.
ev_data_changed = abap_true.
ENDIF.
7. Create a Web Dynpro Application with the name DISPLAY_BP and the following details:
April 2013
4.2
FPM application in the NWBC content area uses tags to pass data to the side panel application. FPM
configuration provides a mechanism to mark tags for attributes. As developers, you can make use of
this mechanism.
For more information about tags, see
http://help.sap.com/saphelp_nw70ehp3/helpdata/en/5d/c040ed908e4cbca1e2211d6d5a1700/frameset
.htm.
To configure tags, do the following:
...
April 2013
The screenshot below displays the tag name provided for the column element
WEB_ADDRESS:
4.3
Create a SAPUI5 Application to display the details of the business partner based on the business
partner selected in the FPM list application running in the NWBC content area. The SAPUI5
application appears in the side panel of the NWBC. Following are the high-level steps:
...
April 2013
emailAddress: "",
phoneNumber: "",
faxNumber: "",
currencyCode : ""
};
//create JSON model and set the model to core with model key name as
businessPartner
oBPModel = new sap.ui.model.json.JSONModel();
sap.ui.getCore().setModel(oBPModel, "businessPartner");
oBPModel.setData(bpData);
b. Create a method and enter the code to get data from the data context. The tag registered
in the application running in NWBC content area and the key CANVAS_appData is used
to read the data from the data context. Use the DataContext JavaScript API read to get
the data. Following code gives insight into the explanation given in this step. (Add the
code to the onInit method of the controller JavaScript file): Example: In this code
onChangedWithXML is the method.
//whenever new data is passed from content area, this function will be
called.
//function is registered with changedWithXML
onChangedWithXML = function (eventObj){
//get the business partner model registered with the core
var oModel = sap.ui.getCore().getModel("businessPartner");
// read BP_ID passed from NWBC content area and then set BP_ID to model
oModel.setProperty("bpID", dataContext.read("BP_ID[0]",
"CANVAS_appData", null));
// read COMPANY_NAME passed from NWBC content area and then set
COMPANY_NAME to model
oModel.setProperty("companyName", dataContext.read("COMPANY_NAME[0]",
"CANVAS_appData", null));
c. Register the custom method with the changeWithXML event to send data from the
content area to the side panel area.
Example
In the code below, the custom method onChangedWithXML is registered with the
changeWithXML event.
Obtain data context from the JavaScript variable window.external.DataContext.Following
code needs to be added in the onInit method of the controller JavaScript file:
//handle the data passed from the content area
dataContext = (typeof(window.external) !== "undefined") &&
(typeof(window.external.DataContext) !== "undefined") ?
window.external.DataContext : null;
if (dataContext !== null && typeof(dataContext) !== "undefined"){
//register the method whenever the data sent from NWBC content area is
refreshed. The event to which method has to be registered is changedWithXML
//method name registered can be named anything. Here the name is given
as onChangedWithXML
window.external.epcm.subscribeEventReliable ("com.sap.lsapi.dataContext",
"changedWithXML", undefined, "onChangedWithXML");
}; //if condition ends
The onInit method appears as below:
April 2013
onInit: function() {
var bpData, oBPModel, dataContext;
//setting the business partner id model
bpData = {
bpID : "",
companyName: "",
webAddress: "",
emailAddress: "",
phoneNumber: "",
faxNumber: "",
currencyCode : ""
};
//create JSON model and set the model to core with model key name
as businessPartner
oBPModel = new sap.ui.model.json.JSONModel();
sap.ui.getCore().setModel(oBPModel, "businessPartner");
oBPModel.setData(bpData);
//whenever new data is passed from content area, this
function will be called.
//function is registered with changedWithXML
onChangedWithXML = function (eventObj){
//get the business partner model registered with the
core
var oModel =
sap.ui.getCore().getModel("businessPartner");
// read BP_ID passed from NWBC content area and then set
BP_ID to model
oModel.setProperty("bpID", dataContext.read("BP_ID[0]",
"CANVAS_appData", null));
// read COMPANY_NAME passed from NWBC content area and
then set COMPANY_NAME to model
oModel.setProperty("companyName",
dataContext.read("COMPANY_NAME[0]", "CANVAS_appData", null));
// read WEB_ADDRESS passed from NWBC content area and
then set WEB_ADDRESS to model
oModel.setProperty("webAddress",
dataContext.read("WEB_ADDRESS[0]", "CANVAS_appData", null));
// read EMAIL_ADDRESS passed from NWBC content area and
then set EMAIL_ADDRESS to model
oModel.setProperty("emailAddress",
dataContext.read("EMAIL_ADDRESS[0]", "CANVAS_appData", null));
// read PHONE_NUMBER passed from NWBC content area and
then set PHONE_NUMBER to model
April 2013
oModel.setProperty("phoneNumber",
dataContext.read("PHONE_NUMBER[0]", "CANVAS_appData", null));
// read FAX_NUMBER passed from NWBC content area and then
set FAX_NUMBER to model
oModel.setProperty("faxNumber",
dataContext.read("FAX_NUMBER[0]", "CANVAS_appData", null));
// read CURRENCY_CODE passed from NWBC content area and
then set CURRENCY_CODE to model
oModel.setProperty("currencyCode",
dataContext.read("CURRENCY_CODE[0]", "CANVAS_appData", null));
}; //internal method onChangedWithXML ends
oMatrix.setWidths("300px", "300px");
//Create a simple form within the layout
oLabel = new sap.ui.commons.Label("idBPIDLabel", {text: "BP ID"});
//create text view and bind the text with core model businessPartner's
property bpID
oTextView = new sap.ui.commons.TextView({id:"idBPIDTxtView", text:
"{businessPartner>/bpID}", width: "200%"});
oLabel.setLabelFor(oTextView);
oMatrix.createRow(oLabel, oTextView);
oLabel = new sap.ui.commons.Label("idCompNameLabel", {text: "Company
Name"});
//create text view and bind the text with core model businessPartner's
property companyName
oTextView = new sap.ui.commons.TextView({id:"idCompNameTxtView", text:
"{businessPartner>/companyName}", width: "200%"});
oLabel.setLabelFor(oTextView);
oMatrix.createRow(oLabel, oTextView);
oLabel = new sap.ui.commons.Label("idWebAddressLabel", {text: "Web
Address"});
//create text view and bind the text with core model businessPartner's
property webAddress
oTextView = new sap.ui.commons.TextView({id:"idWebAddressTxtView", text:
"{businessPartner>/webAddress}", width: "200%"});
oLabel.setLabelFor(oTextView);
oMatrix.createRow(oLabel, oTextView);
oLabel = new sap.ui.commons.Label("idEmailAddressLabel", {text: "Email
Address"});
//create text view and bind the text with core model businessPartner's
property emailAddress
oTextView = new sap.ui.commons.TextView({id:"idEmailAddressTxtView", text:
"{businessPartner>/emailAddress}", width: "200%"});
oLabel.setLabelFor(oTextView);
oMatrix.createRow(oLabel, oTextView);
oLabel = new sap.ui.commons.Label("idPhoneNumberLabel", {text: "Phone
Number"});
//create text view and bind the text with core model businessPartner's
property phoneNumber
oTextView = new sap.ui.commons.TextView({id:"idPhoneNumberTxtView", text:
"{businessPartner>/phoneNumber}", width: "200%"});
oLabel.setLabelFor(oTextView);
oMatrix.createRow(oLabel, oTextView);
oLabel = new sap.ui.commons.Label("idFaxNumberLabel", {text: "Fax
Number"});
April 2013
//create text view and bind the text with core model businessPartner's
property faxNumber
oTextView = new sap.ui.commons.TextView({id:"idFaxNumberTxtView", text:
"{businessPartner>/faxNumber}", width: "200%"});
oLabel.setLabelFor(oTextView);
oMatrix.createRow(oLabel, oTextView);
oLabel = new sap.ui.commons.Label("idCurrCodeLabel", {text: "Currency
Code"});
//create text view and bind the text with core model businessPartner's
property currencyCode
oTextView = new sap.ui.commons.TextView({id:"idCurrCodeTxtView", text:
"{businessPartner>/currencyCode}", width: "200%"});
oLabel.setLabelFor(oTextView);
oMatrix.createRow(oLabel, oTextView);
//add matrix as content to the panel
oPanel.addContent(oMatrix);
//return back the panel as root to SAPUI5 framework
return oPanel;
7. Share SAPUI5 application with the ABAP AS. To share, follow the sub-steps below:
a. Share SAPUI5 Project with ABAP AS Server
As with any SAPUI5 project, share the BP_DETAILS project with ABAP AS. To do this,
follow the steps below:
i. Right-click the project and select Team > Share Project
ii.
In the Share Project dialog box, select SAPUI5 ABAP Repository and choose
the Next button.
iii.
iv.
v.
vi.
vii.
viii.
x.
xi.
Note
As $TMP package is selected, no transport request detail is required.
Choose the Finish button.
ix.
b. Submit code
Once SAPUI5 project is registered, submit the code to ABAP AS. To submit the code,
follow the steps below:
i. Right-click the project and select Team > Submit.
April 2013
4.4
ii.
In the Select Resources to Submit page of the dialog, deselect the files
and folders with names starting with a dot (.). For example, deselect .settings
folder, .classpath file, .project file and so on.
iii.
To integrate the FPM application in NWBC content area with the SAPUI5 application in NWBC side
panel, create a role and assign the role to the SAP User ID of the NWBC desktop user. You must
have proper authorizations to create and assign roles to user IDs. If you do not have the authorization
to create and assign roles to user IDs then get assistance from the SAP Administrator/BASIS team.
NWBC displays registered applications in the Menu tab based on the role assigned to a user. For
more information about role maintenance in PFCG and for information about how NWBC displays
menu associated with specific roles, see
http://help.sap.com/saphelp_nw70ehp3/helpdata/en/4c/5bdc2a97817511e10000000a42189b/content.
htm?frameset=/en/37/31e2591fab4d7eab6e61a9545b695b/frameset.htm.
For more information PFCG, see http://wiki.sdn.sap.com/wiki/display/profile/2007/10/12/PFCGROLE+MAINTENANCE.
Following are the high-level steps to create a role, create a menu, and to assign role to users:
1. On the ABAP system enter transaction code PFCG.
2. Enter the role name as ZDISPLAY_BP_ROLE and click on the Single Role button. Enter the
package name as $TMP and press the ENTER key.
3. Enter description as Display Business Partners. You can use the same information for
the Long Text attribute under the Description tab.
4. Save the role and click on the Menu Tab.
5. In Menu tab, under Hierarchy section, create a folder under root folder Role Menu. Enter the
Folder Name as Business Partners.
6. Under the Business Partners folder, add Web Dynpro Application DISPLAY_BP. Enter
Application Configuration as DISPLAY_BP_APP_CONF.
7. Choose Other Node Details when the focus is on node Displays All Business Partners
(node name is taken from Web Dynpro Application description automatically by PFCG). Note
down the Node ID. [For example, consider Node ID as 3.] The screenshot below displays the
Node ID information:
April 2013
10
8. Double-click the Business Partners folder and now add BSP application BP_DETAILS (SAPUI5
applications are registered as BSP Application in ABAP AS), enter description as Business
Partner Details. Enter start page as WebContent/index.html. Choose the Continue button
after entering the required details.
9. Register the SAPUI5 application added in the menu (added as BSP Application) as side panel.
To do that, we have to enter the Other Node Details for the Node Business Partner
Details [SAPUI5 Application node]. Following are the steps:
a. Under Other Node Details section, choose Node Option as Side Panel.
b. Set Application alias as {REF=3}. Here number 3 refers to the Node ID of the FPM
application that was noted down in sub-step 7.
NWBC uses the information in Other Node Details to understand that the SAPUI5 application will
run as a side panel application and will be visible only when application with Node ID 3 is running in
the content area of NWBC. Following is the screenshot showing Other Node Details for SAPUI5
application in the Menu tab:
4.5
For installing the NWBC Desktop, go through the Installation and Client Configuration section at
http://help.sap.com/saphelp_nw70ehp3/helpdata/en/4c/5bd94e97817511e10000000a42189b/content.
htm?frameset=/en/37/31e2591fab4d7eab6e61a9545b695b/frameset.htm.
The URL above contains the installation and system related details in NWBC. You can add as many
ABAP AS log on as you want just like how you add the details in SAPGUI. Remember that ABAP AS
April 2013
11
system added for logon will have NWBC URL pattern as <https/http> ://< ABAP AS FQDN>
:<port>/sap/bc/nwbc/ (contents within angular brackets <> are placeholders. Replace the same
according to your requirements) and choose Type as ABAP (There are only two types ABAP or
Portal).
4.6
The SAPUI5 application appears in the NWBC side panel area. Following is the screenshot of the side
panel area:
This is how NWBC content area and side panel area are integrated.
April 2013
12
5.
Appendix
Appendix A - Abbreviations
Abbreviation
Description
NW
NetWeaver
NWBC
FPM
SAPUI5
ABAP AS
EPM
ADT
PFCG
Profile Generator
UIBB
References
NWBC:
http://help.sap.com/saphelp_nw70ehp3/helpdata/en/4c/5b13bf97817513e10000000a42189b/content.htm?frames
et=/en/d5/8e1446b89144cc9b5062ed7fea8896/frameset.htm
http://scn.sap.com/community/netweaver-business-client
NWBC Side Panel:
http://help.sap.com/saphelp_nw70ehp3/helpdata/en/37/31e2591fab4d7eab6e61a9545b695b/content.htm?framese
t=/en/37/31e2591fab4d7eab6e61a9545b695b/frameset.htm
http://help.sap.com/saphelp_nw70ehp3/helpdata/en/14/ad7b0605874f7cbf4874cc7f2261c0/content.htm?frameset
=/en/37/31e2591fab4d7eab6e61a9545b695b/frameset.htm
Implementation of a NWBC Side Panel Application with HTML and JavaScript:
http://help.sap.com/saphelp_nw70ehp3/helpdata/en/10/091395c65841a4b2934b3e25a9cee4/content.htm?framese
t=/en/d5/8e1446b89144cc9b5062ed7fea8896/frameset.htm
PFCG: http://wiki.sdn.sap.com/wiki/display/profile/2007/10/12/PFCG-ROLE+MAINTENANCE
EPM: http://scn.sap.com/docs/DOC-31458
FPM: http://scn.sap.com/community/web-dynpro-abap/floorplan-manager
SAPUI5: http://scn.sap.com/community/developer-center/front-end
April 2013
13
www.sdn.sap.com/irj/sdn/howtoguides