# multiple tabs error

**URL:** <https://forum.servoy.com/t/multiple-tabs-error/16461>\
**Category:** Classic Servoy\
**Created:** [September 12, 2012, 9:20am UTC](https://forum.servoy.com/t/multiple-tabs-error/16461 "2012-09-12T09:20:20Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![rn](https://avatars.discourse-cdn.com/v4/letter/r/3da27b/32.png) [@rn](https://forum.servoy.com/u/rn)\
**Post date:** [September 12, 2012, 9:20am UTC](https://forum.servoy.com/t/multiple-tabs-error/16461/1 "2012-09-12T09:20:20Z")

</div>

Hi all,

If I build a layout with a certain template, all works fine until for each layout-part there is only one tab.

My problem comes when I try to put more than one tab into a certain layout part.

I can open the layout properly by clicking on the related menu, but when I try to switch into the second tab, I obtain this error:

```auto
Exception Object: org.mozilla.javascript.EcmaError: TypeError: Cannot read property "program_id" from undefined (C:\Servoy_workspaces\Servoy6x_ws_deploy_and_demo\svy_nav_navigation\forms\svy_nav_fr_toolbar_base.js#95)
MSG: TypeError: Cannot read property "program_id" from undefined (C:\Servoy_workspaces\Servoy6x_ws_deploy_and_demo\svy_nav_navigation\forms\svy_nav_fr_toolbar_base.js#95)
<null>
TypeError: Cannot read property "program_id" from undefined (C:\Servoy_workspaces\Servoy6x_ws_deploy_and_demo\svy_nav_navigation\forms\svy_nav_fr_toolbar_base.js#95)
TypeError: Cannot read property "program_id" from undefined (C:\Servoy_workspaces\Servoy6x_ws_deploy_and_demo\svy_nav_navigation\forms\svy_nav_fr_toolbar_base.js#95)
	at C:\Servoy_workspaces\Servoy6x_ws_deploy_and_demo\svy_nav_navigation\forms\svy_nav_fr_toolbar_base.js:95 (getToolbarItems)
	at C:\Servoy_workspaces\Servoy6x_ws_deploy_and_demo\svy_nav_navigation\forms\svy_nav_fr_toolbar_base.js:194 (updateUI)
	at C:\Servoy_workspaces\Servoy6x_ws_deploy_and_demo\svy_nav_navigation\forms\svy_nav_fr_template_base.js:224 (generateTabForm)
	at C:\Servoy_workspaces\Servoy6x_ws_deploy_and_demo\svy_nav_navigation\forms\svy_nav_fr_panel_base.js:22 (onTabChange)
	at C:\Servoy_workspaces\Servoy6x_ws_deploy_and_demo\svy_nav_navigation\forms\svy_nav_fr_p_panel.js:20 (onTabChange)
	at C:\Servoy_workspaces\Servoy6x_ws_deploy_and_demo\svy_nav_navigation\forms\svy_nav_fr_panel_base.js:91 (switchTab)

```

I’ve watched into the framework code and I found that the problem comes from the “onTabChange” function of “svy\_nav\_fr\_panel\_base”.  
In this function, into the array “tabInfo” the property “programName” is null (the others are properly filled) and this is propagate until the “getToolbarItems” that when try to execute this code:

```auto
var _program_id = globals.nav.program[_program].program_id.toString()

```

It goes in error because the “\_program” variable is null.

I’ve downloaded also the sample use in wich more layouts have more than one tabs, so I’ve tried to reproduce exactly the same example but without success.  
For sure I’m missing to set something but I don’t understand what.

All forms involved are extending svy\_nav\_base (I’ve tried also to make a layout with multiple tabs using the sample-use’s forms to be sure).

I follow this step:

1 - I create a program for each form  
2 - I create a layout  
3 - For each layout part, I create one or more tab  
4 - I assign the layout to a menu.

Here some shortcut:

All the programs involved are configured like this one:  
[attachment=2]program.png[/attachment]

This is the layout:  
[attachment=1]layout.png[/attachment]

And here is how I have configured the second tab for the third layout-part:  
[attachment=0]second\_tab.png[/attachment]

Am I missing to set something?

Thanks

Riccardo

 ![second_tab.png](https://canada1.discourse-cdn.com/flex010/uploads/servoy/original/2X/6/6697e7f5c2f6f77d685f640f048263475df91161.png)

 ![layout.png](https://canada1.discourse-cdn.com/flex010/uploads/servoy/original/2X/1/1fd9c0b374a36ac56add7c5b0747a80cb98a5a82.png)

 ![program.png](https://canada1.discourse-cdn.com/flex010/uploads/servoy/original/2X/3/359c09cf41d7515f80d0e924bdca59c33828fc3b.png)

---

<div class="post-metadata">

**Author:** ![willem1345100370](https://avatars.discourse-cdn.com/v4/letter/w/5fc32e/32.png) [@willem1345100370](https://forum.servoy.com/u/willem1345100370)\
**Post date:** [September 12, 2012, 10:51am UTC](https://forum.servoy.com/t/multiple-tabs-error/16461/2 "2012-09-12T10:51:49Z")

</div>

Hi

I am experiencing the same problem

Thanks  
Willem

---

<div class="post-metadata">

**Author:** ![Joas](https://yyz2.discourse-cdn.com/flex010/user_avatar/forum.servoy.com/joas/32/5095_2.png) [@Joas](https://forum.servoy.com/u/Joas)\
**Post date:** [September 13, 2012, 8:51am UTC](https://forum.servoy.com/t/multiple-tabs-error/16461/3 "2012-09-13T08:51:32Z")

</div>

This has been fixed for the next release.

If you want to fix it yourself now, replace the method **setTabOnPanel** of the form **svy\_nav\_fr\_template\_base** with this one:

```auto
function setTabOnPanel(_panelNr, _panelProps, _formName, _tempFormName, _tabRecord, _layoutName, _toolbar, _tabIndex, _dataSource, _view) {

	var _panelTabForm = "ly_" + _to_nav_layout.name + "_p" + _panelNr;
	forms[_panelTabForm].elements["tab"].addTab(forms[_tempFormName], _formName, _tabRecord.display_description, null, "media:///"+globals.nav.program[_tabRecord.nav_tab_to_nav_program.program_name].program_image);
	
	//Fill tabInfo object
	forms[_panelTabForm]["tabInfo"][_tabIndex] = 
		{
			panelNr: _panelNr, 
			panelProps: _panelProps, 
			formName:_formName, 
			layoutName:_layoutName, 
			toolbar:_toolbar, 
			tabIndex:_tabIndex, 
			dataSource:_dataSource,
			programName:_tabRecord.nav_tab_to_nav_program.program_name,
			orientationToolbar:_tabRecord.orientation_toolbar,
			relation:_tabRecord.tab_relation,
			editOnTab:_tabRecord.edit_on_tab,
			tabId:_tabRecord.tab_id,
			parentTabId:_tabRecord.parent_tab_id,
			view: _view
		};
}

```

The change is in the line that sets the programName-propety.

---

<div class="post-metadata">

**Author:** ![rn](https://avatars.discourse-cdn.com/v4/letter/r/3da27b/32.png) [@rn](https://forum.servoy.com/u/rn)\
**Post date:** [September 13, 2012, 12:49pm UTC](https://forum.servoy.com/t/multiple-tabs-error/16461/4 "2012-09-13T12:49:00Z")

</div>

Ok, it works!

Thanks Joas!

Riccardo

---

<div class="post-metadata">

**Author:** ![pentamsi](https://avatars.discourse-cdn.com/v4/letter/p/3ec8ea/32.png) [@pentamsi](https://forum.servoy.com/u/pentamsi)\
**Post date:** [September 19, 2012, 7:44am UTC](https://forum.servoy.com/t/multiple-tabs-error/16461/5 "2012-09-19T07:44:25Z")

</div>

I have the smae problem, and this code fix it, thanks!

---

<div class="post-metadata">

**Author:** ![rn](https://avatars.discourse-cdn.com/v4/letter/r/3da27b/32.png) [@rn](https://forum.servoy.com/u/rn)\
**Post date:** [October 4, 2012, 3:14pm UTC](https://forum.servoy.com/t/multiple-tabs-error/16461/6 "2012-10-04T15:14:37Z")

</div>

Hi all,

I’ve met another problem with multi-tab into a layout part.  
Scenario: I’ve choosed the template\_5.  
I have one tab into the layout\_part\_1  
I have two tabs into the layout\_part\_2  
I have five tabs into the layout\_part\_3.

At now I have to choose them sequentially, If I want avoid problem.  
In fact, if go directly from tab1 to tab5 without load them sequentially, I obtain an error “Array out of bound:4”.

The strange thing is that the “gatMaxTabIndex” returns 5.

Debugging the code, I’ve found that the involved code, is into the function “loadTabsOnPanel”.

In particular the code is:

```auto
		if (i == _selectedTab) {
			var _dataSource;
			if (databaseManager.hasRecords(_tabFS.nav_tab$to_parent)) {
				_dataSource = "db:/" + globals.nav.program[_tabFS.nav_tab$to_parent.nav_tab_to_nav_program.program_name].server_name + "/" + globals.nav.program[_tabFS.nav_tab$to_parent.nav_tab_to_nav_program.program_name].table_name;
			}
			_tabFormName = generateTabForm(_to_nav_layout.name, _tabFS.nav_tab_to_nav_program.program_name, _tabFS.orientation_toolbar, _tabFS.tab_relation, _tabFS.edit_on_tab, _formName, _toolbar, _panelNr, i, _dataSource, _tabFS.tab_id, _tabFS.parent_tab_id, _tabFS.form_type);
			_tempFormName =_tabFormName
			} else { 
				_tabFormName = _formName;
				_tempFormName = "svy_nav_fr_dummy";
			}

```

and I’ve replaced it with:

```auto
		//if (i == _selectedTab) {
			var _dataSource;
			if (databaseManager.hasRecords(_tabFS.nav_tab$to_parent)) {
				_dataSource = "db:/" + globals.nav.program[_tabFS.nav_tab$to_parent.nav_tab_to_nav_program.program_name].server_name + "/" + globals.nav.program[_tabFS.nav_tab$to_parent.nav_tab_to_nav_program.program_name].table_name;
			}
			_tabFormName = generateTabForm(_to_nav_layout.name, _tabFS.nav_tab_to_nav_program.program_name, _tabFS.orientation_toolbar, _tabFS.tab_relation, _tabFS.edit_on_tab, _formName, _toolbar, _panelNr, i, _dataSource, _tabFS.tab_id, _tabFS.parent_tab_id, _tabFS.form_type);
			_tempFormName =_tabFormName
		//	} else { 
			//	_tabFormName = _formName;
			//	_tempFormName = "svy_nav_fr_dummy";
			//}

```

I’ve put under comment the “else” statement to be sure that each tab form will have the properly form inside.

However, I would submit my fix to anybody is taking care of this part of framework to understand if it is correct or could cause any problem, and if it is correct if it will be included into the next framework release (to avoid to lose code after the next framework update).

Thanks

Riccardo
