【Power Apps】データテーブル&複写機能付き 契約書管理アプリ2

前の記事の続きになります。
Microsoft社が提供するローコード開発ツール「Power Platform」のアプリ機能(Power Apps)を使用した、データテーブルおよびデータ複写機能付き契約書管理アプリの作成例を紹介します。

• 操作環境：
• OS：Windows 11
• Webブラウザー：Edge
• 使用プラン：Microsoft 365 Business Premium

アプリ実装:一覧画面

部品の削除・追加

既存のギャラリーを削除します。
左側[ツリービュー]の[BrowserGallery1]の[…]を選択し、[削除]を選択します。

図表6-1 一覧画面の部品削除

検索条件を切り替えるラジオボタンと検索結果用のデータテーブルを追加します。
上メニューの[挿入]から、ラジオボタンとデータテーブルを1個ずつ追加します。

図表6-2 一覧画面の部品追加

追加したデータテーブルについて、データソースの選択を求められたら、[契約書管理]を選択します。

図表6-3 一覧画面のデータテーブルへのデータ読込

検索条件項目の設定

ラジオボタンについて、以下の通り設定します。

• 名前：rdView
• Default： "締結準備中"
• Height：70
• Items： ["締結準備中","満了間近","全データ"]
• Layout：Layout.Horizontal
• RadioSize：50
• Width：640
• X：0
• Y：RectQuickActionBar1.Height

図表6-4 一覧画面のラジオボタンの設定

検索入力欄(TextSearchBox1)について、以下の通り設定します。

• HintText： "取引先名のキーワード(部分一致)"
• Width：1280
• X：640

図表6-5 一覧画面の検索入力欄の設定

検索結果項目の設定

データテーブルについて、以下の通り設定します。

• 名前：tblView
• Height： App.Height-RectQuickActionBar1.Height-rdView.Height
• Width： App.MinScreenWidth
• X：0
• Y： RectQuickActionBar1.Height+rdView.Height

[Items]プロパティについては、以下の通り設定します。

Sort(
    Switch(rdView.Selected.Value,
        "締結準備中", Filter([@契約書管理],ステータス.Value="締結準備中", 
            TextSearchBox1.Text in 取引先名),
        "満了間近", Filter([@契約書管理],ステータス.Value in ["締結準備中","締結中"], 
            契約終了日<=Today()+90, TextSearchBox1.Text in 取引先名),
        Filter([@契約書管理], ステータス.Value<>"無効",TextSearchBox1.Text in 取引先名)
    )
    ,契約書ID, If(SortDescending1, SortOrder.Ascending, SortOrder.Descending)
)

*[Items]プロパティの式の意味：ラジオボタンの選択に応じて契約書データの抽出条件を切り替え、契約書IDの降順(画面右から二番目のアイコンで切替え)で表示します。ラジオボタンの[満了間近]は、ステータスが締結準備中または締結中で、契約満了日が90日以内のものを抽出しています

図表6-6 一覧画面のデータテーブルの設定

データテーブルを選択した状態で、右側[プロパティ]を選択し、[ディスプレイ]を選択し、[○件選択済み]を選択します。
一覧表示で不要な項目(この例ではTitle,コンテンツタイプ,添付ファイルあり)の[…]を選択し、[削除]を選択します。

図表6-7 一覧画面のデータテーブルの表示列調整

[フィールドの追加]を選択し、一覧表示で必要な項目(この例では契約書ID)について、チェックをつけ、[追加]を選択します。
各項目の[…]を選択し、[上へ移動],[下へ移動]を選択し、項目の表示順を調整します。

図表6-8 一覧画面のデータテーブルの表示列調整の続き

データテーブルの各列について、マウス操作か右側[プロパティ]で幅を調整します。
さらに、OnSelectプロパティの値をNavigate(DetailScreen1, ScreenTransition.None)に変更します。

図表6-9 一覧画面のデータテーブルの各列の設定

図表6-7,8のフィールド名について、field_xのように内部フィールド名が表示される場合があります。
内部フィールド名はSharePointリストの[設定>リスト情報]から列名を選択し、URLの一番最後で確認できます。
SharePointリストをExcelから作成した場合、内部フィールド名がfield_xのような値になります。SharePointリストからPowerAppsアプリを作成した場合は内部フィールド名ではなくSharePointリストの列名が使用されますが、[データの追加]からSharePointリストを追加した場合は内部フィールド名が使用されます。

