パネルおよびパネル要素の表示設定
お知らせ：当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の英語版を参照してください。
このページの内容
ページコンポーネント上で、静的／動的データ、画像やアイコン、CTA ボタンを表示するためのパネルおよびパネル要素の表示プロパティの設定方法について説明します。
1. パネルの表示を設定する
1.1. 表示を設定する手順
特定のパネル要素の表示プロパティを設定し、パネル上に何を表示するかを指定できます。
1. 対象のページのページビルダーに移動し、左側ペインのPanelをクリックします。
2. 表示される一覧からパネルテンプレートをドラッグ＆ドロップして、作成スペースに配置します。
メモ: すでにパネルが作成されている場合は、ページビルダーでそのパネルを選択し、設定をクリックしてPanel Configurationペインを開きます。
3. 
アイコンをクリックして、Panel Configurationペインに利用可能なパネル要素を表示します。
4. 次のいずれかのパネル要素を選択し、サンプルテンプレートを作成スペースにドラッグ＆ドロップします。初期状態ではDisplayタブが表示されます。
メモ: パネルテンプレートに含まれているパネル要素の表示値をそのまま設定することも、要素を選択して削除をクリックし、削除することもできます。
1.1.1. Text
パネルテンプレートを挿入したら、Displayタブの利用可能な設定からテキスト要素のデータを表示するプロパティを選択します。利用可能な設定は次のとおりです。
- Text - 必要に応じて、事前設定されたページ変数とあわせて静的テキストを含めることができます。例: Welcome 戻る ${page_variable}!
- Presets - （算術演算に基づいて）以前に保存した表示設定を再利用したり、事前設定されたページ変数を選択して動的データを表示したりできます。
- Zoho Creator - Zoho Creator フォームに保存されているデータを使用して、合計、平均、件数などの算術演算を設定できます。
- Zoho 表計算シート - Zoho 表計算シートアカウントの値を動的に表示できます。
- Zoho プロジェクト - Zoho プロジェクトアカウントのタスク、課題、マイルストーンの件数を表示できます。
A. Text
i) テキスト要素に表示する値を入力します。また、形式 '${<pagevariable>}' を使用して、このテキスト内に事前設定されたページ変数を含めることもできます。
B. Presets
組み込みプリセット
以前に保存した表示設定を利用するには、次の手順に従います。
i) プリセットを選択ドロップダウンから、現在のアプリケーションで保存済みのプリセット表示設定を選択します。プリセットの詳細が自動入力され、必要に応じて変更できます。
メモ:
- 別のアプリケーションのパネルプリセットを選択するには、プリセットドロップダウンのフッターにあるアプリを変更をクリックします。別のアプリケーションを選択し、そのアプリケーションのパネルプリセットを選択します。
- プリセットの詳細の横にある鉛筆アイコンをクリックすると、必要に応じてプリセットの詳細を編集できます。ただし、変更内容はそのパネルプリセットが使用されているすべての箇所に反映されます。
- プリセットの詳細の横にあるごみ箱アイコンをクリックすると、パネルプリセットを削除できます。ただし、そのパネルプリセットが使用されている他のすべての箇所からも削除されます。
- プリセットが最小または最大演算に基づいている場合は、同じアプリケーション内の別の項目を選択し、その値を代わりに表示することもできます。初期状態では、実際の最大／最小値が選択されています。
たとえば、最大関数に基づくパネルプリセットを選択した場合、「10」という最大メダル数を表示する代わりに、最上位の生徒の名前を選択して表示できます。
数値型の項目を使用して構成された組み込みプリセットを選択した場合は、次のプロパティも設定できます。
i) 選択した演算に応じて、項目の値をどのように表示するかを選択します。
- Actual（すべての演算に適用） - 演算の実際の結果です。これが初期値です。
- 合計に対する割合（%） - たとえば、算術演算の結果が 24 で、その項目に記録されたすべての値の合計が 240 の場合、表示される割合（%）は 10% になります。
（最小、最大、Median に適用） - 任意の数値に対する割合（%） - たとえば、算術演算の結果が 30 で、割合（%）の数値に指定した値が 120 の場合、パネルには 25% と表示されます。
（Sum、最小、最大、Median、平均 に適用） - 分母を合計とする分数 - たとえば、算術演算の結果が 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) この算術演算の対象となるデータが保存されているフォームを選択します。
メモ: フォームを選択ドロップダウンには、現在作業しているアプリケーション内のすべてのフォームが表示されます。別のアプリケーションのフォームを選択するには、フォームドロップダウンのフッターにある[アプリを変更]をクリックします。別のアプリケーションを選択し、[完了]をクリックすると、そのアプリケーション内のすべてのフォームが表示されます。
ii) [項目を選択]ドロップダウンから数値項目を選択します。この項目のデータを基に算術演算が設定されます。
メモ: フォーム内に数値項目が 1 つしかない場合は、既定で自動的に選択されます。
iii) 算術演算の評価対象とするデータを選択します。
- すべてのデータ - 選択したフォーム内のすべてのデータを評価します。
- 選択したデータ - 条件を満たす特定のデータのみを評価して、演算を設定します。
パネルの表示値のデータ型が数値の場合は、次のプロパティも設定できます。
i) 選択した演算に応じて、動的パネルの値を次のいずれの形式で表示するかを選択します。
- Actual（すべての演算で利用可能） - 演算の実際の結果です。これは既定値です。
- 合計に対する割合（%） - たとえば、算術演算の結果が 24 で、その項目に記録されたすべての値の合計が 240 の場合、表示される割合（%）は 10% になります。
（最小、最大、Median で利用可能） - 任意の数値に対する割合（%） - たとえば、算術演算の結果が 30 で、[数値]の欄に割合（%）の基準値として 120 を指定した場合、パネルには 25% と表示されます。
（Sum、最小、最大、Median、平均 で利用可能） - 合計を分母とする分数 - たとえば、算術演算の結果が 24 で、その項目に記録されたすべての値の合計が 240 の場合、表示される分数は 1/10 になります。
（最小、最大、Median で利用可能）
ii) パネルの表示値の横に単位を表示する場合は、[単位]ドロップダウンから値を選択します。利用可能な設定は、なし（既定値）、K（千）、M（百万）、B（十億）です。
iii) パネルの表示値の小数点以下に表示する桁数を選択します。利用可能な設定は 0、1、2（既定値）、3 です。
iv) 選択した小数桁数に応じて、パネルの表示値に使用する数値の区切り形式を選択します。既定（ロケール）を選択した場合は、Creator アカウントにログインしているブラウザーのロケール設定に従います。
これらの設定は自動的に保存され、パネルの表示に反映されます。
件数（項目値の件数）および Distinct 件数（項目値の重複を除いた件数）の演算
i) この算術演算の対象となるデータが保存されているフォームを選択します。
メモ: フォームを選択ドロップダウンには、現在作業しているアプリケーション内のすべてのフォームが表示されます。別のアプリケーションのフォームを選択するには、フォームドロップダウンのフッターにある[アプリを変更]をクリックします。別のアプリケーションを選択し、[完了]をクリックすると、そのアプリケーション内のすべてのフォームが表示されます。
iii) 算術演算の評価対象とするデータを選択します。
- すべてのデータ - 選択したフォーム内のすべてのデータを評価します。
- 選択したデータ - 条件を満たす特定のデータのみを評価して、演算を設定します。
メモ: Zoho Creator の算術演算をここまでの手順で設定したら、その設定をパネルプリセットとして保存できます。このパネルプリセットは、必要に応じて Creator アカウント内の他の場所でも再利用できます。
[プリセットを作成]をクリックし、プリセットに名前を付けて保存します。必要なときに、[組み込みプリセット]から選択して[データを表示]で利用できます。
iv) 動的パネルの値を次のいずれの形式で表示するかを選択します。
- Actual（件数およびDistinct 件数で利用可能） - 演算の実際の結果です。これは既定値です。
- 任意の数値に対する割合（%）（Distinct 件数で利用可能） - たとえば、Distinct 件数の結果が 30 で、割合（%）の基準となる数値として 120 を指定した場合、パネルには 25% と表示されます。
- 割合（%）（件数で利用可能）
- [項目]ドロップダウンから、割合（%）を計算するために値を評価する項目を選択します。
- 割合（%）を算出するために、合計データ数に対してカウント・集計する対象となる項目値を入力します。
- Fraction（件数で利用可能）
- [項目]ドロップダウンから、分数を計算するために値を評価する項目を選択します。
- 分数を算出するために、合計データ数に対してカウント・集計する対象となる項目値を入力します。
v) パネルの表示データの横に単位を表示する場合は、[単位]ドロップダウンから値を選択します。利用可能な設定は、なし（既定値）、K（千）、M（百万）、B（十億）です。
vii) Distinct 件数で数値項目を選択している場合は、パネルの表示値の小数点以下に表示する桁数を選択します。利用可能な設定は 0、1、2（既定値）、3 です。
vii) パネルの表示値に使用する数値の区切り形式を選択します。既定（ロケール）を選択した場合は、Creator アカウントにログインしているブラウザーのロケール設定に従います。
これらの設定は自動的に保存され、パネルの表示に反映されます。
D. Zoho Sheet - セル値
Zoho Sheet アカウントから値を動的に表示するには、次の手順に従います:
i) 接続を選択ドロップダウンから、あらかじめ設定された接続を選択します。
メモ: 現在のアプリケーションに利用可能な Zoho Sheet 接続がない場合は、接続を追加をクリックして、続行する前に接続を設定してください。
ii) Zoho Sheet アカウントで作成済みのスプレッドシート一覧からシートを選択します。何も表示されない場合は、そのアカウントでスプレッドシートを作成してから続行してください。
メモ: Zoho Sheet アカウントにスプレッドシートが 1 つしかない場合は、既定で自動的に選択されます。
iii) 選択したスプレッドシート内にあるワークシートの中から、ワークシートを選択します。
メモ: 選択したスプレッドシートにワークシートが 1 つしかない場合は、既定で自動的に選択されます。
iv) パネルに表示するシート上の値を決定するため、次の設定から選択します:
- セル値 - 指定したセルに入力されている値をそのまま表示します
- 名前付き範囲の値
設定は自動的に保存され、有効な方法で反映されます。
E. Zoho プロジェクト
Zoho プロジェクト アカウントからタスク、課題、またはマイルストーンの件数を表示するには、次の手順に従います:
メモ: 現在のアプリケーションに利用可能な Zoho プロジェクト 接続がない場合は、接続を追加をクリックして、続行する前に接続を設定してください。
ii) Zoho プロジェクト アカウントで作成済みのプロジェクト一覧から、プロジェクトを選択します。何も表示されない場合は、そのアカウントでプロジェクトを作成してから続行してください。
メモ: Zoho プロジェクト アカウントにプロジェクトが 1 つしかない場合は、既定で自動的に選択されます。
iii) プロジェクト内に存在するタスクをすべてカウントするか、未完了または完了のみをカウントするかを選択します。
メモ: 既定では、すべてが選択されています。
1。1。2. 画像
画像データ元ドロップダウンで、パネルに表示する画像を取得する場所を選択します:
- My library- ローカルストレージから画像をアップロードできます。
- Web リンク- 公開 URL を使用して画像を挿入できます。
- プロフィール picture- ログイン中のユーザーのプロフィール画像が、その Zoho アカウントから取得されます。
- Icons- Zoho Creator がサポートする組み込みアイコンを含めることができます。
A. My library
i) + 画像を追加をクリックして、ローカルストレージから画像をアップロードします。アップロードした画像は、自動的にパネル上の画像として更新されます。
メモ:
- 画像サイズは 2 MB 以内である必要があります。
- 画像をアップロード済みの場合、別の画像をアップロードするには、+アイコンをクリックします。
- 画像の領域は 9M 平方ピクセル以内である必要があります。
- 画像を切り替えるには、目的のアップロード済み画像を選択します。
- アップロード済み画像にカーソルを合わせ、バツ印アイコンをクリックすると削除できます。
B. Web リンク
i) パネルに表示したい画像の公開 URL アドレスを入力します。
C. プロフィール picture
プロフィール pictureオプションを選択すると、ログイン中のユーザーの画像が有効な方法で自動的にパネル上に表示されます。
メモ: 次の場合は、プロフィール画像の代わりにプレースホルダー画像（
）が表示されます:
- 公開ユーザーまたはポータルユーザーがページにアクセスした場合
- ページをPDF としてエクスポートした場合
D. Icons
i) Outline または Solid を選択して、それぞれ枠線のみのアイコンか塗りつぶしアイコンを表示します。
ii) 用意されているライブラリからアイコンを選択します。
選択すると、設定は自動的に保存されます。
選択すると、設定は自動的に保存されます。
1。1。3. Button
ボタンをパネル内にドラッグ＆ドロップした後:
i) ボタン上に表示するラベルを入力します。このラベルには、事前に設定されたページ変数を、形式 '${<pagevariable>}' を使用して含めることもできます。
設定内容は自動的に保存され、アプリケーションの実行時に反映されます。
2. 関連トピック
次のステップ
前へ
次のステップ
アプリケーションの実行時に、パネルまたはパネル要素がクリックされたときに実行されるアクションを設定する方法を参照してください。
前へ
ダッシュボードで実数値および集計された主要指標を表示するために、パネルを追加および管理する方法を参照してください。
Zoho CRM 管理者向けトレーニング
「導入したばかりで基本操作や設定に不安がある」、「短期間で集中的に運用開始できる状態にしたい」、「運用を開始しているが再度学び直したい」 といった課題を抱えられているユーザーさまに向けた少人数制のオンライントレーニングです。
日々の営業活動を効率的に管理し、導入効果を高めるための方法を学びましょう。
- Zoho Workerly Home
- Forums
- Connect With Us:
- Zoho Recruit Home
- Forums
- Connect With Us:
Zoho Campaigns Resources
Zoho WorkDrive Resources
New to Zoho Workerly?
New to Zoho Recruit?
New to Zoho CRM?
New to Zoho Projects?
New to Zoho Sprints?
New to Zoho Assist?
Related Articles
パネルおよびパネル要素のスタイル設定
お知らせ：当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の英語版を参照してください。 このページの内容 アプリケーションのブランディングテーマに合った、視覚的に魅力的な見た目にするために、パネルのスタイルプロパティを設定する方法について説明します。 提供状況 パネルは、Creator のすべてのプランで作成できます。 ...パネルおよびパネル要素のアクション設定
お知らせ：当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の英語版を参照してください。 このページの内容 アプリケーションの実行時に、パネルまたはパネル要素をクリックしたときに実行されるアクションの設定方法について説明します。設定できるアクションには、URL、フォーム、レポート、ページを開く、または関数を実行することが含まれます。 利用条件 パネルは、Creator ...ボタンの作成と管理
お知らせ：当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の英語版を参照してください。 このページの内容 Creator ページにボタン要素を挿入し、アプリ内ナビゲーション、URL のオープン、自動タスクの実行などの CTA（コールトゥアクション）処理を設定する方法を説明します。 提供状況 ボタンは、Creator のすべてのプランで作成できます。 ...ボタンの基本と使い方
お知らせ：当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の英語版を参照してください。 概要 ボタンは、URL を開く、フォームを送信する、ワークフローを実行する、ページを移動するなどのカスタムのクリック時アクションを実行するインタラクティブな CTA 要素です。関数を通じて自動化を有効にし、ユーザーエクスペリエンスを向上させ、アプリケーション内外や他のアクセス可能な ...パネルの概要と使い方
お知らせ：当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の英語版を参照してください。 概要 パネルは、ページ内に埋め込まれるビジュアルコンテナで、動的な指標、ステータス、KPI などの重要な情報を、構造化され視覚的にわかりやすい形式で表示するために使用します。ダッシュボードから重要なインサイトを素早く把握できるようにし、URL を開く、Creator ...