パネルの概要と使い方

パネルの概要と使い方

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

概要
パネルは、ページ内に埋め込まれるビジュアルコンテナで、動的な指標、ステータス、KPI などの重要な情報を、構造化され視覚的にわかりやすい形式で表示するために使用します。ダッシュボードから重要なインサイトを素早く把握できるようにし、URL を開く、Creator 内の事前定義済み関数を実行するなどのコールトゥアクション（CTA）を含めることもできます。
提供状況
  1. パネルは、Creator のすべてのプランで作成できます。
  2. スーパー管理者、管理者、および開発者のみが、パネルを作成および管理できます。

1. 概要

Zoho Creator では、パネルは直感的な要素であり、アプリケーションのデータから静的データとリアルタイムデータの両方を表示するためにページコンポーネント内に挿入できます。重要な動的指標、進捗状況、傾向を一目で確認できる集約ビューを提供します。パネルビルダーを使用してカスタマイズでき、ミニマルかつ機能的なデザインで、用途に合わせた集中的な表示を実現し、効果的なデータ分析を可能にします。
パネルに組み込めるパネル要素は次のとおりです:
  1. テキスト - パネル上に表示されるテキストコンテンツです。静的テキストのほか、ページ変数、データの集計値、他の Zoho サービスから取得したデータなどの動的な値を表示できます。
  2. 画像 - 画像を表示する視覚要素です。パネルの意図に合わせてパーソナライズ感を加えることができます。組み込みアイコンの挿入、ローカルストレージからの画像取得、ログインユーザーのプロフィール画像の設定、公開画像 URL の利用などで設定できます。
  3. ボタン - 事前構築済み関数の実行や、フォーム、レポートなどの Creator コンポーネントを開くといったアクションを開始・実行できるインタラクティブ要素です。
パネルの設定セクションには、次の項目があります:
  1. 表示 - パネルに埋め込まれる静的／動的テキスト、画像、ボタンの値を設定します。
  2. 操作 - パネル全体または特定のパネル要素をクリックしたときに開始されるアクションを設定します。
  3. スタイル - パネルおよびパネル要素の余白、色、マージンなどの見た目のプロパティを設定します。

1。1. 利用例

1. ダッシュボードでの主要指標 - たとえば、1 年間の申請状況を監視するために、Claim Requestアプリケーションでダッシュボードを作成したとします。申請パフォーマンスの概要を素早く把握できるよう、主要指標をパネルで表示します。ダッシュボードには次のパネルが含まれます:
  1. 送信済み申請の合計 - 選択した期間中に送信された一意の申請データの合計件数を表示します。
  2. 承認済み申請 - 設定した条件に基づき、ステータスが「承認済み」となっている申請の件数を表示します。

  3. 精算済み金額の合計 - 上記の条件に基づき、承認済み申請の精算金額の合計を算出します。
  4. 最大申請金額 - 上記の条件に基づき、すべての申請の中で記録された最大の精算金額を強調表示します。
各パネルには、それぞれの条件と集計関数が設定されており、関連する申請データのみが対象となるようにすることで、申請件数や精算の傾向を一目で確認できるビューを提供します。

各パネルをクリックすると、そのセグメントに含まれる申請の一覧を表示するレポートが開きます。

2. 顧客向けの動的なウェルカムサイン - 例えば、各ユーザーにパーソナライズされた体験を提供する学生向けダッシュボードを作成したとします。ウェルカムサインのパネルでは、ページ変数を使用してログイン中の学生の名前を動的に表示し、挨拶メッセージをパーソナライズします。さらに、学生の名前、クラス、出席番号、一意の ID などの基本情報も表示します。テキストパネル要素を使用して、Student 詳細フォームに保存されている学生のプロフィールからリアルタイムデータを取得して表示し、学校のロゴを示すアイコンも配置します。このパネルにより、学業に関するプロフィール情報をすぐに参照・確認できるようになります。

3. 関連レポートへの CTA 付き保留タスク概要 - HR Managementアプリケーションでは、HR 担当者のダッシュボードに保留中タスクパネルが表示されます。このパネルでは、未着手のタスク数と進行中のタスク数を動的に表示します。これを実現するために、設定時に特定の条件でタスクを分類し、担当者が自分の業務量を簡単に把握できるようにします。HR 担当者が保留中タスクパネルをクリックすると、保留中タスクのみを一覧表示するフィルタ済みポップアップレポートが実行されます。

1。2. パネルの操作ガイド

アプリケーションの編集ページを作成した後、ページビルダーの左ペインでパネル要素を見つけることができます。Panelをクリックすると、さまざまなパネルレイアウトが表示され、その中から目的のレイアウトをドラッグ＆ドロップして作成エリアに配置できます。

1。3. 表示

