パネルおよびパネル要素の表示設定

パネルおよびパネル要素の表示設定

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

このページの内容
ページコンポーネント上で、静的／動的データ、画像やアイコン、CTA ボタンを表示するためのパネルおよびパネル要素の表示プロパティの設定方法について説明します。
提供状況
  1. パネルは、Creator のすべてのプランで作成できます。
  2. スーパー管理者、管理者、開発者のみがパネルを作成および管理できます。

1. パネルの表示を設定する

1.1. 表示を設定する手順

特定のパネル要素の表示プロパティを設定し、パネル上に何を表示するかを指定できます。
1. 対象のページのページビルダーに移動し、左側ペインのPanelをクリックします。
2. 表示される一覧からパネルテンプレートをドラッグ＆ドロップして、作成スペースに配置します。
Notes
メモ: すでにパネルが作成されている場合は、ページビルダーでそのパネルを選択し、設定をクリックしてPanel Configurationペインを開きます。
3. アイコンをクリックして、Panel Configurationペインに利用可能なパネル要素を表示します。
4. 次のいずれかのパネル要素を選択し、サンプルテンプレートを作成スペースにドラッグ＆ドロップします。初期状態ではDisplayタブが表示されます。
  1. Text
  2. 画像
  3. Button
Notes
メモ: パネルテンプレートに含まれているパネル要素の表示値をそのまま設定することも、要素を選択して削除をクリックし、削除することもできます。

1.1.1. Text

パネルテンプレートを挿入したら、Displayタブの利用可能な設定からテキスト要素のデータを表示するプロパティを選択します。利用可能な設定は次のとおりです。
  1. Text - 必要に応じて、事前設定されたページ変数とあわせて静的テキストを含めることができます。例: Welcome 戻る ${page_variable}!
  2. Presets - （算術演算に基づいて）以前に保存した表示設定を再利用したり、事前設定されたページ変数を選択して動的データを表示したりできます。
  3. Zoho Creator - Zoho Creator フォームに保存されているデータを使用して、合計、平均、件数などの算術演算を設定できます。
  4. Zoho 表計算シート - Zoho 表計算シートアカウントの値を動的に表示できます。
  5. Zoho プロジェクト - Zoho プロジェクトアカウントのタスク、課題、マイルストーンの件数を表示できます。
A. Text
i) テキスト要素に表示する値を入力します。また、形式 '${<pagevariable>}' を使用して、このテキスト内に事前設定されたページ変数を含めることもできます。
B. Presets

組み込みプリセット

以前に保存した表示設定を利用するには、次の手順に従います。
i) プリセットを選択ドロップダウンから、現在のアプリケーションで保存済みのプリセット表示設定を選択します。プリセットの詳細が自動入力され、必要に応じて変更できます。
Notes
メモ:
  1. 別のアプリケーションのパネルプリセットを選択するには、プリセットドロップダウンのフッターにあるアプリを変更をクリックします。別のアプリケーションを選択し、そのアプリケーションのパネルプリセットを選択します。
  2. プリセットの詳細の横にある鉛筆アイコンをクリックすると、必要に応じてプリセットの詳細を編集できます。ただし、変更内容はそのパネルプリセットが使用されているすべての箇所に反映されます。
  3. プリセットの詳細の横にあるごみ箱アイコンをクリックすると、パネルプリセットを削除できます。ただし、そのパネルプリセットが使用されている他のすべての箇所からも削除されます。
  4. プリセットが最小または最大演算に基づいている場合は、同じアプリケーション内の別の項目を選択し、その値を代わりに表示することもできます。初期状態では、実際の最大／最小値が選択されています。
    たとえば、最大関数に基づくパネルプリセットを選択した場合、「10」という最大メダル数を表示する代わりに、最上位の生徒の名前を選択して表示できます。

