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.
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: 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
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
No comments:
Post a Comment