Display two views side by side

[former_member672218]

Hello,

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?

Thanks,

Venkat

[ajoy_chakraborty · Accepted solution]

Hi Venkat,

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

[former_member672218 · Accepted solution]

Hello ,

Sorry for the delay in respone.

Ajoy, your answers helped me to fix it. Thanks a lot.

Harshith, thanks a lot for your help as well.

Regards,

Venkat

[ajoy_chakraborty]

You can use CONTEXTUAL PANEL and VIEW CONTAINER.

You can also refer to Standard Program: WDT_QUIZ in SE80 for ready reference.

[former_member672218]

Hello Ajoy,

Can you share some links which contains instructions about creating Contextual panel. I am new to this. Thanks.

Harshith,

Can you pleas explain more as to how to get it done? It is slightly confusing.

Thanks,

Venkat

[Former Member]

Hi,

First take a transparent container and insert your view containers into that transparent container.

Now set the layout of transparent container to GRID LAYOUT and now make the property col count to 2.

[ajoy_chakraborty]

Please check:

http://www.sdn.sap.com/irj/scn/go/portal/prtroot/docs/library/uuid/d0b01544-4ecb-2e10-30aa-d8e1286c4...

Also, have a look at the standard program I mentioned earlier.

[Former Member]

Hi venkat,

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.

[former_member672218]

Hello Karthik,

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

Harshith,

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

Thanks,

Venkat

[Former Member]

Hi venkat,

Use Grid layout with col count 2 , So that the containers get displayed side by side.

[Former Member]

Hi,

Pls take a look at this link [http://www.saptechnical.com/Tutorials/WebDynproABAP/Tree/Page2.htm]