Dynamically set the value to the main content?

Webix JS
#1

Hello,

I am new to webix and I am building a small application where I would need to design the layout in the below manner.

  1. Header layout
  2. sideBar
  3. Main content.

I could successfully build the layout, and added some values in sidebar for navigation. Now when I click the sideBar contents,
the form in the main contents should be changed.

For example: in the sidebar I have Dashboard, Project, Task,etc. When I click the dashboard item in the sideBar, the form corresponding to dashboard form should be opened.
Similary for project and task, the corresponding forms(project form and task form) should be opened.

How to dynamically set the value to the main content? I just searched over google and found that it has to be implemeted through Webix. Is it possible to use without Webix Jet?

Do you have any code snippet available for this?

#2

Hello,
You can use parse method which loads data to the component from an inline data source. Also, don’t forget to wrap data in webix.copy()

$$("someid").parse( webix.copy(small_film_set_img1));

Please check the sample: https://snippet.webix.com/9wgr3870
Instead of dataview you can use another views as datatable and so on

#3

HI Thank you for your reply. I tried the solution which you provided, but due to my lack of knowledge it did not work. what i want is when I click the dashboard, the view is different,could be be datatable/tree.
But when I click the project, it might be the type of form. I tried replacing the parse with project_form. But it did not work.

var project_form = {
	view : "form",
	id : "myForm",	
	width : 600,
	height : 200,
	rules : {
		"username" : webix.rules.isNotEmpty,
		"password" : webix.rules.isNotEmpty,
		"accept" : webix.rules.isChecked
	},
	elements : [ {
		view : "text",		
		name : "taskId",
		placeholder : "Task id",
	}, {
		view : "text",		
		name : "taskName",
		placeholder : "Task name",
	}, {
		view : "button",
		value : "Submit",
		width : 150,
		align : "center",
		type : "form"
		
	} ]
}

webix.ui({
  rows: [
    { view: "toolbar", padding:3, elements: [					
      { view: "label", label: "My App"},
      {}
    ]
    },
    {
      cols:[
        {
          view: "sidebar",
          id:"side",
          data: menu_data,
          on:{
            onAfterSelect: function(id){
             id = id*1; //ensure numeric value
			switch( id )
              {
                case 1:
                 $$("mview").clearAll();
                 $$("mview").parse( webix.copy(small_film_set_img1));
                  break;                  
                case 2:
                   $$("mview").clearAll();
                   $$("mview").parse(webix.copy(project_form));
                  break;
                
                default:
                  console.log("say something")
                  break;
              }
            }
			}
        },
        {    
          id:"mview", 
          view:"dataview", 
          select:true, 
          borderless:true,
          navigation:true,
          autoConfig:true, 
          type:"typeB",
          data:small_film_set_img1,
         }
      ]
    }
  ]
});
#4

could you please help me on this?

#5

Hello @Baksheen ,

you can wrap form and datatable in multiview as

{
          id:"multi",
          fitBiggest:true,
          animate:false,
          cells:[
            {    
              view : "form",
              id : "myForm",  
                ...
              elements : [ 
                     ...
                ]
            },
            {
              view:"datatable",
              id:"dt",
              columns:[
               ...
              ],
              data:data2
            }
          ]
        }

And also you need to use the same id of form and datable in the menu_data

var menu_data = [
  { id: "myForm", icon: "dashboard", value: "Dashboard",},
  { id: "dt", icon: "columns", value:"Projects"},
];

So when you click on Dashboard you will see the form, and the same actions for Projects
Please check the example: https://snippet.webix.com/76v7fv9r