フローのユーザインターフェースのカスタマイズ
Visualforce ページにフローを埋め込んだ後、CSS を使用してカスタムスタイルを適用することによって、実行時のフローのデザインをカスタマイズできます。フローの属性と CSS クラスを併用することによって、ボタンの場所、ボタンのスタイル、背景、画面の表示ラベルのデザインなど、フローの個々の部分をカスタマイズできます。
フローボタンの属性
フローの [次へ] ボタン、[前へ] ボタン、[完了] ボタン、[一時停止] ボタン、および [一時停止しない] ボタンの表示方法を変更するには、次の属性を使用します。
| 属性 | 説明 |
|---|---|
| buttonLocation | フローのユーザインターフェースでのナビゲーションボタンの場所を定義します。選択可能な値は次のとおりです。
次に例を示します。
|
| buttonStyle | フローナビゲーションボタンにセットとしてスタイルを割り当てます。CSS クラスではなく、インラインスタイルでのみ使用できます。 次に例を示します。
|
フロー固有の CSS クラス
これらの事前定義済みのフロースタイルクラスは、独自の CSS スタイルで上書きできます。
| フロースタイルのクラス | 適用先... |
|---|---|
| FlowContainer | フローが含まれる <div> 要素。 |
| FlowPageBlockBtns | フローナビゲーションボタンを含む <apex:pageBlockButtons> 要素。 |
| FlowCancelBtn | [一時停止しない] ボタン。 |
| FlowPauseBtn | [一時停止] ボタン。 |
| FlowPreviousBtn | [前へ] ボタン。 |
| FlowNextBtn | [次へ] ボタン。 |
| FlowFinishBtn | [完了] ボタン。 |
| FlowText | テキスト項目の表示ラベル。 |
| FlowTextArea | テキストエリア項目の表示ラベル。 |
| FlowNumber | 数値項目の表示ラベル。 |
| FlowDate | 日付項目の表示ラベル。 |
| FlowCurrency | 通貨項目の表示ラベル。 |
| FlowPassword | パスワード項目の表示ラベル。 |
| FlowRadio | ラジオボタン項目の表示ラベル。 |
| FlowDropdown | ドロップダウンリストの表示ラベル。 |