· 

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

電子名刺用のViewを作成する

 

このブログでは、サンプルアプリを通じてAppSheetの使い方を学びます。

 

前回(第2回)はアプリを生成して、テーブル、列、スライスを設定しました。

今回はアプリの見た目(View)を整える設定を進めていきましょう。

1. 連絡先Viewを設定する

 

それでは、Viewを設定しましょう。

左側メニューにある「UX」をクリック、タブメニュー「Views」をクリックします。

 

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

 

Primary Views には「連絡先」というViewが既に作成されていると思います。

「連絡先」をクリックして、View設定パネルを開きます。

 

連絡先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 「名刺のタイトル」
Scondary header 「フルネーム」
Actions 「Edit」
Display
Icon 「at」

 

ここで試しに1件、連絡先を追加してみてください。

「連絡先」をクリック → 「+」ボタンで連絡先追加フォームになります。

追加されるとこのような感じになると思います。

 

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

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

 

電子名刺を表示するための専用Viewを作っていきます。

前回(第2回)作っておいたスライスを使用します。

 

左側のメニュー「UX」をクリック、「View」タブメニューをクリックします。

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

 

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

 

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

 

電子名刺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 「名刺のタイトル」
Scondary header 「フルネーム」
Actions 「Edit」
Display
Icon 「address-card」

 

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

 

3. 電子名刺表示用Viewを設定する

 

続いて、電子名刺のQRコードを表示するためのViewを作成しましょう。

画面右側のプレビュー画面を操作します。

タブメニューの「電子名刺」をクリックすると先ほど追加した連絡先が1件表示されます。

この連絡先をクリックします。

 

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

 

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

 

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

 

「電子名刺_Detail」Viewの設定パネルが表示されます。

このViewを電子名刺のQRコードを表示するためのViewとして使います。

 

Column Order の「Add」をクリックして「QRコード」にします。

Display modeを「Centered」にします。

他は追加したり変更する必要はありません。

忘れずに右上「Save」をクリックして保存しましょう。

 

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

 

以上、アプリの見た目(View)を設定しました。

アプリとしてはデータの追加、更新、削除など基本的な操作はできるようになりました。

 

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

 

アプリを作る前に実際に試してみたい方は、アプリスイートが作ったサンプルアプリを7日間無料体験ができます。

こちらからお問い合わせください。