Personalizza le intestazioni di colonna nella griglia di previsione

Puoi personalizzare le intestazioni di colonna nella griglia di previsione utilizzando i componenti di codice di Power Apps. Ad esempio, puoi tradurre il nome della colonna o aggiungere una descrizione del comando per un contesto aggiuntivo.

Requisiti di licenza e ruoli

Come personalizzare l'intestazione

Comprendiamo meglio le personalizzazioni tramite un esempio. Aggiungeremo la traduzione francese per i nomi delle colonne Previsione e Vinta nella griglia delle previsioni.

1. Crea un componente di codice con il nome ColumnHeader
2. Crea un file di risorse e aggiungi le traduzioni
3. Implementa il manifesto
4. Implementa la logica del componente
5. Crea e impacchetta il componente

Crea un file di risorse e aggiungi le traduzioni

Dopo aver creato il componente di codice, la cartella ColumnHeader viene creata nel percorso che hai specificato. Creiamo un file di risorse e aggiungiamo le traduzioni francesi nel file di risorse.

1. Crea una cartella denominata strings nella cartella ColumnHeader .

2. Copia il seguente codice in un nuovo file, ColumnHeader.1036.resx.

   Nota

   Il numero 1.036 nel nome del file è il codice della lingua per il francese. Per un elenco di codici delle lingue, vedi questo articolo.

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

   Nell'esempio di codice precedente, i nomi delle colonne per Previsione e Vinto sono sovrascritti con le traduzioni francesi Prévision e Gagné rispettivamente nel nodo <data> .

   Nota

   Nel parametro name , specifica il nome esatto della colonna che hai configurato nel passaggio Layout della previsione.

   

   Se vuoi tradurre il nome della colonna in altre lingue, crea un file di risorse per ogni lingua in cui vuoi tradurre. Assicurati che il nome del file di risorse utilizzi la seguente convenzione di denominazione:

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

Implementa il manifesto

Successivamente, modificheremo il file manifesto per specificare la proprietà che stiamo sovrascrivendo. Nel nostro esempio, stiamo sovrascrivendo la proprietà ColumnName . Specificheremo anche il percorso del file di risorse che contiene il testo tradotto.

1. Apri il file ControlManifest.Input.XML.

2. Cerca il nodo property e sostituiscilo con il seguente codice:

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

3. Aggiorna il nodo <resources> per specificare il percorso del file di risorse che include le traduzioni francesi:

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

   Il nodo <resx path> contiene il percorso del file di risorse. Nell'esempio di codice precedente, abbiamo aggiunto il file di risorse per la lingua francese. Se disponi di traduzioni per altre lingue, aggiungi anche il percorso del file di risorse per tali lingue.

Implementa la logica del componente

Aggiungiamo il codice per implementare la logica del componente nel file index.ts .

1. Apri il file index.ts.

2. Aggiungi le seguenti righe nel metodo 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);
       }
   

Passaggi successivi

• Crea il componente di codice
• Impacchetta il componente di codice
• Sostituisci intestazioni di colonna (anteprima)