プロジェクト申請を処理するアプリを生成するGenerate an app to handle project requests

注意

この記事は、SharePoint Online で PowerApps、Microsoft Flow、Power BI を使用するチュートリアル シリーズの一部です。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.

SharePoint リストの用意ができたため、最初のアプリを作成し、カスタマイズできます。Now that the SharePoint lists are in place, we can build and customize our first app. PowerApps は SharePoint に統合されているため、基本の 3 つの画面アプリをリストから直接、簡単に生成できます。PowerApps is integrated with SharePoint, so it's easy to generate a basic three screen app directly from a list. このアプリを使用すると、各リスト アイテムの概要と詳細情報を表示し、既存のリスト アイテムを更新し、新規リスト アイテムを作成できます。This app allows you to view summary and detailed information for each list item, update existing list items, and create new list items. リストから直接アプリを作成すると、アプリがそのリストのビューとして表示されます。If you create an app directly from a list, the app appears as a view for that list. その後、そのアプリをブラウザーや携帯電話で実行できます。You can then run that app in a browser, as well as on a mobile phone.

ヒント

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

手順 1: SharePoint リストからアプリを生成するStep 1: Generate an app from a SharePoint list

  1. 作成した Project Requests リストで、[PowerApps][アプリの作成] の順にクリックまたはタップします。In the Project Requests list you created, click or tap PowerApps, then Create an app.

    アプリを作成する

  2. アプリに「Project Requests アプリ」のような名前を指定し、[作成] をクリックまたはタップします。Give the app a name, like "Project Requests app", then click or tap Create. アプリの準備が整うと、Web 用の PowerApps Studio アプリが開きます。When the app is ready, it opens in PowerApps Studio for web.

    アプリの名前を指定する

手順 2: PowerApps Studio でアプリを確認するStep 2: Review the app in PowerApps Studio

  1. PowerApps Studio では、既定では左側のナビゲーション バーに、画面の階層ビューとアプリのコントロールが表示されます。In PowerApps Studio, the left navigation bar by default shows a hierarchical view of the screens and controls in the app.

    階層ビューが表示された PowerApps Studio

  2. サムネイル アイコンをクリックまたはタップしてビューを切り替えます。Click or tap the thumbnail icon to switch views.

    PowerApps Studio ビュー セレクター

  3. 各画面をクリックまたはタップして画面を中央のウィンドウに表示します。Click or tap each screen to view it in the middle pane. 画面は 3 つあります。There are three screens:

    (a).(a). ブラウズ画面では、リストから収集されたデータを参照、並べ替え、およびフィルター処理できます。The browse screen, where you browse, sort, and filter the data pulled in from the list.

    (b).(b). 詳細画面では、項目の詳細を表示できます。The details screen, where you view more detail about an item.

    (c).(c). 編集/作成画面では、既存の項目を編集したり、新規の項目を作成したりできます。The edit/create screen, where you edit an existing item or create a new one.

    サムネイル ビューが表示された PowerApps Studio

手順 3: アプリのブラウズ画面をカスタマイズするStep 3: Customize the app's browse screen

  1. ブラウズ画面をクリックまたはタップします。Click or tap the browse screen.

    この画面にはギャラリーを含むレイアウトが配置され、リスト アイテムのほか、検索バーや並べ替えボタンなどの他のコントロールも表示されます。This screen has a layout that contains a gallery to show list items, as well as other controls, like a search bar and sort button.

  2. 1 つ目を除く任意のレコードをクリックまたはタップして BrowseGallery1 ギャラリーを選択します。Select the BrowseGallery1 gallery by clicking or tapping any record except the first one.

    ギャラリーを参照する

  3. 右側のウィンドウで、[プロパティ] から [Project Requests](プロジェクト依頼) をクリックまたはタップします。In the right pane, under Properties, click or tap Project Requests.

  4. 次の一覧と一致するフィールドを更新します。Update the fields to match the following list:

    • [RequestDate]RequestDate

    • RequestorRequestor

    • TitleTitle

      ギャラリー フィールド

  5. BrowseGallery1 を選択したまま、Items プロパティを選択します。With BrowseGallery1 still selected, select the Items property.

    Items プロパティ

  6. 数式を SortByColumns(Filter('Project Requests', StartsWith(Title, TextSearchBox1.Text)), "Title", If(SortDescending1, Descending, Ascending)) のように変更します。Change the formula to SortByColumns(Filter('Project Requests', StartsWith(Title, TextSearchBox1.Text)), "Title", If(SortDescending1, Descending, Ascending)).

    数式バー

    これにより、PowerApps での既定ではなく、Title フィールドを基に、並べ替えおよび検索を行うことができます。This allows you to sort and search by the Title field, instead of the default that PowerApps picked. 詳細については、「数式の詳細」をご覧ください。See Formula deep-dive for more information.

  7. [ファイル][保存] の順にクリックまたはタップします。Click or tap File, then Save. アプリに戻るアイコンをクリックまたはタップして、アプリに戻ります。Click or tap Back to app icon to go back to the app.

