How to focus on first field on form in tabpanel

Classic Servoy
1

When I select a tab on the tabpanel to show the specific form, the focus will still be on the tab of the tabpanel, instead of the first field of the form showed in the tabpanel.

I tried in onShow() of the showed form a requestFocus() on the element and focusFirstField() on the controller, both with no result.
Situation is in the webclient. In the smartclient it’s working.

So my question is: how to focus the first field in a form on a tabpanel in the webclient?

2

Anyone have an idea?

3

It appears that what you want to achieve is not presently possible unless you make a case for it to work the way you wish. I suppose that you cannot wait until then…

Allow me to suggest the following work-around:
1.Use a Tabless Panel instead of a Tab Panel. You need name to your Tabless Panel.
2.Create as many buttons as you have Tab Forms (in the Tabless Panel) and place them side-by-side above (and outside) the Tabless Panel. Name them tab_button_1, tab_button_2, …, tab_button_n. (Follow naming instructions carefully and implementation of highlighting and dimming of tab buttons will work as per code below)
3.In the buttons’ onAction trigger, activate the following generic/reusable function:

/**

  • Perform the element default action.
  • @param {JSEvent} event the event that triggered the action
  • @param {String} p_tab_name
  • @param {Number} p_tab_index
  • @private
  • @properties={typeid:24,uuid:“3BA568C2-0C47-460F-9A9A-A8C791114BFC”}
    */
    function onTabClick(event, p_tab_name, p_tab_index) {
    var index = elements[p_tab_name].tabIndex;
    elements['tab_button    ’ + index].bgcolor = ‘#c0c0c0’;
    elements[p_tab_name].tabIndex = p_tab_index;
    elements['tab_button    ’ + p_tab_index].bgcolor = ‘#000000’;
    var _tab_form = elements[p_tab_name].getTabFormNameAt(p_tab_index);
    forms[_tab_form].controller.focusFirstField();
    }
  1. Click on the arrow to the left of each button’s onAction trigger and set p_tab_name to the name of you Tabless Panel. You also need to set p_tab_index for each button. For the button that actives the nth Tab Form set p_tab_index = n.

The following are additional benefits to using a Tabless panel (vs. a Tab Panel):
1.It’s easy to have tabs of the same size.
2.In Linux smart client deployment, this work-around gives you better control on the look and feel.
3.By intelligently manipulating the visibility of the buttons and their placement, your form may also cater for access control.

Good luck!

4

Hi,

I think, the Problem is that the Event onShow was fired before the webclient has paint the page.
Try this for the webclient

function onShow(firstShow, event) {
	plugins.WebClientUtils.executeClientSideJS('',setFocus)
}


function setFocus(){
	controller.focusFirstField() ;
}

Regards,
Hendrick

5

Hendrick,

As stated in my preamble, it may take a while for Servoy to make the cursor move/behave likewise and consistently in smart and web clients. The workaround suggested works in both environments and has, above all, invaluable added advantages. Nonetheless, I reckon that it will require efforts that could be used more productively elsewhere…

6

Creating my own tabs based on the tables panel was not an option, so I took Hendrick solution to get is work.

Thanxzzz.