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

  • 10 minuti

React è un framework client standardizzato per la creazione di interfacce utente. Fornisce un modo dichiarativo per creare interfacce utente interattive e un meccanismo per incapsulare i componenti per creare interfacce utente complesse che gestiscono gli stati dei componenti e hanno un'interattività elevata. Poiché React è scritto in JavaScript, è possibile usare questo framework all'interno di un componente di Power Apps.

Gli utenti che non hanno mai usato React possono vedere React, che fornisce una vasta gamma di esercitazioni e risorse su come creare i componenti di React.

Preparazione del computer per i componenti di codice

Per preparare il computer alla creazione di componenti di codice, effettuare i seguenti passaggi:

  1. Installare npm (fornito con Node.js) o Node.js (fornito con npm). È consigliabile usare una versione LTS (supporto a lungo termine).

  2. Installare Visual Studio Code.

  3. Installare l'estensione Power Platform Tools.

  4. Installare Build Tools per Visual Studio dalla pagina dei Download di Visual Studio.

Fluent UI

Uno dei numerosi e importanti sviluppi di Microsoft è stata l'implementazione di Fluent UI, una raccolta di framework per l'esperienza utente che è possibile usare per creare esperienze fluide che si adattano perfettamente a un'ampia gamma di prodotti Microsoft. L'uso di Fluent UI nel componente di codice Power Apps è semplice quanto fare riferimento alle sue raccolte e fornisce una versione specifica per React. Per altre informazioni, vedere Fluent UI.

Implementazione di un componente di FacePile di esempio

Importante

Scaricare il file ZIP FacePileComponent.zip da usare con questo esercizio. Estrarre il file ZIP.

In questo esempio si crea un componente che usa il componente FacePile Fluent UI. FacePile mostra un elenco di volti o iniziali in una vista orizzontale, in cui ogni cerchio rappresenta una persona.

Questa funzionalità viene usata ad esempio quando si devono elencare i collaboratori di un articolo o di un record, come si vede nelle pagine di Microsoft Learn e nell'immagine seguente.

Screenshot del componente FacePile Fluent UI.

Creazione di un nuovo progetto di componente

Per creare un progetto di componente, effettuare i seguenti passaggi:

  1. Creare una directory in cui inserire il componente. In questo esempio si inserisce il componente in C:\users\username\source\face-pile. È tuttavia possibile creare una propria directory. Per creare la propria directory, usare Visual Studio Code.

  2. Avviare Visual Studio Code.

  3. Selezionare Terminale, Nuovo terminale e cambiare la shell del Terminale nel Prompt dei comandi.

    Nota

    Se non si ha familiarità con il Terminale in Visual Studio Code, vedere le Nozioni di base sul Terminale per ulteriori informazioni.

  4. Creare la cartella di origine.

    md \source

  5. Cambiare la directory passando alla cartella di origine.

    cd \source

  6. Dalla directory di origine creare una directory denominata face-pile.

    md face-pile

  7. Andare alla directory creata.

     cd face-pile

  8. Ora dovrebbe apparire la nuova directory creata.

  9. Inizializzare il progetto del componente usando l'interfaccia della riga di comando di Power Platform con il seguente comando.

    pac pcf init --namespace Learn --name ReactFacePile --template field --framework React

  10. Installare gli strumenti di compilazione del progetto con il comando npm install. Potrebbero apparire alcuni avvisi che è possibile ignorare.

    npm install

  11. Eseguire il comando riportato di seguito per aprire il progetto in Visual Studio Code.

    code -a .

  12. Il progetto deve essere simile a quello mostrato nell'immagine seguente.

    Screenshot di Facepile UI in Visual Studio Code.

Implementazione della logica del componente di codice

