Создание приложения с нуляCreate an app from scratch

Создайте собственное приложение с нуля с помощью одного из различных источников данных, которые в дальнейшем можно расширить.Create your own app from scratch using any one of a variety of data sources, adding more sources later if you want. Укажите внешний вид и поведение каждого элемента пользовательского интерфейса, чтобы оптимизировать результат в соответствии с конкретными целями и рабочим процессом.Specify the appearance and behavior of each UI element so that you can optimize the result for your exact goals and workflow. Этот подход требует намного больше времени, чем автоматическое создание приложения, однако позволяет опытному пользователю создать приложение, оптимальным образом отвечающее его потребностям.This approach is much more time-intensive than generating an app automatically, but experienced app makers can build the best app for their needs.

Примечание. Эта статья написана для PowerApps Studio для Windows, но если открыть PowerApps в браузере, действия будут схожими.Note: This topic was written for PowerApps Studio for Windows, but the steps are similar if you open PowerApps in a browser.

Следуя указаниям в этом руководстве, вы создадите приложение с двумя экранами.By following this tutorial, you'll create an app that contains two screens. На одном экране пользователи смогут просматривать набор записей.On one screen, users can browse through a set of records:

Экран, на котором пользователь может просматривать набор данных путем прокрутки

На другом экране пользователи могут создать запись, обновить одно или несколько полей в записи или удалить всю запись.On the other screen, users can create a record, update one or more fields in a record, or delete an entire record:

Экран, на котором пользователь может добавлять и обновлять данные

Технические условияPrerequisites

В этом руководстве вы можете ознакомиться с общими понятиями для работы с формами. Если вы хотите в точности выполнить все инструкции, необходимо сначала сделать следующее.You can review this tutorial for general concepts only, or you can follow it exactly if you complete these steps.

  1. Скопируйте эти данные и вставьте их в файл Excel.Copy this data, and then paste it into an Excel file.

    День началаStart Day Время началаStart Time Доброволец 1Volunteer 1 Доброволец 2Volunteer 2
    СубботаSaturday 10:00–12:0010am-noon Васкес (Vasquez)Vasquez Кумаширо (Kumashiro)Kumashiro
    СубботаSaturday 12:00–14:00noon-2pm Айс (Ice)Ice Сингхал (Singhal)Singhal
    СубботаSaturday 14:00–16:002pm-4-pm Мик (Myk)Myk Мюллер (Mueller)Mueller
    ВоскресеньеSunday 10:00–12:0010am-noon Ли (Li)Li Адамс (Adams)Adams
    ВоскресеньеSunday 10:00–12:0010am-noon Сингх (Singh)Singh Морган (Morgan)Morgan
    ВоскресеньеSunday 10:00–12:0010am-noon Батье (Batye)Batye Нгуен (Nguyen)Nguyen
  2. Отформатируйте данные в виде таблицы под названием Schedule, чтобы приложение PowerApps могло проанализировать их.Format that data as a table, named Schedule, so that PowerApps can parse the information.

    Дополнительные сведения см. в статье о создании таблицы Excel на листе.For more information, see Create an Excel table in a worksheet.

  3. Сохраните файл под именем eventsignup.xls, а затем отправьте его в облачное хранилище, например OneDrive.Save the file under the name eventsignup.xls, and then upload it to a cloud-storage account, such as OneDrive.
  4. Если вы впервые работаете с PowerApps, сделайте следующее:If you're new to PowerApps:

