How do you show language names but use language codes in ListPicker?

Hi everyone
In my app I’m using a ListPicker to select a language for translation.

Right now, I put the language codes (like en, fr, de, zh) inside the ElementsFromString property of the ListPicker. The problem is that these codes are shown directly to the user, which is not user-friendly.

What I want is The user should see the language names (like English, French, German, Chinese) in the ListPicker،But when the user selects a language, the app should use the language code (like en, fr, de, zh) internally for the translation API

How can I connect the displayed names with the hidden codes in ListPicker?
Should I create two lists (names and codes) and then use the index of the selection to get the correct code? Or is there a better way?

Thanks in advance

1 Like

Yes, this is the easiest way, just ensure you keep the two lists aligned correctly, so that the index of one returns the correct index of the other.

Thank you very much for your help but is this the way to do it or not،
when ListPicker1.AfterPicking
do
set selectedName to ListPicker1.Selection
set selectedIndex to ListPicker1.SelectionIndex
set selectedCode to select list item
list = codes
index = selectedIndex ،
because I don't know how to do the way you say if you can help me more thank you and I appreciate it

Yes you can do it like this or just

when ListPicker1.AfterPicking
do
set selectedName to ListPicker1.Selection
set selectedCode to select list item
list = codes
index = ListPicker1.SelectionIndex

Taifun

I suggest using country flags, then the User never has to be able to read any language other than their own.

In your code, use a Block List that is synchronised with the ListPicker items.

Hi, instead of using multiple lists, maybe consider using a dictionary which will keep together the displayed list for picking from, and the associated code for each language. The language value selected from the picker can then be used to get the language code from the dictionary...

Any use?
C.

1 Like

IDK how can i do that :pensive:

This post was flagged by the community and is temporarily hidden.

Hello, I created a translation app using MIT App Inventor.
At first, the app was working fine when I used language codes (like "en", "ar", "fr") directly in the ListPicker Elements in the Designer.
Because the ListPicker values were already the codes, I didn’t need many blocks, and the translation worked.

But later I wanted to make the app more user-friendly, so I replaced the codes in the ListPicker with language names (like "English", "Arabic", "French").

Now the problem is:

The app shows the names correctly in the ListPicker.

But when I select a language and try to translate, the translation does not work for any language.

I tried to use if/then blocks to map the language names back to their codes, but still the translation doesn’t work.

I attached all my blocks in the screenshots. Could you please help me figure out what is wrong and how to fix it?




Why try to do everything at once! Just try with a couple of languages to get your blocks logic working, then you can expand.

You can greatly simplify your afterPicking event by using lists. This is working for me:

or as @chrisRoald has suggested HERE, use a dictionary.

1 Like

I'm sorry, but I'm still a beginner, 15 years old, and trying to learn. I just want an application that translates at least 30 languages. Do you mean that I should reduce the blocks in if and then statements only, or what? The blocks that I sent, should I delete everything I have in terms of translation and write what you sent? Sorry again for my many words and lack of understanding :pray:.

Get it running for 2 or 3 languages according to the example @TIMAI2 provided
And then after you got this working, add more languages...
And remember: DRY - don't repeat yourself

Taifun

Thanks bratha

Hi again, firstly I think the dictionary solution that I exampled would be much better that the If then-if then-if then blocks you have tried (they could only work if you converted all of them to an If-then-else-If-then-else block - see my second image for how that works!).
My first image shows how your When listpicker.BeforePicking block can load the dictionary, and the After Picking block places the selected language code, eg 'de', into the global variable. You can then use the Get global variable in a single RequestTranlation block, replacing my Set textbox.Text block.
This way there are no If-Then blocks at all, and the whole app will be much easier to update with new languages!

Good luck,
C.

Screenshot from 2025-09-15 10-51-23

Yes, both your and @TIMAI2 's solution do not need this and therefore follow the DRY principle

Taifun

I did the blocks you gave me, "Dictionary", but it no longer translates the languages correctly. The name of the languages is now shown instead of the code, but there is no translation.



image

image

You seem to be using Textbox2 for different purposes.

If you renamed it in the Designer for its purpose, you would not make that mistake so easily.

What do you mean by that there is an error in the text box or what and where is the error?

Textbox2 is supposed to hold the text you want to translate, right?
I'm guessing that from the way you feed it into the Request Translation block in the Translation Button Click event.

But in the ListPicker After Picking event, you replace that with the contents of global Selected Language Code, a two letter code that comes out of the dictionary lookup.

Why do you do that in the ListPicker After Picking event?

You are also setting the language list instead of the selected language code in the translate block