ボタンの作成と管理

ボタンの作成と管理

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

このページの内容
Creator ページにボタン要素を挿入し、アプリ内ナビゲーション、URL のオープン、自動タスクの実行などの CTA（コールトゥアクション）処理を設定する方法を説明します。
提供状況
  1. ボタンは、Creator のすべてのプランで作成できます。
  2. スーパー管理者、管理者、開発者のみがボタンを作成および管理できます。

1. ボタンの設定

1.1. ボタンを作成する手順

1. 対象ページの編集モードに移動し、ページビルダーを開くをクリックします。まだページを作成していない場合は、ページを作成すると、自動的にページビルダーが開きます。
2. ページビルダーの左ペインでButtonをクリックします。ボタンを含むパネルテンプレートの一覧が表示されます。
Notes
メモ: すでにボタンが作成されている場合は、ページビルダーでそのボタンを選択し、設定をクリックして設定ペインを開きます。
3. テンプレートをドラッグ＆ドロップしてビルダー領域に配置します。パネル内のボタンに対して[表示]タブが有効になった[パネル設定]ペインが開きます。

初期状態では、ボタンにはデフォルトラベルが設定されています。このラベルは、必要に応じて編集、さらに設定、または削除できます。また、パネルビルダーからテキスト、画像、ボタンなどのパネル要素を追加・管理できます。
Notes
メモ: パネルテンプレートをページビルダーに追加すると、対応するZMLコードが[パネル設定]ペインの[コード]タブに表示されます。
このコードを編集することで、独自のスクリプト言語を使用してパネルを高度にカスタマイズし、デザインできます。

1.2. 表示の設定

ボタンの表示プロパティを設定し、ページの実行時にどのように表示するかを指定できます。
Notes
メモ: ページにボタンを追加すると、デフォルトでそのボタンの設定ペインが開きます。すでにボタンが作成されている場合は、ページビルダーで対象のボタンを選択し、設定をクリックして設定ペインを開きます。デフォルトでボタンの[表示]タブが開きます。
1. ボタンに表示するテキストとして使用されるラベルを入力します。このラベルには、事前に設定されたページ変数を、'${<pagevariable>}' という形式で含めることもできます。

1.3. アクションの設定

1. 対象ボタンの設定ペイン内で[アクション]タブに移動します。
Notes
メモ: ページの編集モードにいる場合は、対象のボタンを選択して設定をクリックするか、ボタンをダブルクリックして設定を開きます。
2. ボタンに関連付けるアクションを、次の中から 1 つ選択します。選択したアクションは、ページの実行時にボタンがクリックされたときに実行されます。
操作 種類
プロパティ
説明
なし
ボタンをクリックしても、操作や画面遷移は行われません。
URL を開く
i. 開きたい URL リンクを入力します。
ii. URL を開く場所として、新規ウィンドウ（初期設定値）、同一ウィンドウ、または ポップアップ のいずれかを選択します。ポップアップ を選択した場合は、ピクセル単位で幅と高さをカスタマイズできます。
フォームを開く
i. Creator アカウント配下のいずれかのアプリケーションにあるフォームから、開きたいフォームを選択します。
ii. 必要なクエリパラメーターを、次の形式で追加します。
  1. <field_link_name>=${<page_variable>}
  2. <field_link_name>=<値>
これにより、指定した項目の値が自動入力された状態で、対象フォームが有効な方法で開きます。
Notes
メモ: 複数のクエリパラメーターを渡す場合は、区切り文字として「&」を使用します。
iii. フォームを開く場所として、新規ウィンドウ（初期設定値）、同一ウィンドウ、または ポップアップ のいずれかを選択します。ポップアップ を選択した場合は、ピクセル単位で幅と高さをカスタマイズできます。
レポートを開く
i. Creator アカウント配下のいずれかのアプリケーションにあるレポートから、開きたいレポートを選択します。
ii. 必要なクエリパラメーターを、次の形式で追加します。
  1. <field_link_name>=${<page_variable>}
  2. <field_link_name>=<値>
