見出し画像

AppSheetで爆速ノーコードアプリ開発 その8 - グラフを表示してみる

カカト@ノーコード開発推しです。

「AppSheetで爆速ノーコードアプリ開発」と題して、ノーコードアプリ開発ツール 「AppSheet」の基本的な使い方の説明を連載形式で投稿しています。

前回までの説明で、ダッシュボード作成やメニューの調整が完了しました。アプリ機能としてはほぼ実装完了していますので、今回は一部表示の調整のみとなります。

プロフィール画面の検温履歴をグラフにする

検温結果をいくつか入力すると、以下のようにプロフィール画面の下に、ユーザー名に紐づいた検温履歴が表示されると思います。

画像1

この部分ですが、ViewとしてAppSheetが自動で生成したものでして、今まで作成してきたViewと同様に表示形式や項目を変えることができます。

一覧形式でもいいですが、せっかくなのでグラフ機能を使ってみたいと思います。

「UX」メニュー → 「Views」タブをクリックし、Ref Views の中にある "検温履歴_Inline" をクリックし展開します。

画像3

「View type」に、"chart" を選択します。

すると、Chart typeが指定できますので、折れ線グラフの col series [line] を選択してください。

そして、「Chart columns」に ”体温" を指定します。

画像4

Sort by」に、"記録日時" を設定してください。

画像5

プロフィール下の部分が、一覧表示から折れ線グラフ表示に変わりました。

画像6

グラフとかを使うと、「今どきのアプリ感」がちょっぴり出た気がしますw


グラフの上に出ている、"Related 検温履歴s" という表示がシステム臭くて嫌なので、これも変えてしまいましょう。

「Data」メニュー → 「Columns」タブより、"プロフィール"表を展開します。

プロフィール表列の一番下に、"Related 検温履歴s" と表示されていると思いますが、これが先ほどグラフ化した部分(厳密には、REF_ROWS関数で検温履歴よりユーザー名をキーとして取得した情報)となります。

画像8

列名はこのままとして、画面に表示される値を変えてみます。

鉛筆マークをクリックし、詳細画面の 「Display」をクリック。「Display name」に、以下の関数を入力してください。

CONCATENATE([ユーザー名], "さんの検温履歴")

画像9

CONCATENATE関数を使うと、文字列を結合することができます。

すると、グラフ上の表示が以下のように変わりました。

画像10

これでInline Viewの設定は完了です。


次回予告

一応、今回の投稿をもって検温履歴アプリの機能開発説明は完了となります。

次の投稿で、アプリの仕上げとしてローカライズとデプロイ方法について説明したいと思います。

最後までお読みいただき、ありがとうございました。

この記事が気に入ったらサポートをしてみませんか?