Dynamic Layout

Webix JS
#1

Hi

i try to create a dynamic part of a form. I got a object which looks like

{
“A” : { a : true , b : false} ,
“B” : { a : false , b : true , c : true}
“C” : {a : true , b : false, c : false}
}

I know have a fixed designed where i hide the things i do not need, but i would like to create a component that would also create a “D” with 5 values

#2

Hello @bikerboy,
There are two ways to change the existing layout (
in your case the form) dynamically:

  • using addView() and removeView() methods;
  • using webix.ui() method to rebuilt the layout.

Please check the next snippet:
https://snippet.webix.com/f0r8t3et
Please check the article about dynamic layout rebuilding: Dynamic UI Modifications of Guides, Configuring Components Webix Docs.

#3

Thanks… that helps

#4

Hmmm i got a little Problem with my accordion an that might be connected to my addView Action … i got this object.

{
view : “accordion”,
label : “Infolevel”,
collapsed : true ,
rows : [
{header : “Infolevel” , body : { syna_id : “sw_infolevel”, rows : [] }}
],
on : {
onAfterExpand : (id) =>{
console.log(“Accordian Expanded " + id)
console.log(” acc config : " + JSON.stringify($$(id).config , null, 2))
}
}
}

i add my views to “sw_infolevel” … after i expand the accordion it seems to be disabled, because it can not collapse anymore.

Any help appreciated

PS: how do i mark code in posts?