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

Creating a Chip

 

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.

 

clip_image001

 

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.

clip_image003

 

 

Select all the attributes and press enter.

 

clip_image005

 

 

Context node will be created as below.

 

clip_image006

 

 

 

 

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

 

clip_image008

 

Create an importing paramter for the method.

 

clip_image010

 

 

Write the following code inside the method.

 

clip_image012

 

 

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.

 

clip_image014

 

 

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

 

 

 

clip_image015

 

 

 

Specify the context node and press enter.

 

clip_image016

 

Arrange the layout and activate the whole component.

 

clip_image017

 

 

 

 

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

 

clip_image019

 

 

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 buider of side panel.

 

Enter the name for the chip and press enter.

 

clip_image021

 

 

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.

 

clip_image023

 

 

Create a inport for the webdynpro component.

 

clip_image024

 

 

Select the interface method created and click on enter.

 

clip_image026

 

 

Port will be created as below.

 

clip_image028

 

 

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

 

clip_image029

 

 

Select the field carrid and press enter.

 

clip_image031

 

 

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

 

clip_image033

 

 

Enter the name of the tag as carrid.

 

clip_image035

 

 

Save the webdynpro CHIP.

 

 

We have now created the webdynpro chip.

About Arun

0 Comments:

Post a Comment

Powered by Blogger.