パネルにテキスト、画像、ボタンを追加した場合、それぞれの表示プロパティを個別にカスタマイズできます。各パネル要素の表示に関するカスタマイズ項目は次のとおりです。
パネル要素
画像
表示データ
テキスト
静的テキスト - 情報を伝える英数字のテキスト要素です。必要に応じてページ変数を含めることで、ユーザーごとに異なる動的な値を表示できます。


プリセット:
  1. 組み込みプリセット - すでに Creator アカウント内のいずれかのページでパネル作成時に保存したパネルプリセットを選択できます。同じ設定内容が適用され、必要に応じてさらに更新することもできます。
  2. ページ変数 - 同じページ内ですでに作成しているページ変数を選択し、動的な値を表示できます。
Zoho Creator - 同一アカウント内の任意の Creator アプリケーションのフォームに保存されているデータを使用して、次のような算術演算を行います:
  1. 合計 - フォーム項目に入力された、関連するすべてのレコードの合計値（対応項目タイプ: 番号、パーセント、小数、通貨、Prediction、OCR、Integration)
  2. 最小- フォーム項目に入力された関連データの最小値（対応している項目タイプ：番号, パーセント, 小数, 通貨, 時間, 日付-時間, Prediction, OCR, Integration,および 「追加日時」「更新日時」などのシステム項目など）
  3. 最大- フォーム項目に入力された関連データの最大値（対応している項目タイプ：番号, パーセント, 小数, 通貨, 時間, 日付-時間, Prediction, OCR, Integration, および 「追加日時」「更新日時」などのシステム項目）)
  4. Median- フォーム項目に入力された関連レコードすべての中央値です。結果の値は、数値を昇順に並べたときの中央の値になります。レコード数が偶数の場合は、中央の 2 つの値の平均が表示されます。(対応している項目タイプ: 番号, パーセント, 小数, 通貨, OCR, Prediction, Integration)
  5. 平均- フォーム項目に入力された関連レコードすべての平均値です。(対応している項目タイプ: 番号, パーセント, 小数, 通貨, OCR, Prediction, Integration)
  6. 件数- フォームで入力されたデータの件数です。全体の件数を表示することも、条件を使用して絞り込んだ件数を表示することもできます。この操作は、特定の項目を基準には行われず、データの件数のみを提供します。
  7. Distinct 件数- フォームで入力されたデータ内に存在する、項目値の一意な件数です。たとえば、Distinct 件数の設定時にOffice 場所ドロップダウン項目を選択したとします。合計 30 件のデータで、オフィス所在地として Boston、Texas、Phoenix、Japan（4 つの一意な値）が繰り返し使用されている場合、パネルに表示される Distinct 件数の値は 4 になります。
メモ: Distinct 件数では、次の項目はサポートされません: 複数選択, チェックボックス, サブフォームまたはサブフォーム項目、メモを追加, セクション, ルックアップ(表示形式に複数選択またはチェックボックスが選択されている場合のみ).
これらの操作により、パネル上に表示される動的な数値が提供されます。
Notes
メモ: テキスト要素に合計、最小、件数などの算術 Zoho Creator操作を設定した後は、表示セクション内でプリセットとして保存できます。この組み込みプリセットは、同じ Creator アカウント内の他のページコンポーネントでも、同じ設定のまま再利用できます。


Zoho Sheet - Zoho 表計算シートのセルに保存されている値を使用して、パネル上に動的な値を表示できます。
Notes
メモ: 表計算シートから値を取得するには、Zoho Creator と Zoho 表計算シートの間に接続が必要です。プロパティの設定時に、既存の接続を選択するか、新しい接続を作成できます。


Zoho プロジェクト- Zoho プロジェクトに保存されている、タスク数、課題数、マイルストーン数などのデータを使用して、パネル上に合計件数を表示できます。
Notes
メモ: プロジェクトから値を取得するには、Zoho Creator と Zoho プロジェクトの間に接続が必要です。プロパティの設定時に、既存の接続を選択するか、新しい接続を作成できます。
画像
パネル上に画像を表示できます。画像の取得元は次のとおりです:
  1. マイライブラリ- ローカルストレージからの画像です。JPEG、JPG、PNG 形式に対応しており、最大サイズは 2MB です。
  2. Web リンク- 指定した公開 URL から取得する画像です。
  3. プロフィール画像- ログイン中のユーザーのプロフィール画像を Zoho アカウントから取得し、パネル上に表示します。
Notes
メモ: 次の場合は、プロフィール画像の代わりに差し込み項目の画像 () が表示されます:
  1. 公開ユーザーまたはポータルユーザーがページにアクセスした場合
  2. ページを PDF としてエクスポートした場合
  1. アイコン- Creator が提供する組み込みアイコンです。アウトラインアイコンと塗りつぶしアイコンのいずれかを使用できます。
ボタン
  1. ラベル - ボタン上に表示されるテキストです。ボタンが実行する操作の内容を示すことができます。必要に応じて、ページ変数をラベルに含めて、ユーザーごとに異なる動的な値を表示できます。

