Make title dynamic for translation to tabs

[Ihor]

Hi, I'm using Smartclient v12.1p_2023-08-16/Pro. I have a problem that when I want the text to change dynamically in tabs, nothing happens, although other elements translate well into the selected language. I also tried to do it through setTitle and this option, but it did not help
this.tabs[0].title = currentMessages.asset;
this.tabs[1].title = currentMessages.attachments;

This is my code :

initWidget: function () {
let self = this;
this.tabs = [
{
title: currentMessages.asset,
name: "equipmentsTab",
width: "50%",
direction: "ascending",
iconSize: 8,
iconAlign: "right",
iconOrientation: "right",
pane: isc.VLayout.create({
width: "100%",
members: [
self.createEquipmentSearchForm(),
isc.EquipmentListGrid.create({ leaveScrollbarGap: false }),
],
}),
click() {
if (self.toSort) {
this.pane.members[1].sortRecords("title", this.direction);
let isAsc = this.direction === "ascending";
this.direction = isAsc ? "descending" : "ascending";
this.setIcon(
isAsc
? "[SKINIMG]ListGrid/sort_descending.png"
: "[SKINIMG]ListGrid/sort_ascending.png",
);
this.redraw();
} else {
self.toSort = true;
}
equipmentListGrid.getSelectedRecord().attachmentCount =
equipmentTabSet.getTab(1).pane.members[0].data.localData ? equipmentTabSet.getTab(1).pane.members[0].data.localData.length : equipmentTabSet.getTab(1).pane.members[0].data.length;
equipmentListGrid.redraw();
},
},
{
title: currentMessages.attachments,
width: "50%",
disabled: true,
name: "attachments",
pane: isc.PhotoLayout.create({ type: "Equipment" }),
tabSelected: function (tabSet, tabNum, tabPane, ID, tab, name) {
self.toSort = false;
let photoGrid = tabPane.getMembers()[0];
let listGrid = tabSet.getTab(0).pane.members[1];
tabSet.getTab(0).setDisabled(false);
photoGrid.setData([]);
if (listGrid.anySelected()) {
let selectedRecord = listGrid.getSelectedRecord();
tabPane.selectedRecord = selectedRecord;
photoGrid.fetchData({
objectType: selectedRecord.objectType,
id: selectedRecord.id,
fileType: ["PHOTO", "DOCUMENT", "THERMAL"],
});
}
},
},
];
this.Super("initWidget", arguments);
},

[claudiobosticco]

Hello, please see setTabTitle https://www-demos.smartclient.com/sm...et.setTabTitle

[Ihor]

Hello , I used it already , but it is no working @claudiobosticco

[claudiobosticco]

Hello Ihor , besides that I don't see it in your sample, you can see it working here https://www-demos.smartclient.com/sm...id=titleChange

[Ihor]

@claudiobosticco I put this piece of code before Super and title commented out. At the moment it works like this and tabTitle doesn't work so I commented it out
this.tabs[0].title = currentMessages.asset;
this.tabs[1].title = currentMessages.attachments;
/* this.setTabTitle(0, currentMessages.asset);
this.setTabTitle(1, currentMessages.attachments); */
this.Super("initWidget", arguments);

[claudiobosticco]

Hello, please post always enough information to give context. Assuming that you have those lines of code in an override of initWidget in your TabSet, you must call setTabTitle *after* the call to Super, otherwise it won't work because the Tabs are not yet created

[Ihor]

Hello @claudiobosticco I now put it after Super and the titles themselves are there, but nothing changes when I switch the language

initWidget: function () {
let self = this;
this.tabs = [
{
//title: currentMessages.asset,
name: "equipmentsTab",
width: "50%",
direction: "ascending",
iconSize: 8,
iconAlign: "right",
iconOrientation: "right",
pane: isc.VLayout.create({
width: "100%",
members: [
self.createEquipmentSearchForm(),
isc.EquipmentListGrid.create({ leaveScrollbarGap: false }),
],
}),
click() {
if (self.toSort) {
this.pane.members[1].sortRecords("title", this.direction);
let isAsc = this.direction === "ascending";
this.direction = isAsc ? "descending" : "ascending";
this.setIcon(
isAsc
? "[SKINIMG]ListGrid/sort_descending.png"
: "[SKINIMG]ListGrid/sort_ascending.png",
);
this.redraw();
} else {
self.toSort = true;
}
equipmentListGrid.getSelectedRecord().attachmentCount =
equipmentTabSet.getTab(1).pane.members[0].data.localData ? equipmentTabSet.getTab(1).pane.members[0].data.localData.length : equipmentTabSet.getTab(1).pane.members[0].data.length;
equipmentListGrid.redraw();
},
},
{
//title: currentMessages.attachments,
width: "50%",
disabled: true,
name: "attachments",
pane: isc.PhotoLayout.create({ type: "Equipment" }),
tabSelected: function (tabSet, tabNum, tabPane, ID, tab, name) {
self.toSort = false;
let photoGrid = tabPane.getMembers()[0];
let listGrid = tabSet.getTab(0).pane.members[1];
tabSet.getTab(0).setDisabled(false);
photoGrid.setData([]);
if (listGrid.anySelected()) {
let selectedRecord = listGrid.getSelectedRecord();
tabPane.selectedRecord = selectedRecord;
photoGrid.fetchData({
objectType: selectedRecord.objectType,
id: selectedRecord.id,
fileType: ["PHOTO", "DOCUMENT", "THERMAL"],
});
}
},
},
];
this.Super("initWidget", arguments);
this.setTabTitle(0, currentMessages.asset);
this.setTabTitle(1, currentMessages.attachments);
},