手順 4: アプリの詳細画面を確認し、画面を編集するStep 4: Review the app's details screen and edit screen

  1. 詳細画面をクリックまたはタップします。Click or tap the details screen.

    この画面には表示フォームを含む別のレイアウトが配置され、そこにギャラリーで選択した項目の詳細が表示されます。This screen has a different layout that contains a display form to show the details for an item selected in the gallery. また、項目を編集および削除するためのコントロールと、参照画面に戻るためのコントロールも表示されます。It has controls to edit and delete items, and to go back to the browse screen.

    詳細表示フォーム

  2. 編集画面をクリックまたはタップします。Click or tap the edit screen.

    この画面には、選択した項目を編集したり、新規項目を作成したりするための編集フォームが表示されます (参照画面から直接この画面に移動した場合)。This screen contains an edit form to edit the selected item, or create a new one (if you come here directly from the browse screen). 編集内容を保存または破棄するためのコントロールがあります。It has controls to save or discard changes.

    編集フォーム

手順 5: リストからアプリを実行するStep 5: Run the app from the list

  1. Project Requests リストで、[All Items](すべての項目)[Project Requests アプリ] の順にクリックまたはタップします。In the Project Requests list, click or tap All Items, then Project Requests app.

    Project Requests アプリを表示する

  2. [開く] をクリックすると、新しいブラウザー タブでアプリが開きます。Click Open, which opens the app in a new browser tab.

    Project Requests アプリを開く

  3. アプリでIn the app, click or tap 詳細に移動アイコン をクリックまたはタップし、参照ギャラリーの最初の項目を表示します。for the first item in the browse gallery.

    最初のギャラリー項目

  4. 右上にあるClick or tap 鉛筆の編集アイコン をクリックまたはタップし、項目を編集します。to edit the item.

  5. 最後の語の "グループ" を "チーム" に変更して Description フィールドを更新し、チェック マーク アイコンをクリックまたはタップします。Update the Description field – change the last word from "group" to "team," then click or tap Check mark icon

    [Description] フィールドを更新する

  6. [ブラウザー] タブを閉じます。Close the browser tab.

  7. Project Requests リストに戻り、[Project Requests アプリ][All Items](すべての項目) の順にクリックまたはタップします。Go back to the Project Requests list, click or tap Project Requests app, then All Items.

    すべての項目を表示する

  8. アプリから行った変更を確認します。Verify the change you made from the app.

    編集内容を確認する

これは非常に単純なアプリで、基本的なカスタマイズをいくつか行っただけですが、面白いものをすばやく構築できます。This is a pretty simple app, and we only made a few basic customizations, but you can see it's possible to quickly build something interesting. 次のタスクに移りますが、必要に応じて、アプリについてさらに深く考察し、コントロールと数式がどのように連携してアプリの動作を制御するかを確認してください。We're going to move on to the next task, but look around the app a little more if you want, and see how the controls and formulas work together to drive app behavior.

数式の詳細Formula deep-dive

このセクションは省略可能ですが、数式の使用方法を深く理解するのに役立ちます。This section is optional, but it will help you understand more about how formulas work. このタスクの手順 3 では、BrowseGallery1Items プロパティの数式を変更しました。In step 3 of this task, we modified the formula for the Items property of BrowseGallery1. 具体的には、PowerApps の既定フィールドではなくTitle フィールドを使用するように、並び替えと検索を変更しました。Specifically, we changed the sort and search to use the Title field, instead of the field that PowerApps picked. 次に、変更した式を示します。Here's the modified formula:

