Sunteți pe pagina 1din 19

SAP NetWeaver

How-To Guide

How to Integrate SAPUI5 Side Panel


Application with FPM in NWBC
Applicable Releases:
SAP NetWeaver AS ABAP 7.4 SP2
Target Audience:
FPM and SAPUI5 Developers
Version 1.0
April 2013

Copyright 2013 SAP AG or an SAP affiliate company. All rights reserved.


No part of this publication may be reproduced or transmitted in any form or for any purpose without the express
permission of SAP AG. The information contained herein may be changed without prior notice.
Some software products marketed by SAP AG and its distributors contain proprietary software components of other
software vendors.
National product specifications may vary.
These materials are provided by SAP AG and its affiliated companies ("SAP Group") for informational purposes only,
without representation or warranty of any kind, and SAP Group shall not be liable for errors or omissions with respect to
the materials. The only warranties for SAP Group products and services are those that are set forth in the express warranty
statements accompanying such products and services, if any. Nothing herein should be construed as constituting an
additional warranty.
SAP and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered
trademarks of SAP AG in Germany and other countries.
Please see http://www.sap.com/corporateen/legal/copyright/index.epx#trademark for additional trademark information and notices.
SAP NetWeaver How-to Guides are intended to simplify the product implementation. While specific product features and
procedures typically are explained in a practical business context, it is not implied that those features and procedures are
the only approach in solving a specific business problem using SAP NetWeaver. Should you wish to receive additional
information, clarification or support, please refer to SAP Consulting.
Any software coding and/or code lines / strings (Code) included in this documentation are only examples and are not
intended to be used in a productive system environment. The Code is only intended better explain and visualize the syntax
and phrasing rules of certain coding. SAP does not warrant the correctness and completeness of the Code given herein, and
SAP shall not be liable for errors or damages caused by the usage of the Code, except if such damages were caused by SAP
intentionally or grossly negligent.
Disclaimer:
Some components of this product are based on Java. Any code change in these components may cause unpredictable and
severe malfunctions and is therefore expressively prohibited, as is any decompilation of these components.
Any Java Source Code delivered with this product is only to be used by SAPs Support Services and may not be modified
or altered in any way.

Document History
Document Version

Description

1.00

First official release of this guide

ii

Typographic Conventions
Type Style

Description

Example Text

Words or characters quoted


from the screen. These
include field names, screen
titles, pushbuttons labels,
menu names, menu paths,
and menu options.
Cross-references to other
documentation

Example text

Emphasized words or
phrases in body text, graphic
titles, and table titles

Example text

File and directory names and


their paths, messages,
names of variables and
parameters, source text, and
names of installation,
upgrade and database tools.

Example text

User entry texts. These are


words or characters that you
enter in the system exactly as
they appear in the
documentation.

<Example
text>

Variable user entry. Angle


brackets indicate that you
replace these words and
characters with appropriate
entries to make entries in the
system.

EXAMPLE TEXT

Keys on the keyboard, for


example, F2 or ENTER.

Icons
Icon

Description
Caution
Important
Note
Recommendation or Tip
Example

iii

Table of Contents
1.

Objective ............................................................................................................................... 1

2.

Prerequisites ........................................................................................................................ 1

3.

Data Model and Document Overview ................................................................................ 1

4.

Step-by-Step Procedure ...................................................................................................... 2


4.1 Working with a FPM application in the content area .................................................... 2
4.2 Enabling the FPM application to pass the data to Side Panel app using Tags ............ 3
4.3 Working with SAPUI5 Application (application running in NWBC side panel) ............. 4
4.4 Integrating FPM Application and Side Panel Application in NWBC ........................... 10
4.5 Configuring NWBC Desktop ....................................................................................... 11
4.6 Running Application in NWBC Desktop ..................................................................... 12

5.

Appendix ............................................................................................................................ 13

iv

How to Integrate SAPUI5 Side Panel Application with FPM in NWBC

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 integrate a FPM application to a SAPUI5 side panel application in NWBC

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.

Data Model and Document Overview

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

