Anleitung: Integrieren eines Power Automate-Cloud-Flows in eine Power Pages-Website

In diesem Artikel wird erklärt, wie man Power Pages erstellt und einen Power Automate-Cloud Flow verwendet, um eine MSN-Wetter-App aufzurufen, bei der die aktuellen Wetterdetails auf der Seite angezeigt werden.

Voraussetzung

Um diese Schritte auszuführen, benötigen Sie eine Power Automate- und Power Pages-Umgebung. Sofern Sie keine Lizenz haben, können Sie sich für Power Pages- und Power Automate-Testversionen registrieren.

Schritt 1: Erstellen eines Cloud-Flows

Erstellen Sie einen Flow mithilfe des Power Pages-Triggers und verwenden Sie die Aktion MSN-Wetter, um Wetterdaten abzurufen.

1. Melden Sie sich bei Power Pages an.

2. Wählen Sie die Website + Bearbeiten aus

3. Navigieren Sie zum Arbeitsbereich „Einrichten“, und wählen Sie dann Cloud-Flows unter App-Integrationen aus.

4. Auswählen + Neuen Flow erstellen

5. Suchen Sie nach Power Pages.

   • Wenn Sie den Trigger Wenn Power Pages einen Flow aufruft aus.

   

6. Wählen Sie + Eingabe hinzufügen aus.

7. Wählen Sie Text aus.

8. Fügen Sie einen Namen als Standort hinzu.

9. Wählen Sie + Neuer Schritt aus.

10. Suchen Sie nach MSN-Wetter.

11. Wählen Sie die Aktion Aktuelles Wetter abrufen aus.

12. Fokussieren Sie den Cursor auf Standort-Eingabetext, wählen Sie den Standort-Parameter unter Wenn Power Pages einen Flow aufruft aus dynamischen Inhalten aus.

    

    Anmerkung

    Sie können entweder die imperialen Einheiten beibehalten oder auf metrische Einheiten umsteigen.

13. Wählen Sie + Neuer Schritt aus.

14. Suchen Sie nach Power Pages.

15. Wählen Sie die Aktion Wert(e) an Power Pages zurückgeben aus.

16. Wählen Sie +Eine Ausgabe hinzufügen aus.

17. Wählen Sie Text aus.

18. Geben Sie Druck als Titel ein.

19. Wählen Sie unter Aktuelles Wetter abrufen den dynamischen Inhalt Druck aus.

20. Wiederholen Sie diesen Vorgang, um die folgenden Ausgabeschritte mithilfe des Typs Text zu erstellen:

    1. Luftfeuchtigkeit
    2. Temperatur
    3. UV-Index
    4. Windgeschwindigkeit
    5. Ort
    6. Sichtbarkeitsentfernung
    7. Latitude
    8. Longitude
    9. Temperatureinheiten
    10. Druckeinheiten
    11. Geschwindigkeitseinheiten
    12. Entfernungseinheiten
    13. Bedingungen

21. Wählen Sie Speichern aus

22. Benennen Sie den Flow mit Aktuelles Wetter abrufen.

Schritt 2: Hinzufügen eines Flows zu einer Website

Nachdem Sie den Flow gespeichert haben, müssen Sie ihn der Website hinzufügen und eine geeignete Webrolle zuweisen.

1. Melden Sie sich bei Power Pages an.

2. Erstellen Sie eine Website mit einem der Starterlayouts.

3. Wählen Sie die Website und dann Bearbeiten aus.

4. Navigieren Sie zum Arbeitsbereich Einrichten.

5. Wählen Sie unter App-Integrationen die Option Cloud-Flows aus.

6. Wählen Sie + Cloud-Flow hinzufügen aus.

7. Suchen Sie nach dem Flow „Aktuelles Wetter abrufen“.

8. Wählen Sie unter „Rollen“ + Rollen hinzufügen aus.

9. Wählen Sie die Rolle Anonyme Benutzer aus.

10. Wählen Sie Hinzufügen aus.

11. Kopieren Sie die URL.

    

    Anmerkung

    Dies ist die eindeutige URL, die zum Herstellen einer Verbindung mit dem zugehörigen Cloud-Flow verwendet wird. Sie werden diese URL später verwenden, um den aktuellen Wetter-Flow aufzurufen.

Schritt 3: Erstellen einer Seite zum Anzeigen von MSN-Wetterdaten

Nachdem Sie den Flow erstellt und an die Power Pages-Website angehängt haben, können Sie ihn nun über ein Steuerereignis mit JavaScript aufrufen.

1. Klicken Sie auf den Arbeitsbereich Seiten.

2. Wählen Sie + Seite aus.

3. Benennen Sie die Seite mit „Heutiger Wetterbericht“.

4. Wählen Sie Code bearbeiten aus, um Visual Studio Code zu öffnen.