Создание пустого приложения и подключение к даннымCreate a blank app, and connect to data

  1. В PowerApps Studio выберите New (Создать) в меню File (Файл) (у левого края экрана).In PowerApps Studio, click or tap New on the File menu (near the left edge of the screen).

    Пункт "Создать" в меню "Файл"

  2. На плитке Blank app (Пустое приложение) щелкните или нажмите Phone layout (Макет телефона).On the Blank app tile, click or tap Phone layout.

    Параметр для создания приложения на основе данных

  3. Если появится запрос, ознакомьтесь с кратким обзором основных областей PowerApps (либо щелкните или коснитесь Пропустить).If prompted, take the intro tour to understand the main areas of PowerApps (or click or tap Skip).

    Краткий обзор

    Просмотреть обзор можно в любой момент. Для этого щелкните значок вопросительного знака в правом верхнем углу экрана, а затем выберите Take the intro tour (Ознакомиться с кратким обзором).You can always take the tour later by clicking or tapping the question-mark icon near the upper-left corner of the screen and then clicking or tapping Take the intro tour.

  4. На панели навигации слева щелкните (коснитесь) значок, расположенный в правом верхнем углу, чтобы переключиться на представление эскиза.In the left navigation bar, click or tap an icon in the upper-right corner to switch to the thumbnail view.

    Переключение представлений

  5. На панели справа щелкните или нажмите Добавить источник данных.In the right-hand pane, click or tap Add data source.

    Добавление источника данных

  6. Выполните одно из следующих действий.Perform either of these steps:

    • при наличии подключения к вашей учетной записи облачного хранилища выберите его;If you already have a connection to your cloud-storage account, click or tap it.
    • при отсутствии подключения к вашей учетной записи облачного хранилища щелкните или коснитесь Добавить подключение, выберите тип учетной записи, щелкните или коснитесь Подключиться, а затем (при появлении соответствующего запроса) укажите свои учетные данные.If you don't have a connection to your cloud-storage account, click or tap Add Connection, click or tap your account type, click or tap Connect, and then (if prompted) provide your credentials.
  7. В разделе Choose an Excel file (Выбор файла Excel) перейдите к файлу eventsignup.xlsx и выберите его.Under Choose an Excel file, browse to eventsignup.xlsx, and then click or tap it.

    Выбор файла Excel, который необходимо использовать

  8. В разделе Choose a table (Выбор таблицы) установите флажок Расписание, а затем выберите Подключиться.Under Choose a table, select the Schedule check box, and then click or tap Connect.

    Выбор таблицы в Excel, которую необходимо использовать

    На вкладке Источники данных на панели справа отображаются источники данных, добавленные в приложение.The Data sources tab of the right-hand pane shows which data sources you've added to your app.

    Отображение подключенных источников данных

    В этом руководстве требуется только один источник данных, но можно добавить дополнительные источники данных позже.This tutorial requires only one data source, but you can add more data sources later.

