プロジェクトを管理するアプリの作成Create an app to manage projects

注: この記事は、SharePoint Online で PowerApps、Microsoft Flow、Power BI を使用するチュートリアル シリーズの一部です。Note: This article is part of a tutorial series on using PowerApps, Microsoft Flow, and Power BI with SharePoint Online. シリーズ全般に関することや、関連するファイルのダウンロードの詳細については、シリーズの概要に関する記事をご覧ください。Make sure you read the series introduction to get a sense of the big picture, as well as related downloads.

このタスクでは、アプリを最初から作成します。In this task, we'll build an app from scratch. ユーザーはこのアプリを使用してプロジェクトの管理者を割り当てたり、プロジェクトの詳細な情報を更新したりできます。This app allows a user to assign a manager to projects and to update project details. 最初のアプリで学習したときと同じコントロールと数式がいくつか出てきますが、今回はそのときよりも多くの機能を自分で作成します。You will see some of the same controls and formulas you saw in the first app, but you will build more of the app yourself this time. 今回の方がより複雑ですが、より多くのことが学べますので、学習して損しません。The process is more complex, but you'll learn more, so we think it's a fair trade-off.

ヒント: このシナリオ用のパッケージをダウンロードすると、パッケージ内にこのアプリの完成版 (project-details-app.msapp) が含まれています。Tip: The download package for this scenario includes a finished version of this app: project-details-app.msapp.

PowerApps Studio の復習Quick review of PowerApps Studio

前のタスクでは Web 用の PowerApps Studio を使用しましたが、次のタスクに取り掛かる前に PowerApps Studio についてひととおり確認しておきましょう。You used PowerApps Studio for web in the last task, but we want to make sure you understand all the parts before we move on. 引き続き Web 用の PowerApps Studio を使用できますが、Windows 用の PowerApps Studio を使用することもできます。You can continue to work in PowerApps Studio for web, or you can use PowerApps Studio for Windows.

PowerApps Studio は 3 つのウィンドウと 1 つのリボンで構成されているため、PowerPoint でスライド デッキを作成するのと同じような感覚でアプリを作成できます。PowerApps Studio has three panes and a ribbon that make app creation feel like building a slide deck in PowerPoint:

  1. 左側のナビゲーション バー。アプリのすべての画面の階層ビューとコントロールが表示され、画面のサムネイルも表示されますLeft navigation bar, which shows a hierarchical view of all the app's screens and controls, as well as thumbnails of the screens
  2. 中央のウィンドウ。作業しているアプリの画面が表示されますMiddle pane, which contains the app screen you are working on
  3. 右側のウィンドウ。レイアウトやデータ ソースなどのオプションを設定しますRight-hand pane, where you set options like layout and data sources
  4. プロパティ ドロップダウン リスト。数式を適用するプロパティを選択しますProperty drop-down list, where you select the properties that formulas apply to
  5. 数式バー。アプリの動作を定義する数式を (Excel のように) 追加しますFormula bar, where you add formulas (like in Excel) that define app behavior
  6. リボン。コントロールを追加し、デザイン要素をカスタマイズしますRibbon, where you add controls and customize design elements

PowerApps Studio

手順 1: 画面を作成するStep 1: Create screens

復習はほどほどにして、さっそくアプリの作成を開始しましょう。With that review out of the way, let's start building an app.

アプリの作成と保存Create and save the app

  1. PowerApps Studio で、[新規] をクリックまたはタップして、[空のアプリ] の下にある [電話レイアウト] をクリックまたはタップします。In PowerApps Studio, click or tap New, then under Blank app, click or tap Phone Layout.

    空のアプリ - 電話レイアウト

  2. [ファイル] をクリックまたはタップして [アプリ設定] タブを開きます。「Project Management アプリ」という名前を入力します。Click or tap File, which opens to an App settings tab. Enter the name "Project Management app".

    アプリ名

  3. [名前を付けて保存] をクリックまたはタップして、アプリの保存先がクラウドであることを確認したら、右下隅にある [保存] をクリックします。Click or tap Save as, verify that the app will save to the cloud, then click Save in the lower right corner.

    クラウドに保存

  4. 右上にあるClick or tap アプリに戻るアイコン をクリックまたはタップしてアプリに戻ります。to go back to the app.

