Last updated
Was this helpful?
Last updated
Was this helpful?
This is the second part of our guide to building a Custom Dashboard. This part continues work on the dashboard we built in part one: . It further shows how to handle localization in a custom dashboard.
The steps we will go through in second part are:
In the welcome-dashboard folder create a new folder called "Localization"
Then create two new files en.js and da-dk.js:
Add the following code to en.js
Add the following code to da-dk.js
Now let's update the umbraco-package.json file from the welcome-dashboard folder to register our new localization files:
Run npm run build in the welcome-dashboard folder and then run the project.
We can use the umb-localize element to get the localizations out, which takes a key property in.
Let's start using the localizations. In the umbraco-package.json file, we will already be using the #welcomeDashboard_label key for the dashboard label. Go ahead and replace "label": "Welcome Dashboard" with "label": "#welcomeDashboard_label".
We will now use the umb-localize element to get the translations for the dashboard. Update the welcome-dashboard.element.ts:
Run npm run build in the welcome-dashboard folder and then run the project.
The dashboard's text will appear depending on the user's language.
If the user's language is Danish, the dashboard will use the text from our da-dk file.
If the user's language is English, the dashboard will use the text from our en file.
If the key is not found in the current language, the fallback language (en) will be used.
This is how our dashboard should now look like:
With the part completed, you should have a dashboard welcoming your users' language.
In the next part, we will look into how to add more functionality to the dashboard using some of the Contexts that Umbraco offers.
Tip: If you do not have many translations, you can also choose to include the localizations directly in the meta-object. Read more about translations in the article.
Set up localization for your dashboard.
