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


Додавання екранів і навігація по них у програмах Canvas

Створюйте сучасні, адаптивні програми, додаючи готові екрани для поширених сценаріїв програм. Екрани оснащені адаптивними контейнерами та сучасними елементами керування, які адаптуються до різних розмірів екрану. Ви також можете додавати власні екрани з різними макетами та елементами керування.

Доступні такі нові готові екрани:

Скріншот меню Новий екран у Power Apps Studio вигляді доступних макетів.

Як додати новий екран

  1. авторизуйтесь в. Power Apps

  2. Створіть програму для роботи з полотном або відкрийте її для редагування.

  3. На панелі команд виберітьпункт Новий екран , а потім виберіть макет екрана.

  4. Підготовча версіяпрограми, щоб визначити, як вона виглядає на різних пристроях. Дізнайтеся більше впідготовчі версії додатка.

Порада

Щоб програма адаптувалася до розміру дисплея пристрою, на якому вона запускається, вимкніть опцію «Масштабувати за розміром ».

Екран привітання

Екран привітання ідеально підходить для першого екрана програми, де ви можете налаштувати такі плитки, як зображення, заголовок і опис. Ви можете змінювати кількість плиток, додаючи або видаляючи їх в основному контейнері. Використовуйте плитки, щоб перенаправляти користувачів до інших частин програми.

Екран привітання має такий шаблон для елементів керування:

  • Контейнер для сітки
    • Контейнер заголовка
      • Заголовок
    • Основний контейнер
      • Контейнер
        • Контейнер зображень
          • Image
        • Контейнер заголовків
          • Кнопка елемента функції
          • Текст опису

Знімок екрана, на якому показано, що з’являється, коли ви додаєте макет екрана привітання за допомогою кнопки Новий екран.

Додавання та налаштування екрана привітання

  1. Виберіть Новий екран>Екран привітання.

  2. Щоб змінити зображення плитки, виділіть її, а потім натисніть кнопку Редагувати.

  3. Виберіть елемент керування кнопкою «Елемент функції» та додайте власний текст на панелі «Властивості».

    Скріншот, на якому показано, де редагувати текст плитки «Рекомендований елемент».

  4. Виберіть короткий опис або цікавий текст повідомлення та додайте власний.

  5. Додавайте та видаляйте плитки, якщо потрібно.

    • Щоб додати плитки в режимі перегляду дерева, скопіюйте та вставте елемент контейнера .

    • Щоб видалити плитку в режимі дерева, клацніть контейнер правою кнопкою миші та виберіть команду Видалити.

Використовуйте екран Верхній колонтитул і галерея , щоб відображати низку відомостей про товари або послуги, наприклад каталог товарів. Коли ви підключаєте елемент керування галереєю до джерело даних, каталог автоматично створюється з невеликими потребами в налаштуванні.

Елемент керування галереєю на екрані «Заголовки та галерея » є класичним елементом керування. Коли відпускається сучасний елемент керування галереєю, на екрані «Заголовок і галерея » використовується він. Дізнайтеся більше в Огляді сучасних елементів керування та тем у програмах Canvas.

Екран «Заголовок і галерея » має такий шаблон для елементів керування:

  • Контейнер для сітки
    • Контейнер заголовка
      • Заголовок
    • Основний контейнер
      • Галерея
        • Контейнер-галерея
          • Контейнер зображень
            • Image
          • Контейнер заголовків
            • Текст назви
            • Текст опису
          • Контейнер з кнопками
            • Button

Знімок екрана, на якому видно екран Заголовка та галерея.

  1. Виберіть Новий заголовок екрана>та галерея.

  2. У режимі перегляду дерева виберіть Галерея та підключіть її до джерела даних, наприклад Dataverse.

  3. Виберіть конкретні елементи керування в галереї, такі як зображення, текст заголовку та текстовий опис. У властивостях елемента керування використовуйте синтаксис ThisItIt, щоб встановити потрібне зображення, текст заголовку та опис.

    Наприклад, щоб додати ім’я облікового запису до текстового елемента керування заголовком, знайдіть його, ввівши ThisItem текст у рядку формул, щоб переглянути список доступних елементів, які можна додати з набору даних.

    Скріншот, на якому показано, де використовувати ThisItem у рядку формул.

Екран запиту на затвердження

Екран запиту на затвердження має заголовок, форму з кнопкою відправки та галерею з попередньо визначеними етапами. Екран «Запит на затвердження» зручний для сценаріїв, коли дії ініціюються надсиланням форми, наприклад надсилання запиту на затвердження або відображення процесу робочого процесу для бізнесу.

Порада

Коли ви додаєте екран запиту на затвердження, вам буде запропоновано підключити його до джерело даних. джерело даних визначає назви полів у формі запиту.

Екран запиту на затвердження має такий шаблон для елементів керування:

  • Контейнер для сітки
    • Контейнер заголовка
      • Заголовок
    • Основний контейнер
      • Форма контейнера
        • Текст заголовка форми
        • Форма затвердження
        • Кнопка надсилання
      • Контейнер бічної панелі
        • Текст рецензентів
        • Галерея рецензентів

Знімок екрана, на якому показано екран запиту на затвердження.

