演習 - SharePoint を使用したインベントリ アプリの構築

  • 12 分

Contoso 社内のユーザーが自社のコーヒー メーカーを注文するシナリオについて考えます。 Contoso 社は、そのプロセスを扱うすべてのユーザーと共有できるアプリをあなたに構築してほしいと考えています。

この演習では、コーヒー メーカーのデータと注文データを格納するいくつかの SharePoint リストを設定します。 その後、そのデータを操作して注文を実行する Power Apps キャンバス アプリを作成します。

コーヒー メーカー リストの作成

最初のタスクとして、コーヒー メーカー リストを作成します。

  1. Machine Order Data Excel ファイルをダウンロードします。

  2. アプリ データを格納する SharePoint Online サイトに移動します。

  3. 左上隅で新規 > リストを選択します。

  4. Excel からオプションを選択します。

    [Excel から] オプションが表示されている SharePoint のリストの作成ページのスクリーンショット。

  5. ファイルのアップロードを選択し、前の手順でダウンロードした Machine-Order-Data.xlsx ファイルを選択します。

  6. カスタマイズ ページで、このファイルからテーブルを選択ドロップダウン メニューでコーヒー メーカー テーブルが選択されていることを確認し、右下隅の次へを選択します。

    テーブルで選択されたコーヒー メーカーが表示されているカスタマイズ ページのスクリーンショット。

  7. リストの名前を調整したり、説明を追加したりできます (オプション)。 作成ボタンを選択し、続行します。 その後、新しいリストが準備されるまで待機します。

新しいリストが作成されると、ブラウザーは自動でその新しいリストに移動します。 Excel シートのすべてのデータが読み込まれ、使用可能な状態になります。

注文リストの作成

次に、これらの手順に従って注文リストを作成します。

  1. SharePoint サイト名の下で、左上隅にあるホーム オプションを選択します。

  2. 左上隅で新規 > リストを選択します。

  3. 空白のリストを選択します。

  4. リストに Orders-List という名前を付け、作成を選択します。

    名前が「Orders-List」に設定されたスクリーンショット。

  5. Orders-List ページでリスト名のすぐ下に "タイトル" という名前の列が表示されます。 その右側にあるのは列を追加するオプションです。 列の追加を選択します。

  6. 列を作成するダイアログ ボックスで、日時と次へを順に選択します。

  7. この列に OrderDate という名前を付け、保存を選択します。

    [名前の入力] と [保存] ボタンが強調表示された、列を作成するダイアログのスクリーンショット。

  8. 列の追加をもう一度選択します。

  9. 下にスクロールして通貨を選択し、次へを選択します。

  10. この列に OrderTotal という名前を付け、保存を選択します。

コーヒー メーカーの注文データの格納に使用できる SharePoint リストが完成しました。

キャンバス アプリの作成

Power Apps でキャンバス アプリを作成するには、次の手順を実行します。

  1. make.powerapps.com にアクセスします。

  2. 左側で作成を選択します。

  3. 空のアプリを選択します。

    空のアプリが選択されている Power Apps のアプリの作成ページのスクリーンショット。

  4. 空のキャンバス アプリの下で作成オプションを選択します。

  5. アプリに Contoso Coffee Machine Ordering という名前を付け、作成ボタンを選択します。

  6. しばらくすると、キャンバス アプリ エディターが画面に表示されるので、そこで SharePoint データを操作する Power Apps アプリケーションの設計と編集を行います。

    キャンバス アプリ エディターのスクリーンショット。

  7. 右上隅の保存アイコンを選択します。 (Power Apps では、アプリが既定で 2 分おきに自動保存されますが、初回のみ手動で保存します。そのため、アプリを作成したら必ず保存することをお勧めします)。

  8. データの追加ドロップダウン メニューを選択します。

  9. SharePoint を検索して選択します (SharePoint サイトではなく標準の SharePoint オプション)。 探すには結果を下にスクロールすることが必要な場合があります。 未接続の場合は接続の追加を選択してください。 既存の接続がある場合は、その接続を選択すれば、次の手順をスキップして続行できます。

    SharePoint の検索結果が表示されるように展開された [データの追加] ドロップダウン メニューのスクリーンショット。

  10. 新しい接続を作成する場合は、この画面の右側にパネルが開きます。 直接接続 (クラウド サービス) オプションが選択されていることを確認した後、画面の下部で接続を選択します。

  11. リストの場所の URL を入力するように求める SharePoint サイトに接続するオプションが、この画面の右側に表示されます。または、最近使用したサイトの下に SharePoint サイトが表示されます。

    コーヒー メーカー リストを作成した SharePoint サイトが、最近のサイトのリストから表示されます。 ここではただサイトを選択し、続行できます。

    自分のサイトがリストに表示されない場合は、リストを作成したサイトに戻って URL (リスト ページではなく、サイトのホーム画面) をコピーし、その URL をパネルの一番上の行に貼り付けます。 Power Apps でサイトが特定されたら、接続を選択して続行できます。

  12. リストの選択パネルで、 Machine-Order-Data チェック ボックスと Orders-List チェック ボックスをオンにします。

  13. 接続を選択します。

    2 つのリストが選択されており、[接続] ボタンが表示されている [リストの選択] ダイアログのスクリーンショット。