1。4. 操作

パネル全体、パネルコンテナ、およびパネル要素に操作を関連付けることができ、クリック時に実行されます。関連付け可能な操作の種類は次のとおりです:
  1. URL を開く - ユーザーがアクセス権を持つ公開または非公開の URL を、同一ウィンドウ、新規ウィンドウ、またはポップアップで開くことができます。
メモ: Creator アプリケーション内の公開済みコンポーネントのパーマリンクも、この操作に指定できます。
  1. フォームを開く - Creator アカウント内のいずれかのアプリケーションに含まれるフォームを、同一ウィンドウ、新規ウィンドウ、またはポップアップで開くことができます。
  2. レポートを開く - Creator アカウント内のいずれかのアプリケーションに含まれるレポートを、同一ウィンドウ、新規ウィンドウ、またはポップアップで開くことができます。
  3. ページを開く - Creator アカウント内のいずれかのアプリケーションに含まれるページを、同一ウィンドウ、新規ウィンドウ、またはポップアップで開くことができます。
  4. 関数を実行する - Creator アカウント内のいずれかのアプリケーションに含まれる関数を実行できます。

1。5. スタイル

パネル全体、内部のパネルコンテナ、およびパネル要素のスタイルプロパティをカスタマイズできます。
セクション

プロパティ
パネル要素
テキスト
  1. フォントファミリー - テキスト要素内のコンテンツに適用されるフォントです。6 種類のフォントファミリーから選択できます。
  2. スタイル - パネル要素のテキストを太字、斜体、下線付きにしたり、大文字／小文字に変更したりできます。
  3. 色 - テキストの色と、パネル要素の背景色です。
  4. フォントサイズ - パネル要素内のコンテンツ全体に適用されるフォントサイズです。あらかじめ用意されたフォントサイズは 12px から 40px までの範囲です。
  5. マージン - 2 つのパネル要素間の余白です。
  6. 接頭辞 - パネル要素内の動的な値に接頭辞を付与できます。たとえば、保留中タスクの件数を表示したい場合、接頭辞を「件数:」とすることで、動的な件数をラベルと値のペアとして表示できます。
  7. 接尾辞 - パネル要素内の動的な値に接尾辞を付与できます。たとえば、あるパネルでクラス内の子どもの人数を表示する場合、接尾辞を「students」とすることができます。

画像
  1. 形状 - 画像の形状を、円形、四角形、角丸四角形から選択できます。
  2. 形状サイズ - 形状のサイズを、小、中、大、またはカスタムサイズから選択できます。
  3. アイコンサイズ - 画像としてアイコンを選択した場合、そのサイズを 12px から 40px までのあらかじめ用意された範囲から選択できます。
  4. 色 - アイコンの色を選択できます。
  5. マージン - 2 つのパネル要素間の余白です。

ボタン
  1. ボタンの種類 - 表示されるボタンの形状を、四角形または角丸に設定できます。
  2. フォントファミリー - ボタン内のコンテンツに適用されるフォントです。6 種類のフォントファミリーから選択できます。
  3. スタイル - ボタンのテキストを太字、斜体、下線付きにしたり、大文字／小文字に変更したりできます。
  4. 色 - ボタン上に表示されるテキストの色と、ボタンの背景色です。
  5. フォントサイズ - ボタン上に表示されるコンテンツのフォントサイズです。あらかじめ用意されたフォントサイズは 12px から 40px までの範囲です。
  6. マージン - 2 つのパネル要素間の余白です。
  1. パネルコンテナ（1 つ以上のパネル要素を 1 つのコンテナにまとめることが可能）
  2. パネル（全体）

パネルコンテナおよびパネル全体について、次のような各種プロパティを定義できます。
  1. 列の配置 - パネル／パネルコンテナ内に配置されたパネル要素を、上、左下、中央 など、さまざまな位置に配置できます。
  2. 入れ替え - 隣り合うパネルコンテナの位置を入れ替えることができます。
  3. 高さ - パネルコンテナの高さを フィル に設定するか、任意のピクセル値でカスタム高さとして設定できます。
  4. パディング - パネル要素とその枠線との間の余白を、ピクセル単位でカスタマイズできます。
  5. 背景色 - パネルまたはパネルコンテナの背景に表示される色です。
  6. 背景画像 - パネルまたはパネルコンテナの背景に表示される画像です。

  1. パネルおよびパネル要素の追加と管理
  2. パネルおよびパネル要素の表示設定
  3. パネルおよびパネル要素の操作設定
  4. パネルおよびパネル要素のスタイル設定
  5. ページについて 
次のステップ
前へ
次のステップ
キーとなる指標やデータを視覚的に表現するために、パネルおよびパネル要素を追加・管理する方法を参照してください。
前へ
ダッシュボードとして機能し、パネル、ゲージ、チャート、スニペットなど、複数の要素を追加できるコンポーネントであるページについて、詳しくは参照してください。