Can a method be run when a tabpanel tab is clicked?

Classic Servoy
1

I have a form that contains a tabpanel with multiple tabs. When a user changes a field on one tab I need to run a verify script that will evaluate ALL of the fields on the form, so I have an Accept button to run that method. The problem is that if the user clicks on another tab, a new form will be displayed whitout having run the verification method. Is there a method that can be run if a tab is clicked on a tabpanel? Or, if not, can a tab be set to enabled=false?
I have tried using the onShow event, but it is very diffcult because the forms that are displayed on the tabpanel can also be called by other methods in the solution, either as part of a tabpanel or as a form by itself.
Does anyone have any ideas?

2

What about an OnExit method attached to the form on the tab?

If you would add a processcontrol Global that can be 1 or 0, which you evaluate at the start of the OnExit method, you can control whether otr not the OnExit procedure is needed.

I use this myself for some thing. It’s a bit tricky, but with some thought you can make it work

Paul

3

From a human usability standpoint, users do not expect to “submit” information when they click on a tab. Another option then is to hide the tabs and use your own buttons to go from tab to tab, submitting information along the way.

  • david
4

Thanks for your suggestions:
Paul, the onExit event is as problematical as the onShow for the same reasons. I really would prefer a simpler solution.
David, I agree with you about the human interface issue, but how does one hide the tabs while still presenting the form in the tabpanel? I assume that your suggestion implies that I need to do in my own code that which the tabpanels provide, but more.
I am experimenting with the following script when a change is made to a field in the form:

//disableAllTabs[tkDetail2]
for ( var i = 0 ; i < elements.tabs_70.getMaxTabIndex() ; i++ )
{
elements.tabs_70.setTabEnabled(i, false)
}

but this only disables the current tab, the second tab is still active. Through debug I can tell that the for statement executes for both tabs, yet only the first one is disabled.

5

DFehrenbach:
… how does one hide the tabs while still presenting the form in the tabpanel? I assume that your suggestion implies that I need to do in my own code that which the tabpanels provide, but more.
I am experimenting with the following script when a change is made to a field in the form:

//disableAllTabs[tkDetail2]
for ( var i = 0 ; i < elements.tabs_70.getMaxTabIndex() ; i++ )
{
elements.tabs_70.setTabEnabled(i, false)
}

but this only disables the current tab, the second tab is still active. Through debug I can tell that the for statement executes for both tabs, yet only the first one is disabled.

I would guess that one tab always has to be ‘active’ and you are trying to turn them all off. Use this function instead:

elements.tab_panel_name.tabIndex = 1;

This activates tab 1 and deactivates all of the others.

Note that when you set the tab panel property “tabOrientation” to “HIDE”, this just removes the tabs themselves from displaying – you still see the form for tab 1 in the tab panel. If you don’t want any of the tab forms to show on default, make the first tab a blank form or use this when the parent form is displayed:

elements.tab_panel_name.visible = FALSE;

Understanding how this works, it is easy enough to have a submit button at the end of each tab form that checks to see if that form is filled out correctly and then activates the next tab:

if (form passess verification)
{
elements.tab_panel_name.tabIndex = 2;
}
else
{
plugins.dialogs.showErrorDialog(‘blah blah…keep trying…’);
}

Hope this is along the lines of what you are looking for.

  • david

EDIT:

PS: I find myself using “tabless” tab panels more often than tab visible panels. It is a very easy and flexible way to direct user interaction. One neat thing to do is to show a particular tab based on the value in a field (that has a value list attached to it). In the attached pic, the pull down choice determines which tab is displayed to the user. The large box below the field (a global field) is the tabless tab panel and it has four tabs – the first one being blank and shows when the field has no value in it.

6

Thanks David for your input and suggestions. While playing around I noticed that tab 0 is not really the first tab on the tabpanel (?). I changed my code to search for 1 tab beyond getMaxTabIndex and all tabs are disabled allowing me to trap the user until the edit is finished!

//disableAllTabs[tkDetail2]
for ( var i = 0 ; i < elements.tabs_70.getMaxTabIndex()+1 ; i++ )
{
elements.tabs_70.setTabEnabled(i, false)
}