5. Fügen Sie diesen Code ein:

       <style>
           div.weatherdetail {
               border: 1px solid #F3F2F1;
               border-radius: 12px;
               box-shadow: 0px 1.2px 3.6px rgba(0, 0, 0, 0.1), 0px 6.4px 14.4px rgba(0, 0, 0, 0.13);
               padding: 24px;
           }
           .weather label {
               font-family: 'Nunito';
               font-style: normal;
               font-weight: 600;
               font-size: 18px;
               color: #323130;
           }
           .weather button {
               font-family: 'Segoe UI';
               padding: 8px 16px;
               font-size: 16px;
               background-color: #6219D9;
               color: white;
               border: none;
               border-radius: 4px;
               cursor: pointer;
               outline: none;
           } 
           div.weather {
               display: flex;
               flex-direction: column;
               align-items: flex-start;
               padding: 100px;
               gap: 36px;
               width: 840px;
           }
           span.temperature {
               font-family: Segoe UI;
               font-size: 96px;
               font-style: normal;
               font-weight: 600;
               color: #6219d9;
           }
           span.weatherinfov1 {
               font-family: Segoe UI;
               font-size: 28px;
               font-style: normal;
               font-weight: 400;
               color: #201f1e;
           }
           span.weatherinfov2 {
               font-family: Segoe UI;
               font-size: 24px;
               font-style: normal;
               font-weight: 600;
               color: #a19f9d;
           }
       </style>
   
       <div class="row sectionBlockLayout text-left" style="display: flex; flex-wrap: wrap; margin: 0px; min-height: auto; padding: 8px;">
           <div class="container" style="display: flex; flex-wrap: wrap;">
               <div class="col-md-12 columnBlockLayout weather" style="flex-grow: 1; display: flex; flex-direction: column; min-width: 310px; word-break: break-word; padding: 0 180px; margin: 60px 0px;">
                   <h1>What's the weather?</h1>
                   <form id="cityForm">
                       <label for="locationInput">Enter a location to find out</label>
                       <br>
                       <input type="text" style="width: 840px; border: 1px solid #D2D0CE;" id="locationInput" required />
                       <p>
                       <p>
                           <button type="submit">Submit</button>
                       </p>
                   </form>
                   <div id="weatherdetail" class="weatherdetail" style="display: none;width: 840px">
                       <div>
                           <div>
                               <span class="temperature" id="temperature"> </span>
                               <span class="weatherinfov1" id="temperature_units"></span>
                           </div>
                           <div>
                               <span class="weatherinfov1" style="font-size: 36px;" id="location"> </span>
                               <br>
                               <span class="weatherinfov1" style="font-size: 24px;" id="cordinates"></span>
                               <p>
                           </div>
                       </div>
                       <div style="display: flex;">
                           <div style="flex: 1;">
                               <span class="weatherinfov2">Wind: </span>
                               <span class="weatherinfov1" id="windspeed"></span>
                               <span class="weatherinfov1" id="speed_units"> </span>
                           </div>
                           <div style="flex: 1;">
                               <span class="weatherinfov2">Visibility: </span>
                               <span class="weatherinfov1" id="visibility"></span>
                               <span class="weatherinfov1" id="distance_units"></span>
                           </div>
                       </div>
                       <div style="display: flex;">
                           <div style="flex: 1;">
                               <span class="weatherinfov2">UV Index: </span>
                               <span class="weatherinfov1" id="uv"></span>
                           </div>
                           <div style="flex: 1;">
                               <span class="weatherinfov2">Conditions: </span>
                               <span class="weatherinfov1" id="condition"></span>
                           </div>
                       </div>
                   </div>
               </div>
           </div>
       </div>
   
       <script>
           document.getElementById("cityForm").addEventListener("submit", function (event) {
               event.preventDefault(); // Prevent form submission
               var weatherDiv = document.getElementById("weatherdetail");
               weatherDiv.style.display = "none";
   
               var location = document.getElementById("locationInput").value;
   
               var _url = "<Cloud flow URL>";
   
             var data = {};
             data["Location"] = location;
   
               var payload = {};
               payload.eventData = JSON.stringify(data);
               shell
                   .ajaxSafePost({
                       type: "POST",
                       url: _url,
                       data: payload
                   })
                   .done(function (response) {
                       const result = JSON.parse(response);
                       document.getElementById("temperature").innerHTML = result["temperature"];
                       document.getElementById("windspeed").innerHTML = result["wind_speed"];
                       document.getElementById("visibility").innerHTML = result["visibility_distance"];
                       document.getElementById("uv").innerHTML = result["uv_index"];
                       document.getElementById("location").innerHTML = result["location"];
                       document.getElementById("condition").innerHTML = result["conditions"];
                       document.getElementById("temperature_units").innerHTML = result["temperature_units"];
                       document.getElementById("speed_units").innerHTML = result["speed_units"];
                       document.getElementById("distance_units").innerHTML = result["distance_units"];
                       document.getElementById("cordinates").innerHTML = parseFloat(result["latitude"]).toFixed(2) + ', ' + parseFloat(result["longitude"]).toFixed(2);
                       weatherDiv.style.display = "block";
                   })
                   .fail(function () {
                       alert("failed");
                   });
           });
       </script>
   

6. Ersetzen Sie die URL durch die, die Sie im vorherigen Schritt kopiert haben.

7. Speichern Sie den Code, indem Sie STRG+S auswählen.

8. Wählen Sie im Designstudio Synchronisieren aus.

Schritt 4: Testen der Flow-Integration

So testen Sie die Flow-Integrationsfunktionalität:

1. Wählen Sie Vorschau aus, um die Website zu öffnen.

2. Geben Sie im Textfeld Standort eine Postleitzahl oder eine Stadt ein.

3. Wählen Sie die Schaltfläche Senden aus.