ボタン

アプリケーションでページ間を移動できるようにしたり、アクションを呼び出したりします。

データ・バインディング

「一般」プロパティー・タブでボタンのデータ・バインディングの設定や変更を行います。 ビューはブール変数にバインドされます。

構成プロパティー

「構成」で、ビューの外観および動作プロパティーを設定または変更します。 「イベント」で、数式構成プロパティーを設定します。

画面サイズ
プロパティー名の横に画面サイズ・アイコン 画面サイズ・アイコン がある構成プロパティーは、画面サイズごとに異なる値を持つことができます。 値を設定しない場合、画面サイズはそのデフォルト値として次に大きい画面サイズの値を継承します。
テーマ定義
テーマ定義は、ビューの色およびスタイルを指定し、その外観を決定します。 ビューのルック・アンド・フィールをテーマ・エディターでプレビューできます。 テーマを参照してください。
以下の表に、ボタンの外観構成プロパティーをリストします。
表 1. ボタンの外観構成プロパティー
外観構成プロパティー 説明 データ・タイプ
色のスタイル ボタンの色のスタイル。 色は、指定したテーマの変数に対応します。 使用可能なオプションは、 Default、 Primary、 Success、 Danger、 Darkです。 String
形 ボタンの形状。 String
サイズ ボタンのサイズ。 String
アウトラインのみ ボタンの上にカーソルを移動したときにのみ、ボタンの色に基づくスタイルが表示されます。 デフォルトでは、このプロパティーは選択されていません。 ブール値
アイコン 画面サイズ・アイコン ボタン上のテキストの前に表示するアイコンの名前。 例: calendar、 clock-o、 camera、 cloud-upload、 bell、 info、 file-text。

アイコンの完全なリストについては、 Font Awesome V4.7.0 を参照してください。

 String
幅 画面サイズ・アイコン ビューの幅です。 幅の単位は px (ピクセル)、% (パーセント)、または em で指定できます。 例えば、50px、20%、または 0.4em のようにします。 単位タイプが指定されていない場合は、px が想定されます。 String
アイコンの位置 ボタン・テキストからのアイコンの相対位置。 選択可能なオプションは次のとおりです。
  • 左 (デフォルト)
  • 右側
 InputGroupButtonLoc
アウトラインのみ 選択した色のスタイルでボタンのアウトラインを表示し、塗りつぶしを非表示にします。 マウスオーバーで塗りつぶしが表示されます。 Boolean
ゴースト・スタイル 選択した色のスタイルでボタンをアウトラインなし、塗りつぶしなしで表示します。 ゴースト・ボタンは、マウスオーバーでライト・グレーの背景に表示されます。 Boolean
以下の表に、ボタンの動作構成プロパティーをリストします。
表 2. ボタンの動作構成プロパティー
動作構成プロパティー 説明 データ・タイプ
タブ・インデックス タブ・シーケンスのインデックス。 タブのインデックスは 1 から始まり、スパースに設定することができます。 例えば、1、5、10 などと指定できます。 タブ・インデックス・プロパティーは、タブ・キーを押して UI エリア間を移動する場合に、タブ・シーケンスをコントロールします。 Integer
複数クリックを防止 ユーザーがボタンを複数回クリックするのを防止します。 Boolean

例

例として、クライアント・サイド・ヒューマン・サービスで 1 つのページから別のページに進むための確認ボタンを追加する場合を考えます。 ヒューマン・サービスのフローにボタンを追加するには、最初のページのレイアウトにボタン・ビューを追加し、次にそのボタンに以下の構成プロパティーを設定します。
  1. 「数式」の下で、二重引用符で囲まれた静的テキストとしてボタン名を指定します (例: "OK")。
  2. 「動作」で、 「複数クリックの防止」を選択します。
  3. 「外観」で、 「色のスタイル」 を Successに設定し、 「形状のスタイル」 と 「サイズのスタイル」 を Defaultに設定したままにします。 「アイコン」に、 checkと入力します。
  4. 変更内容を保存します。

この結果、緑色の背景に「OK」と書かれた長方形のボタンが表示されます。 ボタン上のテキストの前にはチェック・マークが付いています。

イベント

「イベント」プロパティーで数式構成プロパティーおよびビューのイベント・ハンドラーの設定や変更を行います。 イベントをプログラムでトリガーするかユーザーがビューと対話したときにトリガーするように設定できます。 イベントの定義方法およびコーディング方法については、 ユーザー定義イベントを参照してください。

以下の表に、ボタンの数式構成プロパティーを示します。
表 3. ボタンの数式構成プロパティー
数式構成プロパティー 説明 データ・タイプ
ラベルの数式 ボタン・ビューのラベルを設定するために使用される式または数式。 ラベルは、静的 string を使用して設定することも、数式を使用して動的に設定することもできます。 例：
  • 二重引用符に囲まれた静的テキストを使用する場合:
    "Static Button Text"
  • 数式を使用して動的にラベルを計算する場合:
    ${"Text1"}.getText()

数式について詳しくは、 数式を参照してください。

 String

ボタンには以下のタイプのイベント・ハンドラーがあります。

  • On load: Coach またはページのロード時にアクティブ化されます。 例：
    console.log("Button loaded")
  • On click: リンクがクリックされたときに、ページを離れる前にアクティブ化されます。 評価された式が false を返した場合は、クリックによって境界イベントが起動されることはありません。 例：
    return ${Text1}.isValid();
  • On boundary event: リンク・ビューを介して境界イベントが起動された後、フローがページに留まるイベントに到達したときにアクティブ化されます。 詳しくは、「 Coach ビュー・コンテキスト・オブジェクト 」トピックの context.trigger() プロパティーを参照してください。 以下に例を示します。
    alert("Stay on Page status '" + status + "'")

特定のイベントによっては、JavaScript ロジックを使用してビューの効果を変更できます。 ビューを使用したイベントの使用について詳しくは、トピック「 ユーザー定義イベント」を参照してください。

方法

ボタンに使用できるメソッドの詳細情報については、 ボタン JavaScript API を参照してください。

その他のリソース

Coach またはページの作成方法については、 Coach の作成を参照してください。
標準プロパティー (「一般」、 「構成」、 「位置決め」、 「可視性」、および 「HTML 属性」) について詳しくは、 「プロパティーの表示」を参照してください。