2012 by SAP AG. All rights reserved. SAP and the SAP logo are registered trademarks of SAP AG in Germany and other countries. Business Objects and the Business Objects logo are trademarks or registered trademarks of Business Objects Software Ltd. Business Objects is an SAP company. Sybase and the Sybase logo are registered trademarks of Sybase Inc. Sybase is an SAP company. Crossgate is a registered trademark of Crossgate AG in Germany and other countries. Crossgate is an SAP company.

EXTENDING SAP BUSINESS APPLICATIONS

WITH THE SIDE PANEL

CD263

Exercises / Solutions Peter Barker, Felix Hoefer, Andreas Hirche, Helmut Hofmann, Uwe Palm / SAP AG

Naming conventions

for users and objects created in this session

System M12

Client 800

Users CD263_###

Roles CD263ROLE_###

Pages Z_CD263PAGE_FIN_###, Z_CD263PAGE_MM_###

Example:

CD263_A21 is the user for Session A and Group 21

THE EXERCISES

A: Add a CHIP to a SAP GUI transaction

B: Build a New Side Panel

D: Add your own Tagging (Advanced)

E: Create a Mashup with Twitter Tweets (Optional)

Exercise A: Add a CHIP to a SAP GUI transaction

You will enhance the transaction Enter Outgoing Invoices (FB70), by adding a CHIP showing Master Data Details for the relevant customer.

Tasks Estimated time required for completion: 15 minutes

1. Create your user and assign a predefined role (if necessary)

2. Add a new CHIP to an existing side panel

3. Test the side panel

Task 1: Create your user and assign a predefined role NOTE: If necessary perform the steps in task A1. Otherwise go straight to A2. The speakers will explain whether or not this is necessary.

1. Start NetWeaver Business Client (NWBC) 4.0 by double-clicking the correct icon on the Windows Desktop

Note: There are two version of NWBC available on the Desktop: 3.5 and 4.0. You have to start the NWBC 4.0. (see screenshot).

2. If the System Selection dialog appears, choose M12, then choose Log On.

3. Log on to the backend system

M12 in client 800 , language = EN

Your user is named CD263_###.

Your password is initial

###

4. You will be prompted to enter a

new password

Enter a new password twice, then choose Change.

Take a pen and write your new password to the space below (to be on the safe side):

5. Close this information dialog by

choosing Continue..

Up to now, your user has no roles assigned, so you will see the SAP menu on the Index page. 6. Access Role Maintenance

(transaction PFCG) from the Quick Launch field, either by typing PFCG and choosing

Enter or by typing Role Maintenance and selecting the entry from the suggestion list:

7. Copy the template role CD263ROLE_TPL to CD263ROLE_###

IMPORTANT: Replace ### with your ID!). 8. Enter a description for the role. 9. Choose Save.

1. Switch to the User tab (1.) 2. Enter your user CD263_###

(2.) 3. Save the role (3.)

###

Task A2: Add a new CHIP to an existing side panel You will now add a new CHIP to the side panel (which has already been created for you). 1. In the Role Menu, navigate to

the folder Financials. 2. Select the Customer Details

side panel, and choose Execute from the context menu.

The Page Builder tool appears.

Info: You can create side panel configurations directly in Role Maintenance (PFCG). This is why we start the implementation in PFCG.

Info: This side panel will be assigned

to all applications on the same tree level or below. There are other mechanisms to perform the assignment on with finer granularity.

3. From the Tools menu, choose Configuration.

4. Add a new CHIP to the side

panel by choosing Add.

5. The Chip Catalog appears. From the Chip Catalog, choose Reports (Display as Chart) (1) > Customer Balance Totals (Reports) (2)

6. Choose OK (3).

7. Save your changes in the Side

Panel toolbar.

A3: Test the side panel 8. Log off and back on to SAP

NetWeaver Business Client. Tip: Keeping the CTRL key held down, choose the Close button from the top right of NWBC.

Info: Roles are cached in NWBC; restarting refreshes the cache.

9. Expand your work center Financials, and choose Enter Outgoing Invoices.

10. If asked, choose Company

Code 0001.

11. Enter the following :

Customer = 99263 Invoice Date =

12. Open the side panel by

selecting the little gray arrow on the right hand side of NWBC (1).

13. The chart you created should lookly

approximately like this:

Exercise B: Build a New Side Panel

You will add a new transaction, Material Maintenance (MM03) to your existing role. You will then enhance it with a new CHIP, which displays the selected material in a three-dimensional viewer (SAP Visual Enterprise).

Tasks Estimated time required for completion: 15 minutes

1. Build a new side panel with Page Builder

2. Configure the Side Panel

Task C1: Build a new side panel with Page Builder 1. Still in PFCG, select the folder Material

Management and choose Add > WebDynpro Application.

2. Choose Application Type: Page, enter the

following:

Description = 3D Display Side Panel

Application Configuration = ###

NOTE: Do not choose Continue (Enter) yet! Info: Pages built with Page Builder are normal Web

Dynpro applications. By selecting the Page type you will be offered some convenience methods for handling pages

3. Choose Create and enter the following:

Configuration Name = Z_CD263PAGE_###

Title = 3D Display

CHIP Catalog = BSSP_CHIP_CATALOG

4. Choose Continue (Enter) twice. 5. Save as local object.

6. In the folder Material

Management, select this side panel and choose Other Node Details. Select the Node Option Sidepanel

7. Save your changes.

Task C2: Configure the Side Panel

1. Again, select the side panel and choose Execute from the context menu. The Page Builder authoring tool opens with an empty page/side panel.

2. Choose Configuration. (1) 3. Choose Add. (2)

The CHIP catalog appears.

