Add a tabbed form to a window

Suite and Optimus Suite 5
#1

Is there an instruction on how to attach a tabbed form to a window?
I’ve tried creating a tabbar first and then attaching a form to the tabbar, but it won’t attach to the window.

I can attach a form without tabs to a window using following code - how can this be altered to attach a form with tabs?


var app = app || {}; //namespace for the application

app.attach_add_dashboard_form = function (){
	
	app.add_dashboard_window = app.main_window.createWindow("adf", 10, 10, 400, 325); 
 	app.add_dashboard_window.setText("New Dashboard *");
	
	app['add_dashboard_form'] = app.add_dashboard_window.attachForm(
			
			[                                      //define form controls
			                               	    {type: "block", list:[
			                               			
			                               				{type: "input", name:"dashboard_name", label: "Dashboard Name",  position:"label-left", labelWidth: 100, inputWidth: 220},
			                               				{type: "combo", name:"use_viewport", label: "Use Viewport",  position:"label-left", labelWidth: 100, inputWidth: 226, 
			                               					options:[
																	 {text:"Yes", value:"Y"},
																	 {text:"No", value:"N"}
																	]
			                               				},
			                               				
			                               				{type: "input", name:"dashboard_width", label: "Width",  position:"label-left", labelWidth: 100, inputWidth: 220},
			                               				{type: "input", name:"dashboard_height", label: "Height",  position:"label-left", labelWidth: 100, inputWidth: 220},
			                               				{type: "input", name:"dashboard_border_style", label: "Border Style",  position:"label-left", labelWidth: 100, inputWidth: 220},
			                               				{type: "input", name:"dashboard_margin", label: "Margin (px)",  position:"label-left", labelWidth: 100, inputWidth: 220, hidden: true},
			                               				{type: "input", name:"dashboard_position", label: "Position",  position:"label-left", labelWidth: 100, inputWidth: 220, hidden: true},
			                               				{type: "btn2state", name:"active", label: "Active",  position:"label-left", labelWidth: 100, inputWidth:42, inputHeight: 20, checked: true},
			                               				{type: "button", name:"save_dashboard", offsetTop:10,offsetLeft:100, value:"Submit"}
			                                       ]}
			                               	]
	
	
	
	
	);
};

Many thanks,

Paul

#2

You may attach dhtmlxTabbar to a dhtmlxWindows:
dhtmlx.com/docs/products/dhtmlx … abbar.html
and also you may attach a dhtmlxForm to the dhtmlxTabbar:
dhtmlx.com/docs/products/dhtmlx … nside.html

#3

I looked at both of those examples before posting my request.
I’ve found many ways that don’t work, so feeling quite frustrated by something that would appear to be fairly easy to do.

Please could you show an example based on the code I posted or even show a working example?

Many thanks,

Paul

#4

Please, check the following snippet:
snippet.dhtmlx.com/876402d30

#5

Perfect - Brilliant example and first class support.

Thank you,

Paul