Создание приложения с помощью SharePointCreating an app from SharePoint

Создание приложения с тремя экранами из списка SharePoint с последующим просмотром и экранов и элементов управления в приложении.Generate a three screen app from a SharePoint list, then explore screens and controls from the app. Обновление полей, элементов управления и экранов приложения. Использование формул для дополнительной настройки поведения приложения.Update app screens, controls, and fields; and use formulas to further customize app behavior.

Вы узнаете, как...

Создание приложенияGenerate an app

В этом разделе мы создадим из списка SharePoint приложение с именем "Flooring Estimates" (Оценка покрытий для пола).In this section of the course, we'll create an app from a "Flooring Estimates" SharePoint list. Приложение может использовать кто угодно, например оценщик, работающий на объекте клиента, может сверяться со списком и обновлять его.The app could be used by someone, such as an estimator out at customer sites, to refer to the list and keep it up-to-date. В разделе с вводными сведениями мы показали, как создать приложение из этого же списка. Следовательно, к этой теме мы уже не будем возвращаться.In the Getting Started section, we showed you how to generate an app from the same list - so why look at it again? Во-первых, мы не будем работать в PowerApps Studio, а сразу покажем, как служба PowerApps интегрирована в SharePoint Online.First, instead of starting in PowerApps Studio, we now show you how PowerApps is integrated into SharePoint Online. Во-вторых, мы подробно рассмотрим компоненты приложения и покажем, как его настроить.Second, we dig deeper into how the app is put together, and show you how to customize it. Из этого раздела вы в любом случае узнаете что-то новое. Так что приступим!You'll definitely get some new information going through this section, so let's jump in!

Создание приложенияGenerate the app

Ниже приведен список SharePoint с именем "Flooring Estimates" (Оценка покрытий для пола). Он содержит основные сведения, включая имя и цену, а также изображение каждого типа покрытия для пола.The following image shows the "Flooring Estimates" SharePoint list, which contains basic information like name and price, and an image for each flooring type. Как видите, PowerApps и Microsoft Flow теперь интегрированы в SharePoint Online, и вы можете легко создавать приложения и потоки из списков.You can see how PowerApps and Microsoft Flow are now integrated into SharePoint Online, so you can easily build apps and flows from your lists.

Список "Оценка покрытий для пола"

Чтобы создать приложение, нажмите кнопку PowerApps, а затем — Create an app (Создать приложение).To build an app, click PowerApps, then Create an app. На панели справа введите имя приложения, а затем нажмите кнопку Create (Создать).In the right hand pane, enter a name for the app, then click Create. После нажатия кнопки Create (Создать) PowerApps начнет создавать приложение.After you click Create, PowerApps starts to generate the app. PowerApps проанализирует ваши данные, чтобы создать полезное базовое приложение.PowerApps makes all sorts of inferences about your data so that it generates a useful app as a starting point.

Создание приложения из списка

Просмотр приложения в PowerApps StudioView the app in PowerApps Studio

Новое приложение с тремя экранами откроется в PowerApps Studio.Your new three-screen app opens in PowerApps Studio. Все приложения, созданные на основе данных, имеют одинаковый набор экранов.All apps generated from data have the same set of screens:

  • Экран обзора — обзор, сортировка, фильтрация и обновление данных из списка, а также добавление элементов с помощью значка "плюс" (+).The browse screen: where you browse, sort, filter, and refresh the data pulled in from the list, as well as add items by clicking the (+) icon.
  • Экран сведений — просмотр дополнительных сведений и возможность удаления или изменения элемента.The details screen: where you view more detail about an item, and can choose to delete or edit the item.
  • Экран изменения или создания — изменение существующего элемента или создание нового.The edit/create screen: where you edit an existing item or create a new one.

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

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

Щелкните (коснитесь) каждый эскиз, чтобы просмотреть элементы управления на соответствующем экране.Click or tap each thumbnail to view the controls on that screen.

