AppSheetで電子名刺アプリ(第3回)電子名刺用のViewを作成する

folder_openAppSheet

電子名刺アプリを作りながら、AppSheetの使い方を学びましょう。
前回(第2回)はアプリを生成して、テーブル、列、スライスを設定しました。
今回はアプリの見た目を整える設定を進めていきましょう。
AppSheetに用意されているレイアウトのテンプレート(View)を選び、設定するだけで画面が完成します。

【お知らせ】
2022年10月以降、AppSheetエディタの画面が新しく変更されています。
AppSheetのアップデートが速すぎて(汗)、このブログ記事はまだ新エディタの画面には対応していません。
エディタ画面右上にある「Switch to the legacy editor」というアイコンをクリックすると、新エディタと旧エディタの切り替えができます。
記事のアップデートができるまでは、とりあえず、旧エディタに切り替えて解説を読んでください。

Switch to the legacy editor」で旧エディタに切り替える。

1. 連絡先Viewを設定する

それでは、電子名刺アプリのViewを設定しましょう。
AppSheetエディタの左側メニューにある「UX」をクリック、タブメニュー「Views」をクリックします。

AppSheetのUXメニューからViewsタブを選択し、連絡先VIewを選択する。

Primary Views には「連絡先」というViewが既に作成されていると思います。
「連絡先」をクリックして、View設定パネルを開きます。

AppSheetの連絡先Viewの設定パネルを表示する。

ここでは「連絡先」Viewの設定を以下のように変更しました。
View type は「deck」または「Card」の「list」あたりがよいと思いますが、ここでは「deck」にしました。

設定項目
View type 「deck」
View Options
Group by 「Add」→「用途」, Ascending
Group aggregate 「COUNT」
Main Image **none**
Primary header 「名刺のタイトル」
Secondary header 「フルネーム」
Actions 「Edit」
Display
Icon 「at」

ここで試しに1件、連絡先を追加してみてください。
「連絡先」をクリック → 「+」ボタンで連絡先追加フォームになります。
追加されるとこのような感じになると思います。

AppSheetアプリで試しに1件レコードを追加する。

2. 電子名刺Viewを設定する

電子名刺を表示するための専用Viewを作っていきます。
前回(第2回)作っておいたスライスを使用します。

AppSheetエディタ左側のメニュー「UX」をクリック、「View」タブメニューをクリックします。
「New View」をクリックして新しいViewを作成します。

AppSheetで「New View」をクリックして新しいViewを作成する。

Viewの設定パネルが開きます。

AppSheetで電子名刺Viewを設定する。

Viewの設定は以下のようにしました。
Actionsを「Edit」にしていますが、「電子名刺 ( slice ) 」でUpdate mode を「Read-Only」にしているため、編集アイコンは表示されません。

設定項目
View name 「電子名刺」
For this data 「電子名刺 ( slice ) 」
View type 「deck」
Position 「left most」
View Options
Group by 「Add」→「用途」, Ascending
Group aggregate 「COUNT」
Main Image **none**
Primary header 「名刺のタイトル」
Secondary header 「フルネーム」
Actions 「Edit」
Display
Icon 「address-card」

これでAppSheetアプリで電子名刺のリストを表示するためのViewはできました。

3. AppSheetでQRコード表示するためのViewを設定する

続いて、電子名刺のQRコードを表示するためのViewを作成しましょう。
AppSheetエディタ画面右側のプレビュー画面を操作します。
タブメニューの「電子名刺」をクリックすると先ほど追加した連絡先が1件表示されます。
この連絡先をクリックします。

電子名刺のリストを表示する。

プレビュー画面の下に「View: 電子名刺_Detail」というリンクがあるので、クリックします。

AppSheetで電子名刺_Detailのリンクをクリックする。

「電子名刺_Detail」Viewの設定パネルが表示されます。
このViewを電子名刺のQRコードを表示するためのViewとして使います。

Column Order の「Add」をクリックして「QRコード」にします。
Display modeを「Centered」にします。
他は追加したり変更する必要はありません。
忘れずに右上「Save」をクリックして保存しましょう。

AppSheetで電子名刺_Detail Viewを設定する。

以上、アプリの見た目(View)を設定しました。
アプリとしてはデータの追加、更新、削除など基本的な操作はできるようになりました。

次回(第4回)は、アプリを使いやすくするための設定を進めていきます。

Share Me!

前の投稿
AppSheetで電子名刺アプリ(第2回)スプレッドシートからアプリを作成
次の投稿
AppSheetで電子名刺アプリ(第4回)SHOWで列の表示を切り替える

関連記事

メニュー