Replacing view within multiview

Discontinued products DHTMLX Touch
#1

I need to dynamically build a UI component and after reading the documentation I found you can use the dhx.ui() function to replace components. I would like to be able to replace a view within a multiview but cannot get this working. Any help would be much appreciated.

James

Example

<script type="text/javascript" charset="utf-8">
			
var replaceView = function() {
	
	var summary2 = { view: 'layout', id: "_summaryListView", rows: [
			{ view: 'toolbar', type: 'MainBar',
				elements: [
				{ view: "label", label: 'Summary', align: "left" },
				{ gravity: 1 },
				{ view: "button", type: "prev", label: "Back", id: "_summaryViewListBackButton", width: 100, align: "right" }
			]
			},
			{ view: "template", template: "Replaced view"}
		]
	};
	dhx.ui(summary2, $$('viewID'));
};

dhx.ready(function(){
	dhx.ui({ view: "multiview", cells: [
	{ view: 'layout', id: 'viewID', rows: [
		{ view: 'toolbar', type: 'MainBar',
			elements: [
						{ view: "label", label: "Show second view", align: "left" },
						{ gravity: 1 },
						{ view: "button", label: "Repalce", click:replaceView, width: 300, align: "center" },
						{ gravity: 1 }
					]
		},
		{ view: "template", template: "Main page"}
	]}
]});
	

});
	
</script>

The trace:

Uncaught TypeError: Cannot read property 'h' of undefined touchui.js:146
dhx.protoUI.Sd touchui.js:146
dhx.protoUI.U touchui.js:142
dhx.protoUI.Aa touchui.js:135
dhx.ui touchui.js:126
replaceView index.html:23
(anonymous function) touchui.js:175
dhx.EventSystem.callEvent touchui.js:13
(anonymous function) touchui.js:25
#2

After re-reading the documentation I can see that content of a layout is replaced rather than the entire view. You therefore pass and array rather than an object.

A working example would be:

<script type="text/javascript" charset="utf-8">
			
var replaceView = function() {
	
	var summary2 = [
			{ view: 'toolbar', type: 'MainBar',
				elements: [
				{ view: "label", label: 'Summary', align: "left" },
				{ gravity: 1 },
				{ view: "button", type: "prev", label: "Back", id: "_summaryViewListBackButton", width: 100, align: "right" }
			]
			},
			{ view: "template", template: "Replaced view"}
		];
	dhx.ui(summary2, $$('viewID'));
};

dhx.ready(function(){
	dhx.ui({ view: "multiview", cells: [
	{ view: 'layout', id: 'viewID', rows: [
		{ view: 'toolbar', type: 'MainBar',
			elements: [
						{ view: "label", label: "Show second view", align: "left" },
						{ gravity: 1 },
						{ view: "button", label: "Repalce", click:replaceView, width: 300, align: "center" },
						{ gravity: 1 }
					]
		},
		{ view: "template", template: "Main page"}
	]}
]});
	

});
	
</script>

Thanks,
James