Skip to Content
Author's profile photo Karthik Arjun

Splitter in SAP UI5

Hi,

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,

  });

  detailViewpage.setLayoutData(nonResize);

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

Thanks,

Karthik A

Assigned Tags

      3 Comments
      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.

      Thanks,

      Rashmi

      Author's profile photo Karthik A
      Karthik A
      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.

      Thanks,

      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.

      --Joe