MENU
  1. ホーム
  2. 記事
  3. アプリ
  4. データテーブル（モダン）で選択したデータを変更して保存する

データテーブル（モダン）で選択したデータを変更して保存する

広告
アプリ
PowerApps

前回の記事の続きとなります

前回の記事
データテーブル（モダン）を絞込み表示させる SharePointリストをデータソースにしてApps表示させる方法。一覧表示させるにはギャラリーかデータテーブルか迷いますが、単純にExcelのように見せるにはデータテーブル…

テーブルの中ではデータ変更ができないため、どうしようかと考えた結果がコレです。

  1. 選択した行だけをコレクションに追加
  2. コレクションをギャラリー表示
  3. ギャラリー内でデータを変更
  4. パッチでSharePointリストに保存
  5. コレクションを空っぽにする

画面は下図のような感じです

目次

選択した行だけをコレクションに追加

前回までの記事で複数選択も可能なテーブルになっていると思いますので、その設定は割愛します。

テーブルが入っている垂直コレクションに水平コンテナを追加しましょう。
ボタンだけを追加すると右端揃えができなくなります。

ボタンのOnSelectには下記を設定します。

If(
    CountRows(Table1.SelectedItems) = 0,
    Notify("行を選択してから『追加』を押してください。",
    NotificationType.Warning),
    // 重複（ID）を除いてまとめて追加
    ForAll(
        Table1.SelectedItems As r,
        If(
            IsBlank( LookUp( ColAddTableNameSelected, ID = r.ID ) ),
            Collect( ColAddTableNameSelected, r )
        )
    );
    Notify("選択した行を追加しました（もしくは追加済です）",
    NotificationType.Success)
)

コレクションをギャラリー表示

前提：テーブルから持ってきたデータを保存するコレクションは　ColAddTableNameSelected　とします

  1. レイアウト　＞　水平コンテナ―　を挿入
  2. レイアウト　＞　垂直ギャラリー　を挿入

水平コンテナー

こちらは垂直ギャラリーに表示させたときの見せかけヘッダーとするためのものです
とりあえず挿入だけしたら後回しで、次は垂直ギャラリーに手をかけましょう

垂直ギャラリー

垂直ギャラリーを挿入したらテンプレに表示されているテキスト類をすべて削除します。
残しておくのは　Rectangle　と　Separator　ぐらいですかね。

垂直ギャラリー　Gallery2　のプロパティは以下な感じで

プロパティ設定内容備考
Height150縦幅　自由でｂ
ItemsColAddTableNameSelectedコレクション名
TemplateSize50情報量少ない予定なので
WidthParent.Width
DisplayModeDisplayMode.Edit

見やすさを整える

ギャラリー「Gallery2」に、更新に必要な情報を出してあげますが、その前にヘッダーを付けた方が見やすいです。

使用列を決める

まずは　データテーブル　から追加したデータの中から、編集させる列を決め、表示させる列も決めましょう。
リストのシステムIDは最低限必要ですので、それ以外です。

今回は以下を表示させ、他の列は割愛します。
データとしてコレクションには入っているので、必要になったらいつでも表示（編集）項目に追加できます。

表示（編集）させる列

列名内部列備考
IDID表示のみ
タスクIDTitle表示のみ
担当者field_1表示のみ
期限field_2ここを編集させる

水平コンテナを設定

さて、今回は４項目表示させるので、最初に挿入していた「水平コンテナ」に「テキスト」を４個挿入しましょう。

背景が水色のところが疑似的なヘッダーです

水平コンテナの中身はこのような感じです

水平コンテナはあまり設定していませんが、以下ぐらいですかね。

ギャップ：10
パディング：左8　（gallery2のRectangleの横幅を設定）
高さ：50
Fill：RGBA(180, 214, 250, 1)

挿入した「テキスト」は以下のようなプロパティ設定にしています。
他の「テキスト」も似たような設定です。

IDのヘッダーにするためのテキストの設定例

プロパティ設定内容備考
Align‘TextCanvas.Align’.Center中央寄せ
HeightParent.Height
Text“ID”
VerticalAlignVerticalAlign.Middle
Width50
X00以外にしてもムダ
Y0

水平コンテナに１つずつ「テキスト」を設定していくので、自動で１つのブロックとして区切られて横並びになっていきます。そのため横位置は設定できないと考えた方が良いですね。
代わりにIDの左の余白は、水平コンテナの方のpaddingで設定しています。

横幅はそれぞれgallery設定するときのことを考えながら適当に幅を持たせましょう。

ギャラリーのデータ表示の設定を実施

さて、垂直コンテナで先ほどヘッダにした水平コンテナの下に、ギャラリーが挿入しているはず。ここではそれを設定していきます。

挿入するアイテムで、閲覧項目は「テキスト」を挿入し、編集項目には入力タイプのアイテムを入れます。
例えば今回は「期限」の列だけを編集させる予定です。
「期限」のSharePointリスト列は「１行テキスト」ですが、ユーザー操作させるここでは「日付ピッカー」の方が利便性が高いです。

そのため　挿入　＞　入力　＞　日付の選択　というものを入れています。