アプリに 4 つの画面を追加するAdd four screens to the app

この手順では、アプリに 4 つの空の画面を作成します。In this step, we'll create four blank screens for the app. 画面の目的に応じて、画面のレイアウトが異なります。We'll use different screen layouts, depending on the screen's purpose. 後の手順で、これらの画面に内容を追加します。We'll add to these screens in later steps.

画面Screen 目的Purpose
SelectTaskSelectTask 開始画面。他の画面に移動しますOpening screen; navigate to other screens
AssignManagerAssignManager 承認されたプロジェクトに管理者を割り当てますAssign a manager to an approved project
ViewProjectsViewProjects プロジェクトの一覧と概要情報を表示しますView a list of projects, with summary information
UpdateDetailsUpdateDetails プロジェクトの詳細を表示したり、更新したりしますView and update the details for a project
  1. [ホーム] タブで、[新しい画面][スクロール可能な画面] の順にクリックまたはタップします。On the Home tab, click or tap NewScreen, then Scrollable screen.

    スクロール可能な画面

  2. 画面の名前を「SelectTask」に変更します。Rename the screen to SelectTask.

    画面の名前変更

  3. 追加の画面を作成し、名前を変更します。Create and rename additional screens:

    1. [新しい画面][スクロール可能な画面] の順にクリックまたはタップします。Click or tap NewScreen, then Scrollable screen. 画面の名前を「AssignManager」に変更します。Rename the screen to AssignManager.
    2. [新しい画面][リスト画面] の順にクリックまたはタップします。Click or tap NewScreen, then List screen. 画面の名前を「ViewProjects」に変更します。Rename the screen to ViewProjects.
    3. [新しい画面][フォーム画面] の順にクリックまたはタップします。Click or tap NewScreen, then Form screen. 画面の名前を「UpdateDetails」に変更します。Rename the screen to UpdateDetails.
  4. Screen 1 の横にある省略記号 (. . .) を選択し、[削除] をクリックまたはタップします。Select the ellipsis (. . .) next to Screen1, then click or tap Delete.

    画面の削除

アプリは次のように表示されます。The app should now look like the following image.

アプリのすべての画面

手順 2: SharePoint リストに接続するStep 2: Connect to a SharePoint list

この手順では、[製品の詳細] SharePoint リストに接続します。In this step, we'll connect to the Product Details SharePoint list. このアプリでは 1 つのリストを使用するだけですが、アプリを拡張するときは両方に簡単に接続できます。We only use one list in this app, but you could easily connect to both if you want to extend the app.

  1. 左側のナビゲーション バーで、SelectTask 画面をクリックまたはタップします。In the left navigation bar, click or tap the SelectTask screen.
  2. 右側のウィンドウで、[データ ソースの追加] をクリックまたはタップします。In the right pane, click or tap Add data source.

    データに接続する

  3. [新しい接続] をクリックまたはタップします。Click or tap New connection.

    新しい接続

  4. [SharePoint] をクリックまたはタップします。Click or tap SharePoint.

    SharePoint 接続

  5. [直接接続 (クラウド サービス)] を選択して、[作成] をクリックまたはタップします。Select Connect directly (cloud services), then click or tap Create.

    直接接続 (クラウド サービス)

  6. SharePoint の URL を入力し、[移動] をクリックまたはタップします。Enter a SharePoint URL, then click or tap Go.

    接続先の SharePoint の URL

  7. Project Details リストを選択し、[接続] をクリックまたはタップします。Select the Project Details list, then click or tap Connect.

    Project Details リストの選択

    右側のウィンドウにある [データ ソース] タブに、作成した接続が表示されます。The Data sources tab in the right pane now shows the connection that you have created.

    [データ ソース] タブ

手順 3: SelectTask 画面を作成するStep 3: Build the SelectTask screen

この手順では、PowerApps のコントロール、数式、書式設定オプションを使用して、アプリの他の画面に移動する方法を説明します。In this step, we'll provide a way to navigate to the other screens in the app - working with some of the controls, formulas, and formatting options that PowerApps provides.

