Multilingual Power Apps p2

This is Multilingual Power Apps p2 and it is continuation of Translation topic you can read part 1 here.

Content:

• Infinity Form approach
• Setup
  • Collection OnStart
  • Galleries configuration
  • YesNo control
  • Gathering Data
  • Submitting data
• Summary

Result of configuration:

---

Infinity Form approach

HINT
If you want to check perfect explanation what is Infinity Form you need to check out Clarissa Gillingham blog

The idea of the Infinity Form is with me for a while it hit me when I was asked to build inspection App with over 8 pages A4 of questions type of yesNo or scale from 0-5 and each question should be translated… I knew that don’t want to do it via Form control as it would be nightmare to change anything…

Let’s start Multilingual Power Apps p2 with description of the setup of Infinity Form of course the main reason is to have the option to quickly and easily translate App content.

---

Setup

---

Collection OnStart

For the demonstration of this idea I created simple collection with only couple properties:

• Id – in my case number which will be question Id in the “Form” and it will be used to gather/save data
• Type – will define if the control displaying in the row will be InputText or other ^^
• Code – language code, key to filter of the collection data
• HintLabel – Text displaying in hint of input controls
• Label – What you will see at the top of the row = content/question
• Hint – What will display at the bottom to give more context for the User

---

Galleries configuration

When the collection is ready and add to the OnStart remember to run OnStart to populate data. Additionally instead of using drop down I’m adding language collection to the horizontal gallery and add there button with display of language Name.

Next is add new vertical gallery.

HINT
Infinity Form works the best with the flexible height galleries as some hints or labels can take more space than others and flexible galleries resolve a lot issues with formatting.

Add to Gallery Items filter via the selection of the language:

NOTE
As it is demonstration I’m not using variables but would strongly recommend to use variable for the language selection instead of Gallery.Selected.

Labels and InputText are mapped as above with corresponding collection information.

Additionally the TextInput visible is checking if ThisItem.Type=”InputText” result of the current configuration should works like this:

---

YesNo control

I left the YesNo control configuration separately as it is a little bit more complex. First of all this control is using dictionary connected with Language collection:

Next I’m adding radio control to gallery and for the Items of it adding following:

LookUp(colLanguage,Code=galLanguages.Selected.Code,YesNo)

NOTE
To make this part of configuration easier change the Type of first question to YesNo that will hide TextInput control and enable manipulation of radio control easier.

Next I set radio Default to:

Last(
LookUp(colLanguage,Code=galLanguages.Selected.Code,YesNo)
).Value

I’m using colLangauge to get the array of YesNo value and want to have the second/last value to be selected as Default.

Last bit is to set visibility to be ThisItem.Type = “YesNo”. Result should be:

---

Gathering Data

I could extend the collection with additional column for Answers but that would only work for selected language and if User would change language the Answers would vanish… That would create bad UX.

To gather data I created collection containing two columns:

HINT
Keeping this as separate information can also be a base to apply validation. It is easy to check if all questions are answered and option to Submit should be enable or not.

If you setup the collection to store answer on the OnChange property of the TextInput and Radio control add:

With({
    varAnswer:LookUp(colAnswers,Id=ThisItem.Id),
    varRadio:rYesNo.Selected.Value
    },
        Patch(colAnswers,varAnswer,
        {Answer:
            If(varRadio="Yes"||varRadio="Tak",1,0)
        })
    )

And Correct Radio Control Default:

With({ 
varAnswer:LookUp(colAnswers,Id=ThisItem.Id,Answer), varYesNo:LookUp(colLanguage,Code=galLanguages.Selected.Code,YesNo) },
  If(varAnswer="1", 
    First(varYesNo).Value, 
    Last(varYesNo).Value)
    )

With that I handle empty value of Answers and switching to the correct value in selected language.

HINT
You should learn With function as it is great way to make your code better during writing and when you will need to update App after some time it will be much easier to understood formulas and your intention.

---

Submitting data

The submission of data is also important part of the multilingual Applications as I wanted to save data independent on the language which was selected.

I manage to handle that with Path and Lookups:

Patch(RequestList,Defaults(RequestList),
{
    Title:LookUp(colAnswers,Id=1,Answer),
    Description:LookUp(colAnswers,Id=2,Answer),
    TeamsNeeded:Value(LookUp(colAnswers,Id=3,Answer))
})

Knowing the columns I can lookup data to correct Answer and result is:

Finally after adding all elements App should works as follow:

---

Summary

This is the end of the Multilingual Power Apps p2 and (at least for now) Translation topic but for sure not the end of for Infinity Form.

The key value is that with such setup you can customize the App super fast. This approach is also great for performance and future work with solution as change in one label can propagate to display of 20 or more questions.

Hope you enjoyed Multilingual Power Apps p2 so I did and it will be beneficial for you in your journey.