Поделиться через

Руководство: интеграция облачного потока Power Automate с сайтом Power Pages

В этой статье объясняется, как создать Power Pages и использовать облачный поток Power Automate, чтобы вызвать приложение погоды MSN, которое отображает текущую информацию о погоде на странице.

Необходимые условия

Для выполнения этих действий вам потребуется Power Automate и среда Power Pages. Если у вас нет лицензии, вы можете зарегистрироваться в пробных версиях Power Pages и Power Automate.

Шаг 1. Создание облачного потока

Создайте поток с помощью триггера Power Pages и используйте действие Погода MSN для получения данных о погоде.

  1. Выполните вход в Power Pages.

  2. Выберите сайт и выберите Изменить.

  3. Перейдите в рабочую область Настройка, затем выберите Облачные потоки в разделе «Интеграции приложений».

  4. Выбрать + Создать новый поток

  5. Выполните поиск Power Pages.

    • Выберите триггер Когда Power Pages вызывает поток.

    Выбор параметров Power Pages в Power Automate.

  6. Выберите + Добавить входные данные.

  7. Нажмите кнопку Текст.

  8. Добавьте имя как Расположение.

  9. Выберите + Новый шаг.

  10. Найдите MSN Weather.

  11. Выберите действие Получить текущую погоду.

  12. Наведите курсор на вводимый текст Расположение. Выберите параметр Расположение в разделе Когда Power Pages вызывает поток из динамического содержимого.

    Создайте облачный поток.

    Заметка

    Вы можете сохранить единицы британской системы либо использовать метрические.

  13. Выберите + Новый шаг.

  14. Выполните поиск Power Pages.

  15. Выберите действие Возвращать значения в Power Pages.

  16. Выберите +Добавить выходные данные.

  17. Выберите Текст.

  18. Введите Давление в качестве заголовка.

  19. В разделе Получить текущую погоду выберите динамическое содержимое Давление.

  20. Повторите эти действия, чтобы создать следующие шаги вывода, использующие тип текст:

    1. Влажность
    2. Температура
    3. УФ-индекс
    4. Скорость ветра
    5. Местонахождение
    6. Расстояние видимости
    7. Широта
    8. Долгота
    9. Единицы измерения температуры
    10. Единицы измерения давления
    11. Единицы измерения скорости
    12. Единицы измерения расстояния
    13. Положения

  21. Выберите Сохранить

  22. Назовите поток Получить текущую погоду.

Шаг 2. Добавление потока на сайт

После сохранения потока необходимо добавить его на сайт и назначить соответствующую веб-роль.

  1. Выполните вход в Power Pages.

  2. Создайте сайт с помощью одного из начальных макетов.

  3. Выберите сайт и выберите Редактировать.

  4. Перейдите в рабочую область Настройка.

  5. В разделе Интеграции приложений выберите Облачные потоки.

  6. Выберите + Добавить облачный поток.

  7. Найдите поток Получить текущую погоду.

  8. Выберите + Добавить роли в разделе «Роли».

  9. Выберите роль Анонимные пользователи.

  10. Выберите Добавить.

  11. Скопируйте URL-адрес.

    Добавьте облачный поток на веб-сайт.

    Заметка

    Это уникальный URL-адрес, используемый для подключения к связанному облачному потоку. Вы будете использовать этот URL-адрес позже для вызова потока текущей погоды.

Шаг 3. Создание страницы для отображения данных о погоде MSN

После создания потока и его прикрепления к сайту Power Pages теперь вы можете вызывать его из управляющего события с помощью JavaScript.

  1. Выберите рабочую область Страницы.

  2. Выберите + Страница.

  3. Назовите страницу «Отчет о погоде на сегодня».

  4. Выберите Редактировать код, чтобы открыть Visual Studio Code.

  5. Вставьте этот код:

        <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. Замените URL-адрес на тот, который вы скопировали на предыдущем шаге.

  7. Сохраните код, нажав CTRL + S.

  8. Выберите Синхронизировать в студии дизайна.

Шаг 4. Проверка интеграции потока

Чтобы проверить функциональность интеграции потока:

  1. Выберите Предварительный просмотр, чтобы открыть сайт.

  2. Введите почтовый индекс или город в текстовое поле Местоположение.

  3. Нажмите кнопку Отправить.

    Интеграция потока, отображающая отчет «Погода на сегодня».