前回は、スプレッドシートからアプリを生成し、テーブルデータを編集するところまで完了しました。

この記事では、アプリのビューや全体の外観を編集していきます。

今回作成するビューは、

　・新規登録フォーム

　・カンバン

　・緊急タスク一覧

　・ダッシュボード

です！

新規登録フォーム

まずは、担当者を新規に登録するフォームを作成します。

ビューの編集はViewsから行います。

SYSTEM GENERATEDというシステムが自動で生成したViewの中に、「担当者一覧_Form」というのがあるので、こちらを複製（Duplicate）して編集していきます。

Viewの名前を変更し、表示場所をmenuにしました。

ポイント

ビューの表示場所は次の3つがあります。

　　１）Primary Navigation　：アプリ画面下部から選べる

　　　（さらに、first/ next/ middle/ later/ last という表示場所の細かい設定もある）

　　２）Menu Navigation　：アプリ画面左上のメニューから選べる

　　３）Reference Views　：アプリ画面上には表示されない

　　

次にタスクの新規登録画面を作成します。

こちらも同様にシステムによって自動生成された「タスク一覧_Form」を複製し、以下のように編集しました。

これで、メニューから担当者やタスクの新規登録ができるようになりました。

カンバン

カンバンビューを作成するために、まずは各ステータスごとのビューを作成します。

各ステータスのビューは、カンバンビューから参照される部品となるものなので、Reference Views配下に作成します。

次に、ビューの設定をしていきます。

主な設定項目は以下の通りです。

　・View name：ビューの名前

　・For this data：テーブルまたはスライスの選択

　・View type：ビューのタイプ

　・Position：ビューの表示場所

　・Sort by：レコードの表示順番

　・Group by：レコードのグループ分け

　・Layout：レイアウトや表示したい情報を選択

新規タスクのビューはこのように設定しました。

設定したビューはこのようになりました。

このビューを複製して名前とデータを変更し、各ステータスごとにビューを作成します。

次にタスクの詳細を表示するビューもReference Views配下に作成します。

設定はこのようにしました。（Header columns以下はデフォルトのままにしています。）

各ステータスのビュー作成が完了したら、Primary Navigation配下にカンバンビューを作成します。

View typeをdashboardにして、View entriesに先ほど作成したViewを追加します。

設定画面はこのようになりました。

Display設定でアイコンを選択することもできます。

できあがったカンバンビューはこのようになります。（デスクトップ表示）

緊急タスク一覧

緊急のタスクをすぐに確認できるよう、緊急タスク一覧画面も作成したいと思います。

設定はこのようにします。

これで緊急タスクを確認できるビューが完成しました。

＊タスク一覧はアプリ画面下部になくても良いので、メニュー表示に変更しておきます。

ダッシュボード

ステータスごとのタスク件数と担当者ごとのタスク件数の割合の状況を確認できるようなダッシュボードを作成していきます。

まず、ダッシュボードのパーツとなる以下のチャートをReference Views配下にそれぞれ作成します。

　・ステータスごとのタスク件数

　・担当者ごとのタスク件数の割合

【ステータスごとのタスク件数】

【担当者ごとのタスク件数の割合】

パーツとなるチャートが完成したら、それらを表示するダッシュボードをPrimary Navigation配下に作成します。

View entriesでは先ほど作成した２つのチャートを選択します。

完成したダッシュボードはこのようになりました。（デスクトップ表示）

アプリ全体の外観

最後に、アプリ全体の外観を設定します。

SettingsのTheme & Brandから編集することができます。

今回は、カラーとロゴをこのようにしました。

そして、ヘッダーとフッターは、このような設定に変更しました。

　①ヘッダーにビューの名前を表示するか

　②ヘッダーにロゴを表示するか

　③メニューボタン、検索ボタンを表示するか

　④ヘッダー、フッターのカラー（付けない/ 両方付ける/ 選択中のフッターのみ付ける）

ポイント

・SettingsのView>Generalで「Preview new features」をオンにするとリリース前の新機能を試すことができます。

・「Desktop design」をオフにするとデスクトップ表示でもモバイルアプリ同様にフッターにビューのタブを表示することができます。

・新機能

・デスクトップ表示フッター

これでビューの編集は完了です。

次回は、アクション編です！

アプリの動作を設定していきます。