Hi, I provide training in SAP UI5. Also feel free to checkout my new web page https://saptechblog.com
Webdynpro ABAP

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.

 

clip_image002

 

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.

 

clip_image004

 

 

 

 

 

 

 

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.

 

clip_image006

 

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.

 

clip_image008

 

 

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

 

clip_image009

 

 

 

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

 

clip_image011

 

 

 

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.

 

clip_image013

 

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

 

Initialize the values for the Context node:

 

clip_image015

 

 

Initialize the side panel.

 

 

clip_image016

 

 

 

 

 

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.

 

clip_image017

 

 

Write the coding to open the side panel.

 

clip_image018

 

 

 

 

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

 

clip_image019

 

 

 

Output:

 

clip_image021

 

 

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.

 

clip_image022

 

 

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

 

clip_image024

 

 

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.

 

clip_image025

 

 

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

 

clip_image027

 

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

 

clip_image029

 

 

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.

 

clip_image031

 

 

 

Save the configuration and close the window.

 

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

 

clip_image032

 

 

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.

clip_image034

Add the tag with the same name carrid to enable the auto transport.

 

clip_image035

 

Close the window and open the webdynpro application in normal mode to test the application.

 

 

Output:

 

clip_image037

 

 

 

 

About Arun

1 Comments:

  1. I was looking at some of your posts on this website and I conceive this web site is really instructive! Keep putting up.. Zonnepanelen installateur

    ReplyDelete

Powered by Blogger.