Drawer effect with tab panels

Classic Servoy
1

Hello,

I have a form with two tab panels on it, one small on the left side would hold a navigation menu form and the other tab panel will behave as a container for each section of my solution. In some circumstances the data presented on the right side would benefit from larger screen space, so I created a smaller menu form consisting of icons only and a 40px width.
Each of my menu forms consist of a body and a footer with some anchoring.

I’m thus trying to implement a function that would :

  • toggle the left menu size by resizing the left menu tab-panel and correspondingly increase the right one, moving the right tab panel to a new x position.
  • toggle the tabIndex to switch from my standard menu to my small menu

I first tried modifying the runtime form like this :

        /** @type {RuntimeForm<ui_drawer_std>}*/	
	var _small_drawerFormName;
	/** @type {RuntimeForm<ui_drawer_std>}*/	
	var _big_drawerFormName;
	/** @type {RuntimeTabPanel} */
	var _drawer= forms[_formname].elements[scopes.ui_templates.UIDRAWERContainer];
	/** @type {RuntimeTabPanel} */
	var _main= forms[_formname].elements[scopes.ui_templates.UIMAINContainer];

	var _posx= _drawer.getLocationX();
	var _posy= _drawer.getLocationY();
	var _h= _drawer.getHeight();

	_drawer.setSize(ui_smalldrawerWidth,_h);
	_drawer.setLocation(_posx,_posy);
	_drawer.tabIndex=2;

This works but I’ve got anchoring issues when the user resize the browser lately, the two tab panels would not grow simultaneously, the left menu would stay fixed after this alteration.

So I tried with the solutionModel with no success.

	/**@type {JSForm}*/
	var _module_form= solutionModel.getForm(_formname);
	/**@type {JSTabPanel}*/
	var _drawertabpanel= _module_form.getTabPanel(scopes.ui_templates.UIDRAWERContainer);
	_drawertabpanel.width= ui_smalldrawerWidth;
	/**@type {JSTabPanel}*/
	var _maincontainertabpanel= _module_form.getTabPanel(scopes.ui_templates.UIMAINContainer);
	_maincontainertabpanel.width=_maincontainertabpanel.width+206;
	_maincontainertabpanel.x= 40;
	forms[_formname].controller.recreateUI()

With this code the anchoring are somehow correct but a strange space in between the body and the footer appears.

Should I use two separate forms for this, one with the small left tab panel and another with a bigger one and therefore switching forms instead of altering the current form ?
Should I clone my main form, rebuild each tabpanels and then showing this new form everytime I want to toggle the menu ?

Thanks for any input you may have

Ugo

2

“With this code the anchoring are somehow correct but a strange space in between the body and the footer appears.”

Ok, due to some borders, the width of the tabpanel was smaller than the width of the form loaded, bringing a small horizontal scrollbar, but 40px is not large enough to distinguish the scrolls.

This said, am I really doing it the good way, and can’t I modify the runtime element still keeping the anchoring defined on that menu-form ?
Recreating the UI is ok, but I must re-load any foundset and other settings back to what they were on the running form, anytime I switch this menu, I’m sure there must be something I’m missing.

Thanks