Integrate UI5 Application With NWBC

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

i

© 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/corporate-en/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 SAP’s Support Services and may not be modified or altered in any way.

http://www.sap.com/corporate-en/legal/copyright/index.epx%23trademark

http://www.sap.com/corporate-en/legal/copyright/index.epx%23trademark

ii

Document History

Document Version Description

1.00 First official release of this guide

iii

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

iv

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

How to Integrate SAPUI5 Side Panel Application with FPM in NWBC

April 2013 1

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.

http://scn.sap.com/docs/DOC-31458


April 2013 2

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 3

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.

http://help.sap.com/saphelp_nw70ehp3/helpdata/en/5d/c040ed908e4cbca1e2211d6d5a1700/frameset.htm

http://help.sap.com/saphelp_nw70ehp3/helpdata/en/5d/c040ed908e4cbca1e2211d6d5a1700/frameset.htm


April 2013 4

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/content.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: "",

http://help.sap.com/saphelp_nw73ehp1/helpdata/en/10/091395c65841a4b2934b3e25a9cee4/content.htm?frameset=/en/37/31e2591fab4d7eab6e61a9545b695b/frameset.htm

http://help.sap.com/saphelp_nw73ehp1/helpdata/en/10/091395c65841a4b2934b3e25a9cee4/content.htm?frameset=/en/37/31e2591fab4d7eab6e61a9545b695b/frameset.htm


April 2013 5

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]",


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 6

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]",


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

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 view’s 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 8

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"});


property companyName

oTextView = new sap.ui.commons.TextView({id:"idCompNameTxtView", text:

"{businessPartner>/companyName}", width: "200%"});



oLabel = new sap.ui.commons.Label("idWebAddressLabel", {text: "Web

Address"});


property webAddress

oTextView = new sap.ui.commons.TextView({id:"idWebAddressTxtView", text:

"{businessPartner>/webAddress}", width: "200%"});



oLabel = new sap.ui.commons.Label("idEmailAddressLabel", {text: "Email

Address"});


property emailAddress

oTextView = new sap.ui.commons.TextView({id:"idEmailAddressTxtView", text:

"{businessPartner>/emailAddress}", width: "200%"});



oLabel = new sap.ui.commons.Label("idPhoneNumberLabel", {text: "Phone

Number"});


property phoneNumber

oTextView = new sap.ui.commons.TextView({id:"idPhoneNumberTxtView", text:

"{businessPartner>/phoneNumber}", width: "200%"});



oLabel = new sap.ui.commons.Label("idFaxNumberLabel", {text: "Fax

Number"});


April 2013 9


property faxNumber

oTextView = new sap.ui.commons.TextView({id:"idFaxNumberTxtView", text:

"{businessPartner>/faxNumber}", width: "200%"});



oLabel = new sap.ui.commons.Label("idCurrCodeLabel", {text: "Currency

Code"});


property currencyCode

oTextView = new sap.ui.commons.TextView({id:"idCurrCodeTxtView", text:

"{businessPartner>/currencyCode}", width: "200%"});



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

v. Click the Next button.

vi. Provide client, Username, Password and Language

vii. Click the Next button.

viii. Select the Create a new BSP Application radio button (SAPUI5

applications are registered as BSP Application in ABAP AS).

ix. 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.)

x. Choose the Next button.

Note

As $TMP package is selected, no transport request detail is required.

xi. Choose the Finish button.

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 10

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.

4.4 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/PFCG-ROLE+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:

http://help.sap.com/saphelp_nw70ehp3/helpdata/en/4c/5bdc2a97817511e10000000a42189b/content.htm?frameset=/en/37/31e2591fab4d7eab6e61a9545b695b/frameset.htm

http://help.sap.com/saphelp_nw70ehp3/helpdata/en/4c/5bdc2a97817511e10000000a42189b/content.htm?frameset=/en/37/31e2591fab4d7eab6e61a9545b695b/frameset.htm

http://wiki.sdn.sap.com/wiki/display/profile/2007/10/12/PFCG-ROLE+MAINTENANCE



April 2013 11

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.htm?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

http://help.sap.com/saphelp_nw70ehp3/helpdata/en/37/31e2591fab4d7eab6e61a9545b695b/content.htm?frameset=/en/37/31e2591fab4d7eab6e61a9545b695b/frameset.htm


http://help.sap.com/saphelp_nw70ehp3/helpdata/en/14/ad7b0605874f7cbf4874cc7f2261c0/content.htm?frameset=/en/37/31e2591fab4d7eab6e61a9545b695b/frameset.htm


http://help.sap.com/saphelp_nw70ehp3/helpdata/en/4c/5bd94e97817511e10000000a42189b/content.htm?frameset=/en/37/31e2591fab4d7eab6e61a9545b695b/frameset.htm

http://help.sap.com/saphelp_nw70ehp3/helpdata/en/4c/5bd94e97817511e10000000a42189b/content.htm?frameset=/en/37/31e2591fab4d7eab6e61a9545b695b/frameset.htm


April 2013 12

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 13

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

http://help.sap.com/saphelp_nw70ehp3/helpdata/en/4c/5b13bf97817513e10000000a42189b/content.htm?frameset=/en/d5/8e1446b89144cc9b5062ed7fea8896/frameset.htm

http://help.sap.com/saphelp_nw70ehp3/helpdata/en/4c/5b13bf97817513e10000000a42189b/content.htm?frameset=/en/d5/8e1446b89144cc9b5062ed7fea8896/frameset.htm

http://scn.sap.com/community/netweaver-business-client





http://help.sap.com/saphelp_nw70ehp3/helpdata/en/10/091395c65841a4b2934b3e25a9cee4/content.htm?frameset=/en/d5/8e1446b89144cc9b5062ed7fea8896/frameset.htm

http://help.sap.com/saphelp_nw70ehp3/helpdata/en/10/091395c65841a4b2934b3e25a9cee4/content.htm?frameset=/en/d5/8e1446b89144cc9b5062ed7fea8896/frameset.htm


http://scn.sap.com/docs/DOC-31458

http://scn.sap.com/community/web-dynpro-abap/floorplan-manager

http://scn.sap.com/community/developer-center/front-end

www.sdn.sap.com/irj/sdn/howtoguides

Documents

Integrate UI5 Application With NWBC