図表6-10 内部フィールド名に関する補足

アプリ実装:詳細画面

画面タイトル・アイコン設定

画面タイトルについて、以下の通り設定します。

• DisplayMode："契約書管理 (契約書ID:" & DataCardValue1.Text & ")"
  *DataCardValueXの[X]の値は左側[ツリービュー]の契約書IDの値を確認します

図表7-1 詳細画面のタイトルの設定

削除アイコンについて、以下の通り設定します。

• DisplayMode：If(!IsBlank(tblView.Selected) && DataSourceInfo([@契約書管理], DataSourceInfo.DeletePermission), DisplayMode.Edit, DisplayMode.Disabled)
• OnSelect：Patch(契約書管理,LookUp(契約書管理,契約書ID=Value(DataCardValue1.Text)), { ステータス:{Value:“無効”} })
  *削除アイコンはSharePointリストデータの物理的な削除ではなく、ステータスを無効に更新する仕様に変更します
• Tooltip："この項目の無効化"

図表7-2 詳細画面の削除アイコンの設定

詳細フォーム・非表示項目の設定

詳細フォーム(左側[ツリービュー]の[DetailForm1])について、以下の通り設定します。

• Height：500
• Item：tblView.Selected

図表7-3 詳細画面のフォームの設定

契約書IDは画面タイトルに表示しますので、詳細フォーム内の項目は非表示にします。
左側[ツリービュー]から契約書IDを選択し、以下の通り設定します。

• Visible：false

図表7-4 詳細画面の非表示項目の設定

項目追加・レイアウト調整

左側[ツリービュー]の[DetailForm1]を選択し、右側[プロパティ]の[ディスプレイ]タブを選択し、[○件選択済み]を選択します。
[フィールドの追加]を選択し、[添付ファイル]にチェックをつけ、[追加]を選択します。

図表7-5 詳細画面の項目追加

少々扱いに癖がありますが、各項目の全体領域を選択し、右側[プロパティ]の[詳細設定]の下の方にある、[Height]、[Width]、[X]、[Y]に値設定すると意図したレイアウトになります。

• 0行目：ステータス(幅320),取引先名(幅640),契約区分(幅320)
• 1行目：契約書名(幅640),契約開始日(幅320),契約終了日(幅320)
• 2行目：メモ(幅960),添付ファイル(幅960)

添付ファイルのデータ領域(DataCardValueX)の高さは150にします。

図表7-6 詳細画面の項目のレイアウト調整

部品の追加・設定

上メニューの[挿入]から、ラベルを1個追加し、以下の通り設定します。

• 名前：lblHistoryDetail
• FontWeight： FontWeight.Semibold
• Text： "【上記と同じ取引先の他の契約書データ】"
• X：0
• Y：DetailForm1.Height+RectQuickActionBar2.Height

図表7-7 詳細画面のラベル追加

一覧画面のデータテーブルをコピーし、詳細画面(DetailScreen1)にこれをペーストします。

図表7-8 詳細画面へのデータテーブルのコピー&ペースト

コピー&ペーストしたデータテーブルについて、以下の通り設定します。

• 名前：tblHistoryDetail
• Height： App.Height-RectQuickActionBar2.Height-DetailForm1.Height-lblHistoryDetail.Height
• Y： lblHistoryDetail.Height+DetailForm1.Height+RectQuickActionBar2.Height

[Items]プロパティについては、以下の通り設定します。

Sort(
    Filter(
        [@契約書管理], DataCardValue2.Text=取引先名,
        契約書ID <> Value(DataCardValue1.Text), ステータス.Value <> “無効”
    ),
    契約書ID, SortOrder.Descending
)

*[Items]プロパティの式の意味：詳細フォームの取引先と同じ他の契約書データを契約書IDの降順で表示します

図表7-9 詳細画面のデータテーブルの設定

データテーブルの各列のOnSelectプロパティの値をfalseに変更します。

図表7-10 詳細画面のデータテーブルの各列の設定

アプリ実装:編集画面

*図表8-1から6までは図表7-1から6までと同じ設定です

画面タイトル・アイコン設定

画面タイトルについて、以下の通り設定します。

• DisplayMode："契約書管理 (契約書ID:" & DataCardValue9.Text & ")"

図表8-1 編集画面のタイトルの設定

保存アイコンのOnSelectプロパティについて、以下の通り設定します。

