自訂預測網格中的欄標題

您可以使用 Power Apps 程式碼元件來自訂預測網格中的欄標題。 例如，您可以翻譯欄名稱，或新增其他內容的工具提示。

授權和角色需求

如何自訂標題

讓我們透過範例來了解這些自訂。 我們會在預測網格中新增欄名稱預測和成交的法文翻譯。

1. 建立程式碼元件，名稱為 ColumnHeader
2. 建立資源檔案並新增翻譯
3. 實作資訊清單
4. 實作元件邏輯
5. 建置並封裝元件

建立資源檔案並新增翻譯

建立程式碼元件之後，會在您指定的路徑中建立 ColumnHeader 資料夾。 讓我們建立資源檔案，並在資源檔案中新增法文翻譯。

1. 在 ColumnHeader 資料夾中建立名為 strings 的資料夾。

2. 將下列程式碼複製到新的檔案 ColumnHeader.1036.resx。

   注意

   檔案名稱中的數字 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>
   

   在上述程式碼範例中，欄名稱預測和成交會在 <data> 節點中分別覆寫為法文翻譯 Prévision 和 Gagné。

   注意

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

後續步驟

• 建置程式碼元件
• 封裝程式碼元件
• 覆寫欄標題 (預覽版)