ページ要素にデータを動的に表示/フィルタリングするダッシュボードの構築

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

1. 要件

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

2. 使用例

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

動作方法を見る

3. 手順

3.1. フォーム作成

フォームを作成し、以下の詳細を入力してタスクの詳細を追加します。

フォーム	フォームリンク名	項目種類	項目名	項目リンク名
タスクを追加する	Add_Task	Single 折れ線グラフ	タスク名	Task_Name
		Multi 折れ線グラフ	説明	説明
		ドロップダウン pascal@zylker。com edwardjenner@zylker。com nikola@zylker。com	割り当て先	Assign_To
		ラジオボタン高い中低い	優先度	優先度
		ドロップダウン進行中完了保留中開く	ステータス	ステータス

3.2. ダッシュボードの作成

メモ: 以下の手順は、特定の使用するケースに合わせたダッシュボードの設計方法を示しています。ご自身の使用するケースの要件に合わせて、ダッシュボードをカスタマイズしてください。

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

ページ変数

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

パネルをページ内にドラッグ＆ドロップします。
既存のパネル要素をテキスト要素に置き換え、表示値を${dashboardType}に設定することで、特定のダッシュボード種類を動的に表示します。
2つのボタンを追加し、ラベルをTeam ダッシュボードおよびMy ダッシュボードとします。

操作

操作	Team ダッシュボード	My ダッシュボード
処理の種類	ページを開く	ページを開く
ページ	ダッシュボード	ダッシュボード
Query パラメーター	dashboardType=Team ダッシュボード	dashboardType=My ダッシュボード
開く方法	同じウィンドウ	同じウィンドウ

次に、ページにfour その他のパネルを追加し、ステータスごとのタスク件数を表示します。また、テキストヘッダーをパネルに追加してください。以下の例をご覧ください。

表示	パネル 1	パネル 2	パネル 3	パネル 4
データを表示する	ページ変数	ページ変数	ページ変数	ページ変数
Variable を選択	inProgress	開く	完了	highPriority
variable を次のように表示	Actual	Actual	Actual	Actual
単位	なし	なし	なし	なし
形式	1,234,567	1,234,567	1,234,567	1,234,567

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

下図のようにパネルを配置します。
レポートを埋め込むには、「タスクを追加する」フォームのレポートをページ内のパネル下部に設置します。今回のケースでは、レポート名はすべてのタスクです。今後の手順で、このレポートにフィルターを申請し、ログインユーザーに関連するタスクのみを表示します。
フィルターを設定するには、レポート要素の設定ページでフィルターをクリックしてください。

「フィルターを追加する」をクリックし、下記の詳細を入力して、searchQueryページ変数に指定された値に基づきレポートをフィルタリングします。searchQueryページ変数の値は、次のステップでページスクリプトから設定されます。

フィルター	選択する項目	選択するOperator	入力値
フィルター	割り当て先	含む	input。searchQuery

3.3. Page Scriptの追加

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

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