//新規登録時の契約書IDは最終レコードの契約書ID+1とする
If(EditForm1.Mode=FormMode.New, UpdateContext({ loc_contract_id:Last([@契約書管理]).契約書ID+1 }));
//契約開始日・終了日の整合性チェック
If(IsBlank(DataCardValue13.SelectedDate)=false && IsBlank(DataCardValue14.SelectedDate)=false 
    && DataCardValue13.SelectedDate>DataCardValue14.SelectedDate,
    UpdateContext({loc_error_message:"契約開始日が契約終了日より大きな値にできません"}),
    UpdateContext({loc_error_message:""});SubmitForm(EditForm1)
);

*[OnSelect]プロパティの式の意味：新規登録時、契約書IDは最終レコードの契約書ID+1とします。保存の前に、契約開始日と終了日の整合性チェックを行い、エラーの場合は保存の前にエラーメッセージを格納します

図表8-2 編集画面の保存アイコンの設定

編集フォーム・非表示項目の設定

編集フォーム(左側[ツリービュー]の[EditForm1])について、以下の通り設定します。

• Height：514
• Item：tblView.Selected

図表8-3 編集画面のフォームの設定

契約書IDは画面タイトルに表示しますので、編集フォーム内の項目は非表示にします。
左側[ツリービュー]から契約書IDを選択し、以下の通り設定します。

• Visible：false

図表8-4 編集画面の非表示項目の設定

項目追加・レイアウト調整、コントロールの種類変更

左側[ツリービュー]の[EditForm1]を選択し、右側[プロパティ]の[ディスプレイ]タブを選択し、[○件選択済み]を選択します。
[フィールドの追加]を選択し、[添付ファイル]にチェックをつけ、[追加]を選択します。

図表8-5 編集画面の項目追加

少々扱いに癖がありますが、各項目の全体領域を選択し、右側[プロパティ]の[詳細設定]の下の方にある、[Height]、[Width]、[X]、[Y]に値設定すると意図したレイアウトになります。

• 0行目：ステータス(幅320),取引先名(幅640),契約区分(幅320)
• 1行目：契約書名(幅640),契約開始日(幅320),契約終了日(幅320)
• 2行目：メモ(幅960),添付ファイル(幅960)

添付ファイルのデータ領域(DataCardValue)の高さは150にします。

図表8-6 編集画面の項目のレイアウト調整

左側[ツリービュー]の[EditForm1]を選択し、右側[プロパティ]の[ディスプレイ]タブを選択し、[フィールドの編集]を選択します。
以下の通りコントロールの種類を変更します。

• メモ：複数行テキストの編集
• 取引先名：許可値

図表8-7 編集画面のコントロールの種類変更

コンテキスト変数設定

複写機能と契約開始日・終了日の整合性チェックで使用するコンテキスト変数の初期値を設定します。
左側[ツリービュー]の[EditScreen1]を選択し、OnVisibleプロパティを以下の通り設定します。

UpdateContext({
    loc_status:LookUp(Choices([@契約書管理].ステータス),Value="締結準備中"),
    loc_partner_name:"",
    loc_category:Blank(),
    loc_subject:"",
    loc_start_date:Blank(),
    loc_end_date:Blank(),
    loc_memo:"",
    loc_error_message:""
});

図表8-8 編集画面のコンテキスト変数の初期値設定

各項目の設定変更

取引先名のデータ領域を選択し、右側[プロパティ]の[詳細設定]タブを選択し、ロックを解除します。
以下の通り設定します。

• Default：If(EditForm1.Mode=FormMode.New,loc_partner_name,Parent.Default)
  *新規登録時はコンテキスト変数の値を渡します
• Items：Sort(Filter([@取引先管理],ステータス.Value="使用可"),取引先ID,SortOrder.Ascending)
  *取引先の選択肢はステータスが使用可のデータを取引先IDの昇順に表示します

右側[プロパティ]の[ディスプレイ]タブを選択し、[Value]で[取引先名]を選択します。

図表8-9 編集画面の取引先名の設定

取引先名の全体領域を選択し、右側[プロパティ]の[詳細設定]タブを選択し、ロックを解除します。
以下の通り設定します。

• Update：DataCardValue20.SelectedText.Value

図表8-10 編集画面の取引先名の設定の続き

ステータスのデータ領域を選択し、ロックを解除し、以下の通り設定します。

• DefaultSelectedItems： If(EditForm1.Mode=FormMode.New,loc_status,Parent.Default)
• Items： Choices([@契約書管理].ステータス)