数値型の項目を使用して構成された組み込みプリセットを選択した場合は、次のプロパティも設定できます。
i) 選択した演算に応じて、項目の値をどのように表示するかを選択します。
  1. Actual（すべての演算に適用） - 演算の実際の結果です。これが初期値です。
  2. 合計に対する割合（%） - たとえば、算術演算の結果が 24 で、その項目に記録されたすべての値の合計が 240 の場合、表示される割合（%）は 10% になります。
    （最小、最大、Median に適用）
  3. 任意の数値に対する割合（%） - たとえば、算術演算の結果が 30 で、割合（%）の数値に指定した値が 120 の場合、パネルには 25% と表示されます。

    （Sum、最小、最大、Median、平均 に適用）
  4. 分母を合計とする分数 - たとえば、算術演算の結果が 24 で、その項目に記録されたすべての値の合計が 240 の場合、表示される分数は 1/10 になります。
    （最小、最大、Median に適用）
ii) パネルの実稼働ビューで値の横に単位を表示する場合は、単位ドロップダウンから値を選択します。利用可能な設定は、なし、K (Thousand)、M (Million)、B (Billion) です。
iii) 表示する数値の数値形式を選択します。初期設定（ロケール）を選択した場合は、Creator アカウントにログインしているブラウザーで設定されている形式が適用されます。
設定は自動的に保存され、実稼働ビューに反映されます。

ページ変数

事前設定されたページ変数を使用して動的データを表示するには、次の手順に従います。
i) 現在のページコンポーネントのPage Variables and Scriptペインで事前設定されている変数を選択します。スクリプトによってその変数に渡された値が、パネルの実稼働ビューに表示されます。
C. Zoho Creator
Zoho Creator フォームに保存されているデータを使って、合計、平均、件数 などの算術演算を行うには、次の手順に従います。

Sum、最小、最大、Median、平均 の演算

i) この算術演算の対象となるデータが保存されているフォームを選択します。
Notes
メモ: フォームを選択ドロップダウンには、現在作業しているアプリケーション内のすべてのフォームが表示されます。別のアプリケーションのフォームを選択するには、フォームドロップダウンのフッターにある[アプリを変更]をクリックします。別のアプリケーションを選択し、[完了]をクリックすると、そのアプリケーション内のすべてのフォームが表示されます。
 

ii) [項目を選択]ドロップダウンから数値項目を選択します。この項目のデータを基に算術演算が設定されます。
Notes
メモ: フォーム内に数値項目が 1 つしかない場合は、既定で自動的に選択されます。
iii) 算術演算の評価対象とするデータを選択します。
  1. すべてのデータ - 選択したフォーム内のすべてのデータを評価します。
  2. 選択したデータ - 条件を満たす特定のデータのみを評価して、演算を設定します。

パネルの表示値のデータ型が数値の場合は、次のプロパティも設定できます。
i) 選択した演算に応じて、動的パネルの値を次のいずれの形式で表示するかを選択します。
  1. Actual（すべての演算で利用可能） - 演算の実際の結果です。これは既定値です。
  2. 合計に対する割合（%） - たとえば、算術演算の結果が 24 で、その項目に記録されたすべての値の合計が 240 の場合、表示される割合（%）は 10% になります。
    （最小、最大、Median で利用可能）
  3. 任意の数値に対する割合（%） - たとえば、算術演算の結果が 30 で、[数値]の欄に割合（%）の基準値として 120 を指定した場合、パネルには 25% と表示されます。

    （Sum、最小、最大、Median、平均 で利用可能）
  4. 合計を分母とする分数 - たとえば、算術演算の結果が 24 で、その項目に記録されたすべての値の合計が 240 の場合、表示される分数は 1/10 になります。
    （最小、最大、Median で利用可能）