Отображение данныхShow the data

  1. На вкладке Главная выберите Новый экран, а затем — Окно списка.In the Home tab, click or tap New screen and then click or tap List screen.

    Добавление макета с заголовком, подзаголовком и текстом

    Экран добавляется с несколькими элементами управления по умолчанию, в том числе с полем поиска и элементом управления Коллекция.A screen is added with several default controls, such as a search box and a Gallery control. Коллекция занимает размер всего экрана под полем поиска.The gallery covers the entire screen under the search box.

  2. Щелкните или нажмите в любом месте в коллекции, за исключением стрелки, например непосредственно под полем поиска.Click or tap anywhere in the gallery except an arrow, such as directly under the search box.

    Выбор коллекции

  3. В правой области откройте список Макеты, а затем щелкните (коснитесь) макет, который содержит заголовок, подзаголовок и текст.In the right-hand pane, open the Layouts list, and then click or tap the option that shows a title, a subtitle and body.

    Выбор коллекции

  4. В списке свойств выберите Items, скопируйте эту формулу и вставьте ее в строку формул:In the property list, click or tap Items, copy this formula, and paste it into the formula bar:

    SortByColumns(Search(Schedule, TextSearchBox1.Text, "Volunteer_x0020_1"), "Volunteer_x0020_1", If(SortDescending1, SortOrder.Descending, SortOrder.Ascending))SortByColumns(Search(Schedule, TextSearchBox1.Text, "Volunteer_x0020_1"), "Volunteer_x0020_1", If(SortDescending1, SortOrder.Descending, SortOrder.Ascending))

    Если вы не знаете, где находится список свойств, прочитайте раздел Добавление и настройка элемента управления в PowerApps.If you're not sure where the property list is, see Add and configure controls.

    Примечание. Для источников данных Excel или SharePoint, содержащих имена столбцов с пробелами, PowerApps отображает пробелы как "_x0020_".Note: For Excel or SharePoint data sources that contain column names with spaces, PowerApps shows the spaces as "_x0020_". В этом примере столбец Volunteer 1 отображается в формуле как Volunteer_x0020_1.In this example, the column "Volunteer 1" appears in a formula as "Volunteer_x0020_1".

    В этой коллекции отображаются данные из таблицы Расписание.This gallery shows the data from the Schedule table.

    Данные таблицы "Расписание" в коллекции по умолчанию

    С помощью поля поиска можно отфильтровать коллекцию по введенному пользователем тексту.A search box can filter the gallery based on text that the user types. Если пользователь вводит в поле поиска хотя бы одну букву, в коллекции отображаются только те записи, для которых поле Доброволец 1 содержит эту букву.If a user types at least one letter in the search box, the gallery shows only those records for which the Volunteer 1 field contains the text that the user typed.

    С помощью кнопки сортировки можно отсортировать записи на основе данных в столбце Доброволец 1.The sort button can sort the records based on data in the Volunteer 1 column. Если пользователь нажимает эту кнопку или касается ее, порядок сортировки переключается между сортировкой по возрастанию и по убыванию.If a user clicks or taps that button, the sort order toggles between ascending and descending.

    Эта формула содержит функции Sort, If, IsBlank, Filter и Text.That formula contains the Sort, If, IsBlank, Filter, and Text functions. Дополнительные сведения об этих и других функциях приведены в справочнике формулFor more information about these and other functions, see the formula reference

  5. Введите i в поле поиска и нажмите кнопку сортировки один раз (или нечетное число раз).Type an i in the search box, and click or tap the sort button once (or an odd number of times).

    В коллекции отобразятся показанные ниже результаты.The gallery shows these results.

    Сортировка и фильтрация содержимого коллекции

    Узнайте больше о сортировке, фильтрах и других функциях.More information about the Sort, Filter, and other functions

  6. Выберите элемент управления Метка в верхней части экрана, щелкнув или коснувшись его.Select the Label control at the top of the screen by clicking or tapping the control.

    Выбранная строка заголовка

  7. В списке свойств выберите Text, скопируйте этот текст и вставьте его в строку формул:In the property list, click or tap Text, copy this text, and then paste it in the formula bar.
    "Просмотр записей" "View Records"

    Изменение строки заголовка

Создание экрана ChangeScreen и соответствующего заголовкаCreate the ChangeScreen and its banner

  1. Удалите Screen1 и переименуйте Screen2 во ViewScreen.Delete Screen1, and rename Screen2 to ViewScreen.

    Переименование экрана

  2. Добавьте экран и переименуйте его на ChangeScreen.Add a screen, and rename it ChangeScreen.

    Добавление и переименование экрана

  3. На вкладке Вставка щелкните или коснитесь Текст, а затем — Метка.On the Insert tab, click or tap Text, and then click or tap Label.
  4. Настройте только что добавленную метку.Configure the Label control that you just added:

    • Для свойства Text (Текст) задайте следующее значение:Set its Text property to this formula:
      "Изменить запись""Change record"
    • Для свойства Fill (Заливка) задайте следующую формулу:Set its Fill property to this formula:
      RGBA(62, 96, 170, 1).RGBA(62, 96, 170, 1).
    • Для свойства Color (Цвет) задайте следующую формулу:Set its Color property to this formula:
      RGBA(255, 255, 255, 1)RGBA(255, 255, 255, 1)
    • Для свойства Align (Выравнивание) выберите вариант Center (По центру).Set its Align property to Center.
    • Для свойства X задайте значение 0.Set its X property to 0.
    • Для свойства Width (Ширина) задайте значение 640.Set its Width property to 640.

      После этого в элементе управления Метка отобразятся изменения.The Label control reflects your changes.

      ChangeScreen с баннером

