Skip to Content
0
Former Member
May 21, 2014 at 08:42 AM

Any suggestions to avoid refreshing of TabPanel content of TabStrip control?

55 Views

Hello,

I am using sap.ui.commons.TabStrip to toggle different views. The content displayed in TabPanel is included into iframe to avoid naming collision might happened in distributed environment. Due to the internal mechanism of TabStrip control, if the content of iframe is not saved and user toggle to another view, when he comes back, the iframe will be refreshed and unsaved content will be lost.

Take the example below, iframe has been used in Tab1 to avoid naming collision, once user switch to Tab2, the TabStrip control will move content "<iframe src='test.html'></iframe>" in DIV of Tab1 into the hidden div with ID "sap-ui-preserve" and remove the DIV of Tab1. Once user switches back to Tab1, the DIV of Tab1 is reconstructed with content in div "sap-ui-preserve", refreshing occurs and filled content by user disappears. To avoid this, we have to use DIV to replace iframe, which means SPA, but there might be naming collision when there are 5-6 tabs and the tab content are developed by different developers.

I checked other Tab controls, the Div of tab1 will be simply hidden with CSS, refreshing would not occur. Any other reasons to reconstruct the content of invisible Tabs? Or any suggestions if we continue to use UI5 control "TabStrip"?

var oTabStrip = new sap.ui.commons.TabStrip({width:"500px",height:"380px"});

var oTab1 = new sap.ui.commons.Tab();

oTab1.setTitle(new sap.ui.core.Title({ text: "iframeTab" }));

var oHtml = new sap.ui.core.HTML({ content: "<iframe src='test.html'></iframe>" });

oTab1.addContent(oHtml);

oTabStrip.addTab(oTab1);

var oTab2 = new sap.ui.commons.Tab();

oTab2.setTitle(new sap.ui.core.Title({ text: "inputTab" }));

oHtml = new sap.ui.core.HTML({ content: "<input type='text'></input>" });

oTab2.addContent(oHtml);

oTabStrip.addTab(oTab2);

oTabStrip.placeAt("content");

Thanks a lot for any suggestions or comments!

Patrick