[claudiobosticco]

hello Ihor , you are not showing us what you do to change the locale. Do you want to change it without reloading the page? Obviously the initWidget code will not be re-executed without a reload.
How do you do it with the other widgets?
Also I wonder how you can change the framework localization without reloading.

[Ihor]

@claudiobosticco Other widgets are windows or other elements that are hidden, so they think and change the language without reloading the page, and here it is just like the main page, so it does not look like it and does not translate

[claudiobosticco]

But if one of those other widgets were already rendered, then it wouldn't work for them either. Do you know that initWidget is called only at first initialization? https://www-demos.smartclient.com/sm...vas.initWidget
Otherwise you'd have to destroy and re-create everything. Also note that the doc mentions the suggestion I gave you in post #6.

One possible approach would be to have the code that changes the titles in a method that is called (possibly via observe) when the locale changes.

In any case, I don't understand the need to do the locale change without a reload, and I don't see how it could work with respect to the framework widgets.

[Ihor]

@claudiobosticco I did it by reloading the page and it all worked. Thank you for your help

[claudiobosticco]

Ihor Please see also the documentation section for i18n:
https://www-demos.smartclient.com/sm...id=group..i18n

[Ihor]

@claudiobosticco Thank you, I looked there. I wanted to ask you if you know how to make the localisation of the framework pull up after reloading the page? That is, so that it does not crash because it pulls up everything from me and crashes from the framework itself

getLanguageComboBox: function () {
const thiz = this;
return isc.DynamicForm.create({
ID: "languageForm",
canEdit: true,
completeOnEnter: true,
fields: [
{
name: "languageCombo",
showTitle: false,
width: 100,
type: "select",
addUnknownValues: false,
defaultValue: localStorage.getItem('selectedLanguage') || "en",
valueMap: {
"en": "Eng",
"ua": "Ukr",
"da": "Da"
},
change: function (form, item, value) {

localStorage.setItem('selectedLanguage', value);
document.documentElement.lang = value;

const changeLanguageCallBack = () => {
console.log('Locale file loaded successfully.');
setLocalizedMessages();
mainLayout.redraw();
topLayout.initWith();
};
switch (value) {
case 'en':
//localeFile = 'isomorphic/locales/frameworkMessages.properties';
isc.FileLoader.loadLocale("en", changeLanguageCallBack);
break;
case 'ua':
//localeFile = 'isomorphic/locales/frameworkMessages_uk_UA.properties';
isc.FileLoader.loadLocale("uk_UA", changeLanguageCallBack);
break;
case 'da':
//localeFile = 'isomorphic/locales/frameworkMessages_da.properties';
isc.FileLoader.loadLocale("da", changeLanguageCallBack);
break;
}
location.reload();
thiz.updateComboPicker('url("./images/pickers/down.png")');
},
},
],
});
},

This is from another file:

// Default to English initially
let currentMessages = en_messages;
// Function to set the current language and update the `currentMessages` variable
function setLocalizedMessages() {
const selectedLanguage = localStorage.getItem('selectedLanguage') || 'en';
document.documentElement.lang = selectedLanguage;
switch (selectedLanguage) {
case 'ua':
currentMessages = uk_UA_messages;
break;
case 'en':
default:
currentMessages = en_messages;
break;
}
return currentMessages; // Return the updated localized messages
}
// Immediately set the messages based on the current language
currentMessages = setLocalizedMessages();

[claudiobosticco]

Hello, please use [CODE] tags to format your code.

It seems that you're loading the new locale and *then* reloading the page, which obviously doesn't make sense.
You have to load the right locale just after the framework js files (ISC_***) and before your own code.