Добавление и настройка формыAdd and configure a form

  1. На вкладке Insert (Вставка) щелкните или нажмите Forms (Формы), а затем — Edit (Изменить).On the Insert tab, click or tap Forms, and then click or tap Edit.
  2. Переместите форму и измените ее размер так, чтобы она занимала большую часть экрана.Move and resize the form to cover most of the screen.

    Добавление формы

    Форма называется Form1 по умолчанию, если вы еще не добавили и не удалили ее.The form is named Form1 by default unless you already added and removed a form. В противном случае измените имя формы на Form1.In that case, rename the form to Form1.

  3. Установите для свойства DataSource (Источник данных) формы Form1 значение Schedule.Set DataSource property of Form1 to Schedule.
  4. Установите для свойства Item (Элемент) формыForm1 следующее выражение:Set the Item property of Form1 to this expression:
    BrowseGallery1.SelectedBrowseGallery1.Selected
  5. В правой области щелкните (коснитесь) флажок для каждого поля, которое нужно отобразить.In the right-hand pane, click or tap the checkbox for each field to show it.

    Отображение полей в форме

  6. В нижней части формы щелкните или нажмите Add a custom card (Добавить пользовательскую карточку).Near the bottom of the form, click or tap Add a custom card.

    Добавление пользовательской карточки

  7. Добавьте на новую карточку элемент управления Метка.Add a Label control in the new card.
  8. Задайте для свойства AutoHeight (Автоматический подбор высоты) нового элемента управления значение true, а для его свойства Text (Текст) — эту формулу:Set the AutoHeight property of the new control to true, and set its Text property to this formula:
    Form1.ErrorForm1.Error

    В метке отобразятся все ошибки в форме.The label will show any errors from the form.

  9. На панели навигации слева выберите эскиз экрана ChangeScreen, чтобы выбрать его.In the left navigation bar, click or tap the thumbnail for the ChangeScreen to select it.
  10. На вкладке Insert (Вставка) щелкните или нажмите Icons (Значки), добавьте значок стрелки назад, а затем перетащите стрелку в левый нижний угол экрана.On the Insert tab, click or tap Icons, click or tap the option to add a Back arrow, and then move the arrow to the lower-left corner of the screen.
  11. Задайте для свойства OnSelect стрелки эту формулу:Set the arrow's OnSelect property to this formula:

    ResetForm(Form1);Navigate(ViewScreen,ScreenTransition.None)ResetForm(Form1);Navigate(ViewScreen,ScreenTransition.None)

    Когда пользователь щелкает стрелку или нажимает на нее, функция навигации открывает экран ViewScreen.When the user clicks or taps the arrow, the Navigate function opens the ViewScreen.

  12. Добавьте элемент управления Кнопка под форму и задайте для свойства кнопки Text значение "Сохранить".Add a Button control under the form, and set the button's Text property to "Save".

    Добавление кнопки "Сохранить"

  13. Задайте для свойства OnSelect кнопки эту формулу:Set the OnSelect property of the button to this formula::

    SubmitForm(Form1); If(Form1.ErrorKind = ErrorKind.None, Navigate(ViewScreen, ScreenTransition.None))SubmitForm(Form1); If(Form1.ErrorKind = ErrorKind.None, Navigate(ViewScreen, ScreenTransition.None))

    Когда пользователь нажимает кнопку или касается ее, функция SubmitForm сохраняет все изменения в источнике данных и экран ViewScreen повторно отображается.When the user clicks or taps the button, the SubmitForm function saves any changes to the data source, and the ViewScreen reappears.

  14. В нижней части экрана добавьте еще одну кнопку, задайте для ее свойства Text значение "Удалить", а для ее свойства OnSelect задайте эту формулу:At the bottom of the screen, add another button, set its Text property to "Remove", and set its OnSelect property to this formula:

    Remove(Schedule,BrowseGallery1.Selected);
    If(IsEmpty(Errors(Schedule)),Navigate(ViewScreen,ScreenTransition.None))
    Remove(Schedule,BrowseGallery1.Selected);
    If(IsEmpty(Errors(Schedule)),Navigate(ViewScreen,ScreenTransition.None))

    Когда пользователь нажимает эту кнопку или касается ее, функция Remove удаляет запись и экран ViewScreen повторно отображается.When the user clicks or taps this button, the Remove function removes the record, and the ViewScreen reappears.

  15. Задайте для свойства Visible кнопки Удалить эту формулу:Set the Visible property of the Remove button to this formula:
    Form1.Mode=FormMode.EditForm1.Mode=FormMode.Edit

    После выполнения этого действия кнопка Удалить не будет отображаться во время создания записи пользователем.This step hides the Remove button when the user is creating a record.

    Экран ChangeScreen соответствует этому примеру:The ChangeScreen matches this example:

    Итоговый экран ChangeScreen

