Eine Popup-Power Apps-Komponente schreiben

Abgeschlossen

Gelegentlich kann es erforderlich sein, einem Benutzer Ihrer Anwendung ein Popupfenster anzuzeigen. Das Power Apps Component Framework stellt eine Popup-API bereit, um diese Anforderung zu erfüllen. Das folgende Beispiel zeigt, wie Sie ein Popupfenster erstellen, in dem eine Grafik für einen Ladevorgang angezeigt wird. Bei lang andauernden Vorgängen kann Ihnen diese Methode dabei helfen, eine zufriedenstellende Benutzererfahrung zu erzielen, wenn die zugrunde liegende Benutzeroberfläche für die Ausführung von Vorgängen blockiert ist.

Hinweis

Der Popup-Dienst vom Power Apps Component Framework wird nur in modellgesteuerten Power Apps-Apps unterstützt.

Ihr Komponentenprojekt initialisieren

Gehen Sie wie folgt vor, um Ihr Komponentenprojekt zu initialisieren:

1. Starten Sie Visual Studio Code.

2. Wählen Sie Terminal und dann Neues Terminal aus.

3. Wechseln Sie das Verzeichnis zu Ihrem Quellordner.

   cd source
   

4. Erstellen Sie aus Ihrem Quellverzeichnis ein Verzeichnis mit dem Namen Popup-Komponente.

   md Popup-Component
   

5. Führen den folgenden Befehl aus, um zum neuen Verzeichnis zu wechseln.

   cd Popup-Component
   

6. Initialisieren Sie das Projekt, indem Sie den folgenden Befehl ausführen.

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

7. Führen Sie „npm install“ aus, um abhängige Bibliotheken in Ihr Projekt zu laden.

   npm install
   

8. Öffnen Sie das Projekt in Visual Studio Code, indem Sie den folgenden Befehl ausführen.

   code -a .
   

Logik der Codekomponente implementieren

Gehen Sie wie folgt vor, um die Logik der Codekomponente zu implementieren:

1. Erweitern Sie den Ordner PopupComponent, und öffnen Sie die Datei ControlManifest.Input.xml.

2. Ersetzen Sie das gesamte Manifest durch die folgende XML-Datei.

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

   Sie fügen die unterstützenden Dateien hinzu, die später in diesem Manifest enthalten sind.

3. Öffnen Sie die Datei Index.ts.

4. Fügen Sie über der Methode export class die folgende Schnittstellenmethode ein, damit Sie andere Methoden verfügbar machen können, die von der Popup-API (popupStyle und shadowStyle) bereitgestellt werden:

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

5. Fügen Sie über dem Konstruktor die folgenden privaten Variablen ein.

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

6. Fügen Sie der init-Methode Ihrer Komponente die folgende Logik hinzu.

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

Ihrer Codekomponente Stil hinzufügen

Gehen Sie wie folgt vor, um Ihrer Codekomponente einen Stil hinzuzufügen:

1. Erstellen Sie einen neuen css-Unterordner unter dem Ordner „PopupComponent“.

2. Erstellen Sie im CSS-Unterordner eine neue Datei namens loader.css.

3. Fügen Sie der Datei „loader.css“ den folgenden Stilinhalt hinzu.

   .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. Wählen Sie Datei aus, und Alle speichern Sie alle Ihre Änderungen.

Ihre Komponente erstellen und ausführen

Gehen Sie wie folgt vor, um die Ihre Komponente zu erstellen und auszuführen:

1. Erstellen Sie Ihre Lösung, indem Sie folgenden Befehl ausführen.

   npm run build
   

2. Nach einer erfolgreichen Erstellung können Sie Ihre neue Popup-Komponente testen, indem Sie „npm start“ ausführen.

   npm start
   

3. Schließen Sie das Testumgebungs-Browserfenster.

4. Wechseln Sie zurück zum Terminal, und stoppen Sie den Beobachter, indem Sie [CONTROL] + C drücken.

5. Geben Sie Y ein, und drücken Sie dann [ENTER].

Hinweis

Diese Ladekomponente ist an ein Textfeld gebunden. Um die Komponente in einer modellgesteuerten App zu verwenden, kann es hilfreich sein, dieses Feld als ausgeblendet zu kennzeichnen, wenn Sie es in einem Formular verwenden möchten.

Um die Popup-Funktionalität zu testen, müssen Sie die Komponente in einer Microsoft Power Platform-Umgebung veröffentlichen und hosten. Weitere Informationen zum Veröffentlichen von Codekomponenten finden Sie unter „Ein Lösungspaket für eine Codekomponente erstellen“ im Modul Eine Power Apps-Komponente erstellen.

Weiter