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

[Former Member]

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

[Former Member]

Why are you going with the inclusion of native HTML in the first place ? There are UI5 controls that can replace,

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

If you feel, there might be collision in id, don't set the id manually. When you dont set the id, the framework generates an unique id for the control.

[Former Member]

Hello Sakthivel,

Thanks for the reply! The background is we are using UI5 to implement one SRM application, and which is developed by 20 developers. For individual page, one part is developed by application developers and shell by framework developers, application UI is embedded in the shell.there is requirement to access the control and set the attributes in different js files.

For the shell, it's developed with declarative view, there isn't way to choose the control without ID. For application UI, without ID, variable of control have to be global variable to allow others' code to access.

Regards,

Patrick