Créer une application multilingue

2023-09-29

Dans cet article, vous apprendrez à créer une application multilingue avec une expérience localisée. Avec cette méthode, vous pouvez utiliser des composants d’application canevas et rendre les traductions disponibles dans une application à l’aide d’une syntaxe de formule uniforme.

Important

La méthode décrite dans cet article utilise des composants pour les applications canevas qui sont en version préliminaire publique. Pour plus d’informations, voir Créer un composant pour les applications canevas

Créer un composant de traduction

Lorsque vous travaillez avec une application multilingue, la première étape consiste à créer un composant réutilisable pour la traduction. Dans ce composant, vous stockerez une table qui servira de dictionnaire de toutes les traductions dont vous aurez besoin. Une propriété de sortie sera utilisée pour fournir des chaînes de sortie à partir de cette table de dictionnaire en fonction de la langue de l’utilisateur exécutant l’application qui utilise ce composant.

Connectez-vous à Power Apps.
Sélectionnez Applications dans le volet de gauche.
En dessous de Applications, sélectionnez Bibliothèques de composants (version préliminaire).
Sélectionnez + Nouvelle bibliothèque de composants (version préliminaire).
Saisissez un nom, tel que "Composants de traduction", et sélectionnez Créer pour ouvrir le composant dans Power Apps Studio.
Renommez "Component1" en sélectionnant ... dans le volet de gauche, puis sélectionnez Renommer comme "Composant de traduction".
Dans le volet des propriétés sur le côté droit de l’écran, sélectionnez + Nouvelle propriété personnalisée.

Définissez les valeurs de propriété suivantes :

Nom de la propriété	valeur
Nom d’affichage	Langage
Nom	Langage
Description	La langue dans laquelle vous souhaitez traduire le texte.
Type de propriété	Entrée
Type de données	Texte

Cochez la case Augmenter OnReset lorsque la valeur change.
Sélectionnez Créer.

Nonte

Cette propriété d’entrée recevra l’ID de paramètres régionaux actuel (LCID) de l’utilisateur connecté.
Dans le volet des propriétés sur le côté droit de l’écran, sélectionnez + Nouvelle propriété personnalisée.
Définissez les valeurs de propriété suivantes :

Nom de la propriété valeur

Nom d’affichage Intitulés

Nom Intitulés

Description Étiquettes traduites.

Type de propriété Sortie

Type de données Enregistrer
Sélectionnez Créer.

Nonte

Cette propriété de sortie expose les Étiquettes traduites en fonction de l’ID de paramètres régionaux d’entrée.
Dans le coin supérieur gauche de l’écran, sélectionnez la liste déroulante des propriétés et choisissez la propriété OnReset du composant.
Copiez et collez la formule suivante dans la barre de formule pour la propriété OnReset.
```
Set(
 varTranslations,
 Table(
         {
             Language: "en-us",
             Labels: {
                 Title: "UI Tips for building canvas apps",
                 JobTitle: "Power Platform Specialist"
             }
         },
         {
             Language: "pt-br",
             Labels: {
                 Title: "Dicas de UI para construir canvas apps",
                 JobTitle: "Especialista de Power Platform"
             }
         }
     )
    )
```
La formule utilise la fonction Set() pour créer une table avec les Étiquettes dans différentes langues comme dictionnaire. Pour personnaliser cette table en tant que dictionnaire pour vos traductions, modifiez les noms de contrôle tels que Titre, Titre d’emploi, Plateforme, Fermer, Ouvert, Annuler, etc. Vous pouvez ajouter ou supprimer des traductions pour les noms de contrôle en fonction des besoins de votre entreprise.

Le tableau doit également contenir une entrée pour chaque langue prise en charge par votre application. Chaque entrée aura une propriété Étiquettes qui contiendra le contenu traduit de tous les boutons, entrées et Étiquettes possibles dans votre application.
Dans le coin supérieur gauche de l’écran, sélectionnez la liste déroulante des propriétés et choisissez la propriété Étiquettes du composant.
Copiez et collez la formule suivante dans la barre de formule pour la propriété Étiquettes.
```
   LookUp(
    varTranslations,
    Language = Lower(
        Coalesce(
            Self.Language,
            Language()
        )
    )).Labels
```
La formule trouve la bonne entrée de traduction en fonction de l’entrée Language en utilisant la fonction Lookup(). Dans le cas où la langue n’est pas définie, la formule utilise la langue de l’utilisateur actuel comme filtre à travers une fonction Coalesce.
Sélectionnez Fichier ->Enregistrer pour enregistrer la bibliothèque de composants.
Sélectionner Publier pour publier la bibliothèque de composants.

Astuce

Pour en savoir plus sur la création, l’enregistrement et la publication d’une bibliothèque de composants, accédez à Créer un exemple de bibliothèque de composants

Nom de la propriété	valeur
Nom d’affichage	Intitulés
Nom	Intitulés
Description	Étiquettes traduites.
Type de propriété	Sortie
Type de données	Enregistrer

Votre bibliothèque de composants de traduction est créée, enregistrée et publiée pour être utilisée.

Utilisez le composant de traduction dans votre application

