Translating a widget homepage
In this article, we will be localizing to a widget homepage in the TCM v10 application. The localization of widget homepages, sometimes referred to as "custom localization" enables you to guarantee that employees will get a truly tailored experience when opening the beqom v10 application.
While this best practice is a step by step recommendation by beqom, the steps described in the following sections can be performed in a different order.
Before you begin
Before you start the localization process, beqom recommends you prepare a detailed mockup of your homepage with all the elements that need to be translated. This will prevent you from going back and forth between the interfaces of the application and enable you to create your widget homepage faster and more efficiently.
For this article, we will create a homepage for the organization of a company event in Paris. A specific widget homepage with all the required information concerning the company gathering was previously created and we want our French colleagues to have their homepage in French instead of English.
The following figure illustrates our widget homepage example in English:
Homepage in English
Attributing localization keys to the elements of the page
In this step, you need to use the preliminary mockup of the homepage to attribute keys to various elements on the widget homepage. Please note that all the elements that appear on the page, including headers, titles, descriptions, links, rich-text, etc. can be translated. beqom recommends that you choose explicit and meaningful key names to each element of your widget homepage.
For our example, we will be using the translation keys listed below.
Page header
Book your trip for the upcoming summer company event! = inf_summer_event_page_header_welcome_message
Links
Links widget
Booking my Trip = inf_link_summer_event_title
Europe = inf_link_zone_1
Train Ticket (from Geneva) = inf_link_train_geneva
Train Ticket (from Berlin) = inf_link_train_berlin
Train Ticket (from Nantes) = inf_link_train_nantes
North America = inf_link_zone_2
Plane Ticket = inf_link_plane_ticket
Contact
Contact widget
Any Requirements? = inf_contact_summer_event_title
Heads of HR = inf_contact_job
Information
Information widget
Summer Vibes! = inf_information_summer_event_title
This year, our summer event is taking place in the beautiful city of Paris! Join our company gathering to meet new comers and participate to unforgettable activities and events. = inf_information_summer_event_description
Timeline
Timeline widget
Activities Schedule = inf_timeline_summer_event_title
Museum Tour = inf_timeline_summer_event_activity_1
Exceptional Dinner = inf_timeline_summer_event_activity_2
Discover the Odd Paris = inf_timeline_summer_event_activity_3
Food Tour = inf_timeline_summer_event_activity_4
This is a tip message.
For more information concerning the creation of a widget homepage, refer to Editing a Dashboard.
Creating the Localization Keys
Now that all keys have been identified, the next step is to create each key in the beqom Admin Portal.
To create the localization keys, proceed as follows:
Open the "ADMIN" component in Admin Portal.
Click Technical Admin > Localization > Custom Localization.
Click the
icon. A new, empty line is added at the top of the grid.Enter the name of the key in the Name field. In our example, add the key names from the section above.
Enter a value in the Value field. This field corresponds to the name displayed in the application.
Select an object in the Module Type drop-down.
Select the language to which the entry is in the application in the Culture drop-down. You do not need to fill in the Tab ID and the Source Type fields; the system will provide this information.
Repeat steps 3 to 7 for all the languages in which you want to localize the business object. Make sure that you use the same key name each time.
Click the
icon to save the modifications.
This is an attention message.
The application automatically generates the localization. However, you need to log out of the application and clear your browser cache to see the changes.
Inserting the Localization Keys to the Widget Homepage Fields
The next step is to insert the localization keys to each of the relevant fields.
To insert the localization keys, proceed as follows:
In the Web App, access the "Admin" component and navigate to the Widget Homepages section.
Open the widget homepage in which you want to work (see Searching for an Existing Dashboard). The widget homepage is opened in Edit mode.
Expand the section (page header or widget) in which you want to add localization keys.
Enter the "#" character in the relevant field and select the key in the list as illustrated below or simply enter the key name (e.g. inf_link_zone_1):
localization key insertion
Repeat the operation for each of the required field.
Click Save.
Changing the Application Culture
You can now change the application culture to display your widget homepage in the relevant language (in our example, French).
To change the application language, proceed as follows:
Open the Web App and access the "User" component.
Open the Settings tab located at the top of the screen.
In the Culture drop-down, select Français.
Click Save. The application is now localized in French.
Go to "Admin" > Widget homepages.
Open your widget homepage in the list of available homepages. Your homepage is localized in French as illustrated below:
homepage in French