Созданное приложение

Запуск приложения в режиме предварительного просмотраRun the app in preview mode

Выберите стрелкуClick or tap Стрелка запуска предварительного просмотра приложения в верхнем правом углу, чтобы запустить приложение.in the top-right corner to run the app. Во время навигации по приложению вы увидите, что оно содержит все данные из списка и имеет стандартный интерфейс.If you navigate through the app, you see that it includes all the data from the list and provides a good default experience.

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

В следующем разделе мы продолжим изучать возможности приложения и настроим его для выполнения наших заданий.Next we'll explore the app in more detail and later customize the app so it better suits our needs.

Обзор созданного приложенияExplore a generated app

В этой статье мы ознакомимся с возможностями созданного приложения: рассмотрим экраны и элементы управления, которые определяют поведение приложения.In this topic, we look more closely at the generated app - reviewing the screens and controls that define the app's behavior. Мы не будем углубляться в детали, но вам будет полезно разобраться в механизме работы этого приложения, чтобы вы могли создавать свои решения.We won't go through all the details, but seeing more about how this app works will help you to build your own apps. В следующей статье мы рассмотрим формулы, которые используются с экранами и элементами управления.In a later topic, we'll look at the formulas that work with screens and controls.

Общие сведения об элементах управления в PowerAppsUnderstanding controls in PowerApps

Элемент управления — это просто элемент пользовательского интерфейса, связанный с определенным поведением.A control is simply a UI element that has behaviors associated with it. В PowerApps используется много стандартных элементов управления, характерных для других приложений: метки, текстовые поля, раскрывающиеся списки, элементы навигации и т. д.Many controls in PowerApps are the same as controls that you've used in other apps: labels, text-input boxes, drop-down lists, navigation elements, and so on. Кроме них в PowerApps есть и более специализированные элементы управления, например галереи (отображают сводные данные) и формы (отображают подробные данные, а также позволяют создавать и изменять элементы).But PowerApps has more specialized controls like Galleries (which display summary data) and Forms (which display detail data and enable you to create and edit items). Здесь вы также найдете другие, не менее интересные элементы управления для работы с изображениями, камерой и штрих-кодами.And also some other really cool controls like Image, Camera, and Barcode. Чтобы узнать, какие элементы доступны, выберите на ленте элемент Вставка, а затем последовательно просмотрите все варианты, начиная от элемента Текст и заканчивая элементом Значки.To see what's available, click or tap Insert on the ribbon, and then click or tap each of the options in turn, Text through Icons.

Вкладка элементов управления на ленте PowerApps Studio

Знакомство с экраном обзораExplore the browse screen

Каждый из трех экранов приложения включает основной элемент управления и несколько дополнительных.Each of the three app screens has a main control and some additional controls. Первым экраном в приложении является экран обзора с именем BrowseScreen1 по умолчанию.The first screen in the app is the browse screen, named BrowseScreen1 by default. Основной элемент управления на этом экране — коллекция с именем BrowseGallery1.The main control on this screen is a gallery named BrowseGallery1. BrowseGallery1 содержит другие элементы управления, включая NextArrow1 (элемент управления "значок". Выберите его, чтобы перейти на экран сведений).BrowseGallery1 contains other controls, like NextArrow1 (an icon control - click or tap it to go to the details screen). На экране доступны также отдельные элементы управления, например IconNewItem1 (элемент управления "значок". Выберите его, чтобы создать элемент на экране изменения или создания).There are also separate controls on the screen, like IconNewItem1 (an icon control - click or tap it to create an item in the edit/create screen).

Экран обзора с элементами управления

Так как в PowerApps доступны коллекции разных типов, вы можете использовать ту, которая наиболее соответствует требованиям макета приложения.PowerApps has a variety of gallery types so you can use the one that best suits your app's layout requirements. Далее в этом разделе мы покажем вам несколько способов управления макетом.You will see more ways to control layout later in this section.

Параметры коллекции PowerApps

