CHIPs, PageBuilder and the Side Panel – Part 2
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.
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.
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.
- We have to initialize the side panel
- 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.
- Append to the URL: &sap-config-mode=X
This is for the administrator, a client dependent customizing mode
- 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.
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.
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.
RV SAP Consultancy