showBatch not working

Webix JS
1

Hi,

I have the following form (generated server side) with two tabs.
Checking the documentation, mu showBatch function should work but it doesn’t. I don’t see what I am doing wrong.

This is the form


{
			"id":"inputForm",
			"view":"form",
			"width":600,
			"paddingY": 25,
			"borderless":true,
			"elements": [
							{
							"view":"tabview",
							"id":"formTabbar",
							"tabbar":  { "options":[{"id": "b1", "value":"Omschrijving"},{"id":"b2","value":"Basisinformatie"}]}, "animate":false,
							
"cells":[
								{ "batch":"b1", "id":"b1", "margin": 20, "paddingY": 25, "paddingX":25,"height":280, "rows":[
									{ "view":"text", "name":"id", "label":"id", "width": 300, "hidden":true },
									{ "view":"text", "name":"_token",  "label":"_token", "value":"{!! $_token !!}", "hidden":true },
									{ "view":"text", "name":"accid", "label":"accid", "width": 300, "hidden":true  },
									{ "view":"text", "name":"name", "label":"Naam", "width": 600 , "labelWidth":200 },
									{ "view":"textarea", "name":"descr", "label":"Omschrijving", "width": 600, "height":150 , "labelWidth":200 , "invalidMessage": "Login can not be empty" }
									
								]},
								{ "batch":"b2", "id":"b2","margin": 20, "paddingY": 25, "paddingX":25,"height":280, "rows":[	
									{ "view":"text", "name":"startyear", "label":"Startjaar", "width": 400 , "labelWidth":200 },
									{ "view":"text", "name":"vatbasic", "label":"Gemiddeld BTW percentage", "width": 400, "labelWidth":200  },
									{ "view":"select", "name":"vatperiod", "label":"BTW aangifteperiode" , "width":400, "labelWidth":200, "options":[
								        {"id":1,"value":"Maand"}, 
								        {"id":3,"value":"Kwartaal" },
								        {"id":12,"value":"Jaar" }
								    ]}
								]}
								]
							},
							{"id": "formToolbar", "margin":0, "view":"toolbar", "cols":[
					            {"view":"label"},
					           	{"view":"button", "id":"savebutton", "value":"Bewaren" , "type":"form" , "width": 100, "align":"right", "click":"formSave"},
					            {"view":"button", "id":"selectbutton", "value":"Selecteren" , "type":"form" , "width": 100, "align":"right", "click":"formSelect"},
					            {"view":"button", "id":"deletebutton", "value":"Verwijderen" , "type":"form" , "width": 100, "align":"right", "click":"formDelete"},
					            {"view":"button", "id":"closebutton","value":"Annuleren" , "width": 100, "align":"right", "click":"formClose"}
				        			]}
						],
			"rules":{
			},
			"elementsConfig":{
			}
		}

And this is my function:


$$("formTabbar").showBatch("b1");

Maybe I am referencing the wrong id? I have tried also referencing the ID of the form “InputForm” but does not work either.

2

Seems like you trying to select a tab usingshowBatch(). That’s not how it works.

Each multiview cell literally is a different layout, but showBatch() was made for showing/hiding a group of controls in the same layout cell.

To select a tab, you can:

  • set the value directly to the multiview:
$$("formTabbar").setValue("b2");
  • specify the multiview name (form elements require a name rather than an ID) and select the needed tab via
$$("inputForm").setValues({
  formTabbar:"b2"
}, true);

Here’s a snippet: http://webix.com/snippet/20b5e226

3

$$("b2").show() will work as well

4

Thanks,
I have it working