SAP Demand

SAP Demand

SAP Websites

  • www.sap.com
  • sdn.sap.com
  • scn.sap.com
  • help.sap.com
  • service.sap.com
  • sap-press.com
  • global.sap.com
  • careersatsap.com
  • www.sapbasics.com
  • sapteched.com 

Using a chip in 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.

1

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.

2

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.
3

 

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

4

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

5

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

6

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.

6.1

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

Initialize the values for the Context node:

7

Initialize the side panel.

8

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.

9

Write the coding to open the side panel.

10

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

11

Output:

12

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.

13

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

14

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.

15

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

16

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

17

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.

18

Save the configuration and close the window.

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

18.1

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.

19

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

20

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

Output:

21

22

Creating a Webdynpro CHIP component

Requirement: Create a chip that provides information about the Airplanes.

The information about the airline carrier is available in the table SCARR. We need to create a webdynpro component that  supply the information about the carrier and create a CHIP for it.

Procedure:

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

1

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

Step 2: Go to the context tab of the component controller and create a context node for the table structure scarr.

Enter the name for the node and provide the dictionary structure as scarr and click on add attributes from the structure to add attributes.

2

Select all the attributes and press enter.

3

Context node will be created as below.

4

Step 3: Go to the methods tab of the component controller and create a method to fill the context node. Note : Method has to be an Interface method

5

Create an importing parameter for the method.

5.1Write the following code inside the method.

6

Code:
DATA LO_ND_CARRIER TYPE REF TO IF_WD_CONTEXT_NODE.        DATA LO_EL_CARRIER TYPE REF TO IF_WD_CONTEXT_ELEMENT.
DATA LS_CARRIER TYPE WD_THIS->ELEMENT_CARRIER.
LO_ND_CARRIER = WD_CONTEXT->GET_CHILD_NODE( NAME = WD_THIS->WDCTX_CARRIER ).

LO_EL_CARRIER = LO_ND_CARRIER->GET_ELEMENT( ).

SELECT SINGLE * INTO LS_CARRIER
FROM SCARR
WHERE CARRID = IS_CARRIERS-CARRID.

LO_EL_CARRIER->SET_STATIC_ATTRIBUTES(
STATIC_ATTRIBUTES = LS_CARRIER ).

Step 4:  Go to the layout tab of the view controller and create the layout to display the airline details.

In the context tab of the view controller Drag and drop the context node from the component controller to view controllers context.

7

In the layout tab use the code wizard to create the form. Select the form and click on continue.

8

Specify the context node and press enter.

9

Arrange the layout and activate the whole component.

10

Step 5: Right click on the component and create a webdynpro chip for the component.

11

Usually we used to create an webdynpro application to run the component, instead of creating the webdynpro application we are creating the webdynpro chip which can be integrated in other application using page builder of side panel.

Enter the name for the chip and press enter.

12

Enter the display name and description for the chip. Remember the display name of the chip. This will be required while adding the chip to side panel.

13

Create a inport for the webdynpro component.

14

Select the interface method created and click on enter.

15

Port will be created as below.

16

Click on create parameter to create a parameter to the port.

17

Select the field carrid and press enter.

18

Click on show tag button to add a tag to the parameter and click on create to create the tag.

19

Enter the name of the tag as carrid.

20

Save the webdynpro CHIP.

We have now created the webdynpro chip.

CHIP in webdynpro ABAP

CHIP stands for Collaborative human interface part and is introduced as a part of Netweaver 7 enhancement package 2.

A CHIP is an encapsulated, stateful piece of software application that provides a functionality which can be used in collaboration with Page Builder page or Side Panel.

All the available CHIPs are registered in the CHIP Catalog.

CHIP Model:

The chip model describes the capability of the CHIP. Technically a chip is nothing but a webdynpro component that implements a webdynpro component interface.

Chip consists of:

  1. Port
  2. Wiring
  3. Tags

Port:  Communication with the chip is implemented through special interface called Ports.

There are two kinds of Ports available in a CHIP.

  1. Inports
  2. Outports

1

Inports:

Inports are used to receive information from other chips. Here you specify an importing parameter in which you get the data from the other chips or page builder or side panel. Typically inports are nothing interface method with importing parameters.

2

Outport:

Outport is used to expose the internal status of the CHIP. Basically Outports are nothing but the interface event of the component.

3

Wiring:

Using wiring we can connect CHIPs so that they can interact with each other. Wiring between the two CHIPs is established via Outport of the sending chip and inport of the Receiving CHIP.

Tags:

Tags can be assigned to the port and parameters of the port. Basically a tag is a string. If a same tag is available in the application and the CHIP then they are automatically connected through wiring and data is transported between them.