ปรับแต่งส่วนหัวคอลัมน์ในกริดการคาดการณ์

คุณสามารถปรับแต่งส่วนหัวคอลัมน์ในกริดการคาดการณ์โดยใช้ส่วนประกอบของโค้ด Power Apps ตัวอย่างเช่น คุณสามารถแปลชื่อคอลัมน์หรือเพิ่มคำแนะนำเครื่องมือสำหรับบริบทเพิ่มเติม

ข้อกำหนดสิทธิการใช้งานและบทบาท

ชนิดข้อกำหนด	คุณต้องมี
ใบอนุญาต	Dynamics 365 Sales Premium หรือ Dynamics 365 Sales Enterprise ข้อมูลเพิ่มเติม: การกำหนดราคา Dynamics 365 Sales
Security role	ผู้ดูแลระบบหรือผู้กำหนดค่าระบบ ข้อมูลเพิ่มเติม: บทบาทความปลอดภัยที่กำหนดไว้ล่วงหน้าสำหรับ Sales

วิธีการปรับแต่งส่วนหัว

มาทำความเข้าใจกับการปรับแต่งด้วยตัวอย่างกัน เราจะเพิ่มการแปลภาษาฝรั่งเศสสำหรับชื่อคอลัมน์ การคาดการณ์ และ ชนะ ในกริดการคาดการณ์

1. สร้างส่วนประกอบของโค้ด ที่ชื่อ ColumnHeader
2. สร้างไฟล์ทรัพยากรและเพิ่มคำแปล
3. ใช้งานไฟล์กำกับ
4. ใช้งานตรรกะส่วนประกอบ
5. สร้างและสร้างแพคเกจส่วนประกอบ

สร้างไฟล์ทรัพยากรและเพิ่มคำแปล

หลังจากที่คุณสร้างส่วนประกอบของโค้ดแล้ว โฟลเดอร์ ColumnHeader จะถูกสร้างขึ้นในพาธที่คุณระบุ มาสร้างไฟล์ทรัพยากรและเพิ่มคำแปลภาษาฝรั่งเศสในไฟล์ทรัพยากรกัน

1. สร้างโฟลเดอร์ที่ชื่อ strings ใต้โฟลเดอร์ ColumnHeader

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>
   

   ในตัวอย่างโค้ดด้านบน ชื่อคอลัมน์สำหรับ การคาดการณ์ และ ชนะ จะถูกแทนที่ด้วยคำแปลภาษาฝรั่งเศส Prévision และ Gagné ตามลำดับในโหนด <data>

   หมายเหตุ

   ในพารามิเตอร์ 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);
       }
   

ขั้นตอนถัดไป

• สร้างส่วนประกอบของโค้ด
• สร้างแพคเกจส่วนประกอบของโค้ด
• แทนที่ส่วนหัวคอลัมน์ (พรีวิว)