Freigeben über


Eine mehrsprachige App erstellen

In diesem Artikel erfahren Sie, wie Sie eine mehrsprachige App mit lokalisierter Erfahrung erstellen. Mit dieser Methode können Sie Canvas-App-Komponenten verwenden und Übersetzungen mit einer einheitlichen Formelsyntax in einer App verfügbar machen.

Wichtig

Die in diesem Artikel beschriebene Methode verwendet Komponenten für Canvas-Apps, die sich in der öffentlichen Vorschau befinden. Weitere Informationen finden Sie unter Benutzerdefinierte Komponente für Canvas-Apps

Eine neue Übersetzungskomponente erstellen

Bei der Arbeit mit einer mehrsprachigen App besteht der erste Schritt darin, eine wiederverwendbare Komponente für die Übersetzung zu erstellen. In dieser Komponente speichern Sie eine Tabelle, die als Wörterbuch aller benötigten Übersetzungen dient. Eine Ausgabeeigenschaft wird verwendet, um Ausgabezeichenfolgen aus dieser Wörterbuchtabelle basierend auf der Sprache des Benutzers bereitzustellen, der die App ausführt, die diese Komponente verwendet.

  1. Melden Sie sich bei Power Apps an.

  2. Wählen Sie im linken Bereich Apps aus.

  3. Unter Apps, wählen Sie Komponentenbibliotheken (Vorschau).

    Komponentenbibliotheken auswählen (Vorschauversion)

  4. Wählen Sie + Neue Komponentenbibliothek (Vorschauversion).

  5. Geben Sie einen Namen ein, z. B. Übersetzungskomponenten, und wählen Sie Erstellen, um die Komponente in Power Apps Studio zu öffnen.

  6. Benennen Sie Komponente1 um, indem Sie ... im linken Bereich wählen und wählen Sie dann Umbenennen als Übersetzungskomponente.

    Komponente umbenennen

  7. Wählen Sie im Eigenschaftenbereich auf der rechten Seite des Bildschirms + Neue benutzerdefinierte Eigenschaft.

  8. Legen Sie die folgenden Eigenschaftswerte fest:

    Eigenschaftsname Wert
    Anzeigename Sprache
    Name Sprache
    Beschreibung Die Sprache, in die Sie den Text übersetzen möchten.
    Eigenschaftstyp Eingabe
    Datentyp Text
  9. Wählen Sie das Erhöhen Sie OnReset, wenn sich der Wert ändert Kontrollkästchen.

    Neue benutzerdefinierte Eigenschaft

  10. Wählen Sie Erstellen aus.

    Hinweis

    Diese Eingabeeigenschaft erhält die aktuelle Gebietsschema-ID (LCID) des angemeldeten Benutzers.

  11. Wählen Sie im Eigenschaftenbereich auf der rechten Seite des Bildschirms + Neue benutzerdefinierte Eigenschaft.

  12. Legen Sie die folgenden Eigenschaftswerte fest:

    Eigenschaftsname Wert
    Anzeigename Beschriftungen
    Name Beschriftungen
    Beschreibung Übersetzte Beschriftung.
    Eigenschaftstyp Ausgabe
    Datentyp Datensatz

    Neue Beschriftungseigenschaft

  13. Wählen Sie Erstellen aus.

    Hinweis

    Diese Ausgabeeigenschaft macht die übersetzten Beschriftungen basierend auf der Eingabegebietsschema-ID verfügbar.

  14. Wählen Sie oben links auf dem Bildschirm das Dropdown-Menü der Eigenschaftsliste und dann die Option OnReset Eigenschaft für die Komponente.

    OnReset-Eigenschaft für die Komponente

  15. Kopieren Sie die folgende Formel und fügen Sie sie in die Bearbeitungsleiste für die OnReset Eigenschaft hinzu.

    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"
                 }
             }
         )
        )
    

    Die Formel verwendet Funktion einstellen () zum Erstellen von einer Tabelle mit den Beschriftungen in verschiedenen Sprachen als Wörterbuch. Um diese Tabelle als Wörterbuch für Ihre Übersetzungen anzupassen, ändern Sie die Namen der Steuerelemente wie Titel, Berufsbezeichnung, Plattform, Schließen, Öffnen, Stornieren, und so weiter. Je nach Ihren geschäftlichen Anforderungen können Sie Übersetzungen für Steuernamen hinzufügen oder entfernen.

    Die Tabelle sollte auch einen Eintrag für jede Sprache enthalten, die Ihre App unterstützt. Jeder Eintrag hat eine Beschriftungs-Eigenschaft, die den übersetzten Inhalt aller möglichen Schaltflächen, Eingaben und Beschriftungen in Ihrer App enthält.

  16. Wählen Sie oben links auf dem Bildschirm das Dropdown-Menü der Eigenschaftsliste und dann die Option Beschriftung Eigenschaft für die Komponente.

    Beschriftungs-Eigenschaft für die Komponente

  17. Kopieren Sie die folgende Formel und fügen Sie sie in der Formelleiste für die Eigenschaft Beschriftungen ein.

       LookUp(
        varTranslations,
        Language = Lower(
            Coalesce(
                Self.Language,
                Language()
            )
        )).Labels
    

    Die Formel findet den richtigen Übersetzungseintrag auf der Grundlage der Eingabe Language unter Verwendung der Funktion Lookup(). Falls die Sprache nicht eingestellt ist, verwendet die Formel die Sprache des aktuellen Benutzers als Filter durch die Funktion Zusammenfügen.

  18. Wählen Sie Datei -> Speichern, um die Komponentenbibliothek zu speichern.

  19. Wählen Sie Veröffentlichen, um Ihre Komponentenbibliothek zu veröffentlichen.

    Tipp

    Weitere Informationen zum Erstellen, Speichern und Veröffentlichen von Komponentenbibliotheken finden Sie unter Erstellen Sie eine Beispielkomponentenbibliothek

