LoginSignup
1
0

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

Last updated at Posted at 2024-06-06

この投稿について
前の投稿

編集画面

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

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

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

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

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

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

image.png
image.png

保存ボタン

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

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

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

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

例:
SubmitForm(EditForm)

image.png

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

image.png

キャンセルボタン

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

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

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

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

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

image.png

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

Animation4.gif

新規登録画面

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

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

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

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

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

image.png

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

ヘッダーの追加

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

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

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

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

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

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

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

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

image.png

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

PL200-3-2.gif

表示順のソート

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

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

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

image.png

更新ボタン

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

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

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

image.png

削除ボタン

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

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

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

image.png

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0