タイトルを更新して概要テキストを挿入するUpdate the title and insert introductory text

  1. 左側のナビゲーション バーで、SelectTask 画面を選択します。In the left navigation bar, select the SelectTask screen.
  2. 中央のウィンドウで既定の[Title] を選択し、数式バーで Text プロパティを "Contoso Project Management" に更新します。In the middle pane, select the default [Title], then in the formula bar, update the Text property to "Contoso Project Management".

    数式バーの Text プロパティ

  3. [挿入] タブで、[ラベル] をクリックまたはタップし、上部のバナーの下にラベルをドラッグします。On the Insert tab, click or tap Label, then drag the label down below the top banner.

    ラベルの追加

  4. 数式バーで、ラベルに次のプロパティを設定します。In the formula bar, set the following properties for the label:

    • Color プロパティ = DarkGrayColor property = DarkGray
    • Size プロパティ = 18Size property = 18
    • Text プロパティ = "Click or tap a task to continue..."Text property = "Click or tap a task to continue..."

      ラベルのテキストの変更

2 つのナビゲーション ボタンを追加するAdd two navigation buttons

  1. [挿入] タブで、[ボタン] をクリックまたはタップし、ラベルの下にボタンをドラッグします。On the Insert tab, click or tap Button, then drag the button below the label.

    [追加] ボタン

  2. 数式バーで、ボタンに次のプロパティを設定します。In the formula bar, set the following properties for the button:

    • OnSelect プロパティ = Navigate(AssignManager, Fade)OnSelect property = Navigate(AssignManager, Fade). アプリを実行してこのボタンをクリックすると、アプリの 2 番目の画面に移動する際にフェードして画面が切り替わります。When you run the app and click this button, you navigate to the second screen in the app, with a fade transition between the screens.
    • Text プロパティ = "Assign Manager"Text property = "Assign Manager"
  3. テキストに合わせてボタンのサイズを変更します。Resize the button to accommodate the text.

    ボタンのテキストの更新

  4. 次のプロパティを持つ別のボタンを挿入します。Insert another button with the following properties:

    • OnSelect プロパティ = Navigate(ViewProjects, Fade)OnSelect property = Navigate(ViewProjects, Fade).
    • Text プロパティ = "Update Details"Text property = "Update Details"

      ボタンのテキストの更新

      注: ボタンのラベルは "Update Details" ですが、最初に ViewProjects 画面に移動してから、更新するプロジェクトを選択します。Note: The button is labeled Update Details, but we first navigate to the ViewProjects screen to select a project to update.

アプリの実行Run the app

アプリの完成にはまだほど遠いですが、一度アプリを実行してみることができます。The app doesn't do a lot yet, but you can run it if you like:

  1. SelectTask 画面をクリックまたはタップします (アプリは常に PowerApps Studio のプレビュー モードで選択した画面から開始します)。Click or tap the SelectTask screen (the app always starts from the selected screen in Preview mode in PowerApps Studio).
  2. 右上にあるClick or tap アプリの実行アイコン をクリックまたはタップし、アプリを実行します。in the upper right corner to run the app.
  3. ボタンのいずれか 1 つをクリックまたはタップして別の画面に移動します。Click or tap one of the buttons to navigate to another screen.
  4. 右上にあるClick or tap アプリ プレビューを閉じるアイコン をクリックまたはタップしてアプリを閉じます。in the upper right corner to close the app.

手順 4: AssignManager 画面を作成するStep 4: Build the AssignManager screen

この手順では、承認後にまだ管理者が割り当てられていないプロジェクトを、ギャラリーを使用してすべて表示します。In this step, we'll use a gallery to display all projects that have been approved but don't yet have a manager. 他のコントロールを追加することで、管理者を割り当てられるようになります。We'll add other controls, so you can assign a manager.

注: プロジェクトのすべてのフィールド (管理者フィールドも含む) を編集できるページをあとでアプリ内に作成しますが、このような画面も作成したほうが出来栄えが良くなります。Note: We'll build a page later in the app that allows you to edit all fields for a project (including the manager field), but we thought it would be cool to build a screen like this one as well.

  1. ここまでに行った変更を保存します。Save the changes you've made so far.
  2. 左側のナビゲーション バーで、AssignManager 画面をクリックまたはタップします。In the left navigation bar, click or tap the AssignManager screen.