ii) パネルの表示値の横に単位を表示する場合は、[単位]ドロップダウンから値を選択します。利用可能な設定は、なし（既定値）、K（千）、M（百万）、B（十億）です。
iii) パネルの表示値の小数点以下に表示する桁数を選択します。利用可能な設定は 0、1、2（既定値）、3 です。
iv) 選択した小数桁数に応じて、パネルの表示値に使用する数値の区切り形式を選択します。既定（ロケール）を選択した場合は、Creator アカウントにログインしているブラウザーのロケール設定に従います。
これらの設定は自動的に保存され、パネルの表示に反映されます。

件数（項目値の件数）および Distinct 件数（項目値の重複を除いた件数）の演算

i) この算術演算の対象となるデータが保存されているフォームを選択します。
Notes
メモ: フォームを選択ドロップダウンには、現在作業しているアプリケーション内のすべてのフォームが表示されます。別のアプリケーションのフォームを選択するには、フォームドロップダウンのフッターにある[アプリを変更]をクリックします。別のアプリケーションを選択し、[完了]をクリックすると、そのアプリケーション内のすべてのフォームが表示されます。
 
iii) 算術演算の評価対象とするデータを選択します。
  1. すべてのデータ - 選択したフォーム内のすべてのデータを評価します。
  2. 選択したデータ - 条件を満たす特定のデータのみを評価して、演算を設定します。
Notes
メモ: Zoho Creator の算術演算をここまでの手順で設定したら、その設定をパネルプリセットとして保存できます。このパネルプリセットは、必要に応じて Creator アカウント内の他の場所でも再利用できます。
[プリセットを作成]をクリックし、プリセットに名前を付けて保存します。必要なときに、[組み込みプリセット]から選択して[データを表示]で利用できます。

iv) 動的パネルの値を次のいずれの形式で表示するかを選択します。
  1. Actual（件数およびDistinct 件数で利用可能） - 演算の実際の結果です。これは既定値です。
  2. 任意の数値に対する割合（%）（Distinct 件数で利用可能） - たとえば、Distinct 件数の結果が 30 で、割合（%）の基準となる数値として 120 を指定した場合、パネルには 25% と表示されます。
  3. 割合（%）（件数で利用可能）
  1. [項目]ドロップダウンから、割合（%）を計算するために値を評価する項目を選択します。
  2. 割合（%）を算出するために、合計データ数に対してカウント・集計する対象となる項目値を入力します。
  1. Fraction（件数で利用可能）
  1. [項目]ドロップダウンから、分数を計算するために値を評価する項目を選択します。
  2. 分数を算出するために、合計データ数に対してカウント・集計する対象となる項目値を入力します。
v) パネルの表示データの横に単位を表示する場合は、[単位]ドロップダウンから値を選択します。利用可能な設定は、なし（既定値）、K（千）、M（百万）、B（十億）です。
vii) Distinct 件数で数値項目を選択している場合は、パネルの表示値の小数点以下に表示する桁数を選択します。利用可能な設定は 0、1、2（既定値）、3 です。
vii) パネルの表示値に使用する数値の区切り形式を選択します。既定（ロケール）を選択した場合は、Creator アカウントにログインしているブラウザーのロケール設定に従います。
これらの設定は自動的に保存され、パネルの表示に反映されます。
D. Zoho Sheet - セル値
Zoho Sheet アカウントから値を動的に表示するには、次の手順に従います:
i) 接続を選択ドロップダウンから、あらかじめ設定された接続を選択します。
Notes
メモ: 現在のアプリケーションに利用可能な Zoho Sheet 接続がない場合は、接続を追加をクリックして、続行する前に接続を設定してください。
ii) Zoho Sheet アカウントで作成済みのスプレッドシート一覧からシートを選択します。何も表示されない場合は、そのアカウントでスプレッドシートを作成してから続行してください。
Notes
メモ: Zoho Sheet アカウントにスプレッドシートが 1 つしかない場合は、既定で自動的に選択されます。
iii) 選択したスプレッドシート内にあるワークシートの中から、ワークシートを選択します。
Notes
メモ: 選択したスプレッドシートにワークシートが 1 つしかない場合は、既定で自動的に選択されます。
iv) パネルに表示するシート上の値を決定するため、次の設定から選択します:
  1. セル値 - 指定したセルに入力されている値をそのまま表示します
  2. 名前付き範囲の値