Ihre Übersetzungskomponentenbibliothek wird erstellt, gespeichert und zur Verwendung veröffentlicht.

Verwenden Sie die Übersetzungskomponente in Ihrer App

Zuvor haben Sie die Übersetzungskomponentenbibliothek zur Wiederverwendung erstellt. In diesem Abschnitt erstellen Sie eine App, die die Übersetzungskomponentenbibliothek verwendet, und demonstrieren die Sprachübersetzung basierend auf der ausgewählten Sprache.

  1. Beginnen Sie mit der Erstellung einer leere Canvas-App mit Telefon-Layout.

  2. Wählen Sie auf der linken Seite der Anzeige + (Insert).

  3. Wählen Sie unten links auf der Anzeige Holen Sie sich mehr Komponenten.

  4. Wählen Sie Übersetzungskomponente.

    Übersetzungskomponentenbibliothek auswählen

    Hinweis

    Der Name kann anders sein, wenn Sie die zuvor erstellte Komponentenbibliothek unter einem anderen Namen gespeichert haben.

  5. Wählen Sie Importieren aus.

  6. Wählen Sie auf der linken Seite der Anzeige + (Insert).

  7. Unter Bibliothekskomponenten wählen Sie Übersetzungskomponente, um die Komponente zu dieser App hinzuzufügen.

  8. Wählen Sie auf der linken Seite der Anzeige die Baumansicht.

  9. Wählen Sie die Übersetzungskomponente.

  10. Wählen Sie oben links auf dem Bildschirm das Dropdown-Menü der Eigenschaftsliste und dann die Visible Eigenschaft für die Komponente.

  11. Stellen Sie den Wert der Eigenschaft Visible auf false, um die Komponente in der App zu verbergen.

  12. Unter Eingang wählen Sie in der Liste der Steuerelemente Umschalten.

  13. Wählen Sie oben links auf dem Bildschirm das Dropdown-Menü der Eigenschaftsliste und dann die OnChange Eigenschaft für die Komponente.

  14. Aktualisieren Sie die Formel für die OnCheck-Eigenschaft des Umschalt-Steuerelements wie folgt.

        Set(varLanguage,"pt-br")
    

    In dieser Formel setzt der Umschalter eine Variable namens varSprache mit dem Wert von pt-br mit der Funktion Einstellen(), für portugiesischen (BR) Sprachcode.

  15. Aktualisieren Sie die Formel für die OnUncheck-Eigenschaft des Umschalt-Steuerelements wie folgt.

        Set(varLanguage,"en-us")
    

    In dieser Formel setzt der Umschalter eine Variable namens varSprache mit dem Wert von en-us mit der Funktion Einstellen(), für englisch (US) Sprachcode.

  16. Wählen Sie auf der linken Seite der Anzeige die Übersetzungskomponente.

  17. Wählen Sie oben links auf dem Bildschirm das Dropdown-Menü der Eigenschaftsliste und dann die Sprachen Eigenschaft für die Komponente.

  18. Legen Sie den Formelwert für die Sprache Eigenschaft auf varLanguage. Die Variable varSprache wird durch den zuvor konfigurierten Umschalter bestimmt. Wenn der Schalter aktiviert ist, wird die Sprache auf pt-br gesetzt. Wenn die Option deaktiviert ist, wird die Sprache auf en-us gesetzt.

  19. Wählen Sie auf der linken Seite der Anzeige + (Insert).

  20. Textbeschriftung auswählen.

  21. Aktualisieren Sie den Namen des Beschriftungs-Steuerelements auf Titel auf der rechten Seite des Bildschirms über den Eigenschaftenbereich.

  22. Wählen Sie Textbeschriftung erneut, um eine weitere Beschriftung hinzuzufügen.

  23. Aktualisieren Sie den Namen des Beschriftungs-Steuerelements auf Berufsbezeichnung.

  24. Legen Sie die Beschriftung Titel und Berufsbezeichnung Beschriftungen unter dem Umschaltelement fest, sodass beide Beschriftungen sichtbar sind.

  25. Legen Sie die Text Eigenschaft für Titel und Berufsbezeichnung Beschriftungen von der oberen linken Seite des Bildschirms auf die folgenden fest.

    Label Formel
    Titel 'Translation component_1'.Labels.Title
    JobTitle 'Translation component_1'.Labels.JobTitle

    Hinweis

    Ersetzen Sie Übersetzungskomponente_1 in dieser Formel mit dem Namen der Komponente in Ihrer App, falls abweichend.

    Ebenso können Sie verschiedene Beschriftungen und Eigenschaften verwenden, wie in der zuvor erstellten Komponente definiert, um mehr Eigenschaftswerte zu übergeben. Zum Beispiel zusätzlich zu Titel und Berufsbezeichnung, können Sie weitere Eigenschaften erstellen, wie Beschreibung, oder Anleitung in der Komponentenbibliothek mit dem übersetzten Text. Und dann verwenden Sie solche Eigenschaften auf den jeweiligen Beschriftungen wie 'Übersetzungskomponente_1'.Labels.Description oder 'Übersetzungskomponente_1'.Labels.Instructions.

  26. Wählen Sie Datei -> Speichern, aktualisieren Sie den Namen für Ihre App und wählen Sie dann Speichern, um Ihre App zu speichern. Weitere Informationen: Speichern und veröffentlichen einer App

Testen Sie Ihre App mit Sprachübersetzung

Nun verwendet Ihre App die Übersetzungskomponente. Gehen Sie zu Power Apps und wählen Sie die auszuführende App aus.

Wenn der Schalter ausgewählt wird, wird die Sprache für die Beschriftungen auf Portugiesisch (BR) geändert. Wenn die Option deaktiviert ist, wird die Sprache zurück auf Englisch (US) gesetzt.

Übersetzungs-Demo

Mit diesem Ansatz können Sie jetzt Ihre eigene Komponente mit dem Übersetzungswörterbuch erstellen, das Ihren Geschäftsanforderungen entspricht. Erstellen Sie dann weitere Canvas-Apps, die die Komponente verwenden, die den Geschäftsbenutzern die Möglichkeit gibt, verschiedene Sprachen zu verwenden.

Siehe auch

Steuerelemente hinzufügen und konfigurieren
Grundlegendes zu Variablen
Formelverweis