予測グリッドの列ヘッダーをカスタマイズする

Power Apps コード コンポーネントを使用して、予測グリッドの列ヘッダーをカスタマイズできます。 たとえば、列名を翻訳したり、コンテキストを追加するためのヒントを追加したりできます。

ライセンスとロールの要件

ヘッダーをカスタマイズする方法

例をもとにカスタマイズについて説明していきます。 列名の予測および受注のフランス語翻訳を予測グリッドに追加します。

1. ColumnHeader という名前のコード コンポーネントを作成する
2. リソース ファイルを作成して翻訳を追加する
3. マニフェストを実装する
4. コンポーネント ロジックを実装する
5. コンポーネントをビルドおよびパッケージする

リソース ファイルを作成して翻訳を追加する

コード コンポーネントを作成した後に、指定したパスに ColumnHeader フォルダーが作成されます。 リソース ファイルを作成し、フランス語の翻訳をリソース ファイルに追加しましょう。

1. ColumnHeader フォルダーの下に strings という名前のフォルダーを作成します。

2. 次のコードを新しいファイル、ColumnHeader.1036.resx に貼り付けます。

   Note

   ファイル名の数字 1036 は、フランス語の言語コードです。 言語コードのリストについては、この記事を参照してください。

   <?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>
   

   上記のコード サンプルでは、予測および受注 の列名がフランス語翻訳で上書きされ、Prévision および Gagné はそれぞれ <data> ノードにあります。

   Note

   name パラメーターで、予測のレイアウト ステップで構成した正確な列名を指定します。

   

   列名を追加の言語に翻訳する場合は、翻訳先の言語ごとにリソース ファイルを作成します。 リソース ファイル名が次の名前付け規則を使用していることを確認します:

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

マニフェストを実装する

次に、マニフェスト ファイルを変更して、上書きするプロパティを指定します。 この例では、ColumnName プロパティを上書きしています。 また、翻訳されたテキストを含むリソース ファイルへのパスも指定します。

1. ControlManifest.Input.XML ファイルを開きます。

2. property ノードを検索し、そのまま次のコードに置き換えます:

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

3. <resources> ノードを更新して、フランス語の翻訳を含むリソース ファイルへのパスを指定します:

   <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>
   

   <resx path> ノードには、リソース ファイルのパスが含まれています。 前のコード サンプルでは、フランス語のリソース ファイルを追加しました。 他の言語の翻訳がある場合は、それらの言語のリソース ファイル パスも追加します。

コンポーネント ロジックを実装する

index.ts ファイルのコンポーネント ロジックを実装するコードを追加しましょう。

1. index.ts ファイルを開きます。

2. updateView メソッドに次の行を追加します:

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

次の手順

• コード コンポーネントを構築する
• コード コンポーネントをパッケージ化する
• 列ヘッダーを上書きする (プレビュー)