How to Integrate SAPUI5 Side Panel Application with FPM in NWBC

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

Working with a FPM application in the content area

...

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

How to Integrate SAPUI5 Side Panel Application with FPM in NWBC

a. Description: Displays All Business Partners


b. Component: FPM_OVP_COMPONENT
c. Interface View: FPM_WINDOW
d. Plug Name: DEFAULT
8. Add the parameter WDSIDEPANELREMOTEPRODUCER with value as X. This parameter will
enable the WD Application running in NWBC content area to pass data to NWBC side panel
applications.
9. Create a FPM Application Configuration for the Web Dynpro application DISPLAY_BP. Name
the Configuration ID as DISPLAY_BP_APP_CONF.
10. In the FPM Application configuration, assign OVP Component Configuration name as
DISPLAY_BP_COMP_CONF and then create the component configuration with the name used for
OVP component configuration.
11. In the component configuration, DISPLAY_BP_COMP_CONF, enter the title as Business
Partners.
12. In the component configuration, DISPLAY_BP_COMP_CONF, under the default section,
SECTION_1, add List Component UIBB. Enter configuration ID as
DISPLAY_BP_LIST_COMP_CONF and create the component configuration with the same name
as that of configuration ID.
13. Enter a feeder class with the name ZCL_BUSINESS_PARTNER for the list component
configuration DISPLAY_BP_LIST_COMP_CONF.
14. Enable event in all selections by choosing Selection Raises an FPM Event under General
Settings for List Component Configuration DISPLAY_BP_LIST_COMP_CONF.
15. Add all listed columns using the Column button in list component configuration
DISPLAY_BP_LIST_COMP_CONF. Enter Web Address as the header for the column element
WEB_ADDRESS. (If header is not provided then the default column name EPM: String is
displayed.)
16. (Optional) Set the Visibility attribute value as Not Visible for all columns except for BP_ID,
COMPANY_NAME, and WEB_ADDRESS.
17. Run the application with the above configurations. The Web browser must show the list of all
business partners registered in the table SNWD_BPA. In the list, the columns BP_ID,
COMPANY_NAME, and WEB_ADDRESS will be visible.
Note
Other columns will also be visible if the Visibility attribute for the columns are not set as
mentioned in step 16 above.

4.2

Enabling the FPM application to pass the data to


Side Panel app using Tags

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:
...

1. Open the List Component Configuration DISPLAY_BP_LIST_COMP_CONF.


2. In the Standard Attributes area, enter a tag name in the Tag Name attribute. Tag name can
also be the same as column name. For example, for column element BP_ID, you can enter the
tag name as BP_ID; for column element COMPANY_NAME, enter tag name as
COMPANY_NAME; and for column element WEB_ADDRESS, enter tag name as WEB_ADDRESS.

April 2013

How to Integrate SAPUI5 Side Panel Application with FPM in NWBC

The screenshot below displays the tag name provided for the column element
WEB_ADDRESS:

4.3

Working with SAPUI5 Application (application


running in NWBC side panel)

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:
...

1. Start ABAP Development Tools (ADT) having SAPUI5 plugin.


