Multiple boards kanban

Webix JS
#1

Hello,

I’m trying to make an app where I can create multiple kanban boards. On my backend, I have two kanban boards with id=1 and id=2.

I have a menu like this :

import {JetView, plugins} from "webix-jet";

export default class KanbanTop extends JetView{
	async config(){

		let items = await webix.ajax("http://localhost/api/kanban/menu");

		let menu = {
			view:"menu",
			id:"kanban:top:menu",
			css:"app_menu",
			width:180, layout:"y", select:true,
			template:"<span class='webix_icon #icon#'></span> #value# ",
			data: items
		};

		return {
			type:"clean", paddingX:0, css:"app_layout",
			cols:[
				{ paddingX:0, paddingY:0, rows: [ menu ]},
				{ type:"wide", paddingY:0, paddingX:0, rows:[{ $subview:true}]},
			]
		};
	}
	init(){
		 this.use(plugins.Menu, "kanban:top:menu");
	}
}

and my kanban view is like this :

import {JetView} from "webix-jet";

export default class KanbanView extends JetView {

	async config() {
		this.uid = null;
		let id = this.getParam("id");
		let cols = await webix.ajax("http://localhost/api/kanban/"+id+"/cols");
		let config = {
				view: "kanban",
				token: "token",
				url: "http://localhost/api/kanban/"+id,
				save: "json->http://localhost/api/kanban/save/"+id,
				editor: true,
				comments: {currentUser: 2},
				cardActions: true,
				// the structure of columns on the board
				cols: cols.json()
			};

		return config;
	}
}

When I clic on “kanban 1” it opens the URL #!/top/kanbanTop/kanban?id=1 and it works fine :

Capture d’écran 2022-01-06 à 13.41.43
Capture d’écran 2022-01-06 à 13.41.433000×1104 139 KB

However, if I click on a second link on my menu (#!/top/kanbanTop/kanban?id=2) the view stays on the first kanban.

If reload the page, it opens the second kanban.

I believe I’m not going in the right direction. Does someone have an advice ?

Thanks in advance !

#2

try to use urlChange handler and reconfigure required items depending on received id parameter.
test

#3

Thank you !

I changed my kanbanview like this :

import {JetView} from "webix-jet";

export default class KanbanView extends JetView {

	async config() {
		this.uid = null;
		return {
			view: "kanban",
			id: "mykanban",
			editor: true,
			comments: {currentUser: 2},
			cardActions: true,
			cols: []
		};
	}

	async constructCols() {
		this.uid = null;
		let id = this.getParam("id");
		let cols = await webix.ajax("http://localhost/api/kanban/"+id+"/cols");
		let config = {
			view: "kanban",
			id: "mykanban",
			url: "http://localhost/api/kanban/"+id,
			save: "json->http://localhost/api/kanban/save/"+id,
			editor: true,
			comments: {currentUser: 2},
			cardActions: true,
			cols: cols.json()
		};
		webix.ui(config, $$('mykanban'));
	}

	urlChange(_$view, _$url) {
		this.constructCols();
	}
}

It works fine.