How to switch between views (from list to form)?

In this article we'll consider frequently occurring situation, a particular case of different views presentation:
you have some view that contains a list of data. When you select an item - its details are presented in other view.


Full code of the example

Shortly, our actions are the following:

  • Define multiview (in our case, with 2 views: list and form)
  • Define view-changer (in our case, it's tabbar, toolbar's control)
  • Load data to list
  • Load list's data to form

Step 1. Define elements

dhx.ui({
        container:"groupBox",
        rows:[{//we define 2 rows. The first one is 'toolbar' that contains view-changer:'tabbar' control.
                view:"toolbar", 
	        type:"BigTabBar",// specifies type of toolbar. "BigTabBar" was specially developed for 'tabbar' usage
                id:"topbar", // the id of the component which we'll use later
                data:[{ type:"tabbar", selected: 'tab_1',tabWidth:156, tabs: [ // the first view'll be selected initially  
						{key:"tab_1", label:"List"}, // the tabs of the control. One for 'list' and the other for form
						{key:"tab_2", label:"Details"}]
		}]
              },
              {// the second row contains our main component - 'multiview'.
                view:"multiview",
                cells:[{view:"list",// specifies 'list' component as the first view 
			id:"tab_1",//please note, views' id must coincide with keys specified in view-changer (in our case,tabbar)
			datatype:"xml", // data type of loaded data
			template:"#name#", // specifies the represented data
			select:true, // defines whether list's items can be selected
			type: { width: 300 }// width of the list
		       },
		       {view:"form", // specify 'form' component as the second view 
			id:"tab_2",
			data:[{	 type:"text", id:"name", label: 'Song', position: "label-left", align: "center", labelAlign: "center"},// defines simple text fields where we will present item's details
				{type:"text", id:"author", label: 'Singer', position: "label-left", align: "center", labelAlign: "center"},
				{type:"text", id:"year", label: 'Year', position: "label-left", align: "center", labelAlign: "center"},
				{type:"text", id:"album", label: 'Album', position: "label-left", align: "center", labelAlign: "center"}]
 		       }
	      ]}
]});

Step 2. Load data to list and list item's details to form

$$("tab_1").load("xml/songs.xml", "xml", function(){// as data loading is asynchronous we'll load data to 'list' out of its definition to ensure initial selection
		$$("tab_1").select($$("tab_1").first());// makes the first row selected
});
 
$$("topbar").attachEvent("onBeforeTabClick",function(button,id){// the event 'onBeforeTabClick' fires when a user is clicking on tabs of 'tabbar' control 
		$$(id).show();// shows the appropriate tab of multiview (ids of 'tabbar' and 'multiview' tabs are coincide (tab_1, tab_2)).
		if (id=="tab_2"){//loads data of the appropriate item to form
				$$("tab_2").setValues( $$("tab_1").item($$("tab_1").getSelected()));
		}
		return true
})

Used methods:

 
Put all the code to dhx.ready () to ensure that it will be called just after the page has been completely parsed.