Auparavant, vous avez créé la bibliothèque de composants de traduction pour la réutilisation. Dans cette section, vous allez créer une application qui utilise la bibliothèque de composants de traduction et démontrer la traduction linguistique en fonction de la langue sélectionnée.

Commencez par créer une application canevas avec la disposition Téléphone.
À gauche de l’écran, sélectionnez + (Insérer).
En bas à gauche de l’écran, sélectionnez Obtenez plus de composants.
Sectionnez composant de traduction.

Nonte

Le nom peut être différent si vous avez enregistré la bibliothèque de composants créée précédemment avec un nom différent.
Cliquez sur Importer.
À gauche de l’écran, sélectionnez + (Insérer).
En dessous de Composants de la bibliothèque, sélectionnez Composant de traduction pour ajouter le composant à cette application.
À gauche de l’écran, sélectionnez la vue arborescente.
Sectionnez le composant de traduction.
Dans le coin supérieur gauche de l’écran, sélectionnez la liste déroulante des propriétés et choisissez la propriété Visible du composant.
Réglez la valeur de la propriété Visible à faux pour rendre le composant invisible sur l’application.
En dessous de Entrée dans la liste des champs, sélectionnez Basculer.
Dans le coin supérieur gauche de l’écran, sélectionnez la liste déroulante des propriétés et choisissez la propriété OnChange du composant.
Mettre à jour la formule de propriété OnCheck du contrôle Bouton à bascule à ce qui suit.
```
    Set(varLanguage,"pt-br")
```
Dans cette formule, la bascule définit une variable appelée varLanguage avec la valeur de "pt-br" en utilisant la fonction Set(), pour le code de langue portugais (BR).
Mettre à jour la formule de propriété OnUncheck du contrôle Bouton à bascule à ce qui suit.
```
    Set(varLanguage,"en-us")
```
Dans cette formule, la bascule définit une variable appelée varLanguage avec la valeur de "en-us" en utilisant la fonction Set(), pour le code de langue anglaise (US).
À gauche de l’écran, sélectionnez le composant de traduction.
Dans le coin supérieur gauche de l’écran, sélectionnez la liste déroulante des propriétés et choisissez la propriété Language du composant.
Définir la valeur de la formule pour la propriété Language à varLanguage. La variable varLanguage est déterminé par la bascule configurée précédemment. Lorsque la bascule est cochée, la langue est définie sur "pt-br". Lorsqu’elle n’est pas cochée, la langue est définie sur "en-us".
À gauche de l’écran, sélectionnez + (Insérer).
Sélectionnez Étiquette de texte.
Mettez à jour le nom du contrôle d’étiquette de Titre du côté droit de l’écran en utilisant le volet des propriétés.
Sélectionner Étiquette de texte à nouveau pour ajouter une Étiquette supplémentaire.
Mettez à jour le nom du contrôle d’étiquette en Titre d’emploi.
Met les Titre, et Titre d’emploi sous le contrôle Bouton à bascule afin que les deux Étiquettes soient visibles.
Met la propriété Texte pour les Étiquettes Titre, et Titre d’emploi du coin supérieur gauche de l’écran aux suivantes.

Label Formula

Civilité 'Translation component_1'.Labels.Title

Intitulé 'Translation component_1'.Labels.JobTitle

Nonte

Remplacer ’Composant de traduction_1’ dans cette formule au nom du composant dans votre application, s’il est différent.

De même, vous pouvez utiliser différentes Étiquettes et propriétés, telles que définies dans le composant que vous avez créé précédemment pour transmettre davantage de valeurs de propriété. Par exemple, en plus de Titre, et Titre d’emploi, vous pouvez créer plus de propriétés telles que Description, ou alors Instructions dans la bibliothèque de composants avec le texte traduit. Et puis, utilisez ces propriétés sur les Étiquettes respectives, comme ’Composant de traduction_1’.Étiquettes.Description, ou alors ’Composant de traduction_1’.Étiquettes.Instructions.
Sélectionnez Fichier ->Enregistrer, mettez à jour le nom de votre application, puis sélectionnez Enregistrer pour enregistrer votre application. Pour plus d’informations : Enregistrer et Publier une application

Label	Formula
Civilité	`'Translation component_1'.Labels.Title`
Intitulé	`'Translation component_1'.Labels.JobTitle`

Testez votre application avec la traduction linguistique

Votre application utilise maintenant le composant de traduction. Accédez à Power Apps et sélectionnez l’application à exécuter.

Lorsque la bascule est sélectionnée, la langue est modifiée en portugais (BR) pour les Étiquettes. Lorsqu’elle n’est pas cochée, la langue est redéfinie sur anglais (US).

Démonstration de traduction.

Avec cette approche, vous pouvez désormais créer votre propre composant avec le dictionnaire de traductions qui correspond aux besoins de votre entreprise. Et puis, créez plus d’applications canevas qui utilisent le composant qui donne aux utilisateurs professionnels la possibilité d’utiliser différentes langues.

Voir aussi

Ajouter et configurer des contrôles
Comprendre les variables
Référence sur les formules

Partager via

Créer une application multilingue

Créer un composant de traduction

Utilisez le composant de traduction dans votre application

Testez votre application avec la traduction linguistique

Voir aussi

Commentaires

Ressources supplémentaires