Power Apps アプリケーションを作成してデータに接続したので、アプリを通じて SharePoint に直接読み書き可能になりました。

キャンバス アプリの設計

いくつかのコントロールを挿入し、接続して、キャンバス アプリを設計しましょう。

  1. 挿入 > テキスト ラベルの順に選択します。

    [挿入] メニューが展開され、テキスト ラベルを含むよく使用される項目が表示されているスクリーンショット。

  2. 表示されたラベルをキャンバスの左上隅に移動し、そのサイズを変更してキャンバス全体に拡大します。

  3. 画面の右側では、コードを編集しなくても、使い慣れたインターフェイスを使用してキャンバス アプリのコントロール プロパティを編集できます。 引き続きラベルを選択した状態で、テキストを Contoso Coffee Machine Ordering に変更します。

  4. フォント サイズを 18 に変更します。

  5. テキストのアラインメントで、中央を選択します。

  6. 色の横の文字 A のアイコンはテキストの色を示しており、ペンキ缶アイコンはそのラベルの背景色を示しています。 テキストの色アイコン A を選択し、白を選択します。

  7. ペンキ缶アイコンを選択し、濃い青 (または目的の他の色) を選択します。

    カラー ピッカーを表示するために選択されたペンキ缶アイコンのスクリーンショット。

    注

    ほとんどのコントロールでは、フォント、色、背景色などの設定を複数の方法で調整できます。 その方法の 1 つはプロパティ パネルですが、同じオプションはコマンド バーのリボンにも表示されているはずです。

  8. 上部のリボンで、挿入 > 垂直ギャラリーを選択します。

  9. ポップアップ ウィンドウが表示され、ギャラリーをデータ ソースに接続するよう求めるメッセージが表示されます。 Machine-Order-Data を選択します。

  10. このフィールドを調整するために、コマンド バーのリボン インターフェイスを使用してみましょう。 コマンド バーからフィールドの編集を選択します。

  11. Subtitle1 ドロップダウン メニューには Price が、Title1 オプションには Machine Name が表示されていることを確認します。 フィールドの編集ダイアログの外側を選択し、続行します。

  12. ギャラリーに表示されるテキストに、機器の名前と価格に加えて "サンプル画像" が反映されるはずですが、これはまもなく修正される予定です。 次に、ラベルの下にあるキャンバスの左半分を占め、ヘッダー ラベルの下に収まるように、このギャラリーのサイズを変更します。

  13. そしてサンプル画像を置き換えて、実際の製品画像を表示しましょう。 ギャラリーで最初の画像アイコンを選択します。 コマンド バー リボンのすぐ下にある fx 式入力フィールドに、コードを記述して Power Apps に含まれるコントロールのプロパティを変更し、SampleImage テキストを削除して ThisItem.Photo と入力します。

    式が ThisItem.Photo に設定されていて、式バーで Image が選択されているスクリーンショット。

  14. 次に、サブタイトル フィールドのテキスト形式を変更し、通貨を表示しましょう。 ギャラリーの最初の項目で、その価格を表示する Subtitle1 ラベルを選択します。 このコントロールはツリー ビューで灰色に表示され、式フィールドに ThisItem.Price が表示されることに注目してください。

    Subtitle1 が表示されるように展開された Gallery1 が表示されるように展開されている Screen1 が表示されたツリー ビューのスクリーンショット。

  15. 式フィールドで Text プロパティを Text(ThisItem.Price,"$##,###.00") に変更します。 すぐにドル記号、千ごとの区切り、セントが、価格に表示されます。

  16. 次にデータを変更できるよう、フォームを追加しましょう。 編集キャンバスの空白部分を選択してギャラリーを閉じ、挿入 > フォームの編集 の順に選択します。

  17. データ ソースとして Orders-List を選択すると、SharePoint リストの列に従って Power Apps によりフォームにフィールドが入力されます。

  18. フォームを位置とサイズを変更し、キャンバスの右半分に収まるようにします。

    選択されたフォームと、DataSource として 'Orders-List' が、式バーに表示されたキャンバスのスクリーンショット。

  19. フォームでタイトル カードを選択します。 選択したカードのすぐ上にあるカード名の左側に、南京錠アイコンが表示されることに注目してください。 ここではカードのロックを解除し、カスタマイズします。 選択したカードを右クリックし、ロックの解除を選択します。

    タイトル カードが選択され、右クリック オプションが表示され、

  20. 同じ手順でフォームにある OrderDate と OrderTotal カードのロックを解除します。

  21. フォームのタイトルの下にあるテキスト入力ボックスを選択し、必要に応じてロックを解除します。

  22. Default の式 を Parent.Default から Gallery1.Selected.'Machine Name' に変更します。 ギャラリーで選択された項目のタイトルが、画面の左側に表示されます。

    ヒント

    式を入力すると、Power Apps により入力時にオプションが自動で提案されます。 Tab や Enter を押して強調表示された提案を選択するか、またはリストをスクロールして 1 つ選びます。 これは完全にオプションですが、慣れると式を作成する速度と精度が向上します。

  23. OrderDate で日付ピッカー コントロールを選択し、DefaultDate の式を Today() に変更します。

  24. OrderTotal の下にあるテキスト入力ボックスを選択し、式を Gallery1.Selected.Price に変更します。

  25. フォーム全体を選択します。 左上隅のドロップダウンに DataSource プロパティが表示され、式入力フィールドには 'Orders-List' が表示されます。 この [プロパティ] ドロップダウン メニューを選択することにより、コントロールに使用できるプロパティを選択し、そのコントロール プロパティに関する式を変更できます。 この場合は、フォームの Item プロパティを変更するので、そのドロップダウン メニューを選択して Item を選択します。

    既定の DataSource が選択されており、Item が表示されているドロップダウン メニューのスクリーンショット。

  26. Item の数式に、Defaults('Orders-List') と入力します。 Defaults() 関数は、Orders-List SharePoint リストに新しい項目を作成していることを、このフォームを送信するたびに Power Apps に通知します。

  27. コマンド バーに移動し、挿入 > ボタンの順に選択します。

  28. フォーム入力の下の画面右側に、ボタンをドラッグします。

  29. このボタンの Text プロパティを注文の送信に変更します。

  30. このボタンの OnSelect プロパティを SubmitForm(Form1) に変更します。

これで、ユーザーがコーヒー メーカーを選択し、注文をプレビューして送信できるアプリが完成しました。 完成したアプリは次の図のようになります。

[注文の送信] ボタンが表示された注文のプレビューのスクリーンショット。

コマンド バーの右上隅にある再生 (三角形) ボタンを選択し、このアプリをプレビュー モードにします (またはキーボードの F5 ファンクション キーを選択します)。 コーヒー メーカーを選択し、注文の送信ボタンを選択します。 SharePoint リストの Orders-List に戻ると、作成した注文が表示されるはずです。

リストにある新しく作成された注文のスクリーンショット。

Power Apps を利用した SharePoint データの操作が持つ可能性に、これで興味が湧いきたことでしょう。 これは基本的なアプリケーションですが、カスタマイズを追加して UI/UX を変更し、ビジネス ニーズを支援できます。