Обзор экрана сведенийExplore the details screen

Далее идет экран сведений с именем DetailScreen1 по умолчанию.Next is the details screen, named DetailScreen1 by default. Основной элемент управления на этом экране — форма просмотра с именем DetailForm1.The main control on this screen is a display form named DetailForm1. DetailForm1 содержит другие элементы управления, включая DataCard1 (элемент управления "карта", который отображает категорию покрытия для пола в нашем примере).DetailForm1 contains other controls, like DataCard1 (a card control, which displays the flooring category in this case). На экране доступны также отдельные элементы управления, например IconEdit1 (элемент управления "значок". Выберите его, чтобы изменить текущий элемент на экране изменения или создания).There are also separate controls on the screen like IconEdit1 (an icon control - click or tap it to edit the current item on the edit/create screen).

Экран сведений с элементами управления

В коллекциях реализовано множество параметров, тогда как формы представляют более простые решения — это либо форма редактирования, либо форма просмотра.There are lots of gallery options, but forms are more straightforward - it's either an edit form or a display form.

Параметры форм PowerApps

Обзор экрана изменения или созданияExplore the edit/create screen

Третье окно в приложении представлено экраном изменения или создания с именем EditScreen1 по умолчанию.The third screen in the app is the edit/create screen, named EditScreen1 by default. Основной элемент управления на этом экране — форма редактирования с именем EditForm1.The main control on this screen is an edit form named EditForm1. EditForm1 содержит другие элементы управления, включая DataCard8 (элемент управления "карта", который позволяет изменить категорию покрытия для пола в нашем примере).EditForm1 contains other controls, like DataCard8 (a card control, which allows you to edit the flooring category in this case). На экране доступны также отдельные элементы управления, например IconAccept1 (элемент управления "значок". Выберите его, чтобы сохранить изменения, внесенные на экране изменения или создания).There are also separate controls on the screen like IconAccept1 (an icon control - click or tap it to save the changes you made on the edit/create screen).

Экран изменения с элементами управления

Теперь вы знаете, какие экраны и элементы управления содержит приложение. В следующей статье мы объясним, как настроить такое приложение.Now that you have a sense of how the app is composed of screens and controls, we'll look at how you customize the app in the next topic.

Настройка приложенияCustomize the app

Из первых двух статей этого раздела вы узнали, как создать приложение из списка SharePoint и ознакомились с компонентами, из которых состоит приложение с тремя экранами.In the first two topics in this section, you generated an app from a SharePoint list and explored the app to get a better understanding of how three screen apps are composed. Хотя в PowerApps создаются готовые к использованию приложения, их можно дополнительно настроить позже.The app that PowerApps generated is useful, but you will often customize an app after it's generated. В этой статье мы рассмотрим некоторые базовые изменения, которые можно внести на каждом экране в приложении.In this topic, we'll walk through some basic changes for each screen in the app. Для настройки приложения доступны дополнительные варианты. Мы опишем их в следующих статьях.There is a lot more you can do to customize an app - we'll get to that in later topics. А пока вы можете работать с информацией из этой статьи.In the meantime, you can take what you learn in this topic and build on it. Выберите любое приложение, созданное из списка, файла Excel или другого источника, и посмотрите, как его можно настроить.Take any app you generate-from a list, an Excel file, or another source-and see how you can customize it. Это самый эффективный способ узнать о компонентах приложений.It really is the best way to learn how apps are put together.

Экран обзораBrowse screen

Начнем с экрана обзора.We'll start with the browse screen. Список SharePoint включает изображения всех продуктов, но эти изображения не отображаются по умолчанию.The SharePoint list contains an image for each product but the image isn't displayed by default. Давайте это исправим.Let's fix that. На панели справа на вкладке Layout (Макет) выберите для экрана обзора другой макет.In the right-hand pane, on the Layout tab, select a different layout for the browse screen. Вы сразу же увидите результаты, ведь PowerApps обновляет приложение по мере внесения изменений.You see the results right away because PowerApps updates the app as you make changes.

