【PowerApps】入力数を増減できる動的フォームの作成方法

入力数を増減できる動的フォームの作成方法

フォームに複数の入力欄を設けたいけど、最初から固定数を表示するのではなく、ユーザーが必要に応じて追加・削除できるようにしたい。そんなときに便利なのが「動的フォーム」です。

この記事では、PowerAppsで、入力欄を自由に追加・削除できるフォームの作り方を解説します。

画面イメージ

必要なもの

※入力箇所2点 添付ファイル1点の想定

各コントロールのプロパティ

スクリーン

RegisterScreen.OnVisible

ClearCollect(
    colFormData,
    {
        Index: 1, //通し番号
        Title: "", //タイトル
        Remarks: "", //備考
        attchment: Table(), //添付ファイル
        ID: 100 //ID 100刻みの場合
    }
);

入力フォームがすべて閉じられた時の追加ボタン

icnAddFormL.OnSelect

Collect(colFormData,{ID: 100 });

icnAddFormL.Visible

CountRows(colFormData)< 1

⏷ギャラリー

galForm.Items

ForAll(Sequence(CountRows(colFormData)),Patch(Index(Sort(colFormData,ID,SortOrder.Ascending), Value),{Index:Value}))

通し番号表示ラベル

lblIndex.Text

ThisItem.Index

タイトルラベル

※タイトルを表示しているだけなので割愛

テキストボックス

txtTitle.OnChange

Patch(colFormData,LookUp(colFormData,ID=ThisItem.ID),{Title:txtTitle.Text})

txtTitle.Default

ThisItem.Title

上記txtTitleと同様のため割愛

・・・

添付ファイル

Attachment.Items

ThisItem.attchment

Attachment.OnAddFile

Patch(colFormData,LookUp(colFormData,ID=ThisItem.ID),{attchment:Self.Attachments})

添付ファイルの最初の画像のみ表示する画像コントロール

分かりやすくするためギャラリーに入れてますがなくても問題ありません。

imgAttachmentValue.Image

First(Attachment.Attachments).Value

フォーム追加用ボタン

icnAaddForm.OnSelect

// ThisItem の位置に新規行を挿入
// ID は 100 刻み
//   - 最後に挿入 … Max(ID) + 100
//   - 先頭に挿入 … 100 を新規IDにし、全行を +100 して頭出し
//   - 途中に挿入 … ThisItem.ID に新規を入れ、そこ以上のIDを +100 でシフト
With(
    {
        step: 100,
        curID: ThisItem.ID,
        minID: Min(colFormData, ID),
        maxID: Max(colFormData, ID),
        isTail: ThisItem.ID = Max(colFormData, ID),
        isHead: ThisItem.ID = Min(colFormData, ID)
    },
    If(
        isTail,
        // 末尾に挿入
        Collect(colFormData, { ID: maxID + step }),
        // 先頭 or 途中
        UpdateIf(
            colFormData,
            ID >= If(isHead, minID, curID),
            { ID: ID + step }
        );
        Collect(
            colFormData,
            { ID: If(isHead, step, curID) }
        )
    )
)

フォーム削除ボタン

icnClose.OnSelect

Remove(colFormData,Filter(colFormData,ID=ThisItem.ID))

背景

背景です。htmlテキストやImage、図形でもOKです。

まとめ

保存はForAllでしてあげればいいと思います。
使う場面はあまりないと思いますが、レコードごとに添付ファイルを持たせる考え方はほかの場面でも応用できると思います！