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

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

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

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

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

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

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

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

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

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

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

2022.06.19

Contents

1 カートに保存後、まとめてタスクを登録する方法
2 入力したデータをカートに一時保存する
3 カートの中身を一覧表示し、修正もできるようにする
4 カートに保存後、まとめてタスクを登録する方法のまとめ

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

社内依頼アプリについて

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ClearCollect(colCart,Blank())

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

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

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

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

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

Navigate(Send_Screen, ScreenTransition.Fade)

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

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

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

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

これでボタンを押すと、コレクション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を設置しておきましょう。

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

Navigate(Order_Screen, ScreenTransition.Fade)

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

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

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

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つテンプレートに設置します。

コントロール名	初期値
Label1	Text=LookUp(M_商品,Code=ThisItem.Code,ProductName)
imgProduct2	image=First(LookUp(M_商品,Code=ThisItem.Code).添付ファイル).Value
dteStandardDelivery2	DefaultDate=ThisItem.dueDateTime
drpValue2	Default=ThisItem.Value Items=Sequence(100).Value

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