To create a custom language pack for the Designer ribbon, we simply need to create a copy of an existing resource pack, which we will be able to edit. The Designer resource packs are JavaScript files that can be found via the Designer > Designer Component > scripts folder when downloading SpreadJS. The default resource pack is also included when installed via npm. However, we will be editing one of the existing language resource packs, which are available on npm separately.
We will be looking at the “gc.spread.sheets.designer.resource.en.X.X.X.min.js” file for this example (version does not matter). This is the English resource, but the other resource packs can also be used instead. We first want to make a copy of this file and rename it (i.e. “gc.spread.sheets.designer.resource.custom.X.X.X.min.js”). Then, we can open the file in our editor of choice. Enabling word-wrap in your editor may be necessary, as the language resources are created as one long line of text.
From here, we will be able to modify the visible text for most of the Designer Component elements. We can take all of the available fields and either translate them to a language of our choice, or enter any other text we want. While we will not go over the entire process of translating in this article of course, we will go over swapping the text of the ribbon tabs. For example, we can change the home tab over to something else. I used a quick Ctrl+F to find the tab in the file:
We can then change it to something else, “MAIN” for example:
Once we save our changes, we simply need to add or overwrite the reference to our resource file in our project. We need to make sure it is using our own file instead. These are the Designer resource references in my example:
When we view the tabs, we see now that our custom text is in effect:
At the time of this writing, SpreadJS currently includes complete Designer language resource files for English, Japanese, Chinese, and Korean. Other languages will require translated resource packs.
Tye Glenz