これにより、クエリパラメーターの値を満たすデータのみが表示された状態で、対象レポートが有効な方法で開きます。
Notes
メモ: 複数のクエリパラメーターを渡す場合は、区切り文字として「&」を使用します。
iii. レポートを開く場所として、新規ウィンドウ（初期設定値）、同一ウィンドウ、または ポップアップ のいずれかを選択します。ポップアップ を選択した場合は、ピクセル単位で幅と高さをカスタマイズできます。
ページを開く
i. Creator アカウント配下のいずれかのアプリケーションにあるページから、開きたいページを選択します。
ii. 必要なクエリパラメーターを、次の形式で追加します。
  1. <field_link_name>=${<page_variable>}
  2. <field_link_name>=<値>
これにより、指定した情報のみが表示された状態で、対象ページが有効な方法で開きます。
iii. ページを開く場所として、新規ウィンドウ（初期設定値）、同一ウィンドウ、または ポップアップ のいずれかを選択します。ポップアップ を選択した場合は、ピクセル単位で幅と高さをカスタマイズできます。
関数を実行する
i. Creator アカウント配下のいずれかのアプリケーションにある関数から、実行したい関数を選択します。
Notes
メモ: 引数を含む関数を選択した場合は、各引数の横にあるドロップダウンをクリックし、その値を渡す適切なページ変数を選択します。任意の値を直接入力することもできます。
ii. 実行タイミングを次のいずれかから選択します。
  1. 即時 - 要素をクリックしたタイミングで、すぐに実行します。
  2. 確認後 - 要素をクリックした際に確認ポップアップを表示し、確認後に実行します。
Notes
メモ: 確認後 を選択した場合は、次を設定します。
  1. 確認メッセージを入力します。初期設定値は「この操作を実行してもよろしいですか？」です。
  2. 実行を確認ボタンのラベルを入力します。初期設定値は「はい」です。
  3. 実行をキャンセルボタンのラベルを入力します。初期設定値は「いいえ」です。
iii. 関数の実行完了後にページ上のトースト通知として表示される、完了メッセージを作成します。

1。4. スタイルの設定

1. 対象ボタンの設定ペイン内にあるスタイルタブに移動します。
Notes
メモ: ページの編集モードにいる場合は、対象のボタンを選択して設定をクリックするか、ボタンをダブルクリックして設定画面を開きます。
2. 必要に応じて、ボタンに対して次のスタイルプロパティを設定します。
  1. Corner radius - ボタンの角の丸みを指定するピクセル値を入力します。値が大きいほど、角がより丸くなります。
  2. Style - ボタンのラベルに対して、太字、斜体、下線、文字の大文字・小文字などのスタイルプロパティをカスタマイズします。
  3. フォント family - ボタンのラベルに使用するフォントを選択します。
  4. フォント size - ドロップダウンに表示される 12 ～ 40 px の中からフォントサイズを選択します。数値をクリックすると、1 ～ 99 ピクセルの任意のカスタム値を設定できます。
  5. Color - ボタンのラベルおよび背景の色を選択します。
  6. Stroke（ボタンの枠線またはアウトライン）
    1. Color - ボタンの枠線の色を選択します。
    2. Width - ボタンの枠線の太さを指定するピクセル値を入力します。
  1. Padding - ラベルの内容とボタンの枠線との間隔を指定するピクセル値を入力します。
  2. Margin - ボタンの周囲の余白を指定するピクセル値を入力します。
また、ボタンを配置しているパネル内に他の要素を追加し、それらのスタイルを設定して、統一感のあるデザインにすることもできます。詳細はこちら

2. ボタンの管理

パネルに対するすべての管理操作は、ボタンを含む、その中に配置された要素にも適用されます。パネル内のボタンのサイズ変更、パネル全体のタイトルの追加、ボタン要素の削除など、サポートされている各種操作の手順については、パネルの管理セクションを参照してください。
  1. ボタンについて
  2. パネルについて
  3. パネル要素の追加と管理
  4. パネルおよびパネル要素の表示設定
  5. パネルおよびパネル要素の操作設定
  6. パネルおよびパネル要素のスタイル設定
次のステップ
前へ
次のステップ
Zoho Creator の外部で作成し、ダッシュボード内に挿入できるスタンドアロンのカスタムページコンポーネントであるウィジェットについて参照してください。
前へ
ボタン機能と、それを使用してダッシュボード上のCTAに対して独自のレイアウトを実現する方法について参照してください。