Изменение макета экрана обзора

Теперь, когда у вас есть правильный базовый макет, вы можете изменить отображаемые поля.With the right basic layout, now change the fields that are displayed. Выберите поле в первом элементе, а затем на панели справа измените сведения, отображаемые для этого элемента.Click or tap a field in the first item, then in the right-hand pane, change the data that is displayed for each item. Так вы получите оптимизированную сводку для каждого элемента в списке.This provides a better summary of each item in the list.

Изменение полей экрана обзора

Экран сведенийDetails screen

На экране сведений нам нужно изменить порядок полей и отобразить изображение.On the details screen, we want to change the order of the fields and display the image also. Здесь представлены другие элементы управления, следовательно, настройка будет немного отличаться от манипуляций с экраном обзора.There are different controls on this screen, so the process is a little different from the browse screen. Выберите поле, а затем из панели справа перетащите вверх поле Title (Заголовок).Click or tap a field, then in the right-hand pane, drag the Title field to the top. Затем выберите поле Image (Изображение), чтобы открыть его.Then click or tap the Image field to display it.

Изменение полей экрана сведений

Экран изменения или созданияEdit/create screen

И, наконец, на экране изменения и создания записей, мы изменим поле, чтобы упростить ввод текста.Finally, on the screen where you edit and create entries, we want to change a field so that it's easier to enter text. Щелкните раскрывающийся список в поле Обзор и выберите элемент управления Изменить многострочный текст.Click or tap the drop-down list for the Overview field, and then click or tap the Edit Multi-line Text control.

Изменение полей экрана редактирования

Как видите, несколько простых действий могут существенно улучшить внешний вид созданного приложения и оптимизировать способ взаимодействия с ним.You can see how a few basic steps can do a lot to improve the appearance and experience of using a generated app. В этой статье мы ознакомились с пользовательским интерфейсом PowerApps Studio, который предоставляет разные возможности для настройки приложения.In this topic, we focused on the PowerApps Studio UI, which provides a lot of options for customizing your apps. В следующей статье мы рассмотрим формулы, которые определяют поведение приложения.In the next topic, we'll get into formulas, which play an important role in driving app behavior.

Explore app formulas (Знакомство с формулами приложения)Explore app formulas

Одним из основных преимуществ PowerApps является то, что вам не нужно писать традиционный код приложения, то есть вы можете создавать приложения, не являясь разработчиком.One of the major benefits of PowerApps is not having to write traditional application code - you don't have to be a developer to create apps! Но вам по-прежнему необходимо реализовать логику в приложении, а также контролировать навигацию, фильтрацию, сортировку и другие функциональные возможности приложения.But you still need a way to express logic in an app and to control an app's navigation, filtering, sorting, and other functionality. Для этого вам потребуются формулы.This is where formulas come in. Если вы уже работали с формулами Excel, подход, который используется в PowerApps, покажется вам знакомым.If you have used Excel formulas, the approach that PowerApps takes should feel familiar. В этой статье мы покажем несколько основных формул для форматирования текста, а затем рассмотрим три формулы, которые служба PowerApps включает в создаваемое приложение.In this topic, we'll show a couple of basic formulas for text formatting and then walk through three of the formulas that PowerApps includes in the generated app. Вы получите представление о возможностях формулы.You will get a taste of what formulas can do. Затем вы можете изучить другие формулы в созданном приложении и написать свою формулу.Then you can spend some time looking at other formulas in the generated app and writing your own.

Основные сведения о формулах и свойствахUnderstanding formulas and properties

