Issue with OrgChart localization

Dear Team,

We need to translate OrgChart elements into German.
I've prepared JS code (please see below) as per the article "Localize Org Chart in SharePoint and Microsoft Teams", however, we experience several issues:

  1. Elements are translated when the configuration is published (press Finish button), however, when the page is refreshed, elements in the RightControlZone are reset to English;
  2. Hint for the Layout button is not translated;
  3. When code for the layouts is added, it resets applied CSS;
  4. Text in the Search box is not translated on the initial load, but when I drill down to any element, text in the Search box is translated.

Here is the code I have:

// German translation
	// Drill Down Toolbar
		Plumsail.OrgChart.LocalizationStrings.DrillDownToolbar.GoToParent = "Zur übergeordneten Ebene"; //Hint text for go to parent button
		Plumsail.OrgChart.LocalizationStrings.DrillDownToolbar.GoToRoot = "Zum Hauptverzeichnis"; //Hint text for go to root button
		Plumsail.OrgChart.LocalizationStrings.DrillDownToolbar.DrillHere = "Zeige einzelne Abteilung"; //Hint text for drill here button
	// Search
		Plumsail.OrgChart.LocalizationStrings.SearchInputWatermark = "Suche"; //This message appears inside search box
	// Right Control Zone
		Plumsail.OrgChart.LocalizationStrings.RightControlZone.OriginalZoom = "Ursprünglicher Zoom 100%"; //Hint text for original zoom button
		Plumsail.OrgChart.LocalizationStrings.RightControlZone.FullScreenMode = "Vollbildmodus"; //Hint text for full screen button
		Plumsail.OrgChart.LocalizationStrings.RightControlZone.Settings = "Einstellungen"; //Hint text for settings button (gears icon)
		Plumsail.OrgChart.LocalizationStrings.RightControlZone.Layouts = "Ansicht"; //Hint text for layouts button
	// Layouts
		Plumsail.OrgChart.LocalizationStrings.LayoutsMenu.TopToBottomCompact = "Gebündelt von oben nach unten";
		Plumsail.OrgChart.LocalizationStrings.LayoutsMenu.TopToBottomClassic = "Klassisch von oben nach unten";
		Plumsail.OrgChart.LocalizationStrings.LayoutsMenu.TopToBottomWithGroupingLeafBoxes = "Klassisch von oben nach unten, ohne Gruppierung von untergeordneten Mitabeitern";
		Plumsail.OrgChart.LocalizationStrings.LayoutsMenu.LeftToRight = "Von links nach rechts";
		Plumsail.OrgChart.LocalizationStrings.LayoutsMenu.BottomToTop = "Von unten nach oben";
	// Settings Menu
		Plumsail.OrgChart.LocalizationStrings.Settings.PrintOrgChart.Title = "Drucken";
		Plumsail.OrgChart.LocalizationStrings.Settings.GenerateReport.Title = "Bericht erstellen";
		Plumsail.OrgChart.LocalizationStrings.Settings.ExportCsv.Title = "In CSV-Datei exportieren";
		Plumsail.OrgChart.LocalizationStrings.Settings.Help = "Hilfe";

// Button to expand/collapse all elements (
        //Button to expand/collapse nodes with initial text
        var expColButton = $('<a href="#" class="poch-control-panel-link" title="Alle einblenden"><i class="ms-Icon ms-Icon--ChevronUp poch-fabric-icon"></i></a>');
        var msIcon = expColButton.find(".ms-Icon");

        //Appending the button to the right control zone

        //Initializing a variable for further switching of code
        var isExpanded = false;

        //Configuring a function on a button click () {

            //If it's not expanded
            if (!isExpanded) {
                //Expanding a specified number of nodes, in this case it's 100 but you can set a greater value
                renderer.expandNodeLevels(100, function(){
                    //Change button text to "Collapse"                    
                    expColButton.attr("title", "Alle ausblenden");
                    //Setting the variable to "true" to execute another code on next click
                    isExpanded = true;
            // If it's expanded
            } else {
                renderer.collapseAllNodes(function () {
                    //Change button text to "Expand"                    
                    expColButton.attr("title", "Alle einblenden");
                    //Setting the variable to "false" to execute another code on next click
                    isExpanded = false;

// Open in full screen mode

//Box rendered event
renderer.onBoxRendered(function(event, box, itemData){

  if(itemData.DEPTH_LEVEL == '0'){
    box.$elem.addClass('rocItemTemplate pl-item-template ns');
    box.$elem.addClass('pl-item-card ns');
  } else if (itemData.DEPTH_LEVEL == '1'){
    box.$elem.addClass('rocItemTemplate pl-item-template l1');
    box.$elem.addClass('pl-item-card l1');
  } else if (itemData.DEPTH_LEVEL == '2'){
    box.$elem.addClass('rocItemTemplate pl-item-template l2');
    box.$elem.addClass('pl-item-card l2');
  } else if (itemData.DEPTH_LEVEL == '3'){
    box.$elem.addClass('rocItemTemplate pl-item-template l3');
    box.$elem.addClass('pl-item-card l3');
  } else if (itemData.DEPTH_LEVEL == '4'){
    box.$elem.addClass('rocItemTemplate pl-item-template l4');
    box.$elem.addClass('pl-item-card l4');
  } else if (itemData.DEPTH_LEVEL == '5'){
    box.$elem.addClass('rocItemTemplate pl-item-template l5');
    box.$elem.addClass('pl-item-card l5');
  } else if (itemData.DEPTH_LEVEL == '6'){
    box.$elem.addClass('rocItemTemplate pl-item-template l6');
    box.$elem.addClass('pl-item-card l6');
  } else if (itemData.DEPTH_LEVEL == '7'){
    box.$elem.addClass('rocItemTemplate pl-item-template l7');
    box.$elem.addClass('pl-item-card l7');
  } else {
    box.$elem.addClass('rocItemTemplate pl-item-template l7');
    box.$elem.addClass('pl-item-card l7');

//Tooltip rendered event
renderer.onTooltipRendered(function(event, tooltip, itemData){


//Search result rendered event
renderer.onSearchResultRendered(function(event, searchResult, itemData){


Hi @isychev ,
For now, I fail to reproduce the issue. The localization code you provided works fine in my environment.
Please try the following:

  1. Leave localization strings only in your code. What I mean by that is remove all the code after
Plumsail.OrgChart.LocalizationStrings.Settings.Help = "Hilfe";

in your Custom JavaScript tab. Please see if the behavior changes.

2)Please also try a different browser and try using incognito mode / clearing the cache. The usage of "untranslated" strings might point to a caching isue (the browser stores non-translated vrersion.

Hi @v.uspenskii

I've kept translation code only and tried Incognito mode in Chrome and the issue is still valid:

The same is in Edge (old Edge - Microsoft EdgeHTML 17.17134)

The issue impacts Search box and icons in the Right Control Zone. Elements in the drill down toolbar are translated.


@isychev ,
Can you, please try clearing the Org Chart cache and the browser cache after the page with the new JavaScript localization settings is saved?
Also, please try the following to actually see that the localization settings have in fact been implemented:
reproduce the issue, open the console log and type in one of the localization properties, like this:
The output should be the string localized.

Hi @v.uspenskii

I've cleared the browser cache. We have not activated "Enable caching" in OrgChart settings.

I've noticed there is an error:

Hi @v.uspenskii

Do you have any news about the reported issue?
We can have a conference call / screen sharing session if you can't replicate it in your system.