設定は自動的に保存され、有効な方法で反映されます。
E. Zoho プロジェクト
Zoho プロジェクト アカウントからタスク、課題、またはマイルストーンの件数を表示するには、次の手順に従います:
i) 接続を選択ドロップダウンから、あらかじめ設定された接続を選択します。Zoho プロジェクト アカウントに関連付けられているポータル名が、その下の項目に自動入力されます。
Notes
メモ: 現在のアプリケーションに利用可能な Zoho プロジェクト 接続がない場合は、接続を追加をクリックして、続行する前に接続を設定してください。
ii) Zoho プロジェクト アカウントで作成済みのプロジェクト一覧から、プロジェクトを選択します。何も表示されない場合は、そのアカウントでプロジェクトを作成してから続行してください。
Notes
メモ: Zoho プロジェクト アカウントにプロジェクトが 1 つしかない場合は、既定で自動的に選択されます。
iii) プロジェクト内に存在するタスクをすべてカウントするか、未完了または完了のみをカウントするかを選択します。
Notes
メモ: 既定では、すべてが選択されています。

1。1。2. 画像

画像データ元ドロップダウンで、パネルに表示する画像を取得する場所を選択します:
  1. My library- ローカルストレージから画像をアップロードできます。
  2. Web リンク- 公開 URL を使用して画像を挿入できます。
  3. プロフィール picture- ログイン中のユーザーのプロフィール画像が、その Zoho アカウントから取得されます。
  4. Icons- Zoho Creator がサポートする組み込みアイコンを含めることができます。
A. My library
i) + 画像を追加をクリックして、ローカルストレージから画像をアップロードします。アップロードした画像は、自動的にパネル上の画像として更新されます。
Notes
メモ:
  1. 画像サイズは 2 MB 以内である必要があります。
  2. 画像をアップロード済みの場合、別の画像をアップロードするには、+アイコンをクリックします。
  3. 画像の領域は 9M 平方ピクセル以内である必要があります。
  4. 画像を切り替えるには、目的のアップロード済み画像を選択します。
  5. アップロード済み画像にカーソルを合わせ、バツ印アイコンをクリックすると削除できます。
B. Web リンク
i) パネルに表示したい画像の公開 URL アドレスを入力します。
C. プロフィール picture
プロフィール pictureオプションを選択すると、ログイン中のユーザーの画像が有効な方法で自動的にパネル上に表示されます。
Notes
メモ: 次の場合は、プロフィール画像の代わりにプレースホルダー画像（）が表示されます:
  1. 公開ユーザーまたはポータルユーザーがページにアクセスした場合
  2. ページをPDF としてエクスポートした場合
D. Icons
i) Outline または Solid を選択して、それぞれ枠線のみのアイコンか塗りつぶしアイコンを表示します。
ii) 用意されているライブラリからアイコンを選択します。
選択すると、設定は自動的に保存されます。

1。1。3. Button

ボタンをパネル内にドラッグ＆ドロップした後:
i) ボタン上に表示するラベルを入力します。このラベルには、事前に設定されたページ変数を、形式 '${<pagevariable>}' を使用して含めることもできます。
設定内容は自動的に保存され、アプリケーションの実行時に反映されます。

2. 関連トピック

  1. パネルについて
  2. パネル要素の追加と管理
  3. パネルおよびパネル要素のアクション設定
  4. パネルおよびパネル要素のスタイル設定
次のステップ
前へ
次のステップ
アプリケーションの実行時に、パネルまたはパネル要素がクリックされたときに実行されるアクションを設定する方法を参照してください。
前へ
ダッシュボードで実数値および集計された主要指標を表示するために、パネルを追加および管理する方法を参照してください。