4. Choose CHIPs for CD263 (1) > 3D Viewer

Thumbnail (2), then choose OK (3). 5. Save your changes.

6. To view this new side panel, log off and restart.

7. Choose Display Material & (MM03).

8. In the field Material, enter OIL_PUMP 9. Choose Continue. 10. In the Select View dialog that appears, choose

Basic Data 1; choose Continue (Enter).

11. Expand the side panel if necessary.

You should now see a three-dimensional view of an oil pump.

Exercise C: Add your own Tagging (Advanced)

Normally, you would: 1. Collect properties using the SAP Property Collector. 2. Assign a tag to each property in Maintain Table Views (SM30). 3. Use the tag to pass data from a SAP GUI transaction to a Web CHIP. In this case, however, assigning properties to tags cannot be performed by multiple users at the same time due to table locking. Thus the tagging data is already prepared for the exercise.

Tasks Estimated time required for completion: 20 minutes

1. Check tagging in the tag table

2. Add another CHIP to your side panel and configure it

3. Test the new side panel

Task C1: Check tagging in the tag table 1. Start transaction SM30,

enter the table name nwbc_vc_gui_tag, then choose Display.

________________________ Info:

NWBC_VC_GUI_TAG is the table for customers of SAP to maintain tags. The tags already shipped by SAP can be viewed in the table NWBC_VS_GUI_TAG

This table is a Customizing table, so you can also access it using Customizing: Execute Project (SPRO) > SAP Reference IMG > SAP NetWeaver > Application Server > Frontend Services > NetWeaver Business Client > Define SAP GUI Tags.

Scroll down if necessary. The tag you need, ZCD263_PRB_Address1, should appear in the table.

Task C1A: Alternative: Check tagging in the Data Context Viewer You can also check the tag without leaving your transaction, in an application known as the Data Context Viewer (itself implemented as a side panel): 1. Keeping the CTRL key held

down, navigate to Help > Tools > Side Panel > Data Context Viewer.

The Data Context Viewer opens in a side panel.

2. Scroll down to the

CANVAS_appData area. Your tag should appear, with the value currently assigned to it. 3. Close the Data Context

Viewer.

Task C2: Add another CHIP to your side panel and configure it 1. Navigate to transaction Role

Maintenance (PFCG). In the folder Financials, select the side panel Customer Details and choose Execute from the context menu.

2. From the Tools menu, choose Configuration.

3. Choose Add.

The CHIP Catalog appears.

4. Choose CHIPs for CD263

(1) > Web CHIP (2), then choose OK (3).

5. From the CHIP menu (1), choose Define URL.(2)

6. Enter the URL and choose Accept: http://www.google.com/maps?output=embed (3), (4)

The Web CHIP should now display a map (showing the default view of the United States).

7. Choose Close from under the CHIP menu.

8. Again from the CHIP menu, choose Define URL query parameter.

9. Enter the following:

Name = q Display name = query Tags = ZCD263_PRB_Address1

10. then choose Accept. 11. Again, choose Close from under the CHIP

menu.

12. You have now inserted the CHIP, along with the correct URL and correct tag. You will now tidy up the appearance of the CHIP:

13. Again from the CHIP menu:

Choose Change Title; Change the title to, eg Google Maps. Choose Close. Choose Set size Tick Stretch Height Choose Accept; choose Close.

14. Save your changes in the side panel toolbar. 15. Close the Page Builder. 16. Save the role.

Task C3: Test the new side panel 1. Log off and restart NWBC.

2. Navigate to the transaction Enter Outgoing Invoices (FB70) in the work center Financials.

3. Enter the following:

Customer No. = 99263

Invoice Date = 4. Choose Enter.

5. Open the side panel (1).

6. Select the correct Side

Panel if it is not selected by default.

7. If you encounter a security

warning press the No button (2.)

The side panel you created should look something like this, displaying the correct address for the selected customer.

8. Optional: You can test your tagging again, by entering a different customer:

9. In the main application screen, enter the Customer Number 99264. Make sure the invoice date = . Simply accept any warnings/info dialogs that appear.

The map should change to show the new address.

Exercise D: Create a Mashup with Twitter Tweets

(Optional)

Tasks Estimated time required for completion: __ minutes

1. Use a Business Server Page (BSP) to embed any HTML code in a CHIP

2. Add a Web CHIP to your side panel which displays Tweets

3. Make the CHIP customizable to display only tweets with a specified keyword

Follow these steps to build the Mashup for Twitter with Business Server Pages:

1. Open the transaction ABAP Workbench (SE80).

2. Select the type BSP Application

3. Open the BSP application ZFH_MASHUPS

4. Open the contained page twitter.htm

5. View the fully prepared code of the mashup application:

It expects the URL parameter q The name is passed to an online service of Twitter that creates a JavaScript Object The method render().start() of this object is called to dynamically create the HTML code to display the tweets

6. Open the context menu of twitter.htm and choose Test

7. The page opens up in the browser but no result is shown yet (because the name parameter is missing). Copy

the full URL from the browser address bar to the clipboard.

8. Open NWBC, navigate to the transaction MM03 and open the side panel from the previous tasks.

9. To extend the page with the Twitter Mashup, choose Configure.

10. Add a new Web CHIP to the page:

CHIP Catalog =

11. Set the Title of the CHIP to something like Twitter

12. Set the URL of the Web CHIP to the URL you have copied to the clipboard before.

13. Define a URL parameter for the Web CHIP

Name = q Display Name = Search Query Mandatory = false

14. Choose Save on the page. 15. In the CHIP Menu, choose Set URL Parameter. 16. Set the value for Search Query to e.g. User Experience. 17. Choose Accept and close the form. 18. Now the CHIP displays Tweets on User Experience.