WebDynpro Standard Interface, Syntax & Code Wizard

Hello Guys...

Hope you all doing good.. :)

Before going further of previous post I thought you guys should know about some important standard interface of Webdynpro and syntax for writing code. Don't worry its not too tough and there is something called CODE WIZARD that will generate your 70% to 90% your code. Its cool na  :)

So Here I have listed some standard interfaces. You just visit the link and find out their methods of that particular interface. And these method we are going to use in future post.

1. IF_WD_CONTEXT_ELEMENT 
2. IF_WD_CONTEXT_NODE
3. IF_WD_CONTEXT_NODE_INFO
4. IF_WD_WINDOW_MANAGER
5. IF_WD_MESSAGE_MANAGER
6. IF_WD_COMPONENT_USAGE
7. IF_WD_PORTAL_INTEGRATION
8. IF_WD_VIEW
9. IF_WD_WINDOW
10. IF_WD_CONTROLLER
11. IF_WD_COMPONENT
12. IF_WD_APPLICATION

The above interfaces are standard and you are going to use methods of those interfaces so it will good to you if you go to one by one in all interfaces and check out their methods.

Apart from interfaces there is some standard references in WebdynPro programming. And that should be follow these standard references. like

                                     New Webdynpro ( EHP4 onwards) | Old  WD (Netweaver 04, 05)
____________________|____________________________|________________________
Component Controller  | wd_comp_controller                      | wd_comp_controller
---------------------------|---------------------------------------- |-----------------------------
 Node                          | lo_nd_(node_name)                       | node_(node_name)
-------------------------- |---------------------------------------- |-----------------------------
Element                        | lo_el_(node_name)                        | elem_(node_name)
---------------------------|------------------------------ ----------|-----------------------------
Work Area                  | ls_(node_name)                             | stru_(node_name)
--------------------------|-----------------------------------------|------------------------------
Internal Table              | lt_(node_name)                              | it_(node_name)
____________________|______________________________ |_______________________


Syntax For

1. Node Declaration
    Data lo_nd_(node_name) Type Ref To IF_WD_CONTEXT_NODE.

2. Element Declaration
    Data lo_el_(node_name) Type Ref To IF_WD_CONTEXT_ELEMENT.

3. Work Area Declaration
    Data ls_(node_name) Type  wd_this->element_(node_name).

4. Internal Table Declaration 
    Data lt_(node_name) Type wd_this->elements_(node_name).

5. Get Node Reference
    lo_nd_(node_name) = wd_context->get_child_node(name = '(NODE_NAME)' ).

6. Get Element Reference 
    lo_el_(node_name) = lo_nd_(node_name)->get_element( ).

7. Get the record into work area
    lo_el_(node_name)->get_static_attributes( importing static_attributes = ls_(node_name) ).

8. Getting all record into internal table
    lo_nd_(node_name)->get_static_attributes_table(importing table = lt_(node_name) ).


Note: Change the (node_name) as your node name. For example If your node name is ITAB then
  lo_nd_(node_name) = lo_nd_itab
     

Code Wizard:
I was talking about code wizard. Through code wizard all the above syntax you can generate and even more. The below figure is about code wizard

The above figure is tool bar where you can find the Icon of Code Wizard is in red square by clicking you can open Code Wizard.

This is Code Wizard dialog box which contains two tabs Context and General.

Let see what are the options in Context Tab.

1. Node + Read = Get_Static_Attributes( ).

2. Node + Set = Set_Static_Attributes( ).

3. Node + Append = Bind_Structure( ).

4. Node + Read + As Table Operation = Get_Static_Attributes_Table( ).

5. Node + Set + As Table Operation = Bind_Table( ).

6. Attribute + Read = Get_Attribute( ).

7. Attribute + Set = Set_Attribute( ).

Let see what are the options in General Tab.

As you can see in figure there are many options available.Like

1. Method Call in Current Controller --> To Trigger the method of same controller.

2. Method Call in Used Controller --> To Trigger the method of different component which are used in current controller

3. Instantiate Used Component --> To activate the used component like SALV_WD_TABLE in memory.

4. Generate Message --> To display message like success, warning, Error

5. Text Symbol Access --> To Access text message from Assistance Class.

6. Generate Popup --> To open popup window, To open external window, To open popup window of used component.

