Wednesday 2 December 2015

FPM OVP Application – Tree UIBB


 The tree UIBB displays the flight data from SCARR & SPFLI table. The SCARR data displayed as the header(root) and SPFLI data as child.
1
Create a table type.
2
Create a structure - add  an include structure FPMGB_S_TREE_MASTER_COLUMN and other field as shown.
3
Create a feeder class and implement the interfaces.
4
Create an attribute.
5
Activate all the methods of the class. Go to the GET_DEFINITION method.
6
Put the below code.
7
Go to the GET_DATA method.
8
Put the below code.
9
Create a component configuration of the  FPM_TREE_UIBB.
10

11
Provide the feeder class name and save in package.
13
Add the below fields. Don't add the carrid, connid field as these are root and child columns, these will be provided form the feeder class.
12
Create an  web dynpro application and application configuration of the webdynpro component FPM_OVP_COMPONENT.
14
15
16
Add a tree component and provide the FPM_TREE_UIBB componenet configuration name created earlier. Save .
17
Now test the application configuration.
18


Saturday 28 November 2015

Web Dynpro Chip & Embedding in the Side Panel


The below snap shot shows how a web dynpro chip( in right side) is embedded to the side panel of a webdynpro application.
The web dynpro application displays the billing header details and with the row selection the dependent billing items like item number, item name and the price should be displayed in the side panel through web dynpro chip integration.
1
Lets' design the view that displays the billing items in the side panel.  
Create a web dynpro component ZVBRP_COMP. In the component controller add a node with 0.n cardinality referring to the structure VBRP and with three attributes as POSNT, NETWR & MATNR.
2
Add a method READ_BILL_ITEMS with the Interface box is selected and provide the below code.
3
Add an importing parameter to this method of the VBRP ( the type should and must be a dictionary structure ) other wise it will not allow us to create CHIP Inports.
4


METHOD read_bill_items .
  DATA lo_nd_bill_item TYPE REF TO if_wd_context_node,
         lt_bill_item    TYPE        wd_this->elements_bill_item.
* navigate from <CONTEXT> to <BILL_ITEM> via lead selection
  lo_nd_bill_item wd_context->get_child_nodename wd_this->wdctx_bill_item ).
  SELECT posnr netwr matnr FROM vbrp INTO CORRESPONDING FIELDS OF TABLE
lt_bill_item WHERE vbeln is_vbrk-vbeln.
  lo_nd_bill_item->bind_tablenew_items lt_bill_item set_initial_elements abap_true ).
ENDMETHOD.


Go to the view and map the context node to the view context node.
5
In the layout design a table and bind to to the source as the context node.
6
Save and activate the component and right click to create a web dynpro chip.
7
Provide a CHIP name, Display name , Description and choose a Chip Icon from F4 . Save it and click on the Inports tab.
8
To create an Port click on the create button.
9
It will automatically shows the methods of the component interface . In this case we have only one . So select it and continue.
10
Now for the port we have to define the parameters. Click on the parameter create button.
11
The port method needs only the VBELN- bill doc number to get the item details. So select only one field VBELN and continue.
12
For the parameter we need to define tag. Click the icon show tag.
13
Create a tag with name VBELN_TAG.
15
we finished the creation of a web dynpro component with a chip.
Now we have a create another web dynpro application that displays the billing header table and integration with the Chip.
16
Create a  web dynpro component and in the component controller add a context node with cardinality 0..n and referring to the structure- VBRK with some field attributes as shown. 
17
Go to the Methods and add a new method READ_BILL_HEADER & put the below code.
18
19


METHOD read_bill_header .
  DATA lo_nd_bill_header TYPE REF TO if_wd_context_node.
  DATA lt_bill_header TYPE wd_this->elements_bill_header.
*   navigate from <CONTEXT> to <BILL_HEADER> via lead selection
  lo_nd_bill_header wd_context->get_child_nodename wd_this->wdctx_bill_header ).
  SELECT FROM vbrk INTO CORRESPONDING FIELDS OF TABLE lt_bill_header.
  lo_nd_bill_header->bind_tablenew_items lt_bill_header set_initial_elements abap_true ).
ENDMETHOD.


Call the method from the INIT method of the component controller.
20
Go to the view and map the context node.
21
In the Layout, first add a PAGEHEADER UI element and named it as  PAGE_HEADER (  The ID should be PAGE_HEADER ).
22
In the page header add a Transparent Container. [ this transparent container will automatically show a link when the application is launched]
23
Then design a table and map to the context node as the data source.
24
Now go to the attribute and add an attribute to the interface IF_WD_SIDE_PANEL_API.
25
Go to the INIT method of the view and here we have to initialize the side panel to open the CHIP UI, So put the below code. while initializing the side panel give a Action as 'SIDE_PANEL'
26




METHOD wddoinit .
  DATA lr_view_cont TYPE REF TO if_wd_view_controller.
  CALL METHOD wd_this->wd_get_api
    RECEIVING
      result lr_view_cont.
  CALL METHOD cl_wd_side_panel_api=>get_api
    RECEIVING
      api wd_this->gr_side_panel_api.
  CALL METHOD wd_this->gr_side_panel_api->init
    EXPORTING
      view_controller  lr_view_cont    " View Controller of View with PageHeader
      open_action_name 'SIDE_PANEL'    " Action to Open Side Panel
      width            300.           " Side Panel Width
ENDMETHOD.


Now define a view action as 'SIDE_PANEL' and double click on the method.
27
Put the below code to open the side panel.
28
METHOD onactionside_panel .
  CALL METHOD wd_this->gr_side_panel_api->open).
ENDMETHOD.


Create an application.
29
launch the application from the menu path in Admin Mode to integrate the application to the Chip.
30
The below application screen appears, If it is open in administrative mode, in the url you can see additional parameter is added as [  &sap-config-mode=X  ].
31
Provide a side panel configuration name and save it and then click on the Create/Edit link.
32
Provide description and form the change option select Add Chip button.
33
Search for the chip.
34
Select the above created chip as  Bill Items
35

36
Save and close the window.
37
From the billing header table , right click on the Billing Doc column and navigate along Tag- Maintain Tag
38
provide a tag name . It should be same as it is defined in the web dynpro chip for automatic wiring. click on add.

39
Click on OK.
40
Now launch the application.
42
So here the chip is displayed in the side panel and displays all the items of the selected billing doc.
43
44

Comments system

Disqus Shortname