CHIPs, PageBuilder and the Side Panel - Part 2

[RobinV]

Introduction

In the CHIPs, PageBuilder and the Side Panel - Part 1 I explained how to create a CHIP from a web dynpro. In this blog (part 2) I am going to explain how to create a side panel in a web dynpro. Then we are going to implement our created CHIP in the side panel and automatic wire it to the web dynpro application.

Prerequisites

A Netweaver 7 Ehp 2 system.
Some Web Dynpro knowledge
My previous blog could help you to understand what a CHIP is

Wat are we going to create?

First we are going to create a web dynpro application and prepare it so that it can implement a side panel.

Secondly we are going to the side panel configuration tool and create a new side panel. Then we are going implement our created CHIP from the previous blog in the side panel.

Finally we will automatic wire our CHIP to the web dynpro application.

Step 1: Create a web dynpro

I named my web dynpro component ZZ_RV_SIDE_PANEL
For this example we only need one view (V_MAIN)

Step 2: Setup the component controller

In the context of the component controller create a node SFLIGHT. This node is used by the view to display a table with flight data.

Create a method FILL_SFLIGHT to fill the node with records of the table SFLIGHT.

Step 3: Setup the view

To implement a side panel we have to prepare the view in the layout and in the coding.

Prepare layout

Create a page header element in the view.
The page header element must have the name PAGE_HEADER

In this page header element a link will be presented to open the side panel.
Create a transparent container element inside the page header.

Prepare coding

Two steps:

1. We have to initialize the side panel
2. We have to create an action to open the side panel

To initialize the side panel write the code below in the method WDDOINIT of the view.
From here we also fill our flight data table.

Create an action OPEN_SIDE_PANEL

Write the code below in the method ONACTIONOPEN_SIDE_PANEL

To complete the design of the view we have to map the context node SFLIGHT of the component controller to the context of the view.

Then we can create a table of this context node with the template button.

Your view should look like the image below:

Step 3: Create a web dynpro application

Test your created web dynpro application.

Step 4: Open the side panel configuration tool

There are two options to open the side panel configuration tool.

1. Append to the URL: &sap-config-mode=X
   This is for the administrator, a client dependent customizing mode
2. Append to the URL: &sap-config-mode=config
   This is for the programmer, a client independent customizing mode

In this example we will use the client dependent customizing mode &sap-config-mode=X

In the customizing mode you see a link "Set Additional Information" at  the right in the page header. If you click on this link it will display the application configuration for the side panel. This is a view to select which existing side panel you want to implement in the application, but it also allows you to create a new side panel.

Set the radio button to "Use Side Panel" and fill in a configuration name for the side panel. I named it: ZCARRIER_SIDE_PANEL

Click on the link "Create/Edit" to create a new side panel.

The side panel configuration tool will open.

Provide a description for the side panel.

Click on the link "Chip Catalog" at top right of the screen.
The CHIP catalog will be shown and you could drag and drop any kind of CHIP in your side panel.

Our created CHIP from the previous blog is stored in folder: X-SAP-WDY-CHIP

We gave it the name "Carrier chip" with an airplane icon.

Drag the CHIP from the Chip Catalog and drop it into the panel

Our created CHIP will be displayed in the panel.

Save the side panel.

Save the application configuration for the side panel.

Step 5: Automatic wire

At this point we have implemented a side panel in our web dynpro application with our created CHIP from the previous blog.

You can test you application and see for yourself how cool the side panel looks.

But unfortunately the side panel with carrier information does not respond if we change a row in the table with flight data.

To make this work we have to automatic wire our CHIP to the web dynpro application.
In the previous blog we have created a Tag for the inport parameter CARRID of the CHIP. If we create a Tag in the web dynpro application with the identical name CARRID, then in the background it will be automatically wired.

To create a Tag in the web dynpro application open the web dynpro application in customizing mode: &sap-config-mode=X
Open the context menu (right click) of the column CARRID from the table and select in the context menu: Tags -> Maintain Tags

Fill in the Tag CARRID and click on the Add button.

The Tag CARRID is created and click the OK button.

To check if the Tag is created you can open the context menu again and you will see the created Tag.

Congratulations !

You have created a web dynpro with a side panel. Then you have implemented our created CHIP in the side panel with automatic wire to the web dynpro application.

If you now select a row in the table the CHIP in the side panel will respond and will display additional information about the carrier.

What's next?

There are a lot of advanced techniques we can use with the side panel, for instance:

• Multiple side panel configurations selected from a button choice
• Multiple views in one view assembly with their own side panel configuration

But for now you know the basics of CHIPs and the Side Panel.

I know I didn't talk a lot about the PageBuilder, but if you like I can write a blog about it how you can implement CHIPs in the PageBuilder and create new applications with it. Just write a comment below if you are interested.

Regards,

Robin Vleeschhouwer

RV SAP Consultancy