screen layout with several views

[Former Member]

hello,

I want to embedd three views in one window in a specific screen layout via three viewcontaineruielement´s .

On the left I want vertically embedd a Menü (M, as a tree) and close to M on the top I want to have a browser-view (B) and underneath I want to embedd a detail-view (D).

So M should fill out 1/3 of the width and B and D got 2/3 of the width.

B should fill out 1/3 of the height and D 2/3 of the height.

It should look circa like this:

_______________
|M   | B      |
|    |_______ |
|    |        |
|    |        |
|    |    D   |
|    |        |
|___ |_______ |

How can I achieve this screen layout?

Is it possible to change the screen layout with the mouse when I test the wd-application.

[Former Member · Accepted solution]

Hello Thorsten,

I tried the following with TextViews. It should work with ViewContainerUIElements too.

I marked the Layout for the RootUIElementContainer as MatrixLayout. I created two TransparentContainers. One as MatrixHeadData, the other as MatrixData and RowLayout. Now, inside the first one, I added a TextView with some very long text and Wrapping set to true. In the second one, I had two TextViews(both as RowHeadData), with different texts. This worked!!

However, the only limitation that I could see was the layout would always depend on the size of content. It varies with the kind of texts I put in.

Hope this helps you.

Regards,

Neha

[Former Member · Accepted solution]

@all: thanks for your helpful answers. I gave you points

>> However, the only limitation that I could see was the layout would always depend on

>> the size of content. It varies with the kind of texts I put in.

you are right neha.

I made 40 lines of example text in B and B takes the space which the content require (> 30 %) but how can I restrict the space of B to 30 % of height?

So B should fill out 30 % of height and for example show only 20 lines (in these 30 %) of text with a scrollbar.

Extending the web page depending on the content size is not a good solution...

EDIT: So I want to have for each view container a scrollbar if the content of the view exceed the fixed size ( for example B 33% of height).

Message was edited by:

Thorsten Winter

[Former Member · Accepted solution]

has no one an idea? I tried scrollcontainer but its deprecated and didn´t reach my aim

[Former Member · Accepted solution]

Hi,

try eliminating the stretched vertically attributes everywhere you can have overflow,

plus setting the width and height as fixed pixel values, which is feasable, because

normally the user work on same resolutions.

grtz,

Koen

[Former Member · Accepted solution]

thanks koen,

i tried to work with fixed "pixel" values but it doesn´t work too. it´s automatically stretched to the size of my content.

I read in sap help that using "%" concerning the height doesn´t work.

[Former Member · Accepted solution]

Hello,

You can try this. In the container on the right side, again have two containers, and fix their pixels accordingly. Also, for both the containers (the new ones), set the scrolling mode property to auto.

So now you should have 4 containers. On left you have one single container. On right you have container containing two containers (with height as say 150px and 450px respectively).

Hope this helps.

Regards,

Neha

[Former Member · Accepted solution]

thanks neha and all the others

the way over 2 additional transparent containers solved it.

now I have only to feel out if its possible with % in place of px...

[Former Member]

Make the layout of your root as Grid Layout, colcount = 2. Inside the rootuielement, have two transparent containers. Make the width of the first one as 33% and the second as 66% (for 1/3 and 2/3). Make the height of the container 1 as 100%.

In the second transparent container, add your two elements, for Browser and Details. The layout of the container will be flow layout. Refer to the component WDR_TEST_EVENTS that has a somewhat similar layout.

Regards

Nithya

[Former Member]

Hi,

you can use a gridlayout as basic, embed viewcontainer in first column,

transparent containes in second.

in the transparen t container, you have a matrix/grid layout with 1 column and

two viewcontainers, this will work, you just need to set your heights and widths

to your preference

grtz,

Koen