PowerApps│カートに保存後、まとめてタスクを登録する方法




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

Plannerのタスク登録に限らず、まず全件入力してからまとめて登録したくないですか?

なぜなら、作業中に邪魔が入ったり、漏れや重複に気づきにくかったりするからです。

例えば、タスク登録中に電話や来客対応しちゃうと、もうどこまでやったかわからなくなりますよね。

でもまとめて登録するのって難しいんでしょう?

大丈夫!PowerAppsなら、ちょちょいとアプリに機能を追加できます。

そこで、今回はPowerAppsでネットショップっぽい発注アプリに、カート機能とまとめて登録する機能を尽かする方法をコード付きで紹介します。

作成難度も、これまた相当低めです。

ぜひ、チャレンジしてみてください。


以下、別記事で紹介したアプリに機能を追加する形で解説します。
まだ読まれていない、アプリを作成されていない場合は先に下記記事を読んでください。

カートに保存後、まとめてタスクを登録する方法


社内依頼アプリについて

前回よりアプリの仕組みは少し複雑になります。

  1. ギャラリーから商品を選択する。
  2. 数量と希望納期を選択する。
  3. 発注ボタンを押す。カートに入れる。
  4. カートの中身を一覧表示する。
  5. 念のため修正できるようにする。
  6. カート内の全タスクを登録する。

一度コレクションに入力したデータをため込むのがポイントです。

そのコレクションをギャラリーに展開すれば、何を入力したか一目瞭然ですよね。

さらに、使用するコントロールもラベルを含めてたった10個増えるだけです。

なんとなく作れそうな気になってきませんか?

入力したデータをカートに一時保存する

カートに入れるを押すたびに、コレクションにデータが蓄えられます。


アプリ起動時にコレクションの枠を用意する

アプリ起動時に商品情報を詰めこむカート用コレクションを宣言しておきます。

今回はなくても動きますが、枠の作成前にコレクション名を指定すると、このコレクションは存在しないよって怒られちゃいます。

そのため、中身は空っぽですが先に枠だけ用意しておきます。

いわゆる変数の宣言みたいなものですね。

作り方はかんたん、AppOnStartに次の記述を追記してください。

ClearCollect(colCart,Blank())


カートの中身表示用スクリーンを用意する

まず最初のスクリーン右上にカートアイコンicoMoveSendを設置します。

次に新しいスクリーンSend_Screenも作ります。

そのまま元スクリーンにコンテナで重ねてもよいですが、分けた方が作りやすいです。

スクリーン移動するため、icoMoveSendOnSelectに次のコードを記述します。

Navigate(Send_Screen, ScreenTransition.Fade)

最後に、あとから流用するので、発注ボタンbtnOrderを新しいスクリーンにコピペしておきます。名前はbtnSendとしました。

スクリーン移動のコードは、アクションタブの移動からかんたんに作ることもできるよ。


カートに入れるボタンの作成

コピペが終わったらコピペ元の発注ボタンbtnOrderOnSelectを変更します。

これでボタンを押すと、コレクションcolCartに入力した商品情報が蓄積されます。

その後、自動で商品一覧画面に戻すことで、操作性を向上させましょう!

//カート用コレクションに追加
Collect(colCart,
    {
        PlanId:drpCode.Selected.PlanId,
        title:"数量"&drpValue.Selected.Value,
        bucketId:drpCode.Selected.BucketId,
        startDateTime:Today(),
        dueDateTime:dteStandardDelivery.SelectedDate,
        Code:drpCode.Selected.Code,
        Value:drpValue.Selected.Value
    }
);

//コントロールを初期値に戻してから商品一覧に戻る
Reset(drpValue);Reset(dteStandardDelivery);
Set(_visible,!_visible)


以上でスクリーンOrder_Screenの設定は終わりです。

スクリーンSend_Screenの作成に進みます。

カートの中身を一覧表示し、修正もできるようにする


続いてカートの中身をどうこうするスクリーンを作っていきます。

はじめにタイトルlblTitle3と戻るアイコンicoMoveOrderを設置しておきましょう。

戻るアイコンicoMoveOrderOnSelectBack関数でも問題ないですが、Navigate関数で明示的に記述しておきます。

Navigate(Order_Screen, ScreenTransition.Fade)


カートの中身をまとめてタスク登録する発注ボタンの作成

先ほどコピペした発注ボタンbtnSendです。

OnSelectのコードは追記しても構いませんが、下記をまるごとコピペしてもOKです。

ForAll関数でコレクションcolCartのレコード数分、タスク登録を繰り返しています。

また、後片付けとして、コレクションcolCartの中身をClear関数で空にしています。

//タスク登録、バケットが存在しないケースを考慮してない
ForAll(colCart As Cart,
    Planner.CreateTaskV3(
        "",
        Cart.PlanId,
        "数量"&Cart.Value,
        {
            bucketId:Cart.bucketId,
            startDateTime:Today(),
            dueDateTime:Cart.dueDateTime
        }
    )
);

//後片付け
Clear(colCart);
Set(_visible,true);
Navigate(Order_Screen, ScreenTransition.Fade);


カートの中身を一覧表示するギャラリーの作成

真ん中あたりにギャラリーをひとつ設置して、ItemsにコレクションcolCartを指定します。

あとは図を参考にコントロールを5つテンプレートに設置します。

コントロール名初期値
Label1Text=LookUp(M_商品,Code=ThisItem.Code,ProductName)
imgProduct2image=First(LookUp(M_商品,Code=ThisItem.Code).添付ファイル).Value
dteStandardDelivery2DefaultDate=ThisItem.dueDateTime
drpValue2Default=ThisItem.Value
Items=Sequence(100).Value


最後に削除用のアイコンicoRemoveOnSelectに次を記述して完了です。

Remove(colCart,ThisItem)

以上でアプリは完成しました。

あとはちゃんと動作するか、アプリ起動からタスク登録まで検証してみましょう。

カートに保存後、まとめてタスクを登録する方法のまとめ

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

事前準備が要らない分、前回よりも作りやすかったと思います。

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

また、コレクションやForAll関数はとても便利なので、ぜひ使い方を極めてください。

いまのところ、SharePointサイトおよびPlannerの権限を共有している人たちでしか利用できません。

そのため、次は権限持っていない人でもタスクを登録できるようにしてみたいと思います。

まずは1件ずつ登録するやり方です。


まとめて登録する方法は、コチラ。

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

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

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

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

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

よろしくお願いします。

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



コメントを残す

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

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