Swap Designer Component Resources Dynamically

October 29 2024

The Designer Component language resources can be changed on the fly as needed. Here is a simple way this can be done!

First, we can set up the control where the user will select which language they want to apply. For this example, we will use a basic dropdown menu, but you may use whatever else you prefer. We can create this via HTML:

<body>
    <select id="options" style="min-width: 100px;">
        <option>en</option>
        <option>cn</option>
        <option>ja</option>
        <option>ko</option>
    </select><br/>
    <span>Select the resources from dropdown to change the language in designer</span>
</body>

Next, we need to create JavaScript language resource files to be used. The Designer Component addon includes resource files for English, Japanese, Chinese, and Korean. However, these files contain Designer-related data not relevant to just the displayed language, so it is recommended to create our own language files instead to avoid any possible performance loss. We can use the getResources method on an instance of the Designer Component using any of the included language resources. The following is an example:

var res_json_str = JSON.stringify(GC.Spread.Sheets.Designer.getResources());

//For English Resources
var result = 'var en_res_str = ' + "" + res_json_str + ";";
result = result.replaceAll('\','\\');
saveAs(new Blob([result], { type: "text/javascript;charset=utf-8" }), 'en_res.js');

The process will be similar for each language pack, simply accounting for the active language file and the output file name reflecting it. After these files are created and saved, we will need to include them in an accessible location within our project.

Now, we can take a look at our SpreadJS code. We need to add the functionality that will swap between the resource files we just included in our project. This can be achieved by adding an event listener to our “options” dropdown via addEventListener, then using setResources to apply the selected language. Here’s one way we can do this:

let designer = new GC.Spread.Sheets.Designer.Designer("designer-container")

let spread = designer.getWorkbook()
initSpread(spread);

function initSpread(spread) {

    document.getElementById('options').addEventListener('change', (e) => {
        let value = e.target.value;
        let resources;

        switch (value) {
            case 'en':
                resources = en_res_str;
                break;
            case 'cn':
                resources = cn_res_str;
                break;
            case 'ja':
                resources = ja_res_str;
                break;
            case 'ko':
                resources = ko_res_str;
                break;
        }

        let switch_res = JSON.parse(resources);
        GC.Spread.Sheets.Designer.setResources(switch_res);
        designer.setConfig(GC.Spread.Sheets.Designer.DefaultConfig);
    });
}

You can view a working sample here to see the result!

Tye Glenz