Change language from a child jetview (admin demo)

Dear support,

I’m trying to implement a language selector in your admin demo (with material skin). In this way I have added this item to the topbar (in admin.js):

 {view: "icon", icon: "language",  width: 45, popup: "langSelector"} 

and the import to the popup object. The popup is defined as JetView object with the function:

onShow: function(){
	const langs = this.$scope.app.getService("locale");
	this.queryView({view: "list"}).select(langs.getLang());		
}

and a child list with the function onSelectChange: () => this.toggleLanguage() where toggleLanguage is the same as your locales example:

toggleLanguage(){
	const langs = this.app.getService("locale");
	const value = this.getRoot().queryView({view: "list"}).getSelectedId();
	if (value!=langs.getLang()){
		langs.setLang(value);
	}
}	

If I switch to “Italian” I don’t get errors but the translation doesn’t work and the graphical layout of the page is distorted. Note that if I set the italian language in the config code of sidebar.js (to translate the title and details of the pages called through the sidebar menu), the translation works.

Another question: which is the best way to storing the language selected? cookie, url, other?

This is the entire code of the jetview object:

import {JetView} from "webix-jet";

// export default ui;
class LanguageView extends JetView {
	config(){
		
		return {
			view: "popup",
			id: "langSelector",
			width: 300,
			padding:0,
			css:"submenu_language",
			body:{
				type: "clean",
				borderless:true,
				rows:[
					{
						view: "list",
						autoheight: true,
						data: [
							{id: "en", value: "English"},
							{id: "it", value: "Italiano"},
						],
						type:{
							height: 45,
							template: "	<img class='flag' src='assets/imgs/flags/#id#.png' /><span class='text'>#value#</span>"

						},
						select: true,
						on:{
							onSelectChange: () => this.toggleLanguage()
						}
					}
				]
			},
			on: {
				onShow: function(){
					const langs = this.$scope.app.getService("locale");
					this.queryView({view: "list"}).select(langs.getLang());		
				}
			}
		};
	}
	showWindow(){
		this.getRoot().show();
	}
	toggleLanguage(){
		const langs = this.app.getService("locale");
		const value = this.getRoot().queryView({view: "list"}).getSelectedId();
		if (value!=langs.getLang()){
			langs.setLang(value);
		}
	}	
}



export default LanguageView;

An update: I’ve tried creating a custom service and a custom event in order to put the setLang row in the admin.js file, which is the “main JetView” but the result is the same. It seems as the page is not entirely refreshed. However, no errors are shown.

did you set storage in service config? if not then you need to resolve current language and pass it to the service.

I’m sorry, what do you mean with “set storage in service config”?
Could you explain better? Do you have an example? Many thanks

var app = new JetApp({...});
app.use(locale, {
    storage: webix.storage.local
});

Ok now language is stored and with a manual refresh of the page everything seems translated correctly. Thanks! However, I need a manual refresh, do you know why? The jet manual writes that setLang makes a refresh of all UI…

Many thanks

In the meanwhile I’ve added location.reload() after setLang and it works.