How to focus on first field on form in tabpanel

Using Servoy to administrate the content of your website? Discuss all webrelated Servoy topics on this forum!

How to focus on first field on form in tabpanel

Postby svisser1448437380 » Fri Jun 03, 2016 11:54 am

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?
saNder Visser
IT2serve
Servoy 7.4.7 / Windows 8.1
User avatar
svisser1448437380
 
Posts: 10
Joined: Wed Nov 25, 2015 9:43 am
Location: Zoetermeer, Netherlands

Re: How to focus on first field on form in tabpanel

Postby svisser1448437380 » Thu Jun 09, 2016 12:37 pm

Anyone have an idea?
saNder Visser
IT2serve
Servoy 7.4.7 / Windows 8.1
User avatar
svisser1448437380
 
Posts: 10
Joined: Wed Nov 25, 2015 9:43 am
Location: Zoetermeer, Netherlands

Re: How to focus on first field on form in tabpanel

Postby ylockson » Tue Jun 14, 2016 10:37 am

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();
}
4. 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!
ylockson
 
Posts: 59
Joined: Thu Mar 01, 2012 8:40 am

Re: How to focus on first field on form in tabpanel

Postby HEKUCH » Thu Jun 16, 2016 6:20 pm

Hi,

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

Code: Select all
function onShow(firstShow, event) {
   plugins.WebClientUtils.executeClientSideJS('',setFocus)
}


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


Regards,
Hendrick
Hendrick Kurland

DataBit GmbH
CH-9217 Neukirch an der Thur
HEKUCH
 
Posts: 13
Joined: Thu May 05, 2011 8:02 am

Re: How to focus on first field on form in tabpanel

Postby ylockson » Fri Jun 17, 2016 7:08 am

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...
ylockson
 
Posts: 59
Joined: Thu Mar 01, 2012 8:40 am

Re: How to focus on first field on form in tabpanel

Postby svisser1448437380 » Tue Jun 21, 2016 7:37 am

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

Thanxzzz.
saNder Visser
IT2serve
Servoy 7.4.7 / Windows 8.1
User avatar
svisser1448437380
 
Posts: 10
Joined: Wed Nov 25, 2015 9:43 am
Location: Zoetermeer, Netherlands


Return to Web Development

Who is online

Users browsing this forum: No registered users and 8 guests