Introduzione all'uso di React all'interno di un componente di Power Apps

Completato

Power Apps Component Framework fornisce funzionalità integrate che è possibile usare come parte della logica per creare componenti di codice sempre più complessi. Usando queste funzionalità, si possono ottenere informazioni sul client che ospita il componente, sul dispositivo che esegue il componente e su altri servizi di tipo utilità come la formattazione. Per i componenti che si desidera interagiscano con i dati della tabella Dataverse, è possibile usare la funzionalità WebAPI per l'interazione con i dati.

La creazione manuale del codice HTML è comune per i componenti semplici, ma man mano che le esigenze diventano più complesse, può essere utile l'uso di una libreria framework dell'interfaccia utente. Sono disponibili molte scelte di framework dell'interfaccia utente JavaScript, ma React è una delle librerie più comuni usate con i componenti di codice Power Apps.

Nel resto di questo modulo si esploreranno in dettaglio questi argomenti. Si svolgeranno diversi esempi pratici che si potranno seguire per creare i propri componenti usando alcune di queste funzionalità più avanzate del framework.

Uso del contesto del componente

L'oggetto context contiene valori impostati dalla funzione di personalizzazione mappati ai nomi di proprietà definiti nelle funzioni di manifesto e utilità. È possibile usarlo nella logica del componente per accedere alla maggior parte delle funzionalità integrate che si useranno più avanti in questo modulo nei componenti che si creeranno.

Il parametro context è disponibile per i componenti nei metodi init e updateView. È comune che nel metodo init si popoli una variabile a livello di classe per agevolare l'accesso al contesto in altri metodi nel componente. Di eseguito è riportato un esempio di salvataggio del contesto per l'uso successivo nel metodo init:

export class ChoicesPicker implements ComponentFramework.StandardControl<IInputs, IOutputs> {
    
    private _context: ComponentFramework.Context<IInputs>;

    public init(
        context: ComponentFramework.Context<IInputs>,
        notifyOutputChanged: () => void,
        state: ComponentFramework.Dictionary,
        container: HTMLDivElement,
    ): void {
     
        this._context = context;

        /* other logic goes here */
    }
}

L'oggetto context del componente può coprire una grande quantità di informazioni sull'ambiente in cui il componente è eseguito. Di seguito è riportata una panoramica delle proprietà chiave disponibili:

• client: questa proprietà fornisce informazioni sul client (Web, Outlook o mobile), sul fattore di forma (desktop, tablet o telefono), sullo stato offline e sulla disponibilità della rete.

• mode: questa proprietà fornisce informazioni sullo stato corrente del componente di codice. Ad esempio, indica se il componente è visibile, se è disabilitato e quali sono le dimensioni attualmente allocate.

• userSettings: questa proprietà fornisce informazioni sull'utente corrente, quali LanguageId, ID utente e nome. Per le app basate su modello, la proprietà securityRoles può essere utile per conoscere i ruoli dell'utente corrente.

L'oggetto context fornisce anche accesso a diversi servizi integrati utili. I seguenti sono i più comuni:

• device: questa proprietà fornisce accesso a metodi per l'uso di funzionalità native del dispositivo. Usando questi servizi, è possibile acquisire audio, video e immagini, ottenere valori dei codici a barre, identificare la georilevazione del dispositivo e selezionare file.

• factory: attualmente offre solo metodi per lavorare con il servizio Popup, ma potrà supportare altri servizi in futuro.

• formatting: fornisce metodi per aiutare a formattare dati, quali la valuta o l'ora. Questi metodi possono aiutare a mantenere la formattazione coerente con le impostazioni utente dell'applicazione di hosting.

• navigation: fornisce metodi relativi allo spostamento, quali moduli aperti, URL aperti, finestre di dialogo (avviso, conferma, errore) e altro ancora.

• resources: fornisce accesso ai metodi per ottenere tutte le informazioni sui file di risorse definiti nel manifesto. Questi metodi sono essenziali per facilitare la localizzazione di tutto il contenuto del componente.

• utils: fornisce accesso ai metadati della tabella e consente di verificare l'accesso degli utenti a tabelle specifiche. Il metodo lookupObjects consente ai componenti di accedere alla finestra di dialogo di ricerca standard e permette agli utenti di scegliere una o più righe.

• webAPI: fornisce accesso di base alla tabella Dataverse per creazione, lettura, aggiornamento ed eliminazione.

Di seguito è riportato un esempio di uso delle funzionalità pickFile del dispositivo:

 private onUploadButtonClick(event: Event): void {
    this._context.device.pickFile().then(this.processFile.bind(this), this.showError.bind(this));
  }

È importante notare che alcuni di questi servizi devono essere abilitati nella sezione di utilizzo delle funzionalità del manifesto per funzionare. Alcuni potrebbero inoltre essere disponibili solo in tipi specifici di app di hosting. Ad esempio, webAPI è disponibile solo nelle app basate su modello e Power Pages non è disponibile per le app canvas. Consultare la pagina di riferimento del servizio specifico per dettagli.

Uso di React

Vi sono molti framework dell'interfaccia utente tra cui scegliere, tuttavia l'uso di React offre alcuni vantaggi. React è consigliato perché la piattaforma Power Apps sottostante usa React internamente. Inoltre, Power Apps Component Framework offre supporto integrato per l'uso della stessa infrastruttura. Grazie a questa funzionalità non è necessario inserire manualmente le librerie dell'interfaccia utente di React e Fluent in ogni controllo. Tutti i controlli condivideranno un'istanza e una versione della libreria comuni per fornire un'esperienza fluida e coerente.

Il comando seguente mostra come inizializzare un componente e come usare il framework React:

pac pcf init -n ReactSample -ns SampleNamespace -t field -fw react -npm

L'unica differenza che si può notare è l'opzione -fw (o--framework) che abilita l'uso di React. Questa opzione farà sì che i file iniziali generati automaticamente includano le configurazioni di React necessarie.

Più avanti in questo modulo si creerà un componente di codice usando questa funzionalità di React.