PowerApps│ネットショップっぽいUIでPlannerのタスクを登録する方法

こんにちは、あんこ先生です。

社内の部門間で手軽にタスク登録してみたくないですか？

例えば、製品の製造依頼や消耗品の発注など、担当部門のPlannerにタスク登録できると双方楽できます。

でもPowerAutomateは苦手だし、いちいちメール送るのも面倒・・・

大丈夫！初期設定さえちゃんとやれば、だれでも簡単に利用できるアプリを作れます。

そこで、今回はPowerAppsでネットショップっぽい発注アプリの作成方法をコード付きで紹介します。

作成難度も相当低めです。

Plannerやリストの作成に時間を要するかもですが、アプリ自体は30分ぐらいで作れます。

以前紹介したPlannerのタスクをガントチャートに展開するアプリと使うと受け側もうれしいですね。

関連記事PowerApps│Plannerと連動したガントチャートの作成方法

2022.04.30

Contents

1 ネットショップっぽいUIでPlannerのタスクを登録する方法
2 Plannerにタスク登録するアプリの作成
3 ガントチャートアプリとの連動
4 ネットショップっぽいUIでPlannerのタスクを登録する方法のまとめ

ネットショップっぽいUIでPlannerのタスクを登録する方法

社内依頼アプリについて

アプリの仕組みは単純です。

ギャラリーから商品を選択する。
数量と希望納期を選択する。
発注ボタンを押す。

いかがですか？単純なので簡単そうですよね。

使用するコントロールもラベルを含めて14個しかありません。

ただし、発注と受注の部門双方がアクセス権を持つプランとリストが必要になります。

よくわからなければ、偉い人に確認してみましょう。

Plannerとの連携

データの流れは一方通行です。

はじめにPlannerを起動して、受け皿となるプランとバケットを作成しましょう。

プライバシーはどちらでも構いません。

ただし、パブリックだとグループIDから参加メンバーを絞り込めません。

そのため、ガントチャートアプリと連動させる場合は、プライベートを選択してください。

プランができたら商品ごとにひとつずつバケットを作っていきます。

To Doのバケットは使わないので削除しておきましょう。

登録数が多いと結構めんどいので、こんなツールを作ると少し楽になります。

なお、プランIDはアドレスバーのplanid=の後にある英数字です。

バケット作成くん1号のコードなど

①プランID入力用のテキスト入力txtPlanIdとギャラリーgalCreateBucketを設置します。

②ギャラリーgalCreateBuckeのItemsは次をコピペします。

Sequence(10).Value

③ギャラリー内にテキスト入力txtCreateNameとボタンbtnCreateを設置します。
　txtCreateNameのResetはtrueにしておきます。

④ボタンbtnCreateのOnSelectは次をコピペします。

//ボタンのOnSelect
Planner.CreateBucketV2(txtCreateName.Text,"",txtPlanId.Text);
Reset(txtCreateName)

あとは忘れずにメンバーを追加しておきましょう。

ここで追加していないメンバーは当アプリを利用できません。

以上でPlannerの設定は終わりです。

商品マスター│リスト

Excelで図のような商品マスターを作成し、リストとして登録します。

内容は商品番号、商品名、基準納品日数、プランおよびバケット情報の5つです。

PlanIdは先ほどアドレスバーから抽出したプランIDを入れておきます。

BucketIdは、適当なギャラリーのItemsに次のコードをコピペしてThisItem.nameとThisItem.idを表示させればわかります。

Planner.ListBucketsV3("プランID","").value

こんなツールを作ると楽になりますよ。

データの入力が終わったら、テーブル化してリストにエクスポートしましょう。

手順が分からなければコチラで確認してください。

商品一覧に画像も載せたい場合は、リストの編集画面で添付ファイルとして埋め込みます。

埋め込みたいアイテム名かその行をダブルクリックすれば編集できます。

右下の添付ファイルを押して、ファイルを選べば完了です。

Plannerにタスク登録するアプリの作成

コネクタの接続

画像の通り、PlannerとSharePoint（リスト名：M_商品）を接続します。

アプリ起動時の設定

商品一覧を前面に持ってくるため、AppのOnStartに次をコピペします。

Set(_visible,true);

ScreenのOnVisibleでも代用できますよ。

前面コンテナの作成│商品一覧

まずアプリタイトルと商品一覧を作成します。

商品一覧はギャラリーgalProductViewに表示しており、コンテナcnrProductViewに格納しています。

そのテンプレートに、画像imgProductとラベルlblPNameがあります。

それぞれのコードは次の通りです。

商品一覧コード集

//cnrProductView.Visible
_visible

//galProductView.Items
M_商品

//galProductView.OnSelect
Set(_visible,!_visible)

//imgProduct.Image
First(ThisItem.添付ファイル).Value

//lblPName.Text
ThisItem.ProductName

背面│商品詳細

次に商品詳細を作成します。

商品詳細は、下記コントロールと発注実行用のボタンbtnOrderで構成されています。

アイコンicoCancel│前画面に戻る用
ドロップダウンdrpCode│商品コード
ラベルlblProductName│商品名
画像imgAttachment│商品画像
ドロップダウンdrpValue│数量、タスクのタイトル
日付の選択dteStandardDelivery│希望納期、タスクの期限

商品詳細のデータは、ドロップダウンdrpCodeで選択したレコードが展開されます。

初期値はギャラリーgalProductViewのSelectedになります。

日付の選択dteStandardDeliveryは本日の日付＋リストのStandardDeliveryで設定した日付を初期値としています。

数量と希望納期を入力してボタンを押せばタスクが登録されます。

タスクの登録先は、リストのPlanIdとBucketIdを参照しています。

それぞれのコードは次の通りです。

商品詳細コード集

//icoCancel.OnSelect
Reset(drpValue);Reset(dteStandardDelivery);
Set(_visible,!_visible)

//drpCode.Items
M_商品

//drpCode.Default
galProductView.Selected.Code

//lblProductName.Text
drpCode.Selected.ProductName

//imgAttachment.Image
First(drpCode.Selected.添付ファイル).Value

//drpValue.Items
Sequence(100).Value

//dteStandardDelivery.DefaultDate
DateAdd(Today(),drpCode.Selected.StandardDelivery,Days)

//btnOrder.OnSelect
　//タスク登録、バケットが存在しないケースは考慮してない
Planner.CreateTaskV3(
    "",
    drpCode.Selected.PlanId,
    "数量"&drpValue.Selected.Value,
    {
        bucketId:drpCode.Selected.BucketId,
        startDateTime:Today(),
        dueDateTime:dteStandardDelivery.SelectedDate
    }
);
　//コントロールを初期値に戻してから商品一覧に戻る
Reset(drpValue);Reset(dteStandardDelivery);
Set(_visible,!_visible)

以上でアプリの作成は完了です。

実際にタスクが登録されるか動作確認してくださいね。

不明点等あれば、コメントください。