Per implementare la logica del componente di codice, effettuare i seguenti passaggi:

  1. Espandere la cartella ReactFacePile e aprire il file ControlManifest.Input.xml.

  2. Individuare il nodo proprietà e sostituirlo con il seguente codice XML.

    <property name="numberOfFaces" display-name-key="numberOfFaces_Display_Key" description-key="numberOfFaces_Desc_Key" of-type="Whole.None" usage="bound" required="false" />

  3. Individuare risorse e rimuovere il commento per css e resx.

    Screenshot della rimozione del commento da css in Visual Studio Code.

  4. Assicurarsi che il file ControlManifest.Input.xml sia ancora selezionato, quindi selezionare New Folder.

  5. Assegnare alla nuova cartella il nome components.

  6. Andare alla cartella in cui si è estratto il file FacePileComponent.zip scaricato e aprire la cartella FacePileComponent.

  7. Trascinare i file all'interno della cartella FacePileComponents e rilasciarli nella cartella components creata.

  8. Ora la cartella components dovrebbe contenere due file.

    Screenshot della rimozione di due cartelle facepile.

  9. Aprire il file Index.ts.

  10. Sostituire import { HelloWorld, IHelloWorldProps } from "./HelloWorld"; con questo frammento.

    import { FacepileBasicExample, IFacepileBasicExampleProps } from "./components/Facepile" ;

  11. Dopo le importazioni, aggiungere la seguente costante.

    const DEFAULT_NUMBER_OF_FACES = 3;

  12. Aggiungere il frammento prima del constructor.

    private props: IFacepileBasicExampleProps = {
    numberFacesChanged: this.numberFacesChanged.bind(this),
};

  13. Le modifiche apportate dovrebbero essere simili a quelle presentate nell'immagine seguente.

    Screenshot della modifica del codice nel file index.ts.

  14. Individuare il metodo init e aggiungere il frammento seguente dopo la riga this.notifyOutputChanged = notifyOutputChanged;

    this.props.numberOfFaces = context.parameters.numberOfFaces.raw || DEFAULT_NUMBER_OF_FACES;

  15. Sostituire il metodo updateView con il metodo riportato di seguito.

    public updateView(context: ComponentFramework.Context<IInputs>): React.ReactElement {
    if (context.updatedProperties.indexOf("numberOfFaces") > -1) {
        this.props.numberOfFaces = context.parameters.numberOfFaces.raw || DEFAULT_NUMBER_OF_FACES;
    }
    return React.createElement(FacepileBasicExample, this.props);
}

  16. I metodi init e updateView dovrebbero essere simili a quelli presentati nell'immagine seguente.

    Screenshot del codice updateView nel file index.ts.

  17. Sostituire il metodo getOutputs con il metodo seguente.

    public getOutputs(): IOutputs {
    return {
        numberOfFaces: this.props.numberOfFaces,
    };
}

  18. Aggiungere il metodo riportato di seguito dopo il metodo destroy.

    private numberFacesChanged(newValue: number) {
    if (this.props.numberOfFaces !== newValue) {
        this.props.numberOfFaces = newValue;
        this.notifyOutputChanged();
    }
}

  19. Selezionare File e Salva tutto per salvare tutte le modifiche.

Aggiunta di stili al componente di codice

Per aggiungere stili al componente di codice, effettuare i seguenti passaggi:

  1. Selezionare il file ControlManifest.Input.xml e quindi New Folder.

  2. Assegnare alla nuova cartella il nome css.

  3. Selezionare la cartella css creata e quindi Nuovo file.

  4. Assegnare al nuovo file il nome ReactFacePile.css.

  5. Aprire il file ReactFacePile.css creato e incollare il seguente frammento CSS.

    msFacepileExample {
max-width: 300px;
}
.msFacepileExample .control {
 padding-top: 20px;
}
.msFacepileExample .ms-Dropdown-container, .msFacepileExample.ms-Slider {
margin: 10px 0 10px 0;
}
.msFacepileExample .ms-Dropdown-container .ms-Label {
padding-top: 0;
}
.msFacepileExample .ms-Checkbox {
padding-top: 15px;
}
.exampleCheckbox {
margin: 10px 0;
}
.exampleLabel {
margin: 10px 0;
}

  6. Selezionare File e Salva per salvare le modifiche.

  7. Selezionare il file ControlManifest.Input.xml e quindi New Folder.

  8. Assegnare alla nuova cartella il nome strings.

  9. Andare alla cartella in cui si è estratto il file FacePileComponent.zip scaricato e aprire la cartella FacePileStrings.

  10. Trascinare il file ReactFacePile.1033.resx e rilasciarlo nella cartella strings creata.

  11. A questo punto la cartella strings dovrebbe contenere il file RESX.

    Screenshot che mostra l'aggiunta del file Facepile.

  12. Selezionare File e Salva per salvare le modifiche.

  13. Andare al terminale ed eseguire questo comando build.

    npm run build

    Nota

    Se un errore segnala che JSX non è definito, aprire il file .eslintrc.json. Alla riga 11, "ComponentFramework": true, aggiungere una virgola e una nuova riga con "JSX": true. Alla riga 41: cambiare JSX.Element in React.JSX.Element. Salvare le modifiche e ripetere il comando npm run build.

  14. La compilazione dovrebbe avvenire correttamente.

  15. Testare i componenti eseguendo il comando riportato di seguito.

    npm start

  16. Il test harness dovrebbe aprire una nuova finestra del browser.

  17. Il componente deve essere simile a quello mostrato nell'immagine riportata di seguito.

    Screenshot dell'immagine del nuovo componente.

  18. Cambiare le dimensioni del contenitore impostandole su 500 x 220 e spostare il dispositivo di scorrimento su 5.

  19. Il componente dovrebbe ora essere simile a quello mostrato nell'immagine seguente. Chiudere la finestra del browser del test harness.

    Screenshot dell'immagine del nuovo componente con le modifiche.

  20. Chiudere la finestra del browser del test harness.

  21. Tornare al terminale e interrompere il Watcher premendo CTRL+C.

  22. Digitare Y, quindi premere INVIO.

Per altre informazioni, vedere Implementazione del componente FacePile.