ページ要素のデータを動的に表示・絞り込むダッシュボードの作成

お知らせ：当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の英語版を参照してください。

1. 要件

ボタン操作に応じてダッシュボード要素が動的に更新されるインタラクティブなダッシュボードで、ユーザーエクスペリエンスを向上させます。

2. ユースケース

チームのタスクを管理するために Zoho Creator タスク管理アプリケーションを使用している組織を想定します。アプリケーションには、ログインしているユーザーのメールアドレスに基づいて、各メンバーに関連するタスク情報を表示するダッシュボードページがあります。さらに、指定したボタンをクリックすると、チーム全体のタスク情報を表示するように動的に切り替わり、チーム全体向けのダッシュボード表示にシームレスに移行します。

動作を確認する

3. 手順

3。1. フォームを作成する

フォームを作成し、次の詳細を使用してタスク情報を追加します。

フォーム	フォームリンク名	フィールドタイプ	フィールド名	フィールドリンク名
Add Task	Add_Task	シングルライン	タスク名	Task_Name
		マルチライン	説明	Description
		ドロップダウン pascal@zylker.com edwardjenner@zylker.com nikola@zylker.com	担当者	Assign_To
		ラジオボタン高い中低い	優先度	Priority
		ドロップダウン進行中完了保留未着手	ステータス	Status

3。2. ダッシュボードを作成する

メモ: 以下の手順では、このユースケースに合わせたダッシュボードの設計プロセスを説明します。ご利用のユースケースの要件に合わせて、自由にダッシュボードをカスタマイズしてください。

ページを作成し、「ダッシュボード」という名前を付けます。

以下のページ変数をページに追加します。これらの変数はページ要素内で使用され、動的な値を表示します

変数名	データ型
inProgress	int
開く	int
完了	int
highPriority	int
dashboardType	string
searchQuery	string

パネルをページにドラッグ＆ドロップします。
既存のパネル要素をテキスト要素に置き換え、表示値を${dashboardType}に設定して、対象のダッシュボード種別を動的に表示します
ボタンを 2 つ追加し、ラベルを「Team ダッシュボード」と「My ダッシュボード」に設定します。

ボタンの操作を以下のように設定します。設定後、ボタンをクリックすると、対応するクエリパラメーターでページが再読み込みされます。

操作	Team ダッシュボード	My ダッシュボード
操作種別	ページを開く	ページを開く
ページ	ダッシュボード	ダッシュボード
クエリパラメーター	dashboardType=Team ダッシュボード	dashboardType=My ダッシュボード
開く場所	同じウィンドウ	同じウィンドウ

さらに 4 つのパネルを追加し、ステータスごとのタスク件数を表示します。あわせて、以下のようにパネル内にテキストヘッダーを追加します。

ヘッダー用に、各パネルの［表示］設定を次のように設定します。

表示	パネル 1	パネル 2	パネル 3	パネル 4
データを表示する	ページ変数	ページ変数	ページ変数	ページ変数
選択する変数	inProgress	open	closed	highPriority
変数の表示形式	実数値	実数値	実数値	実数値
単位	なし	なし	なし	なし
形式	1,234,567	1,234,567	1,234,567	1,234,567

各パネルにステータス情報を表示するサブヘッダーを追加します。サブヘッダーの表示設定を、以下のとおりに設定します。

表示内容	パネル 1	パネル 2	パネル 3	パネル 4
表示するデータ	テキスト	テキスト	テキスト	テキスト
値	進行中	開く	完了	高い優先度

パネルを、以下のように配置します。
レポートを埋め込むを参照し、「タスクを追加」フォームのレポートを、ページ内のパネルの下に埋め込みます。この例では、レポート名はすべてのタスクです。次の手順で、このレポートにフィルターを適用し、ログイン中のユーザーに関連するタスクのみを表示します。
フィルターを設定し、埋め込んだレポートに対して、レポート要素の設定ページでフィルターをクリックしてフィルターを構成します。

フィルターを追加をクリックし、以下の詳細を入力して、searchQueryページ変数に渡される値に基づいてレポートをフィルタリングします。searchQueryページ変数の値は、次の手順でページスクリプトから渡されます。

フィルター	項目を選択	演算子を選択	値を入力
フィルター	割り当て先	含む	input.searchQuery

3。3. ページスクリプトを追加

ページスクリプトに移動し、以下のスクリプトをページに入力します。

// ログイン中のユーザーに関連するタスク情報を取得し、ページ変数に渡します。
input。inProgress = Add_Task[ステータス == '進行中' && Assign_to == Zoho。loginuserid].件数();
input。開く = Add_Task[ステータス == '開く' && Assign_to == Zoho。loginuserid].件数();
input.completed = Add_Task[ステータス == '完了' && Assign_to == Zoho。loginuserid].件数();
input。highPriority = Add_Task[優先度 == '高い' && Assign_to == Zoho。loginuserid].件数();
// レポートをフィルタリングし、ログイン中のユーザーが担当者のタスクのみを表示します。
input。searchQuery = Zoho。loginuserid;
// ユーザーがダッシュボード上の「チームダッシュボード」ボタンをクリックした場合は、すべてのチームメンバーのタスク情報を取得します。逆に、「マイダッシュボード」を選択した場合は、初期設定のページを読み込みます。
// レポートフィルター用ページ変数「searchQuery」をあえて空文字列に設定し、レポートをフィルタリングせずにすべてのデータを読み込むようにします。
if(input。dashboardType == 'Team ダッシュボード')
{
input。inProgress = Add_Task[ステータス == '進行中'].件数();
input。開く = Add_Task[ステータス == '開く'].件数();
input.completed = Add_Task[ステータス == '完了'].件数();
input。highPriority = Add_Task[優先度 == '高い'].件数();
input。searchQuery = '';
}
else
{
input。dashboardType = 'My ダッシュボード';
}