SortByColumns ( Filter ( 'Project Requests', StartsWith ( Title, TextSearchBox1.Text ) ), "Title", If ( SortDescending1, Descending, Ascending ) )SortByColumns ( Filter ( 'Project Requests', StartsWith ( Title, TextSearchBox1.Text ) ), "Title", If ( SortDescending1, Descending, Ascending ) )

この数式はどのような処理を行うのでしょうか。But what does this formula do? ギャラリーに表示されるデータのソースを判別し、[検索] ボックスに入力されたテキストを基にデータをフィルター処理し、アプリの [並べ替え] ボタンを基に結果を並べ替えます。It determines the source of data that appears in the gallery, filters the data based on any text entered in the search box, and sorts the results based on the sort button in the app. この数式では、関数を使用して処理を行います。The formula uses functions to do its work. 関数は、パラメーター (入力) を受け取り、演算 (フィルター処理など) を実行し、値 (出力) を返します。Functions take parameters (i.e. input), perform an operation (like filtering), and return a value (i.e. output):

  • SortByColumns 関数は、1 つ以上の列に基づいてテーブルを並べ替えます。The SortByColumns function sorts a table based on one or more columns.
  • Filter 関数は、指定した数式を満たすテーブル内のレコードを検索します。The Filter function finds the records in a table that satisfy a formula that you specify.
  • StartsWith 関数は、あるテキスト文字列が別のテキスト文字列で始まるかどうかをテストします。The StartsWith function tests whether one text string begins with another.
  • If 関数は、条件が true の場合はある値を返し、同じ条件が false の場合は別の値を返します。The If function returns one value if a condition is true, and returns another value if the same condition is false.

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

  1. [検索] ボックスにテキストを入力すると、StartsWith 関数は、このテキストと、リスト内の Title 列にある各文字列の最初の文字を比較します。If you enter text in the search box, the StartsWith function compares that text to the start of each string in the Title column of the list.

    StartsWith ( Title, TextSearchBox1.Text )StartsWith ( Title, TextSearchBox1.Text )

    たとえば、[検索] ボックスに「de」と入力すると、"Desktop" や "Device" で始まる項目を含む 4 つの結果が表示されます。For example, if you enter "de" in the search box, you see four results, including items that start with "Desktop" and "Device." "Mobile devices" の項目は「de」で始まる項目ではないため、表示されません。You won't see all the "Mobile devices" items because those don't start with "de."

  2. Filter 関数は Project Requests テーブルの行を返しますThe Filter function returns rows from the Project Requests table. [検索] ボックスに比較するテキストがない場合、Filter はすべての行を返します。If there is no text in the search box to compare, Filter returns all rows.

    Filter ( 'Project Requests', StartsWith ( Title, TextSearchBox1.Text )Filter ( 'Project Requests', StartsWith ( Title, TextSearchBox1.Text )

  3. If 関数は、変数 SortDescending1 の設定が true か false かをチェックします (アプリの [並べ替え] ボタンで設定)。The If function looks at whether the variable SortDescending1 is set to true or false (the sort button in the app sets it). その後、この関数は Descending または Ascending の値を返します。The function then returns a value of Descending or Ascending.

    If ( SortDescending1, Descending, Ascending )If ( SortDescending1, Descending, Ascending )

  4. これで、SortByColumns 関数がギャラリーを並べ替えることができます。Now the SortByColumns function can sort the gallery. ここでは Title フィールドを基に並べ替えられていますが、これを検索で使用するのとは別のフィールドにすることもできます。In this case, it sorts based on the Title field, but this can be a different field than the one you search on.

ここまでお読みいただき、この数式の仕組みや、関数と他の要素を組み合わせて、アプリに必要な動作を制御する方法について理解を深めていただけると幸いです。If you stuck with us up to this point, we hope you have a better sense of how this formula works, and how you can combine functions and other elements to drive the behavior your apps require. 詳細については、「PowerApps の数式のリファレンス」をご覧ください。For more information, see Formula reference for PowerApps.

次の手順Next steps

このチュートリアル シリーズの次の手順では、プロジェクトの承認を管理するフローを作成します。The next step in this tutorial series is to Create a flow to manage project approvals.