PL-200 学習メモ (3) : キャンバス アプリ（編集画面、新規作成画面）

はじめに

この投稿は PL-200: Microsoft Power Platform 業務コンサルタントの学習をした内容のメモです。

投稿の一覧は以下のリンク先にあります。

前の投稿

編集画面

1. [新しい画面] から空の画面を追加
   

2. [挿入] - [編集フォーム] をクリック
   

3. 詳細画面と同様にデータソースを選択し、[フィールド] から表示する列を選択
   

4. 編集画面と同様に[詳細設定] - [Item] に以下を入力することにより、一覧画面で選択した行を表示することができる

Item 欄：
【一覧画面のギャラリーの名前】.Selected

例：
BrowseGallery.Selected

1. 編集画面を選択し、[挿入] - [アイコン] - [編集] から編集ボタンを配置し、OnSelect プロパティに変種画面への遷移を設定

Navigate(EditScreen)

保存ボタン

編集画面に編集内容を保存するボタンを配置します。

1. 編集画面を選択し、[アイコン] - [保存] をクリック
   

2. 保存ボタンの OnSelect プロパティに以下を設定

OnSelect 欄：
SubmitForm(【編集画面のフォームの名前】)

例：
SubmitForm(EditForm)

1. 保存が完了したら詳細画面に戻るように、編集フォームの OnSuccess プロパティに以下を設定

OnSuccess 欄：
Back()

キャンセルボタン

編集画面に編集内容を保存せずにもとの画面に戻るボタンを配置します。

1. 編集画面を選択し、[アイコン] - [キャンセル] をクリック
   

2. キャンセルボタンの OnSelect プロパティに以下を設定

OnSelect 欄：
ResetForm(【編集画面のフォームの名前】);Back()

例：
OnSelect 欄：
ResetForm(EditForm);Back()

これで詳細画面から項目を選択して、編集画面で内容の編集が行えるようになりました。

新規登録画面

一覧画面に新規のレコードを登録するボタンを配置します。

1. 一覧画面を選択し、[アイコン] - [追加] をクリック
   

2. 追加ボタンの OnSelect プロパティに以下を設定

OnSelect 欄：
NewForm(【編集画面のフォームの名前】);Navigate(【編集画面の名前】)

例：
OnSelect 欄：
NewForm(EditForm);Navigate(EditScreen)

これで一覧画面から新規登録画面に遷移することができるようになりました。

ヘッダーの追加

各画面の上部にヘッダーを追加して、画面のタイトルを表示します。編集画面は既存レコードの編集と新規レコードの追加でタイトルの表示を切り替えるようにします。

1. 一覧画面を選択し [挿入] - [図形] - [四角形] から画面の上部に四角を配置
   

2. 配置した四角を最背面に移動させ、色を適当に変更
   
   

3. 一覧画面を選択し [挿入] - [ディスプレイ] - [テキストラベル] から画面の上部にラベルを配置
   

4. ラベルの Text プロパティに "取引先担当者一覧" と入力し、フォントなどを適当に変更
   

5. 一覧画面に配置した四角形とラベルをコピーして詳細画面、編集画面にも同様に配置し、ラベルの内容を画面に合わせて変更
   

6. 編集画面のラベルの Text にはラベルの表示を切り替えるため、以下を設定

If(EditForm.Mode = FormMode.Edit,"取引先担当者編集", "新規取引先担当者登録")

これで各画面に適切にタイトルを表示できるようになりました。

表示順のソート

Garallery の Items プロパティを以下のように変更することで、指定した項目でソートして表示することができます。

Items 欄：
SortByColumns(【テーブル名】, 【列の論理名】, 【昇順または降順】)

例：
姓 (lastname) 列の昇順で表示する場合
SortByColumns('取引先担当者 ',"lastname", SortOrder.Ascending)

更新ボタン

一覧画面に [図形] - [再読み込み] ボタンを配置して、OnSelect プロパティに以下を設定

OnSelect 欄：
Refresh(【テーブル名】)

例：
Refresh('取引先担当者 ')

削除ボタン

詳細画面に [アイコン] - [ゴミ箱] ボタンを配置して、OnSelect プロパティに以下を設定

OnSelect 欄：
Remove(【テーブル名】,【ギャラリー】.Selected);Back()

例：
Remove('取引先担当者 ', BrowseGallery.Selected);Back()

次の投稿