Écrire un composant Power Apps de fenêtre contextuelle

  • 15 minutes

Parfois, vous devrez peut-être afficher une fenêtre contextuelle sur l’écran d’un utilisateur de votre application. Power Apps Component Framework expose une API de fenêtre contextuelle qui vous permet de répondre à cette exigence. L’exemple suivant montre comment créer une fenêtre contextuelle qui affiche un graphique de chargeur. Cette méthode vous permet d’offrir une expérience utilisateur satisfaisante dans les opérations de longue durée, dans laquelle l’IU sous-jacente ne peut pas effectuer d’opérations.

Remarque

Le service de fenêtre contextuelle de Power Apps Component Framework est pris en charge uniquement dans les applications Power Apps pilotées par modèle.

Initialiser votre projet de composant

Pour initialiser votre projet de composant, procédez comme suit :

  1. Lancez Visual Studio Code.

  2. Cliquez sur Terminal, puis sur Nouveau terminal.

  3. Redéfinissez le répertoire sur votre dossier source.

    cd source

  4. À partir de votre répertoire source, créez un répertoire nommé Popup-Component.

    md Popup-Component

  5. Exécutez la commande suivante pour basculer vers le nouveau répertoire :

    cd Popup-Component

  6. Initialisez le projet en exécutant la commande suivante :

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

  7. Exécutez npm install pour charger les bibliothèques dépendantes dans votre projet.

    npm install

  8. Ouvrez le projet dans Visual Studio Code en exécutant la commande suivante :

    code -a .

Implémenter la logique de votre composant de code

Pour implémenter la logique de votre composant de code, procédez comme suit :

  1. Développez le dossier PopupComponent, puis ouvrez le fichier ControlManifest.Input.xml.

  2. Remplacez tout le manifeste par le code XML suivant :

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

    Vous ajouterez ultérieurement les fichiers de support qui se trouvent dans ce manifeste.

  3. Ouvrez le fichier Index.ts.

  4. Au-dessus de la méthode export class, insérez la méthode d’interface suivante pour pouvoir exposer d’autres méthodes fournies par l’API de fenêtre contextuelle (popupStyle et shadowStyle) :

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

  5. Ajoutez les variables privées suivantes au-dessus de la méthode constructor :

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

  6. Ajoutez la logique suivante à la méthode init de votre composant :

    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');

Ajouter un style à votre composant de code

Pour ajouter un style à votre composant de code, procédez comme suit :

  1. Créez un sous-dossier css sous le dossier PopupComponent.

  2. Créez un fichier loader.css dans le sous-dossier CSS.

  3. Ajoutez le contenu de style suivant au fichier 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. Cliquez sur Fichier et Enregistrer tout pour enregistrer vos modifications.

Créer et exécuter votre composant

Pour créer et exécuter votre composant, procédez comme suit :

  1. Créez votre solution en exécutant la commande suivante :

    npm run build

  2. Une fois la création réussie, vous pouvez tester votre nouveau composant de fenêtre contextuelle en exécutant npm start.

    npm start

  3. Fermez la fenêtre de navigateur de l’atelier de test.

  4. Revenez au terminal et arrêtez le Watcher en appuyant sur [CTRL] + C.

  5. Tapez Y, puis appuyez sur [ENTRÉE].

Remarque

Ce composant de chargeur est lié à un champ de texte. Pour utiliser le composant dans une application pilotée par modèle, il peut être avantageux pour vous de marquer ce champ comme masqué si vous souhaitez l’utiliser dans un formulaire.

Pour tester la fonctionnalité de fenêtre contextuelle, vous devez publier et héberger le composant dans un environnement Microsoft Power Platform. Pour en savoir plus sur la publication des composants de code, consultez la section « Créer un package de solution de composant de code » dans le module Créer un composant Power Apps.