I want to translate mobile app from English to Arabic

I want to add Arabic translation to my mobile application I know how to add in the web. Unfortunately not found straight forward steps to translate my mobile app in Arabic. I followed the below document but as a fresh developer, it is very confusing for me. 

https://www.outsystems.com/forums/discussion/21245/multilingual-mobile-component-documentation

Hi Malalai,

did you check this documentation:

Cheers,
Nuno

Hi Malalai Habib,

Use the below mobile Component:

https://www.outsystems.com/forge/component-overview/1784/multilingual-component


Demo App - How to use :

https://www.outsystems.com/forge/component-overview/1785/multilingual-to-do


Documentation:

https://www.outsystems.com/forums/discussion/21245/multilingual-mobile-component-documentation/


Additional Enhancement :

If incase you want to manage the Json preparation with easy way then you can install thus web components & start adding string in it, it will help you to export Json which you can use in Mobile app as a resource for Multilingual plugin.

https://www.outsystems.com/forge/component-overview/4667/mobile-translations


- Assif


Nuno Miguel Verdasca wrote:

Hi Malalai,

did you check this documentation:

Cheers,
Nuno

Hi Nuno,

Yes, But this is for web translation which I know I am facing the issue while translating the mobile app.


assif_tiger wrote:

Hi Malalai Habib,

Use the below mobile Component:

https://www.outsystems.com/forge/component-overview/1784/multilingual-component


Demo App - How to use :

https://www.outsystems.com/forge/component-overview/1785/multilingual-to-do


Documentation:

https://www.outsystems.com/forums/discussion/21245/multilingual-mobile-component-documentation/


Additional Enhancement :

If incase you want to manage the Json preparation with easy way then you can install thus web components & start adding string in it, it will help you to export Json which you can use in Mobile app as a resource for Multilingual plugin.

https://www.outsystems.com/forge/component-overview/4667/mobile-translations


- Assif


Hi Assif,

Thank you for your rapid reply, I post shared the same link in my question I already follow the same document but I am unable to understand. 



Follow the below steps to make it done for Arabic :

1- Install the Mobile Multilingual Plugin

2- Add it as a dependency in your mobile project & import all below actions & Publish :

3- Install this supportive web plugin

4- After you Install the web Mobile Translation Plugin, just open it in browser & login from any of the users:

   

5- on Dashboard Click the Plus Icon  to add New Project for Translations:

6- Select Your respective Mobile Project  from dropdown list  and Click add:

7- Once you added project, you will see it on list, Now click on Locales Icon as below :

8- Click on Add New Locales :

9-  Select whichever Locale you want to add the translations for your mobile app , as below :

Note: You can add multiple languages as per your requirement. All the Locales that you added this web tool will help you to manage the translations for the mobile Multilingual Utility. Once Added any particular Locales from Dropdown you will see it on the dashboard List :


10-  Now click on Application menu in Header & in the Applications List , Goto Resources i.e Click on Resource Icon :


11- Make Sure the ShowResourceFor Dropdown is selected for the correct language, now the Translation actual work gets start from here..

Whatever label i.e a static text you want to translate: Copy it from the Mobile Screen & add it here as a TextWidget:

For Ex in my case, the below text of my mobile Screen is static, so I will do it this way :

 Copy the text 'UserName' & add it in the WebPortal of Plugin :

Click on the Plus Icon of Dashboard & it will show me a popup.

Because this is a Static Text, hence I will click on AddAsTextWidget Button & the moment I click on it, that key which is auto-generated by the web plugin will be copied on my clipboard.

Now as per the guidelines of MobileMultiLingualPlugin we need to add data-trans attribute with a key, So we will do that this way :

I added a data-trans attribute for the userName text & paste the copied key which I got from web-portal.



12- Similarly for the Dynamic Text where you are showing it in expression then you need to add that text in web portal by using the AddAsExpression Button. Like below :

Imagine you have a dynamic message or text to be shown on UI like :

So we will add both of this text individually as an Expression in Web portal & when we added them we will get a key copied on our clipboard & then we need to add it to the expression as below:

when you add it as a expression you get the below copied on your clipboard:

GetTranslation("7c6e46dd-70a8-4d93-aeef-430c4f2cf6fd", "Hi this is assif")

It's just a action with a key & string.

I will use it in my mobile this way:

Similarly, you can do it for the other text.

13- This way first you need to start adding each static text as a textWidget & declare the data-trans in outsystem with a key & the dynamic text with a GetTranslation Action.

Once all the strings added to the web-portal you can start adding translation directly in Resource dashboard.

Add/Type Translation in the Input  & click on Save. At any point, you can use that key on LHS for the reference to add it in Mobile app. 


14 - Now once you app strings are translated then just download the JSON file from portal :

you will see that the records & translation that you added for the particular Locales are ready & prepared as per Mobile Multilingual Plugin. Whatever string has translation added will be present in JSON :




15 - Now you need to import this file in Mobile Project as a resource as per guidelines of MobileMultilingual Plugin :

Add it to Resource Folder & set the Deploy as below & Publish:


In the OnAppReady under Logic > SystemEvent Action :

Call the AddTranslationsFromResource Action & pass the ResourceJsonfile URL that we added above:


16- Now to test the language you just to add a button & on click of it call the SetLocale Action & pass the Locale to which you want to switch :

17- This way your app will select the locale from the Json you uploaded & for each declared key either by data-trans or getLocalTranslation action it will pick the correct translations.

18- if incase there's no translation present it will automatically show the English by default.


Hope it helps,

Assif






I followed all the steps you shared. It helped me a lot but here I am facing some issues again.

When I click on Arabic it is not changing 

when I same it and open it again it gets changed to Arabic.

On the same screen when I tried to again change it to English.

It shows it like this.



Thank You, Dear Asif, for your great support. Your provided steps helped me a lot with this problem.

Solution

Hello Malalai Habib,

You just need to redirect to the same screen in the action where you call the SetLocale Action.

This was when you SetLocale to Switch Language & in the end redirect to CurrentScreen, you Screen will be loaded with new RTL rules with Arabic Translations.



Solution

Thank You, Dear Asif, it is now working fine I really appreciate your quick reply and all support.


Here is one more thing how can I change the category to Arabic because it is data, not text.

Is that coming from a Static Entity or Local Entity or DB ?

It is from a local Entity I think.



Show me the Category Entity from Data Section

Here it is.

Hi,

Better to convert it as a Static Entity, if those are fixed records. So it will be easy to translate them.

Else if incase you want to refer them as from Entity then You'll need to add one more attribute i.e translation id property in your entities so you'll be able to indicate what's the id of the translation you want to display.

You can also create Dynamic Attribute in entity & define the GetTranslation Method it.


assif_tiger wrote:

Hi,

Better to convert it as a Static Entity, if those are fixed records. So it will be easy to translate them.

Else if incase you want to refer them as from Entity then You'll need to add one more attribute i.e translation id property in your entities so you'll be able to indicate what's the id of the translation you want to display.

You can also create Dynamic Attribute in entity & define the GetTranslation Method it.



Dear Asif,

Can you please explain how to translate the static entity and Dynamic entity.

Hi,

you can refer to the below sample.
I referenced the static entity & had the translation for the same..
If your static entity is going to be used on all the screens then better you create a local entity & in the onAppReady event under the Logic section, you can similarly prepare list & store in local.. the way I did on Screen.


Demo :

https://assif.outsystemscloud.com/PreviewInDevices/?IsMobilePreview=True&DeviceName=Smartphone&URL=/TestInputMobile/Citiies?_ts=637279355297230320


PFA OML for a sample.

Hope it help,

Assif