Skip to Content

Splitter in SAP UI5


Easy way to split Tablet/Desktop UI screens.

Details: To divide our SPLIT screen Detail page into 2 screen under mobile library, Splitter is the best solution to complete our task.

With resize option:

var oLayout = new sap.ui.layout.Splitter({

  contentAreas : [detailViewpage,detailViewpage2],


Inside this content area, we have two views name. While using this SAP automatically split our detail page it into 2 parts, with resize option

Without resize option:

var nonResize = new sap.ui.layout.SplitterLayoutData({

  resizable : false,



we need to use above code.

1. According to Split App architecture, Layout data roles are important.

2. Under splitter i put two views

3. if we assigned splitter layout data with resizable as false, resize option will disapers

This is available in version 1.22


Karthik A

You must be Logged on to comment or reply to a post.
  • Hi Rashmi,

    yah we can resize tables...use sap.m.table control and put it in view1.

    when you move slider, table will resize automatically.


    Karthik A

  • Hi Karthik

    I have a vertical Splitter, in the second panel a sap.ui.core.HTML is inserted, which has a iframe. A html page is added into the iframe.

    To response onresize, I call setHeight to change the height of Splitter, then content of page in iframe is cleaned.

    I think there must be a solution that makes Splitter could be responsive to the height change of window. Because I saw the same implementation in demokit. But I don't find the way.

    Could you give me some help? Thanks.