契約区分も同じ要領で設定します。

*この段階ではDefaultSelectedItemsでエラーが発生しますが、この後の設定により解消します

図表8-11 編集画面の複写項目の設定(選択肢)

契約書名のデータ領域を選択し、ロックを解除し、以下の通り設定します。

• Default： If(EditForm1.Mode=FormMode.New,loc_subject,Parent.Default)

メモも同じ要領で設定します。

図表8-12 編集画面の複写項目の設定(テキスト)

契約開始日のデータ領域を選択し、ロックを解除し、以下の通り設定します。

• DefaultDate： If(EditForm1.Mode=FormMode.New,loc_start_date,Parent.Default)
• Size：20

契約終了日も同じ要領で設定します。

*この段階ではDefaultDateでエラーが発生しますが、この後の設定により解消します

図表8-13 編集画面の複写項目の設定(日付)

部品の追加・設定(データテーブル)

詳細画面のデータテーブル用ラベルをコピーし、編集画面(EditScreen1)にこれをペーストします。
ラベル名をlblHistoryEditに変更します。

図表8-14 編集画面へのデータテーブル用ラベルのコピー&ペースト

詳細画面のデータテーブルをコピーし、編集画面(EditScreen1)にこれをペーストします。

図表8-15 編集画面へのデータテーブルのコピー&ペースト

コピー&ペーストしたデータテーブルについて、以下の通り設定します。

• 名前：tblHistoryEdit

[Items]プロパティについては、以下の通り設定します。

Sort(
    Filter(
        [@契約書管理], DataCardValue20.SelectedText.Value=取引先名, 
        契約書ID <> Value(DataCardValue9.Text), ステータス.Value <> "無効"
    ),
    契約書ID, SortOrder.Descending
)

*[Items]プロパティの式の意味：編集フォームの取引先と同じ他の契約書データを契約書IDの降順で表示します

図表8-16 編集画面のデータテーブルの設定

部品の追加・設定(エラーメッセージ・複写ボタン)

契約開始日・終了日の整合性チェックのエラーメッセージ用ラベルと複写用ボタンを追加します。
上メニューの[挿入]から、ラジオボタンとデータテーブルを1個ずつ追加します。

図表8-17 編集画面の部品追加

追加したエラーメッセージ用ラベルについて、以下の通り設定します。

• 名前：lblErrorMessage
• Color:RGBA(255, 0, 0, 1)
• Height：120
• Text：loc_error_message
• Width：640
• X：1280
• Y：240

図表8-18 追加部品の設定(ラベル)

追加した複写用ボタンについて、以下の通り設定します。

• 名前：btnCopy
• Height：50
• Size：20
• Text："選択データ複写"
• Tooltip："添付ファイルは複写不可"
• Visible：If(EditForm1.Mode=FormMode.New,true,false)
• Width：640
• X：640
• Y：596

[OnSelect]プロパティは以下の通り設定します。

UpdateContext({
    loc_status:tblHistoryEdit.Selected.ステータス,
    loc_partner_name:tblHistoryEdit.Selected.取引先名,
    loc_category:tblHistoryEdit.Selected.契約区分,
    loc_subject:tblHistoryEdit.Selected.契約書名,
    loc_start_date:tblHistoryEdit.Selected.契約開始日,
    loc_end_date:tblHistoryEdit.Selected.契約終了日,
    loc_memo:tblHistoryEdit.Selected.メモ
})

*[OnSelect]プロパティの式の意味：データテーブルの選択行の値(契約書ID,添付ファイルを除く)をコンテキスト変数に格納します

図表8-19 追加部品の設定(ボタン)

アプリが完成しました。右上の公開アイコンを選択すると、このバージョンを公開できます。

図表8-20 アプリ公開

おわりに(設定要素まとめ)

このアプリの作成において、特にポイントになりそうな設定要素を挙げておきます。何かアプリを作成する時の参考になれば幸いです。

• データテーブルによる一覧表示(一覧画面,詳細画面,編集画面)
• Patchによるステータス更新(詳細画面:削除アイコン)
• 新規登録時の契約開始日・終了日の整合性チェック(編集画面:保存アイコン)
• 新規登録時の契約書IDの採番(編集画面の保存アイコンの設定)
• 入力項目の変数渡しによるデータ反映(編集画面:ステータス～メモの設定)
• 新規登録時の複写機能(編集画面:複写用ボタン)

当ブログ内の連載記事

elmgrn.hatenablog.com