Установка навигации из экрана ViewScreenSet navigation from ViewScreen

  1. На панели навигации слева выберите эскиз экрана ViewScreen.In the left navigation bar, click or tap the thumbnail for the ViewScreen.

    Открытие экрана ViewScreen

  2. Выберите стрелку следующей записи для первой записи в коллекции.Click or tap the Next arrow for the first record in the gallery.

    Стрелка далее

  3. Задайте для свойства OnSelect стрелки эту формулу:Set the OnSelect property of that arrow to this formula:

    Navigate(ChangeScreen,ScreenTransition.None)Navigate(ChangeScreen,ScreenTransition.None)

  4. В правом верхнем углу экрана щелкните или нажмите на значок плюса.In the upper-right corner, click or tap the plus icon.

    Добавление записи

  5. Задайте для свойства OnSelect выбранного значка эту формулу:Set the OnSelect property of the selected icon to this formula:

    NewForm(Form1);Navigate(ChangeScreen,ScreenTransition.None)`NewForm(Form1);Navigate(ChangeScreen,ScreenTransition.None)`

    Когда пользователь щелкает этот значок или касается его, экран ChangeScreen отображается с пустыми полями, чтобы пользователю было проще создать запись.When the user clicks or taps this icon, ChangeScreen appears with each field empty, so that the user can create a record more easily.

Запуск приложенияRun the app

После настройки приложения проверьте изменения, запустив его в режиме предварительного просмотра, как описано в этом разделе.As you customize the app, test your changes by running the app in Preview mode, as the steps in this section describe.

  1. На панели навигации слева щелкните или нажмите на верхний эскиз, чтобы выбрать экран ViewScreen.In the left navigation bar, click or tap the top thumbnail to select the ViewScreen.

    Выбор экрана ViewScreen

  2. Откройте режим предварительного просмотра, нажав клавишу F5 (либо щелкнув значок Предварительный просмотр или коснувшись его в правом верхнем углу).Open Preview mode by pressing F5 (or clicking or tapping the Preview icon near the upper-right corner).

    Открытие режима предварительного просмотра

  3. Щелкните стрелку далее или коснитесь ее для записи, чтобы отобразить сведения об этой записи.Click or tap the Next arrow for a record to show details about that record.
  4. На экране ChangeScreen измените сведения в одном или нескольких полях, а затем сохраните изменения с помощью кнопки Save (Сохранить) либо удалите эту запись с помощью кнопки Remove (Удалить).On the ChangeScreen, change the information in one or more fields, and then save your changes by clicking or tapping Save, or remove the record by clicking or tapping Remove.
  5. Закройте режим предварительного просмотра, нажав клавишу ESC (либо щелкните значок закрытия или коснитесь его в строке заголовка).Close Preview mode by pressing Esc (or by clicking or tapping the close icon under the title bar).

    Закрытие режима предварительного просмотра

Дальнейшие действияNext steps