Scrittura di un componente popup di Power Apps

  • 15 minuti

A volte può essere necessario che un utente dell'applicazione visualizzi una finestra popup. Power Apps Component Framework espone un'API popup che consente di soddisfare questo requisito. L'esempio seguente mostra come creare una finestra popup che visualizza un'immagine del caricatore. Questo metodo consente di creare un'esperienza utente soddisfacente nelle operazioni con tempi di esecuzione prolungati durante le quali l'interfaccia utente è bloccata e non può eseguire operazioni.

Nota

Il servizio Popup di Power Apps Component Framework è supportato solo nelle app basate su modello di Power Apps.

Inizializzazione del progetto del componente

Per inizializzare il progetto del componente, effettuare i seguenti passaggi:

  1. Avviare Visual Studio Code.

  2. Selezionare Nuovo terminale dal menu Terminale.

  3. Cambiare la directory passando alla cartella di origine.

    cd source

  4. Dalla directory di origine creare una directory denominata Popup-Component.

    md Popup-Component

  5. Eseguire il seguente comando per passare alla nuova directory.

    cd Popup-Component

  6. Inizializzare il progetto eseguendo il seguente comando.

    pac pcf init --namespace SampleNamespace --name PopupComponent --template field

  7. Eseguire npm install per caricare le librerie dipendenti nel progetto.

    npm install

  8. Aprire il progetto in Visual Studio Code eseguendo il seguente comando.

    code -a .

Implementazione della logica del componente di codice

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

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

  2. Sostituire l'intero manifesto con il codice XML seguente.

    <?xml version="1.0" encoding="utf-8" ?>
<manifest>
  <control namespace="SampleNamespace" constructor="PopupComponent" version="0.0.1" display-name-key="PopupComponent_Display_Key" description-key="PopupComponent_Desc_Key" control-type="standard">
    <!-- property node identifies a specific, configurable piece of data that the control expects from CDS -->
    <property name="sampleProperty" display-name-key="Property_Display_Key" description-key="Property_Desc_Key" of-type="SingleLine.Text" usage="bound" required="true" /> 
    <resources>
      <code path="index.ts" order="1"/>
      <css path="css/loader.css" order="1" />
    </resources>
  </control>
</manifest>

    Aggiungere i file di supporto che si trovano in questo manifesto in un secondo momento.

  3. Aprire il file Index.ts.

  4. Sopra il metodo export class inserire il seguente metodo interface in modo da poter esporre altri metodi forniti dall'API popup (popupStyle e shadowStyle).

        interface Popup extends ComponentFramework.FactoryApi.Popup.Popup {
    popupStyle: object;
    shadowStyle: object;
}

  5. Sopra il metodo constructor aggiungere la seguente variabile privata.

    private _container: HTMLDivElement;
private _popUpService: ComponentFramework.FactoryApi.Popup.PopupService;

  6. Aggiungere la seguente logica al metodo init del componente.

    this._container = document.createElement('div');
//============ content of our popup =============
let popUpContent = document.createElement('div');
popUpContent.setAttribute("class", "loader");

//============ our Popup object =============
let popUpOptions: Popup = {
    closeOnOutsideClick: true,
    content: popUpContent,
    name: 'loaderPopup', // unique popup name
    type: 1, // Root popup
    popupStyle: {
        "width": "100%",
        "height": "100%",
        "overflow": "hidden",
        "backgroundColor": "transparent",
        "display": "flex",
        "flexDirection": "column",
        "position": "absolute",
        "margin-top": 28 + "px"
    },
    shadowStyle:{
        position: "absolute",
        width: "100%",
        height: "100%"
    }
};

this._popUpService = context.factory.getPopupService();

this._popUpService.createPopup(popUpOptions);

container.appendChild(this._container);
this._popUpService.openPopup('loaderPopup');

Aggiunta di stili al componente di codice

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

  1. Creare una nuova sottocartella css nella cartella PopupComponent.

  2. Creare un nuovo file loader.css nella sottocartella CSS.

  3. Aggiungere il seguente contenuto di stile al file loader.css.

    .loader {
    border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid #3498db; /* Blue */
    border-radius: 50%;
    position: fixed;
    width: 120px;
    height: 120px;
    top:40%;
    left:50%;
    animation: spin 2s linear infinite;
  }

  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

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

Compilazione ed esecuzione del componente

Per compilare ed eseguire il componente, effettuare i seguenti passaggi:

  1. Creare la soluzione eseguendo il seguente comando.

    npm run build

  2. Al completamento della compilazione è possibile sottoporre a test il nuovo componente Popup eseguendo il comando npm start.

    npm start

  3. Chiudere la finestra del browser del test harness.

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

  5. Digitare Y, quindi premere INVIO.

Nota

Questo componente del caricatore è associato a un campo di testo. Per usare il componente in un'app basata su modello, potrebbe essere utile contrassegnare questo campo come nascosto se si desidera usarlo in un modulo.

Per testare la funzionalità popup è necessario pubblicare e ospitare il componente in un ambiente di Microsoft Power Platform. Per altre informazioni su come pubblicare componenti di codice, vedere "Creazione di un pacchetto di soluzione di componenti di codice" nel modulo Creazione di un componente di Power Apps.