Skip to Content
Author's profile photo Karthik Arjun

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

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member

      Hi Karthik,

      Is it possible to resize in tablets? If I emulate it's not working. I even tried on my mobile it is not working.



      Author's profile photo Karthik Arjun
      Karthik Arjun
      Blog Post Author

      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

      Author's profile photo Former Member
      Former Member

      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.