タイトルを更新して概要テキストを挿入するUpdate the title and insert introductory text

  1. [Title]Assign Manager に変更します。Change [Title] to Assign Manager.
  2. 次のプロパティをラベルに追加します。Add a label with the following properties:

    • Color プロパティ = DarkGrayColor property = DarkGray
    • Size プロパティ = 18Size property = 18
    • Text プロパティ = "Select a project, then assign a manager"Text property = "Select a project, then assign a manager"

      管理者の割り当てのレイアウト

SelectTask 画面に戻るための戻る矢印を追加するAdd a back arrow to return to the SelectTask screen

  1. 画面の上部に表示される青色のバーをクリックまたはタップします。Click or tap the blue bar at the top of the screen.
  2. [挿入] タブで、[アイコン][左] の順にクリックまたはタップします。On the Insert tab, click or tap Icons, then click or tap Left.

    左矢印の挿入

  3. 青色のバーの左側に矢印を移動し、次のプロパティを設定します。Move the arrow to the left side of the blue bar, and set the following properties:

    • Color プロパティ = WhiteColor property = White
    • Height プロパティ = 40Height property = 40
    • OnSelect プロパティ = Navigate(SelectTask, Fade)OnSelect property = Navigate(SelectTask, Fade)
    • Width プロパティ = 40Width property = 40

      戻るボタンの追加

  1. [挿入] タブで、[ギャラリー][縦] の順にクリックまたはタップします。On the Insert tab, click or tap Gallery, then Vertical.

    縦方向のギャラリーの追加

  2. 右側のウィンドウにある [レイアウト] メニューから、[タイトル、サブタイトル、本文] を選択します。Select Title, subtitle, and body from the Layout menu in the right pane.

    ギャラリー レイアウトの変更

    ギャラリーに適切なレイアウトが作成されましたが、既定のサンプル テキストが表示されたままです。The gallery now has the right layout, but it still has the default sample text. 次にこれを修正します。We'll fix that next.

    既定のテキストが表示されているギャラリー

  3. ギャラリーに次のプロパティを設定します。Set the following properties for the gallery:

    • BorderThickness プロパティ = 1BorderThickness property = 1
    • BorderStyle プロパティ = DottedBorderStyle property = Dotted
    • Items プロパティ = Filter('Project Details', PMAssigned="Unassigned")Items property = Filter('Project Details', PMAssigned="Unassigned"). 管理者が割り当てられていないプロジェクトのみがギャラリーに表示されます。Only projects with no manager assigned are included in the gallery.

      リストからのテキストが表示されているギャラリー

  4. 右側のウィンドウで、次の一覧と一致するフィールドを更新します。In the right pane, update the fields to match the following list:

    • ApprovedDateApprovedDate
    • StatusStatus
    • TitleTitle

      ギャラリー フィールド

  5. 必要に応じて、ギャラリー内のラベルのサイズを変更し、最初のギャラリー項目から矢印を削除します (このギャラリー内から別の場所に移動する必要はありません)。Resize labels in the gallery as appropriate, and remove the arrow from the first gallery item (we don't need to navigate anywhere from this gallery).

    矢印アイコンの削除

    画面は次のように表示されます。The screen should now look like the following image.

    書式設定されたギャラリー

選択された場合の項目の色を変更するChange the color of an item if it's selected

  1. ギャラリーを選択し、TemplateFill プロパティを If (ThisItem.IsSelected=true, Orange, White) に設定します。Select the gallery, then set the TemplateFill property to If (ThisItem.IsSelected=true, Orange, White).
  2. ギャラリー内の項目を選択します。Select an item in the gallery. 画面は次のように表示されます。The screen should now look like the following image.

    選択した項目が表示されているギャラリー

管理者の割り当てを送信するための、ラベル、テキスト入力、OK ボタンを追加するAdd a label, text input, and OK button to submit manager assignments

  1. 作業していたギャラリーの外側をクリックまたはタップします。Click or tap outside the gallery you've been working on.
  2. [挿入] タブで、[ラベル] をクリックまたはタップします。On the Insert tab, click or tap Label. ギャラリーの下のラベルを左側にドラッグします。Drag the label below the gallery, to the left. ラベルに次のプロパティを設定します。Set the following properties for the label:

    • Size プロパティ = 20Size property = 20
    • Text プロパティ = "Manager:"Text property = "Manager:"

    管理者ラベルの追加

  3. [挿入] タブで、[テキスト][テキスト入力] の順にクリックまたはタップします。On the Insert tab, click or tap Text, then Text input. ギャラリーの下のテキスト入力を中央にドラッグします。Drag the text input below the gallery, in the center. ドロップダウンに次のプロパティを設定します。Set the following properties for the drop down:

    • Default プロパティ = ""Default property = ""
    • Height プロパティ = 60Height property = 60
    • Size プロパティ = 20Size property = 20
    • Width プロパティ = 250Width property = 250

    テキスト入力の追加

  4. [挿入] タブで、[ボタン] をクリックまたはタップします。On the Insert tab, click or tap Button. ギャラリーの下のボタンを右側にドラッグします。Drag the button below the gallery, to the right. ボタンに次のプロパティを設定します。Set the following properties for the button:

    • Height プロパティ = 60Height property = 60
    • OnSelect プロパティ = Patch('Project Details', LookUp('Project Details', ID = Gallery1.Selected.ID), {PMAssigned: TextInput1.Text})OnSelect property = Patch('Project Details', LookUp('Project Details', ID = Gallery1.Selected.ID), {PMAssigned: TextInput1.Text}). 詳細については、「Formula deep-dive (数式の詳細)」をご覧ください。For more information, see Formula deep-dive.
    • この数式で、Project Details リストを更新し、PMAssigned フィールドの値を設定します。This formula updates the Project Details list, setting a value for the PMAssigned field.
    • Size プロパティ = 20Size property = 20
    • Text プロパティ = "OK"Text property = "OK"
    • Width プロパティ = 80Width property = 80

    OK ボタンの追加

完成した画面は次のように表示されます。The completed screen should now look like the following image.

管理者の割り当て完成画面

手順 5: ViewProjects 画面を作成するStep 5: Build the ViewProjects screen

この手順では、ViewProjects 画面でギャラリーのプロパティを変更します。In this step, we'll change properties for the gallery on the ViewProjects screen. このギャラリーで Project Details リストの項目が表示されます。This gallery displays items from the Project Details list. この画面で項目を選択し、UpdateDetails 画面で詳細を編集します。You select an item on this screen, then you edit the details on the UpdateDetails screen.

  1. 左側のナビゲーション バーで、ViewProjects 画面をクリックまたはタップします。In the left navigation bar, click or tap the ViewProjects screen.
  2. [Title]"View Projects" に変更します。Change [Title] to "View Projects".
  3. 左側のナビゲーション バーで、ViewProjects の下にある BrowserGallery1 をクリックまたはタップします。In the left navigation bar, click or tap BrowserGallery1 under ViewProjects.
  4. 右側のウィンドウにある [レイアウト] メニューから、[タイトル、サブタイトル、本文] を選択します。Select Title, subtitle, and body from the Layout menu in the right pane.

    ギャラリー レイアウトの変更

    ギャラリーに適切なレイアウトが作成され、既定のサンプル テキストが表示されています。The gallery now has the right layout, with the default sample text.

    既定のテキストが表示されているギャラリー

  5. 更新ボタン 更新アイコン を選択し、その OnSelect プロパティを Refresh('Project Details') に設定します。Select the refresh button Refresh icon, and set its OnSelect property to Refresh('Project Details').
  6. 新しい項目ボタン 新規追加アイコン を選択し、その OnSelect プロパティを NewForm(EditForm1); Navigate(UpdateDetails, ScreenTransition.None) に設定します。Select the new item button Add new icon, and set its OnSelect property to NewForm(EditForm1); Navigate(UpdateDetails, ScreenTransition.None).

SelectTask 画面に戻るための戻る矢印を追加するAdd a back arrow to return to the SelectTask screen

  1. 左側のナビゲーション バーで、AssignManager 画面をクリックまたはタップします。In the left navigation bar, click or tap the AssignManager screen.
  2. ここに追加した戻る矢印を選択し、コピーします。Select the back arrow you added there, and copy it.
  3. 矢印を ViewProjects 画面に貼り付けて、更新ボタンの左側に配置します。Paste the arrow into the ViewProjects screen and position it to the left of the refresh button.

    戻るボタン

    OnSelect プロパティの Navigate(SelectTask, Fade) も含め、プロパティのすべてがコピーされます。All its properties come along with it, including the OnSelect property of Navigate(SelectTask, Fade).

  1. BrowseGallery1 ギャラリーを選択し、ギャラリーの Items プロパティを SortByColumns(Filter('Project Details', StartsWith(Title, TextSearchBox1.Text)), "Title", If(SortDescending1, Descending, Ascending)) に設定します。Select the BrowseGallery1 gallery, and set the Items property of the gallery to SortByColumns(Filter('Project Details', StartsWith(Title, TextSearchBox1.Text)), "Title", If(SortDescending1, Descending, Ascending)).

    これにより、ギャラリーのデータ ソースが Project Details リストに設定され、その [Title] フィールドを使用して検索や並べ替えが行われるようになります。This sets the data source of the gallery to the Project Details list, and uses the Title field for search and sort.

  2. 最初のギャラリー項目にある 詳細矢印アイコン を選択し、OnSelect プロパティを Navigate(UpdateDetails, None) に設定します。Select the Details arrow icon in the first gallery item, and set the OnSelect property to Navigate(UpdateDetails, None).

     <span data-ttu-id="9c36e-322">プロジェクトの表示ギャラリー - 最初の選択項目</span><span class="sxs-lookup"><span data-stu-id="9c36e-322">View Projects gallery - first item selected</span></span>

  3. 右側のウィンドウで、次の一覧と一致するフィールドを更新します。In the right pane, update the fields to match the following list:

    • StatusStatus
    • PMAssignedPMAssigned
    • TitleTitle

      ギャラリー フィールド

      完成した画面は次のように表示されます。The completed screen should now look like the following image.

      完成したプロジェクトの表示画面

手順 6: UpdateDetails 画面を作成するStep 6: Build the UpdateDetails screen

この手順では、UpdateDetails 画面の編集フォームをデータ ソースに接続し、いくつかのプロパティとフィールドを変更します。In this step, we'll connect the edit form on the UpdateDetails screen to our data source, and we'll make some property and field changes. この画面で、[プロジェクトの表示] 画面で選択したプロジェクトの詳細を編集します。On this screen, you edit details for a project that you selected on the View Projects screen.

  1. 左側のナビゲーション バーで、UpdateDetails 画面をクリックまたはタップします。In the left navigation bar, click or tap the UpdateDetails screen.
  2. [Title]"Update Details" に変更します。Change [Title] to "Update Details".
  3. 左側のナビゲーション バーで、UpdateDetails の下にある EditForm1 をクリックまたはタップします。In the left navigation bar, click or tap EditForm1 under UpdateDetails.
  4. フォームに次のプロパティを設定します。Set the following properties for the form:

    • DataSource プロパティ = 'Project Details'DataSource property = 'Project Details'
    • Item プロパティ = BrowseGallery1.SelectedItem property = BrowseGallery1.Selected
  5. フォームを選択したまま、右側のウィンドウで、次の順番で表示されるフィールドのチェックボックスをクリックまたはタップします。With the form still selected, in the right pane click or tap the checkbox for the following fields, in the order shown:

    • TitleTitle
    • PMAssignedPMAssigned
    • StatusStatus
    • ProjectedStartDateProjectedStartDate
    • ProjectedEndDateProjectedEndDate
    • ProjectedDaysProjectedDays
    • ActualDaysActualDays

      フォームのフィールドの編集

  6. キャンセル ボタン キャンセル アイコン を選択し、その OnSelect プロパティを ResetForm(EditForm1); Back() に設定します。Select the cancel button Cancel icon, and set its OnSelect property to ResetForm(EditForm1); Back().
  7. 保存ボタン チェック マーク保存アイコン を選択し、OnSelect の数式が SubmitForm(EditForm1) になっていることを確認します。Select the save button Checkmark save icon and check out the OnSelect formula - SubmitForm(EditForm1). 編集フォーム コントロールを使用するため、以前使用した Patch() ではなく Submit() を使用できます。Because we're using the edit form control, we can use Submit(), instead of using Patch() like we did earlier.

完成した画面は次のように表示されます (フィールドが空白の場合は、必ず [プロジェクトの表示] 画面で項目を選択してください)。The completed screen should now look like the following image (if the fields are blank, make sure you select an item on the View Projects screen).

完成した Update Details 画面

手順 7: アプリを実行するStep 7: Run the app

アプリが完成したので、実行して動作を確認します。Now that the app is complete, let's run it to see how it works. SharePoint サイトにアプリへのリンクを追加します。We'll add a link on the SharePoint site to the app. ブラウザーでアプリを実行することもできますが、アプリを他の人に共有して実行してもらう必要がある場合もあります。You will be able to run the app in the browser, but you might need to share the app for other people to run it. 詳細については、「アプリの共有」をご覧ください。For more information, see Share your apps.

  1. Office 365 アプリ起動ツールで、PowerApps をクリックまたはタップします。In the Office 365 app launcher, click or tap PowerApps.

    Office 365 アプリ起動ツール内の PowerApps

  2. PowerApps で、Project Management アプリの省略記号 (. . .) を選択して [開く] をクリックまたはタップします。In PowerApps, click or tap the ellipsis (. . .) for Project Management app, then Open.

    Project Management アプリの選択

  3. ブラウザーでアプリのアドレス (URL) をコピーします。Copy the address (URL) for the app in the browser.

    アプリの URL のコピー

  4. SharePoint で、[リンクの編集] をクリックまたはタップします。In SharePoint, click or tap EDIT LINKS.

    SharePoint サイトのリンクの編集

  5. [(+) link]((+) リンク) をクリックまたはタップします。Click or tap (+) link.

    SharePoint サイトへのアプリ リンクの追加

  6. 「Project Management アプリ」と入力し、アプリのアドレスを貼り付けます。Enter "Project Management app", and paste in the address for the app.

    リンクのプロパティの編集

  7. [OK][保存] の順にクリックまたはタップします。Click or tap OK, then Save.

    リンクの変更の保存

プロジェクトに管理者を割り当てるAssign a manager to a project

SharePoint サイトでアプリの準備ができたので、続いてプロジェクト承認者のロールに基づき、管理者が割り当てられていないプロジェクトを探し、プロジェクトの 1 つに管理者を割り当てます。Now that we have the app in our SharePoint site, we'll assume the role of the project approver - we'll look for any projects that don't have a manager assigned, and assign a manager to one of the projects. 次に、プロジェクト管理者のロールに基づき、自分たちに割り当てられているプロジェクトに関する情報を追加します。Then we'll assume the role of the project manager, and add some information about a project that is assigned to us.

  1. 最初に、SharePoint の Project Details リストを見てみましょう。First, let's look at the Project Details list in SharePoint. 2 つのプロジェクトで、[PMAssigned] 列の値が Unassigned になっています。Two projects have a value of Unassigned in the PMAssigned column. アプリ内でこれらを確認します。We will see these in the app.

    SharePoint リスト内の未割り当てプロジェクト

  2. 作成したアプリへのリンクをクリックまたはタップします。Click or tap the link that you created to the app.
  3. 最初の画面で、[Assign Manager] をクリックまたはタップします。On the first screen, click or tap Assign Manager.

    アプリの概要画面

  4. [Assign Manager] 画面で、リストに 2 つの未割り当てプロジェクトが表示されています。On the Assign Manager screen, you see the two unassigned projects from the list. 新しい BI ソフトウェア プロジェクトを選択します。Select the New BI software project.

    選択した項目が表示されているギャラリー

  5. [管理者] のテキスト入力欄に、「Joni Sherman」と入力して [OK] をクリックします。In the Manager text input, enter "Joni Sherman", then click OK.

    変更がリストに反映されてギャラリーが更新されると、残りの未割り当てプロジェクトのみが表示されます。The change is applied to the list, and the gallery refreshes so only the remaining unassigned project is displayed.

    プロジェクトへの管理者の割り当て

  6. SharePoint リストに戻り、ページを更新します。Go back to the SharePoint list and refresh the page. プロジェクトのエントリが更新されてプロジェクト管理者名が表示されます。You'll see that the project entry is now updated with the project manager name.

    SharePoint リストに割り当てられたプロジェクト管理者

プロジェクトの詳細の更新Update details for the project

  1. 戻るアイコン をクリックまたはタップして最初の画面に戻り、[Update Details] をクリックまたはタップします。Click or tap Back icon to go back to the first screen, then click or tap Update Details.

    アプリの概要画面

  2. [プロジェクトの表示] 画面で、検索ボックスに「New」と入力します。On the View Projects screen, enter "New" in the search box.

    アプリのギャラリー内で検索

  3. 新しい BI ソフトウェア項目の 詳細矢印アイコン をクリックします。Click Details arrow icon for the New BI software item.

    選択したギャラリー項目

  4. [Update Details] 画面で、次の値を設定します。On the Update Details screen, set the following values:

    • [ProjectedStartDate] フィールド = "3/6/2017"The ProjectedStartDate field = "3/6/2017"
    • [ProjectedEndDate] フィールド = "3/24/2017"The ProjectedEndDate field = "3/24/2017"
    • [ProjectedDays] フィールド = "15"The ProjectedDays field = "15"

    項目の詳細の更新

  5. 右上にあるClick or tap チェック マーク アイコン をクリックまたはタップして、SharePoint リストに変更を適用します。to apply the change to the SharePoint list.
  6. アプリを閉じて、リストに戻ります。Close the app, and go back to the list. プロジェクトのエントリが更新されて変更日時が表示されます。You see that the project entry is now updated with the date and day changes.

    SharePoint リストの更新

数式の詳細Formula deep-dive

このセクションは、PowerApps の数式に関する 2 つ目の省略可能なセクションです。This is the second optional section on PowerApps formulas. 最初の詳細では、PowerApps が生成し、3 画面アプリ内のブラウズ ギャラリーで使用される数式の 1 つを確認しました。In the first deep-dive, we looked at one of the formulas that PowerApps generates for the browse gallery in a three-screen app. この詳細では、2 つ目のアプリの AssignManager 画面で使用する数式を確認します。In this deep-dive, we'll look at a formula that we use for the AssignManager screen of our second app. 数式は次のとおりです。Here's the formula:

Patch ( 'Project Details', LookUp ( 'Project Details', ID = Gallery1.Selected.ID ), {PMAssigned: TextInput1.Text} )Patch ( 'Project Details', LookUp ( 'Project Details', ID = Gallery1.Selected.ID ), {PMAssigned: TextInput1.Text} )

この数式について説明します。What does this formula do? ギャラリーで項目を選択して [OK] ボタンをクリックすると、この数式は Project Details リストを更新し、[PMAssigned] 列にテキスト入力で指定した値を設定します。When you select an item in the gallery and click the OK button, the formula updates the Project Details list, setting the PMAssigned column to the value that you specify in the text input. この数式は、次の関数を使用します。The formula uses functions to do its work:

  • Patch 関数は、データ ソースの 1 つ以上のレコードを変更します。The Patch function modifies one or more records of a data source.
  • LookUp 関数は、テーブル内で数式を満たす最初のレコードを検索します。The LookUp function finds the first record in a table that satisfies a formula.

これらの関数を数式に組み込むと、次のようになります。When you put the functions together in the formula, here's what happens:

  1. [OK] ボタンをクリックすると、Patch 関数が呼び出されて Project Details リストを更新します。When you click the OK button, the Patch function is called to update the Project Details list.
  2. Patch 関数内で、LookUp 関数は Project Details リストのどの行を更新するのかを特定します。Within the Patch function, the LookUp function identifies which row of the Project Details list to update. 選択したギャラリー項目の ID とリスト内の ID を比較することで特定しています。It does this by comparing the ID of the selected gallery item to the ID in the list. たとえば、ID を 12 とすると、新しい BI ソフトウェアのエントリが更新されます。For example, an ID of 12 means that the entry for New BI software should be updated.
  3. Patch 関数は正しい ID を取得すると、[PMAssigned] フィールドを更新して TextInput1.Text 内の値に設定します。Now that the Patch function has the right ID, it updates the PMAssigned field to the value in TextInput1.Text.

次の手順Next steps

このチュートリアル シリーズの次の手順では、プロジェクトを分析する Power BI レポートを作成 します。The next step in this tutorial series is to create a Power BI report to analyze projects.