7. Portal Integration --> To implement portal integration functionalities.

8. Personalization --> To provide user specific settings for application.

To Know more about Code Wizard.

That's all. Hope you guys find helpful...

Thanks & Don't forget to comments.. : )

ContextualPanel & ViewUIContainer Elements

Hello Friends..

Today's post about one of the most important UI Elements i.e ViewUIContainer & ContextualPanel.

ViewUIContainer:
It acts like a subscreen area of view, where you can embed another view (view inside view). Suppose you want to insert more view in main view and it is possible through ViewUIContainer only. And more than this ViewUIContainer is used when you want embed the Interface View of another Component like SALV_WD_TABLE, WDR_SELECT_OPTIONS etc. Without ViewUIContainer you can't display the Interface View of other Component.
                        So, ViewUIContainer is something like that by which you can insert View inside View or embed the interface view of other component.

ContextualPanel:
ContextualPanel is used to generate separates section in Output. ContextualPanel can contain collection of other screen elements i.e in ContextualPanel you can insert other UI elements like Button, Text, Label etc. ContextualPanel is also used for Navigation.


To understand more lets do it practically....

The final output will be like below.

As you able to see above. There is one ContextualPanle on Left side where there Button UIs are inserted in ContextualPanel  Search, Edit and Update.

                           And on Right side there is one ViewUIContainer in which three views are inserted at design time. The ViewUIContainer will display the one view at time on browser when you click on any button, here each view has different layout

And the both ContextaulPanel and ViewUIContainer UI elements is inserted in one MAIN View only.

Follow the below steps
Step1 : Go to SE80 and create a Component with one window W_Main and one view V_Main.
Step2: Create three more views says View1, View2, View3 with one Inbound plug for each view says IN1, IN2, IN3 respectively.
Step3: Go to View V_Main Outbound Plugs Tab and create three outbound plug says out1, out2, out3 like below. The final component will look like this one

Step4: Now Go to Layout of V_Main and insert the Contextual Panel under the ROOTUIELEMENTCONTAINER and make sure that Layout Property of ROOTUIELEMENTCONTAINER is Matrix Layout

Follow the below steps to create ContextualPanel;

1. Right Click Root UI Element Container -> Insert

   ID: Contxtpnl

   Typ : ContextualPanel

2: Right Click ContextualPanel(Contxtpnl) -> Insert

   ID: FreeConx1

   Typ : Free Contextual Area

3. Right Click Free Contextual Area(FreeConx1) -> Insert

   ID : But1

   Typ : Button 

Assign below property for Button (But1)

    Text: Search

    OnAction: Search and assign the outbound plug OUT1 as below

4: Right Click ContextualPanel(Contxtpnl) -> Insert

   ID: FreeConx2

   Typ : Free Contextual Area

5. Right Click Free Contextual Area(FreeConx2) -> Insert

   ID : But2

   Typ : Button 

Assign below property for Button (But2)

    Text: Edit

    OnAction: Edit and assign the outbound plug OUT2 as above

6: Right Click ContextualPanel(Contxtpnl) -> Insert

   ID: FreeConx3

   Typ : Free Contextual Area

7. Right Click Free Contextual Area(FreeConx3) -> Insert

   ID : But3

   Typ : Button 

Assign below property for Button (But3)

    Text: Update

    OnAction: Update and assign the outbound plug OUT3 as above

8: Right Click Root UI Element Container - > Insert

    ID: Viewcont

    Typ: ViewUIContainer

    and assign the below property for ViewUIContainer(ViewCont)

      Layout: Matrix Data

      VAlign: TOP

The final Layout of view V_Main will be like this

Step4: Go to window W_Main and drag & drop View1, View2, and View3 inside the ViewUIContainer.  And create the Navigation link by drag & drop the Outbound Plug  into Inbound Plug. And the final Window look like this

Step5: Go to Each View View1, View2 & View3 Layout Tab and Insert the PageHeader UI element with appropriate titles.

Step6: Save and Activate the Component and Create an Applications. And Test it.



Hope you guys understood how to insert ContextualPanel & ViewUIContainer UI Element. In Next post we will see  how to fetch the data from database and edit and update the database. We will be continue from this post only. Since in this post we see only how to insert the ContextualPanel and ViewUIContainer.



Thanks & Don't forget to comments