Using Chip in a Side panel

In the previous post we have see how to create the CHIP. In the following post let us see how to use the CHIP.

In the following example I am going to use the chip to be displayed in the side panel.

Step 1: Go to the Tcode SE80 and create the webdynpro component.

Assign the component to the package or save it in the local object.

Step 2: In the context tab of the view controller create a Context node for the table SFLIGHT of cardinality 0..N.

Step 3: In the layout tab of the view controller insert the page header UI element.

Note: The name of the page header UI element should be PAGE_HEADER.

For more information on page header refer to the following link.

http://help.sap.com/saphelp_nw70ehp1/helpdata/en/13/a0af4241d4b911e10000000a1550b0/content.htm

Step 4: Right click on the page header UI element and select insert title content.

Provide the ID, and type of the UI element as transparent container.

Step 5: In the layout tab of the view controller, create a table UI element and bind the context node to the table.

Step 6: Create an object reference variable for the side panel in the attributes tab of the view controller. Here we get the reference of the side panel and store it in this attribute and use it across different methods in the view controller.

Step 7: Go to the do init method of the view controller and do the following.

Initialize the values for the Context node:

Initialize the side panel.

Step 8: In the previous step we are initializing the side panel with action ‘OPEN_SIDE_PANEL’. This event handler method will be called when event occur in the side panel. Create an event handler method with the name OPEN_SIDE_PANEL and do the following.

Write the coding to open the side panel.

Step 9: Save and activate the whole component. Create the webdynpro application to test the component.

Output:

Thus far, we have created a webdynpro component with page builder and side panel. The output of the application will be displayed as above. We now need to configure the side panel to add the webdynpro chip in it.

Configuration Part:

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

Now in this example let us open the side panel configuration in admin mode.

In the URL of the application, add &sap-config=X and load the application.

You will now be able to see a link on the page header with the name set additional information.

Click on the link. An configuration panel will be opened on the right hand side. Enter the name for the configuration and click on create/edit.

Side panel customizing window will be opened. Enter the description and select the link chip catalog on the right hand side of the window.

In the chip catalog, choose the chip which we have created. Drag and drop the chip in the side panel.

Note: Display name we provided at the time of creation of chip will be displayed.

You will able to see the view of the chip component loaded in the panel.

Save the configuration and close the window.

Also save the additional information to open the side panel as soon as the application is started.

Now we do wanted our chip in the side panel to respond to the changes in the application.

Our next step will be wiring. Wiring in simple is nothing but transferring the data from the application component to the CHIP. When the tag name on both the side is same wiring will be done automatically by the system.

In the previous post while creating the chip component we created the tag for the inport parameter with the name carrid. If we create a tag with the same name in the webdynpro application then the data from the application to the chip component will be transferred automatically.

To configure the tag in the webdynpro application, open the webdynpro application in the &sap-config-mode=X and do the following.

Right click on the field which is to be transported and select manage tags.