VintaSoft Imaging .NET SDK 12.5: Documentation for Web developer
In This Topic
    Localize the web spreadsheet document editor
    In This Topic
    VintaSoft ASP.NET Spreadsheet Editor Demo provides the localization dictionaries, which allow to localize the web spreadsheet document editor (WebSpreadsheetDocumentEditorControlJS) into 45 languages (Afrikaans, Arabic, Armenian, Azerbaijan, Belarusian, Bulgarian, Chinese, Croatian, Czech, Danish, Dutch, English, Estonian, Finnish, French, Georgian, German, Greece, Hebrew, Hindi, Hungarian, Italian, Japanese, Kazakh, Korean, Kyrgyz, Latvian, Lithuanian, Norwegian, Portugese, Romanian, Russian, Slovakian, Slovenian, Spanish, Swahili, Swedish, Tajik, Tatar, Turkish, Turkmen, Ukrainian, Uzbek, Vietnamese, Zulu).

    The localization dictionaries can be found in the "<SdkInstallPath>\VintaSoft\Imaging .NET v12.5\Examples\ASP.NET Core\CSharp\AspNetCoreSpreadsheetEditorDemo\wwwroot\locales\" folder.

    If you want to create a custom localization dictionary for the user interface of web spreasheet document editor, you should do the following steps:
    1. Define the list of languages for localization
    2. Create dictionaries for localization
    3. Add JavaScript code for UI localization

    If you have created the custom localization dictionary for web spreasheet document editor and you want to share your dictionary with other users, please send us the created custom dictionary and we will include it into the source codes of VintaSoft ASP.NET Core Spreadsheet Editor Demo.


    1. Define the list of languages for localization

    First, it is necessary to define the list of languages for localization and create a file of localization settings, for example "settings.json". Here is the content of file "settings.json", which defines that the interface can be localized to English and German languages:
    {
      "locales": [ "en", "af", "ar", "bg", "cs", "da", "de", "el", "es", "fi", "fr", "he", "hi", "hr", "hu", "it", "ja", "ko", "nb", "nl", "pt", "ro", "ru", "sv", "tr", "vi", "zh" ]
    }
    

    Next, the "settings.json" file must be added to the content of web application, for example placed in folder "locales".

    Finally, it is necessary to add the element "link" with information about localization settings onto a web page:
    <link rel="localization" href="/locales/settings.json">
    


    2. Create dictionaries for localization

    The dictionary file should have a name, which equals to the browser locale name, and ".txt" extension. For example, the file of English language dictionary must have the name "en.txt", the file of German language dictionary must have the name "de.txt", the file of French language dictionary must have the name "fr.txt", the file of Spanish language dictionary must have the name "es.txt", the file of Italian language dictionary must have the name "it.txt", the file of Portuguese language dictionary must have the name "pt.txt", the file of Russian language dictionary must have the name "ru.txt".

    The dictionary file should be located in the same folder with the file "settings.json", in our case this folder is "locales".

    For creating English dictionary it is necessary to do the following steps: Here is JavaScript code that demonstrates how to create the localization dictionary for a HTML page that contains web spreadsheet document editor:
    ...
    // create UI localizer
    _localizer = new Vintasoft.Shared.VintasoftLocalizationJS();
    ...
    
    /**
     Creates the dictionary for localization of application UI.
    */
    function __createUiLocalizationDictionary() {
        __createDocumentViewerDialogsForLocalization();
    
        var localizationDict = _localizer.getDocumentLocalizationDictionary();
        var localizationDictString = JSON.stringify(localizationDict, null, '\t');
        console.log(localizationDictString);
    }
    
    /**
     Creates the dialogs, which are used in Web Document Viewer, for localization.
    */
    function __createDocumentViewerDialogsForLocalization() {
        var floatingContainer = document.getElementById("spreadsheetDocumentEditorControlContainer");
    
        var spreadsheetEditorControl = _spreadsheetDocumentEditorControl.get_SpreadsheetEditorControl();
    
        var renameWorksheetDialog = new Vintasoft.Imaging.Office.UI.Dialogs.WebUiRenameWorksheetDialogJS(spreadsheetEditorControl);
        renameWorksheetDialog.render(floatingContainer);
    
        var moveWorksheetDialog = new Vintasoft.Imaging.Office.UI.Dialogs.WebUiMoveWorksheetDialogJS(spreadsheetEditorControl);
        moveWorksheetDialog.render(floatingContainer);
    
        var findTextDialog = new Vintasoft.Imaging.Office.UI.Dialogs.WebUiFindTextDialogJS(spreadsheetEditorControl);
        findTextDialog.render(floatingContainer);
    
        var selectFunctionDialog = new Vintasoft.Imaging.Office.UI.Dialogs.WebUiSelectFunctionDialogJS(spreadsheetEditorControl);
        selectFunctionDialog.render(floatingContainer);
    
        var insertCommentDialog = new Vintasoft.Imaging.Office.UI.Dialogs.WebUiInsertCommentDialogJS(spreadsheetEditorControl);
        insertCommentDialog.render(floatingContainer);
    
        var editCommentDialog = new Vintasoft.Imaging.Office.UI.Dialogs.WebUiEditCommentDialogJS(spreadsheetEditorControl);
        editCommentDialog.render(floatingContainer);
    
        var editHyperlinkDialog = new Vintasoft.Imaging.Office.UI.Dialogs.WebUiEditHyperlinkDialogJS(spreadsheetEditorControl);
        editHyperlinkDialog.render(floatingContainer);
    }
    
    


    For creating German (or other non English) dictionary it is necessary to do the following steps:
    Here is an example of simple dictionary file:
    {
            "spreadsheetDocumentEditorControl": {
                    "fileLabel": {
                            "text": "File"
                    },
                    "homeLabel": {
                            "text": "Home"
                    },
                    "editLabel": {
                            "text": "Edit"
                    },
                    "insertLabel": {
                            "text": "Insert"
                    },
                    "reviewLabel": {
                            "text": "Review"
                    },
                    "uploadXlsxFileButton": {
                            "title": "Upload and open XLSX file"
                    },
                    "downloadXlsxFileButton": {
                            "title": "Download XLSX file"
                    },
                    "showMobileMenuButton": {
                            "title": "More"
                    },
                    "boldTextButton": {
                            "title": "Bold text"
                    },
                    ...
            }
    }
    
    


    3. Add JavaScript code for UI localization

    The VintasoftLocalizationJS class provides functionality for localization of DOM elements and constant strings.

    Here is JavaScript code that demonstrates how to enable localization of web spreadsheet document editor in web application:
    ...
    // create UI localizer
    _localizer = new Vintasoft.Shared.VintasoftLocalizationJS();
    ...
    
    /**
     Enables the localization of application UI.
    */
    function __enableUiLocalization() {
        // if localizer is ready (localizer loaded localization dictionary)
        if (_localizer.get_IsReady()) {
            // localize DOM-elements of web page
            _localizer.localizeDocument();
        }
        // if localizer is NOT ready
        else
            // wait when localizer will be ready
            Vintasoft.Shared.subscribeToEvent(_localizer, "ready", function () {
                // localize DOM-elements of web page
                _localizer.localizeDocument();
            });
    
        // subscribe to the "dialogShown" event of web spreadsheet document editor
        Vintasoft.Shared.subscribeToEvent(_spreadsheetDocumentEditorControl, "dialogShown", function (event, data) {
            _localizer.localizeDocument();
        });
    }