Skip to Content
0

SAPUI5 layout with background color and Image

Sep 20, 2017 at 10:00 AM

361

avatar image

Hello,

I am trying to design a screen which would look as follows:

I am not really sure how to achieve this. I tried putting two sap.m.panel controls within SimpleForm. However, they are not working as expected.

Can someone please share the XML view code which would output the result as above. Please note that my question is on how to place the controls, achieving the background color and the overall layout as per the above screen.

Regards,

Faddy

sample-screen.png (13.4 kB)
10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

3 Answers

Best Answer
avatar image
Former Member
Sep 23, 2017 at 01:28 AM
1

sorry do not have the XML view.

maybe this will help

https://jsbin.com/lubavij/edit?output

Show 1 Share
10 |10000 characters needed characters left characters exceeded

Hi Dennis,

The design is exactly what I was looking for. May be, I will do some home work to concert that to an XML view. I will post my queries further in this forum in case if I am unable to understand something there.

Thanks

Faddy

0
Sharath M G Sep 21, 2017 at 02:25 AM
1

Use Horizontal containers with full height. In each container insert relevant controls.

Show 2 Share
10 |10000 characters needed characters left characters exceeded

Thanks for the info Sharath.

Sorry to ask the following question.. May be I am a novice so don't have much idea about Horizontal containers. Can you name them? The only thing which I am used to is: SimpleForm with ResponsiveGridLayout..

Regards,

Faddy

0

You have controls like - HBox and VBox. These are containers which can be defined 50% width in the page each(ex: 2 HBox/VBox controls each taking up 50% width)

Inside the container, you can put any controls and design accordingly.

You can have containers within containers and also make use of FlexBox inside the container.

Also, usage of containers helps in mobile view to re-align accordingly.

Regards,

Sharath

0
SAP Learner Sep 25, 2017 at 05:18 AM
0

Hi All,

I have used HBox and VBox as suggested by Dennis, which did the job for me.

Thanks a lot for your suggestions and help.

Regards,

Faddy

Share
10 |10000 characters needed characters left characters exceeded