Додавання та налаштування екрана запиту на затвердження

  1. Виберіть Новий запит на> затвердження екрана.

  2. У деревоподібному поданні ApprovalForm вам буде запропоновано підключитися до джерела даних, наприклад Dataverse.

  3. Вибір джерела даних.

  4. Щоб переглянути деталі етапів затвердження, у вигляді дерева виберіть ReviewersGallery під вузлом SidebarContainer . Потім на панелі властивостей виберіть вкладку Додатково та перейдіть до Елементи.

    Етапи затвердження мають такі деталі:

    • Назва: Назва сцени або затверджувача
    • Назва: Підзаголовок сцени або затверджувача
    • Статус: Статус етапу
    • Поточний: чи є цей етап поточним етапом запиту на схвалення.

    Знімок екрана, на якому показано властивість Елементи додатково.

Ви можете додати Power Automate робочий процес затвердження в кнопці для сповіщення затверджувача. Дізнайтеся більше в статті Створення та тестування робочого процесу затвердження за допомогою Power Automate.

Заголовок і форма

Екран Верхній і Зовнішній колонтитул містить заголовок, форму та дві кнопки для надсилання форми або скасування надсилання форми. Цей екран чудово підходить для використання повноекранної форми.

Екран Верхній колонтитул і форма має такий шаблон для елементів керування:

  • Контейнер для сітки
    • Контейнер заголовка
      • Заголовок
    • Основний контейнер
      • Форма контейнера
        • Форма
      • Контейнер з кнопками
        • Кнопка «Скасувати»
        • Кнопка надсилання

Скріншот, на якому показано екран Заголовок і форма.

Додавання та налаштування екрана Верхнього колонтитула та форми

  1. Виберіть Новий>заголовок екрана та форма.

  2. У режимі дерева ви бачите вибрану форму та з’являється запит на підключення форми до джерело даних.

  3. Вибір джерела даних.

  4. За бажанням, щоб забезпечити найкращу реакцію екрана, виберіть кожну картку даних у формі та встановіть для її властивості Width Fit значення On (Увімкнено ) на вкладці Дисплей панелі Властивості .

Заголовок і таблиця

Екран заголовків і таблиці має два елементи керування: елемент керування заголовком і елемент керування таблицею. Цей шаблон чудово підходить для відображення детальної таблиці даних на екрані.

Екран заголовків і таблиці має такі елементи керування:

  • Контейнер заголовка
    • Заголовок
  • Основний контейнер
    • Table

Додайте та налаштуйте екран заголовка та таблиці

  1. Виберіть Новий>заголовок екрана та таблиця.

  2. У поданні дерева виберіть Таблиця та підключіть її до джерело даних.

Таблиця і форма

Екран Таблиця та форма містить два основні елементи керування: сучасний елемент керування таблицею та елемент керування сучасною формою. Цей шаблон має вбудовані Power Fx формули, які дозволяють легко підключати та налаштовувати дані. Цей шаблон ідеально підходить для вибору та редагування запису за допомогою форми.

Екран Таблиця та форма містить такі елементи керування:

  • Контейнер для сітки
    • Контейнер заголовка
      • Керування заголовком
    • Контейнер для тіла
      • Введення тексту (пошук)
      • Управління столом
      • Управління формами
      • Кнопку
        • Оновити
        • Редагування
        • Delete
        • Надіслати
        • Скасування

Скріншот, на якому показано екран таблиці та форми.

Додавання та налаштування екрана таблиці та форми

У: Power Apps Studio

  1. Виберіть Нова екранна>таблиця та форма.

  2. Виберіть «Дані » на вбудованій панелі дій.

  3. Виберіть потрібне джерело даних.

    Скріншот, на якому показано розташування кнопки Дані, де можна вибрати джерело даних зі списку.

    Після підключення елементи керування таблицею та формою прив’язуються до джерело даних.

Ви можете вибрати запис в елементі керування таблицею, і у формі відобразяться відомості про вибраний запис.

Усі кнопки в цьому шаблоні мають попередньо вбудовані Power Fx налаштування, тому немає потреби в додатковому налаштуванні. Коли ви підключаєте екран до вибраного джерело даних, екран тепер повністю функціональний.

Скріншот, на якому видно вигляд екрану при підключенні до джерело даних: список даних та його елементи форми з кнопкою відправки.

Зміна порядку екранів

Якщо у вашій програмі є кілька екранів, ви можете розташувати їх у різному порядку в поданні дерева.

Виберіть меню переповнення екрана, порядок якого потрібно змінити, а потім виберіть Перемістити вгору або Перемістити вниз.

Знімок екрана, на якому показано, де розташоване меню переповнення, щоб перемістити екран вгору або вниз у режимі перегляду дерева.

Використовуйте властивість StartScreen , щоб налаштувати екран, який відображатиметься першим.

Додавання переходів

Якщо у вашому додатку кілька екранів, ви можете додати навігацію, щоб користувачі могли переходити між ними.

  1. Вибравши екран, виберіть Вставити. У полі пошуку введіть стрілку Далі та виберіть її.

  2. Перемістіть стрілку в потрібне місце на екрані.

  3. Вибравши стрілку, встановіть для властивості OnSelect значення функції Навігація , наприклад, Navigate (Target, Fade).

    Замініть «Ціль» на назву екрана, на якому ви хочете переміститися.

    Скріншот властивості OnSelect, встановленої на функцію Navigate.

    У цьому прикладі, коли користувач натискає стрілку, цільовий екран зникає.

  4. На екрані «Ціль» таким же чином додайте значок зі стрілкою назад. Встановіть його властивість OnSelect , наприклад, Navigate(Target, ScreenTransition.Fade).

    Замініть Ціль на назву екрана, на який ви хочете повернутися.

Довідник з екранного керування