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




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

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

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

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

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

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

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

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


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

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


社内依頼アプリについて

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

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

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

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

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

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


Plannerとの連携


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

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

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

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

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


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

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


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

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

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

ギャラリーgalCreateBuckeItemsは次をコピペします。

Sequence(10).Value

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

ボタンbtnCreateOnSelectは次をコピペします。

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


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

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

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


商品マスター│リスト


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

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

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

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

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

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


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

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


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

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

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

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


コネクタの接続


画像の通り、PlannerとSharePoint(リスト名:M_商品)を接続します。


アプリ起動時の設定

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

Set(_visible,true);

ScreenOnVisibleでも代用できますよ。


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


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

商品一覧はギャラリー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で構成されています。

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

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

初期値はギャラリーgalProductViewSelectedになります。

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

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

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

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

//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)


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

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

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

ガントチャートアプリとの連動


別記事で紹介しているガントチャートアプリと連動できます。

受注側はこれで管理すると捗りそうですね。

作り方はコチラで確認してください。

より高性能なアプリを手軽に導入されたい方へ。
完成版の販売も行っています。


SVG版ガントチャートアプリもあります。こっちが本命?

  1. グラフ描画がSVGなので動作が軽いです。
  2. アプリから直接タスクの登録、修正が行えます。
  3. リストなど外部データソースを使用せず、アプリ単体で動作します。

興味があればこちらからどうぞ。

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

今回はネットショップっぽいUIで作成してみました。

使用するコントロールも少ないので作りやすかったと思います。

機能はかなり絞っているので、たくさんカスタマイズしてください。

でも、実務ではひとつずつではなく複数のタスクをまとめて登録しますよね。

そのため、買い物カートもどきでデータをため込む機能、まとめてタスクを登録する機能を追加しようと思います。

詳細はこちら。

アクセス権がなくても登録できるようにするにはこちらをどうぞ。

ご支援よろしくおねがいします

この記事を気に入ってくださった方、寄付してあげてもいいよという方がいらっしゃっいましたら、ご支援いただけると助かります。

下記リンクからAmazonギフト券で、金額は15円からお気持ちを入力してください。

受取人のメールアドレスは amazon@anko7793.com までお願いします。

メッセージもいただけるとたいへん喜びます。

よろしくお願いします。

Amazonギフト券(Eメールタイプ) 



コメントを残す

メールアドレスが公開されることはありません。

ABOUT US
七草あんこ
非IT系中間管理職やってます。社命によりoffice365を主軸とした業務改善プロジェクトメンバーに任命されたことでPowerAppsと出会えました。いまではビジネス・プライベートを問わず、欠かせないツールになっています。導入初期やアプリ作成時に遭遇した諸問題の解決法とサンプルアプリの作り方を紹介していきます。主にTwitterで情報収集しているので不明点など呟いているとお邪魔するかもしれません。