Freigeben über

Spaltenkopfzeilen im Prognoseraster bearbeiten

  • Artikel

Sie können Spaltenüberschriften im Prognoseraster mithilfe von Power Apps Codekomponenten anpassen. Sie können beispielsweise den Spaltennamen übersetzen oder einen Tooltip für zusätzlichen Kontext hinzufügen.

Kopfzeile anpassen

Lassen Sie uns sie anhand eines Beispiels die Anpassungen verstehen. Wir fügen die französische Übersetzung für die Spaltennamen Forecast und Won im Prognoseraster hinzu.

  1. Erstellen Sie eine Codekomponente mit dem Namen ColumnHeader
  2. Erstellen Sie eine Ressourcendatei und fügen Sie Übersetzungen hinzu
  3. Implementieren des Manifests
  4. Implementieren Sie die Codekomponentenlogik
  5. Erstellen und Bereitstellen des Pakets

Erstellen Sie eine Ressourcendatei und fügen Sie Übersetzungen hinzu

Nachdem Sie die Codekomponente erstellt haben, wird in dem von Ihnen angegebenen Pfad der Ordner ColumnHeader erstellt. Lassen Sie uns eine Ressourcendatei erstellen und die französischen Übersetzungen in der Ressourcendatei hinzufügen.

  1. Erstellen Sie einen neuen strings-Ordner im ColumnHeader-Ordner.

  2. Kopieren Sie den folgenden Code in eine neue Datei ColumnHeader.1036.resx.

    Notiz

    Die Zahl 1036 im Dateinamen ist der Sprachcode für Französisch. Eine Liste der Sprachcodes finden Sie unter diesem Artikel.

    <?xml version="1.0" encoding="utf-8"?>
<root>

  <xsd:schema id="root" xmlns="" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:msdata="urn:schemas-microsoft-com:xml-msdata">
    <xsd:import namespace="http://www.w3.org/XML/1998/namespace" />
    <xsd:element name="root" msdata:IsDataSet="true">
      <xsd:complexType>
        <xsd:choice maxOccurs="unbounded">
          <xsd:element name="metadata">
            <xsd:complexType>
              <xsd:sequence>
                <xsd:element name="value" type="xsd:string" minOccurs="0" />
              </xsd:sequence>
              <xsd:attribute name="name" use="required" type="xsd:string" />
              <xsd:attribute name="type" type="xsd:string" />
              <xsd:attribute name="mimetype" type="xsd:string" />
              <xsd:attribute ref="xml:space" />
            </xsd:complexType>
          </xsd:element>
          <xsd:element name="assembly">
            <xsd:complexType>
              <xsd:attribute name="alias" type="xsd:string" />
              <xsd:attribute name="name" type="xsd:string" />
            </xsd:complexType>
          </xsd:element>
          <xsd:element name="data">
            <xsd:complexType>
              <xsd:sequence>
                <xsd:element name="value" type="xsd:string" minOccurs="0" msdata:Ordinal="1" />
                <xsd:element name="comment" type="xsd:string" minOccurs="0" msdata:Ordinal="2" />
              </xsd:sequence>
              <xsd:attribute name="name" type="xsd:string" use="required" msdata:Ordinal="1" />
              <xsd:attribute name="type" type="xsd:string" msdata:Ordinal="3" />
              <xsd:attribute name="mimetype" type="xsd:string" msdata:Ordinal="4" />
              <xsd:attribute ref="xml:space" />
            </xsd:complexType>
          </xsd:element>
          <xsd:element name="resheader">
            <xsd:complexType>
              <xsd:sequence>
                <xsd:element name="value" type="xsd:string" minOccurs="0" msdata:Ordinal="1" />
              </xsd:sequence>
              <xsd:attribute name="name" type="xsd:string" use="required" />
            </xsd:complexType>
          </xsd:element>
        </xsd:choice>
      </xsd:complexType>
    </xsd:element>
  </xsd:schema>
  <resheader name="resmimetype">
    <value>text/microsoft-resx</value>
  </resheader>
  <resheader name="version">
    <value>2.0</value>
  </resheader>
  <resheader name="reader">
    <value>System.Resources.ResXResourceReader, System.Windows.Forms, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089</value>
  </resheader>
  <resheader name="writer">
    <value>System.Resources.ResXResourceWriter, System.Windows.Forms, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089</value>
  </resheader>
  <data name="Forecast" xml:space="preserve">
    <value>Prévision</value>
  </data>
  <data name="Won" xml:space="preserve">
    <value>Gagné</value>
  </data>
</root>

    Im obigen Codebeispiel werden die Spaltennamen für Forecast und Won mit den französischen Übersetzungen Prévision und Gagné jeweils im <data>-Knoten überschrieben.

    Notiz

    Geben Sie im Parameter name den exakten Spaltennamen an, den Sie im Schritt Layout der Prognose konfiguriert haben.

    Ein Screenshot der Spaltennamen im Schritt **Layout** der Prognosekonfiguration

    Wenn Sie den Spaltennamen in weitere Sprachen übersetzen möchten, erstellen Sie eine Ressourcendatei für jede Sprache, in die Sie übersetzen möchten. Stellen Sie sicher, dass der Name der Ressourcendatei die folgende Namenskonvention verwendet:

    filename.languagecode.resx  
**Example file name for German:** ColumnHeader.1031.resx

Implementieren des Manifests

Als Nächstes ändern wir die Manifestdatei, um die Eigenschaft anzugeben, die wir überschreiben. In unserem Beispiel überschreiben wir die Eigenschaft ColumnName . Wir geben auch den Pfad zu der Ressourcendatei an, die den übersetzten Text enthält.

  1. Öffnen Sie die Datei ControlManifest.Input.XML.

  2. Suchen Sie den Knoten property, und ersetzen Sie sie durch den folgenden Code:

    <property name="columnName" display-name-key="Property_Display_Key" description-key="Property_Desc_Key" of-type="SingleLine.Text" usage="bound" required="true" />

  3. Aktualisieren Sie den <resources> -Knoten, um den Pfad zur Ressourcendatei anzugeben, die die französischen Übersetzungen enthält:

    <resources>
  <code path="index.ts" order="1"/>
  <!-- UNCOMMENT TO ADD MORE RESOURCES
  <css path="css/ColumnHeader.css" order="1" />
  -->
  <resx path="strings/ColumnHeader.1036.resx" version="1.0.0" />
</resources>

    Der <resx path>-Knoten enthält den Ressourcendateipfad. Im vorherigen Codebeispiel haben wir die Ressourcendatei für die französische Sprache hinzugefügt. Wenn Sie Übersetzungen für andere Sprachen haben, fügen Sie auch den Ressourcendateipfad für diese Sprachen hinzu.

Implementieren Sie die Codekomponentenlogik

Nun, lassen Sie uns die Logik für die Codekomponente in der Datei index.ts implementieren.

  1. Öffnen Sie die Datei index.ts.

  2. Fügen Sie die folgenden Zeilen in der Methode updateView hinzu:

    public updateView(context: ComponentFramework.Context<IInputs>): void
    {
        // Add code to update control view
        const colName = (context.parameters.columnName && context.parameters.columnName.raw) || "";
        this._container.innerHTML = context.resources.getString(colName);
    }

Nächste Schritte,