2. Create SAPUI5 application with the name BP_DETAILS.
3. Enter the JavaScript view name as view.
4. To capture the data sent from the application running in the content area, use the JavaScript
variable window.external.DataContext. For more details about passing data from content
area to side panel application with HTML, JavaScript and SAPUI5 see the topic Implementation
of a Side Panel Application with HTML and JavaScript on SAP Help portal at:
http://help.sap.com/saphelp_nw73ehp1/helpdata/en/10/091395c65841a4b2934b3e25a9cee4/co
ntent.htm?frameset=/en/37/31e2591fab4d7eab6e61a9545b695b/frameset.htm.
5. Following steps must be followed in the controller method:
a. Initialize business partner data and set the model to core. Enter the following code inside
the onInit method of the controller JavaScript file, view.controller.js:
var bpData, oBPModel, dataContext;
//setting the business partner id model
bpData = {
bpID : "",
companyName: "",
webAddress: "",

April 2013

How to Integrate SAPUI5 Side Panel Application with FPM in NWBC

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

How to Integrate SAPUI5 Side Panel Application with FPM in NWBC

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

How to Integrate SAPUI5 Side Panel Application with FPM in NWBC

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

//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.l
sapi.dataContext", "changedWithXML", undefined, "onChangedWithXML");
}; //if condition ends
}
6. Create the view which displays Business Partner ID, Company Name, Web Address,
Email Address, Phone Number, Fax Number, and Currency Code in a simple form.
Bind the data with the properties of the core model businessPartner. To create the view and for
binding the properties of the model to the view elements, type the following code in the
createContent method of the views JavaScript file, view.view.js:
var oPanel, oMatrix, oLabel, oTextView;
//create the panel
oPanel = new sap.ui.commons.Panel("idBPPanel", {width: "500px"});
oPanel.setAreaDesign(sap.ui.commons.enums.AreaDesign.Plain);
oPanel.setBorderDesign(sap.ui.commons.enums.BorderDesign.None);
//Set the title of the panel
oPanel.setTitle(new sap.ui.commons.Title({text: "Business Partner
Details"}));
//Create a matrix layout with 2 columns
oMatrix = new sap.ui.commons.layout.MatrixLayout("idBPMatrix",
{layoutFixed: false, width: "300px", columns: 2}
);
April 2013

How to Integrate SAPUI5 Side Panel Application with FPM in NWBC

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

How to Integrate SAPUI5 Side Panel Application with FPM in NWBC

//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.

Choose the Browse button provided for the Connection field.

iv.

Select the ABAP AS from the list of the applications servers.


This list displays all applications servers registered in SAPGUI.
Click the Next button.

v.
vi.
vii.

Provide client, Username, Password and Language


Click the Next button.

viii.

x.

Select the Create a new BSP Application radio button (SAPUI5


applications are registered as BSP Application in ABAP AS).
Enter name as BP_DETAILS, description as Business Partner Details and
Package as $TMP (Any package can be provided. For this example, the
application is registered in the $TMP package.)
Choose the Next button.

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

How to Integrate SAPUI5 Side Panel Application with FPM in NWBC

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.

Choose the Finish button.

Integrating FPM Application and Side Panel


Application in NWBC

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

How to Integrate SAPUI5 Side Panel Application with FPM in NWBC

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:

For more information about side panel configuration, see


http://help.sap.com/saphelp_nw70ehp3/helpdata/en/37/31e2591fab4d7eab6e61a9545b695b/content.
htm?frameset=/en/37/31e2591fab4d7eab6e61a9545b695b/frameset.htm.
Another helpful Web link is
http://help.sap.com/saphelp_nw70ehp3/helpdata/en/14/ad7b0605874f7cbf4874cc7f2261c0/content.ht
m?frameset=/en/37/31e2591fab4d7eab6e61a9545b695b/frameset.htm
10. Save the role.
11. Assign the role to the SAP users who want to see the application running in NWBC desktop.

4.5

Configuring NWBC Desktop

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

How to Integrate SAPUI5 Side Panel Application with FPM in NWBC

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

Running Application in NWBC Desktop

Follow the steps below to run an application in NWBC desktop:


1. Log on to the ABAP AS providing Client, Username and Password details. Assign the user with
the role created in this document. (For example, in this document the role name was
ZDISPLAY_BP_ROLE.)
2. After logging, the user will be able to view FPM Application running in NWBC Content Area.
3. Click on the Expand Side Panel button located at middle of the right hand side of the NWBC
desktop. Following is the screenshot taken from NWBC 3.5 and displays the content area.

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

How to Integrate SAPUI5 Side Panel Application with FPM in NWBC

5.

Appendix

Appendix A - Abbreviations
Abbreviation

Description

NW

NetWeaver

NWBC

NetWeaver Business Client

FPM

Floor Plan Manager

SAPUI5

UI development kit for HTML5

ABAP AS

ABAP Application Server

EPM

Enterprise Procurement Model

ADT

ABAP Development Tools

PFCG

Profile Generator

UIBB

User Interface Building Block

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

S-ar putea să vă placă și