從 SharePoint 建立應用程式Creating 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 清單建立應用程式。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 如何整合至 SharePoint Online,而不是從 PowerApps Studio 著手。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 清單,其中包含名稱和價格等基本資訊,以及每種地板的影像。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],然後按一下 [建立應用程式]。To build an app, click PowerApps, then Create an app. 在右邊窗格中,輸入應用程式的名稱,然後按一下 [建立]。In the right hand pane, enter a name for the app, then click 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 Studio 中檢視應用程式View 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.

了解 PowerApps 中的控制項Understanding controls in PowerApps

控制項只是一個 UI 項目,並有與其相關聯的行為。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. 應用程式中的第一個畫面是瀏覽畫面,預設名稱為 BrowseScreen1The 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

接下來是詳細資料畫面,預設名稱為 DetailScreen1Next 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

應用程式中的第三個畫面是編輯/建立畫面,預設名稱為 EditScreen1The 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. 在右側窗格的 [版面配置] 索引標籤上,選取瀏覽畫面的不同版面配置。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. 按一下或點選欄位,然後在右窗格中,將 [標題] 欄位拖曳至頂端。Click or tap a field, then in the right-hand pane, drag the Title field to the top. 然後按一下或點選 [映像] 欄位來顯示它。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 UI,其提供許多自訂應用程式的選項。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

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

在上一個主題中,我們在瀏覽畫面資源庫中納入 [價格] 欄位,但是它顯示為不含貨幣符號的純數字。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(Price, "[$-en-US]$ ##.00" 使用 Text 函式 來指定應如何格式化數字。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. 按一下或點選此控制項,即可從瀏覽畫面移至編輯/建立畫面並建立一個項目。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. 按一下或點選此控制項,即可從瀏覽畫面移至詳細資料畫面。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 現在做為清單的「檢視」,而按一下 [開啟] 即可啟動應用程式。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.

恭喜!

您已完成 Microsoft PowerApps 引導式學習的 [從 SharePoint 建立應用程式] 一節。You've completed the Creating an app from SharePoint section of Microsoft PowerApps Guided Learning.

您已學到如何...

下一個教學課程

從 Common Data Service 建立應用程式Creating an app from the Common Data Service

參與者

  • Michael Blythe
  • olprod