ボタンの作成と管理

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

このページの内容

Creator ページにボタン要素を挿入して、アプリ内ナビゲーション、URL のオープン、自動タスクの実行などの CTA 処理を設定する方法を説明します。

提供状況

ボタンは、Creator のすべてのプランで作成できます。
スーパー管理者、管理者、開発者のみがボタンを作成および管理できます。

1. ボタンの設定

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

1. 対象ページの編集モードに移動し、ページビルダーを開くをクリックします。まだページを作成していない場合は、ページを作成すると、自動的にページビルダーが開きます。

2. ページビルダーの左ペインでButtonをクリックします。ボタンを含むパネルテンプレートの一覧が表示されます。

メモ: すでにボタンが作成されている場合は、ページビルダーでそのボタンを選択し、設定をクリックして設定ペインを開きます。

3. テンプレートをドラッグ＆ドロップしてビルダー領域に配置します。パネル内のボタンに対して[表示]タブが有効になった状態で、パネル設定ペインが開きます。

初期状態では、ボタンにはデフォルトラベルが設定されています。このラベルは、ニーズに応じて編集、さらに設定、または削除できます。また、パネルビルダーからテキスト、画像、ボタンなどのパネル要素を追加および管理できます。

メモ: パネルテンプレートをページビルダーに追加すると、対応するZMLコードがパネル設定ペインの[コード]タブに表示されます。

このコードを編集することで、自社開発のマークアップ言語を使用して、パネルを高度にカスタマイズしてデザインできます。

1.2. 表示の設定

ボタンの表示プロパティを設定し、ページの実行時に何を表示するかを指定できます。

メモ: ページにボタンを追加すると、デフォルトでそのボタンの設定ペインが開きます。すでにボタンが作成されている場合は、ページビルダーで対象のボタンを選択し、設定をクリックして設定ペインを開きます。デフォルトでボタンの[表示]タブが開きます。

1. ボタンのテキストとしてページの実行時に表示されるラベルを入力します。このラベルには、事前に設定したページ変数を、'${<pagevariable>}' という形式で含めることもできます。

1.3. 操作の設定

1. 対象ボタンの設定ペイン内で[操作]タブに移動します。

メモ: ページの編集モードから操作する場合は、対象のボタンを選択して設定をクリックするか、ボタンをダブルクリックして設定を開きます。

2. ボタンに関連付ける操作を、次のいずれかから選択します。ページの実行時にボタンがクリックされると、この操作が実行されます。

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

1。4. スタイルの設定

1. 対象ボタンの設定ペイン内にある[Style]タブに移動します。

メモ: ページの編集モードにいる場合は、対象のボタンを選択して[設定]をクリックするか、ボタンをダブルクリックして設定画面を開きます。

2. 必要に応じて、ボタンの以下のスタイルプロパティを設定します。

Corner radius - ボタンの角の丸みを指定するピクセル値を入力します。値を大きくするほど、角がより丸くなります。
Style - ボタンのラベルに対して、太字、斜体、下線、文字の大文字／小文字などのスタイルをカスタマイズします。
Font family - ボタンのラベルに使用するフォントを選択します。
Font size - ドロップダウンに表示される 12～40 px のフォントサイズから選択します。数値をクリックすると、1～99 ピクセルの任意のカスタム値を設定できます。
Color - ボタンのラベルと背景の色を選択します。
Stroke（ボタンの枠線）