Tabbar Change Refresh issue

Suite and Optimus Suite 7
#1

Currently, the screen is updated when moving to another tab.

In this case, when you return to the previous tab after working in another tab while working in the existing tab, the screen is updated and the existing data disappears.

In the case of a screen registered in a tab, I would like to keep the existing screen without being updated when the tab is moved.

How to solve it?

Tab Refresh issue part 2 - Suite 8
#2

When you’re talking about working in a tab, are you referring to a DHX Tabbar tab, or a browser tab?

#3

using the DHX Tabbar.

dhxTabbar = new dhx.Tabbar(“mainDiv”, {
mode: “top”,
//tabWidth: 120,
closable: true,
activeTab: “mainTab”,
css: “dhx_widget–bordered”,
views: [
{ tab: “HOME”,id:“mainTab”}
]
});

In addition to this, tabs are added and deleted dynamically.

function addTab(tabbar,TabId,TabText) {
tabbar.addTab({ tab: TabText,id:TabId}, -1);
}

addTab(dhxTabbar ,“1004”, “TEST”);

dhxTabbar .getCell("1004").attachHTML("<iframe id='iframeScreen' src='"+ "${contextPath}/test/index?result=TRUE"+"' style='height:100%; width:100%; border:0px;'/>");

dhxTabbar .setActive(“1004”);

Is it a problem to create an IFRAME using the attachHTML function?

Previous versions used the attchURL function.
There were no such problems back then.

#4

OK, that’s what I thought, but didn’t want to answer something you weren’t even asking.

The developers have previously indicated that the tabbar component does not retain content of inactive tabs; it is by design to improve page performance. The components on the tab are rebuilt using stored configuration information, but the data is not stored with that configuration information. The only way to retain the content is to store the state of the tab content before changing tabs, and then restoring it when coming back to the tab.

I’m not sure exactly when the “change” event of the tabbar is fired; if it’s before the previous tab content is destroyed, you could use that event to get the content state (for example: form.getValue(), or grid.data.serialize()).

If the previous tab’s content is already destroyed with the “change” event is fired, then you’d have to find a way to make sure the content state is stored before the user clicks the new tab. With a form, you could use the form’s “change” event to store the form’s values into a variable (again, using form.getValue()).

I might suggest using an array that matches the tab IDs for storing the data, so that when the user goes back to a tab, you can use the “change” event to easily grab the stored content because the tab ID is given by the event. So it might look something like this:

var tabsContent = {tab1:{},tab2:{},tab3:{}};

form.events.on("change", function(){
    tabsContent.tab1.formData = form.getValue();
});

grid.data.events.on("change",function(){
    tabsContent.tab1.gridData = grid.data.serialize();
});

tabbar.events.on("change",function(activeId,prevId){
    form.setValue(tabsContent[activeId].formData);
    grid.data.parse(tabsContent[activeId].gridData);
});