How do we display two views side by side?My requirement is pretty much like SE80 Screen. On the left pane, the user mus tbe able to enter the selection screen details and based on the selection screen parameters the right side pane or the right side screen must change.
I found this link [http://wiki.sdn.sap.com/wiki/display/WDABAP/WebDynProABAPApplicationusingTreeand+Frame] but then the moderator has mentioned that this is not recommended.
Is there an alternative to achieve this?
You can use two view container UI elements to display two views, In the first view container you can
have the selection screen and in the second view container you can display the output for selection.
For this first create view1 with your selection screen.
Now create another view say view2 with the desired output.
In the Main view take two view containers and embed each of above views in each view container.
You can embed as many views as per your requirement into the second view container and depending
on your selections fire the respective plug to display the particular view in view container.
Hope this helps.
The tutorial is the same as the link that i shared and as per the link the moderator says that iframe are not to be used
As per your suggestion, the selection view will be displayed on the top and then the output will come at the bottom. Isn't it? I would like to have the selection screen view and the output view side by side
Also, have a look at the standard program I mentioned earlier.
Tried to create a scenario which might suit your requirement. I have noted down the steps. Please find the same:
REQUIREMENT: Create a CONTEXTUAL PANEL and embed two buttons u2013 VIEW2 and VIEW3. On clicking VIEW2 button, VIEW2 should be displayed. On clicking VIEW3, corresponding VIEW3 should be displayed
1) Create Component -> VIEW1 and WINDOW1
2) Drag and drop CONTEXTUAL PANEL (VIEW1 -> Layout tab -> Favorites -> Layout)
3) Create element under contextual panel -> ID = Area1 -> Type = FreeContextualArea
4) Under u201CArea1u201D -> Right click and create element -> ID = Button1 Type = Button
5) Provide button text as VIEW2
6) Similarly create another contextual area, Area2 -> Create Button2 -> text = VIEW3
7) Now, drag and drop VIEW_CONTAINER_UIELEMENT
8) Go to ROOTUIELEMENTCONTAINER and set LAYOUT as Matrix Layout. (you can set the vAlign property of
VIEW_CONTAINER_UIELEMENT to MIDDLE for better look and feel)
9) Create VIEW2.
10) Insert element -> TEXT1 -> TYPE: TextView
11) Similarly, create VIEW3 -> TEXT2 textview.
12) Now, go to VIEW1 -> create 2 outbound plugs -> OUT1 for VIEW2 and OUT2 for VIEW3
13) Go to VIEW2 -> Inbound Plug -> IN21
14) Go to VIEW3 -> Inbound Plug -> IN31
15) Go back to VIEW1 -> Button1 -> Property -> Event -> onAction -> Create Action and maintain outbound plug
16) Repeat the above mentioned steps for Button2
17) Go to WINDOWS1 -> Drag and drop VIEW2 and VIEW3 to VIEW_CONTAINER_UIELEMENT maintained under VIEW1.
18) Maintain navigation links (OUT1 to IN21 and OUT2 to IN31)
19) SAVE/ ACTIVATE Component/ Create WD Application and TEST