挿入したそれぞれのアイテムはヘッダーにするテキストの横幅やXと数値を同じにします。
というかヘッダーテキストをイコールで持ってきます。
そうすれば、ヘッダーテキストを少し縮めた場合も、ギャラリーの方も同じく縮んでくれてメンテナンスしやすいです。

IDを表示させるテキスト（TextCanvas3）のプロパティ例は以下の通りです

プロパティ設定内容備考
Align‘TextCanvas.Align’.Center中央寄せ
HeightParent.TemplateHeight -2-2　は区切り線のサイズが1なので、です
TextThisItem.ID他のテキストには「ThisItem.」の後を変更して反映させましょう
VerticalAlignVerticalAlign.Middle縦の中央寄せ
WidthTextCanvas5.WidthTextCanvas5 はIDのヘッダーとして水平コンテナに追加したテキストの名前です

「日付」の場合は表示させる「Text」プロパティがないので、SelectedDateというプロパティに「ThisItem.期限」と設定します。

文字列からだったので、表示させるときと保存させるときにひと工夫必要かなと思っていましたが、特に何か面倒な設定することなく、デフォルトの設定だけでユーザー編集時も問題なく、保存も問題なくいけました。ビックリ。

削除ボタン（ゴミ箱）

コレクションに追加したものの変更する必要がなかったから削除したい、といった時に利用するゴミ箱。
モダンの「アイコン」は単なる装飾アイコンなのでOnSelectがありません。
そのため、動作させる場合は　挿入　＞　入力　＞　ボタン　を入れましょう。

ボタンをアイコンのように見せかける場合はプロパティで設定します。

画面右側に表示するプロパティで、左図のように設定しておけば良いです。

テキスト：ボタン
アイコン：Delete
レイアウト：Icon only　←　これ大事

種類：Transparent
アイコンのスタイル：Outline

ボタンのOnSelectに以下を設定します

Remove(ColAddTableNameSelected, ThisItem)

このアイテムをコレクションから削除する、という意味ですね。

ギャラリー内でデータを変更

さて、アプリをプレビュー画面にして「期限」をクリックすると、ちゃんとカレンダーが表示され、新しい値に変更されました。もちろんこれは一時的な変更で、データは何も変わっていません。

また、もし「期限」以外にデータを変更する場合、「テキスト入力」や「コンボボックス」で設定していきます。

モダンはすべて挿入の「入力」のカテゴリから選択していくタイプのようです。
最近ようやく使い分けが分かってきました。

パッチでSharePointリストに保存

さあ、変更されたデータ、コレクションの中身をすべてSharePointリストに連携して保存させましょう。

コレクションの下部に「保存」ボタンを設けます。

保存（ButtonCanvas2）のプロパティで今回大切なのは　DisplayMode　と　OnSelect　だけです。

OnSelectは下記のように記載

// 保存ボタン OnSelect
IfError(
    Patch(
        'タスク管理リスト5000件以上',
        ForAll(
            Filter(
                Gallery2.AllItems,
                !IsBlank(ID) &&
                !IsBlank(DatePickerCanvas1.SelectedDate) &&
                Text(DatePickerCanvas1.SelectedDate, "[$-ja-JP]yyyy/mm/dd") <> field_4
            ),
            {
                // 既存更新を示すキー
                ID: ID,
                // 保存列はテキスト：DatePicker を文字列化して保存
                field_2: Text(DatePickerCanvas1.SelectedDate, "[$-ja-JP]yyyy/mm/dd")
            }
        )
    ),
    // 失敗時
    Notify("保存に失敗しました。もう一度お試しください。", NotificationType.Error),
    // 成功時
    Notify("保存が完了しました。", NotificationType.Success);
    Refresh('タスク管理リスト5000件以上');
    // コレクションを空にする
    Clear(ColAddTableNameSelected)
);

保存されたらコレクションは空っぽにして、App画面ではクリアされます。
データテーブルも刷新されるので、もし更新忘れた担当者がいても、すぐに次の変更をかけることが可能です。

DisplayModeは以下のように記載

// 変更行が 0 件なら無効化（ギャラリーのローカル値のみで判定）
If(
    CountRows(
        Filter(
            Gallery2.AllItems,
            // 更新対象（既存レコード）だけに限定：IDが空でない
            !IsBlank(ID) &&
            // 未選択は対象外（必要なければこの行は省略可）
            !IsBlank(DatePickerCanvas1.SelectedDate) &&
            // 既存文字列と、ピッカーの日付(文字列化)の差分だけ対象
            Text(DatePickerCanvas1.SelectedDate, "[$-ja-JP]yyyy/MM/dd") <> field_2
        )
    ) = 0,
    DisplayMode.Disabled,
    DisplayMode.Edit
)

コレクションに格納したものの、何のデータも変更されていない場合は「保存」ボタン自体が非活性で押せないようにする設定です。連打されて負荷がかからないようにする処置です。
今回は「期限」だけが編集する項目でしたが、編集項目が増えてくればちょっと面倒かなぁ。

まずは実用に乗せてから改変検討していきましょう。

アプリ
PowerApps

広告

関連記事

目次