Expanding your business to a global audience requires breaking down language barriers. But developing a multilingual application can be complex and time-consuming. With AppSheet's no-code platform, you can create a user-friendly app in multiple languages without writing a single line of code. This blog post will guide you through the process step-by-step.
Multilingual applications offer numerous advantages for businesses and organizations:
Let's say you want your app to show text users in English, German, and Russian languages. First, you'll need to prepare the translated text which will be utilized as an app data source.
For the demo purpose, I am utilizing ethical certificates data used in the textile industry.
Screenshot of translated text in a Google Sheet
Let’s use Google Sheets as the data source. In the above shown sheet, Column A is the serial number Id. Column B - ‘Name’ is the name of the Certificate, Column C - ‘Language’ is the text language like English, German and Russian. The last column D - ‘Text’ has the details of the certificates in the language indicated by the language column C. Text column contains the translated text for different languages.
I'll add this Google Sheet into AppSheet using the data pane in the AppSheet editor as a table named ‘Certificates’.
In the AppSheet editor, under the Data pane, click on User settings. There are multiple columns available by default in the User settings table. You can rename any of the existing columns to let the user set the preferences by going to the Settings menu of the application.
Here, I am using the first column of the User Settings table and using ‘ User Language’ as the column name.
User settings screenshot
Click on the pencil icon on the ‘User language’ column and add the values for all the language choices your app supports. In this example, I have text translation available in my Google Sheet for three languages - German, English and Russian, so I am adding three values.
UI showing the choices added
This ‘User Language’ column will store the value of the language chosen by the user in the settings menu of the application.
After this configuration is done, the app will show the settings navigation menu with the language options we just added:
App screenshots showing language selection
In step 1, we added the table ‘Certificates’ which contains the text in English, German and Russian. The Certificates table has a row for each of the languages for each certificate.
Filter out the rows where the language column value of the data table matches with the User Settings language in the application. This can be achieved by creating a slice of the ‘Certificates’ table.
UI of the slice settings
if(Usersettings("User Language")<>"",[Language]=Usersettings("User Language"),[Language]="English")
The formula applied in the row filter condition will include all the rows from the Certificates table where ‘Language’ column value matches with the ‘User Language’ column value, selected by the user in the application.
For example, if the User selects the German language from the application’s Setting menu, Usersettings(“User Language”) would return the value “German” and the Row filter condition will include all the rows having the Language column value in the ‘Certificates’ table as “German”.
If the language selection is not done by the user in the application’s Setting menu, text in English language would be shown.
Create a view on top of the Slice created in Step 3. You can use any View type to show the Data of Certificates table.
UI of the view configuration of Certificates
The data would be shown in the language selected in the settings menu of the application.
When a user selects the Russian language, text would be shown in Russian. The UI shown below is the Settings menu to choose the language.
Screenshot of the app showing language options
Once the language is selected, the UI now uses the Slice to show the language data.
App screenshot showing translated text
If you change the language preference from the settings menu, the text in the chosen language would be shown.
You can not only show your data in multiple languages, but system text like ‘SAVE’ , ‘CANCEL’ , ‘ADD’ , ‘DELETE’ can also be shown in different languages based on the User preference.
To accomplish this, in the AppSheet editor, go to the Settings pane, click on Views and then click on Localization.
UI of the Localization settings
For example, you want to show the system text ‘SAVE’ in Russian as ‘сохранять’, apply the below given formula for ‘SAVE’ in Localization: if(usersettings("user language")="Russian","сохранять","Save")UI showing the viewIf more than two languages, the SWITCH function can be used. In the below formula, different language text is shown based on the user selected language. If none of the languages are selected then SWITCH returns the default English text "Save”.
SWITCH(usersettings[“user language”], "Russian", “сохранять”, "German", “speichern”, "French", “sauvegarder”, “Save”)
Similarly you can change any of the available system text. Scroll down to see all the system text from Localization option: System text settings UI
Views and Actions of the AppSheet app can be customized to the user's chosen language in the settings menu of the app. Now don't be surprised that, once again, we'll make use of the usersettings function to enable this.
You can show the View names or the Action names in the User chosen language by applying a formula in the ‘DISPLAY NAME’ property of the View or Action. The below formula will show the view name ‘Certificates’ in German language if the User chooses the German language from the settings menu of the app.
if(usersettings("user language")="German","Zertifikate","Certificates")
AppSheet's no-code platform makes it easier than ever to develop multilingual applications and expand your reach to a global audience. Here are some resources to get started:
LinkedIn
Twitter