В предыдущей статье мы включили поле Price (Цена) в коллекцию экрана обзора, но оно отобразилось как обычное число без символа валюты.In the previous topic, we included the Price field in the browse screen gallery, but it showed up as a plain number without a currency symbol. Предположим, мы хотим добавить знак доллара, а также изменить цвет текста в зависимости от стоимости товара (например, красный при стоимости более 5 долларов, в противном случае — зеленый).Suppose we want to add a dollar sign, and also change the text color depending on how much the item costs (for example red if it's more than $5, otherwise green). Эта концепция показана на следующем рисунке.The following image shows the idea.

Форматирование текста: цвет и валюта

Начнем с форматирования валюты.Let's start with the currency formatting. По умолчанию служба PowerApps просто извлекает для каждого элемента значение цены. Для метки, в которой отображается цена, задано свойство Text.By default PowerApps just pulls in a Price value for each item, which is set as the Text property of the label that displays the price.

Форматирование цены по умолчанию

Чтобы добавить символ валюты США, щелкните метку или коснитесь ее и в строке формул задайте для свойства Text эту формулу.To add the US currency symbol, click or tap the label control, and in the formula bar set the Text property to this formula.

Форматирование валюты цены

С помощью функции Text (Текст) формула Text(Price, "[$-en-US]$ ##.00" указывает способ форматирования числа.The formula - Text(Price, "[$-en-US]$ ##.00" uses the Text function to specify how the number should be formatted. Она напоминает формулы Excel, но формулы PowerApps ссылаются на элементы управления и другие элементы в приложении, а не на ячейки в таблице.The formula is like an Excel formula, but PowerApps formulas refer to controls and other app elements rather than cells in a spreadsheet. Если вы щелкнете элемент управления, а затем откроете раскрывающийся список, отобразятся свойства, которые относятся к элементу управления.If you click or tap a control and then click or tap the property drop down list, you see a list of properties that are relevant to the control. Например, ниже приведен неполный список свойств для метки.For example, here is a partial list of the properties for a label. Одни свойства применимы для многих элементов управления, другие — только для определенного элемента управления.Some properties are relevant across a broad range of controls and others only for a specific control.

Настройка свойств

Для условного форматирования цветом в зависимости от цены используйте следующую формулу для свойства Color метки: If(Price > 5, Color.Red, Color.Green).To format the color conditionally based on the price, use a formula like the following for the Color property of the label: If(Price > 5, Color.Red, Color.Green).

Форматирование цветом на основе цены

Формулы, включенные в создаваемое приложениеFormulas included in the generated app

Теперь, когда вы знаете, как использовать формулы со свойствами, мы рассмотрим три примера формул, которые служба PowerApps использует в создаваемом приложении.Now that you understand how to use formulas in conjunction with properties, we'll look at three examples of formulas that PowerApps uses in the generated app. Все примеры касаются экрана обзора и свойства OnSelect, которое определяет, что происходит, когда пользователь нажимает кнопку или элемент управления в приложении.The examples are all from the browse screen and work with the OnSelect property, which defines what happens when a user clicks or taps an app control.

  • Первая формула связана с элементом управления IconNewItem1: Значок нового элемента.The first formula is associated with the IconNewItem1 control: New item icon. Щелкните этот элемент управления, чтобы перейти c экрана обзора на экран редактирования или создания и создать элемент.You click or tap this control to go from the browse screen to the edit/create screen and create an item.

    • Формула выглядит так: NewForm(EditForm1);Navigate(EditScreen1, ScreenTransition.None)The formula is NewForm(EditForm1);Navigate(EditScreen1, ScreenTransition.None)
    • Формула создает экземпляр новой формы редактирования, а затем переходит на экран редактирования или создания, чтобы вы могли создать новый элемент.The formula instantiates a new edit form and then navigates to the edit/create screen so that you can create a new item. Значение ScreenTransition.None означает отсутствие эффекта перехода между экранами (например, исчезания).A value of ScreenTransition.None means there is no transition between screens (such as a fade).
  • Вторая формула связана с элементом управления IconSortUpDown1: Значок сортировки коллекции.The second formula is associated with the IconSortUpDown1 control: Sort gallery icon. Щелкните этот элемент управления, чтобы отсортировать список элементов в коллекции экрана обзора.You click or tap this control to sort the list of items in the browse screen gallery.

    • Формула выглядит так: UpdateContext({SortDescending1: !SortDescending1})The formula is UpdateContext({SortDescending1: !SortDescending1})
    • В этой формуле с помощью UpdateContext обновляется переменная с именем SortDescending1.The formula uses UpdateContext to update a variable called SortDescending1. Значение переменной переключается с помощью элемента управления.The value of the variable switches back and forth as you click the control. Это определяет способ сортировки элементов в коллекции на этом экране (дополнительные сведения см. в видео).This tells the gallery on this screen how to sort the items (watch the video for more details).
  • Третья формула связана с элементом управления NextArrow1: Значок стрелки для перехода к подробным сведениям.The third formula is associated with the NextArrow1 control: Go to details arrow icon. Щелкните этот элемент управления, чтобы перейти c экрана обзора на экран сведений.You click or tap this control to go from the browse screen to the details screen.

    • Формула выглядит так: Navigate(DetailScreen1, ScreenTransition.None)The formula is Navigate(DetailScreen1, ScreenTransition.None)
    • Формула выполняет переход на экран сведений, эффект перехода также отсутствует.The formula navigates to the details screen, again with no transition.

В приложении существует множество других формул. Уделите немного времени, чтобы узнать, какие формулы задаются для различных свойств, щелкая соответствующие элементы управления.There are many other formulas in the app, so take some time to click on controls and see what formulas are set for various properties.

ЗаключениеWrapping it all up

Мы изучили созданное приложение и посмотрели, как устроены экраны, элементы управления, свойства и формулы, которые обеспечивают работу различных возможностей приложения.This brings us to the end of exploring the generated app, and taking a look behind the scenes at the screens, controls, properties, and formulas that give the app its capabilities. Если вы последовательно изучали этот курс, вы получили более полное представление о том, как работает созданное приложение.If you've followed along, you should have a better understanding of how a generated app works. Теперь на основе этих знаний можно создавать собственные приложения.Now you can take this understanding into creating your own apps.

Прежде чем перейти к следующему разделу, мы хотим вернуться к началу цикла по SharePoint и показать, как приложение интегрировано со списком.Before moving on to the next section, we want to loop back to SharePoint and show you how the app is now integrated with the list experience. Как видите, приложение FlooringApp теперь функционирует как представление списка. Это приложение можно запустить, нажав кнопку Open (Открыть).As you can see FlooringApp now functions as a view of the list, and you launch the app by clicking Open. Это позволяет управлять списками с помощью простого и понятного персонализированного интерфейса.This provides a simple way to manage your lists with a friendly customized experience.

Приложение как представление списка Sharepoint

Вы прошли раздел, посвященный приложениям SharePoint. Теперь вы можете выбрать тему для дальнейшего изучения:Now that you've gone through the SharePoint app section, you have a choice about where to go next:

Из раздела, посвященного управлению, вы узнаете, как совместно использовать приложения и управлять их версиями, и ознакомитесь с понятием сред, которые являются контейнерами для приложений, данных и других ресурсов.The management section shows you how to share and version apps, and introduces environments, which are containers for apps, data, and other resources. Мы рекомендуем всем пользователям ознакомиться с разделом об управлении, но раздел, посвященный Common Data Service, также содержит полезные сведения, в том числе о дополнительных настройках приложения.We recommend that everyone go through the management section at some point, but the Common Data Service section has some great information too, including more app customizations.

Поздравляем!

Вы завершили работу с разделом Создание приложения с помощью SharePoint пошагового курса по Microsoft PowerApps.You've completed the Creating an app from SharePoint section of Microsoft PowerApps Guided Learning.

Вы узнали, как...

Следующее руководство

Создание приложения с помощью Common Data ServiceCreating an app from the Common Data Service

Соавторы

  • Michael Blythe
  • olprod