Skip to Content

SAPUI5 layout with background color and 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)
Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

3 Answers

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

    sorry do not have the XML view.

    maybe this will help

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

    Add comment
    10|10000 characters needed 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

  • Sep 21, 2017 at 02:25 AM

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

    Add comment
    10|10000 characters needed characters exceeded

    • 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

  • Sep 25, 2017 at 05:18 AM

    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

    Add comment
    10|10000 characters needed characters exceeded