1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

ビューにカードフォームを追加する方法

Last updated at Posted at 2022-10-21

カードフォームとは

カードフォームは、モデル駆動型アプリのビュー(一覧画面)的な形で使用されます。
モバイルデバイスに適したコンパクト形式で情報を表示できます。
カードフォームの作成方法

カードフォーム追加手順

1. ビュー編集画面にて「クラシックに切り替える」をクリック

image.png

2. 別タブで開かれた画面において、右にある「Custom Controls」(カスタムコントロール)を選択

(もともとの画面をモダン、ここで表示される画面をクラシックという)
image.png

3. 「Add Control」(コントロールの追加)を選択
4. 「Read-only Grid」(読み取り専用グリッド)を選択し、[追加]ボタンをクリック

もともと設定されている「読みとり専用グリッド(規定)」はカードフォームを表示することができません。

5.追加された「Read-only Grid」(読み取り専用グリッド)のWeb, 電話, タブレットを選択し、下のプロパティで「Card form」(カードフォーム)の鉛筆✏マークをクリック
6.ビューに表示するカードフォームを選択し、[OK]ボタンをクリック

Entity(エンティティ):表示させたいカードフォームのテーブルを選択(ビューと同じテーブルであることが多い)
Card Form(カードフォーム):上のエンティティで設定したテーブルに存在するカードビューの種類が選択できる

7.[OK]ボタンを押してカスタムコントロールのプロパティページを閉じる
8.ツールバーにて[Save As](名前をつけて保存)をクリックして名前をつけて保存image.png
9.もともとのビューの編集画面(モダン)にて[公開]をクリックimage.png
10. ビュー編集画面にて、今作ったビューの追加をするimage.png

確認方法

1. モデル駆動型アプリを開く

画面下にローマ字ごとに絞り込めるバーが
image.png

2.ビューの名前がカードフォームを追加したビューの名前であることを確認

image.png

3. ブラウザを縦長に折りたたむと、自動でカードフォームが表示される

モバイルの画面では自動でカードフォームが表示されます。

もしくは、、、

3'. 上のツールバーから「Open Dashboard」を選択image.png
4'. 作成したカードフォームが表示される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

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?