# How to focus on first field on form in tabpanel

**URL:** <https://forum.servoy.com/t/how-to-focus-on-first-field-on-form-in-tabpanel/18878>\
**Category:** Classic Servoy\
**Created:** [June 3, 2016, 9:54am UTC](https://forum.servoy.com/t/how-to-focus-on-first-field-on-form-in-tabpanel/18878 "2016-06-03T09:54:00Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![svisser1448437380](https://avatars.discourse-cdn.com/v4/letter/s/34f0e0/32.png) [@svisser1448437380](https://forum.servoy.com/u/svisser1448437380)\
**Post date:** [June 3, 2016, 9:54am UTC](https://forum.servoy.com/t/how-to-focus-on-first-field-on-form-in-tabpanel/18878/1 "2016-06-03T09:54:00Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![svisser1448437380](https://avatars.discourse-cdn.com/v4/letter/s/34f0e0/32.png) [@svisser1448437380](https://forum.servoy.com/u/svisser1448437380)\
**Post date:** [June 9, 2016, 10:37am UTC](https://forum.servoy.com/t/how-to-focus-on-first-field-on-form-in-tabpanel/18878/2 "2016-06-09T10:37:05Z")

</div>

Anyone have an idea?

---

<div class="post-metadata">

**Author:** ![ylockson](https://avatars.discourse-cdn.com/v4/letter/y/b487fb/32.png) [@ylockson](https://forum.servoy.com/u/ylockson)\
**Post date:** [June 14, 2016, 8:37am UTC](https://forum.servoy.com/t/how-to-focus-on-first-field-on-form-in-tabpanel/18878/3 "2016-06-14T08:37:15Z")

</div>

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 _n_th 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!

---

<div class="post-metadata">

**Author:** ![HEKUCH](https://avatars.discourse-cdn.com/v4/letter/h/aeb1de/32.png) [@HEKUCH](https://forum.servoy.com/u/HEKUCH)\
**Post date:** [June 16, 2016, 4:20pm UTC](https://forum.servoy.com/t/how-to-focus-on-first-field-on-form-in-tabpanel/18878/4 "2016-06-16T16:20:57Z")

</div>

Hi,

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

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

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

```

Regards,  
Hendrick

---

<div class="post-metadata">

**Author:** ![ylockson](https://avatars.discourse-cdn.com/v4/letter/y/b487fb/32.png) [@ylockson](https://forum.servoy.com/u/ylockson)\
**Post date:** [June 17, 2016, 5:08am UTC](https://forum.servoy.com/t/how-to-focus-on-first-field-on-form-in-tabpanel/18878/5 "2016-06-17T05:08:23Z")

</div>

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…

---

<div class="post-metadata">

**Author:** ![svisser1448437380](https://avatars.discourse-cdn.com/v4/letter/s/34f0e0/32.png) [@svisser1448437380](https://forum.servoy.com/u/svisser1448437380)\
**Post date:** [June 21, 2016, 5:37am UTC](https://forum.servoy.com/t/how-to-focus-on-first-field-on-form-in-tabpanel/18878/6 "2016-06-21T05:37:34Z")

</div>

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

Thanxzzz.