前回のパート１で取り扱ったように、Arasフォームは、Arasフォームエディタでオプション設定可能なこと以上の拡張性を持ちます。この記事では、わずかのCSSとJavaScriptを組み合わせ、あなたのフォームフィールドにカスタムスタイルを適用する方法を説明します。
はじめに
このデモのコードとファイルはすべて、“custom-form-css”プロジェクトのAras Labs GitHubページにあります。プロジェクトをインストールして動作させたい場合は、プロジェクトページに記載しているインストール手順に従ってください。
1. 外部CSSスタイルシートのインポート
外部CSSスタイルシートのインポート
フォームスタイルを外部CSSスタイルシートに外出しすることで、多数のフォームのメンテナンス性を高めることができます。これは、Arasでスタイル調整を実装するとても簡単な方法でもあります：
- あなたのArasコードツリーのcustomerフォルダにあなたのカスタムCSSファイルを追加または作成する: [Install Path]\Innovator\Client\customer\[file].css
- Arasに管理者としてログインする。
- フォームエディタであなたのフォームを開く。
- フォームボディタブのCSSフィールドを編集し、default.cssと手順1で作成したカスタムCSSファイルの両方のインポート分を追加する。
default.cssファイルをインポートすると、デフォルトのArasスタイルがフォームに適用されます。これは、ベースのフォーマットやレイアウトを設ける上で重要で、default.cssの後にカスタムCSSをインポートすることで、デフォルトのArasスタイルの内、競合する部分のみカスタムスタイルで上書きされます。
ヒント：CSSでArasフィールドを選択する場合、フィールド名をクラスセレクタとして使用することができます。例えば、フィールド名が”my_field”のフィールドに対しては、CSSセレクタとして”.my_field”を使用してスタイル調整できます。
2. デフォルトラベルレイアウトの上書き
外部CSSによる異なるラベルスタイルの実装
各フィールドの「フィールドラベル」タブの中にある設定を変更することでも、フィールドラベルをカスタマイズすることが可能です。しかし、一か所で全てのフィールドラベルのスタイルを設定、メンテナンスできる方法があれば、より簡単になります。ちょっとしたJavaScriptコードとCSSを使って、これを実現することができます。
デフォルトのフィールドラベルのスタイルを上書きするための基本的な手順は次の通りです。
- 外部CSSスタイルシートに好みのスタイルを定義します。（上記 外部CSSスタイルシートのインポート 参照）
- フォームイベントを使用し、全てのフィールドラベル要素のスタイル属性をクリアする。
- 同じフォームイベントを使用し、各フィールドラベルのclass属性にカスタムのクラスを追加する。
ステップ１では、”my_label”というCSSクラスを定義しています。
ステップ２では、OnLoadフォームイベントを作成しました。イベントコードには、いくつかカスタムのヘルパー関数（コードの重複を減らすため）とフィールドラベルスタイルを更新するためのコードが含まれています。style属性をクリアするコードは次の通りです。
次に、ラベルフィールド要素にカスタムクラスを追加するステップ3のコードを示します。
完全なOnLoadフォームイベントのメソッドコードは、GitHub上のArasLabs/custom-form-css プロジェクトのlabs_StyleForm.xml を参照して下さい。
3. フィールドスタイルのカスタマイズ
デフォルト vs カスタムフィールドスタイル
外部CSSをインポートする方法とデフォルトスタイルをCSS / JavaScriptでオーバーライドする方法を見てきたので、これらのスキルを組み合わせてフォームフィールドスタイルをカスタマイズしていきます。 基本的な手順はデフォルトのラベルスタイルを上書きするのと似ています。 外部CSSスタイルシートに新しいスタイルを再度定義し、フォームフィールドの要素をJavascriptで更新します。 ただし、使用するJavaScriptはフィールドの種類によって異なります。
注意: これから紹介するコードスニペットは、先述のOnLoadフォームイベントメソッドで定義した以下のヘルパー関数に依存しています。
このセッションで紹介するコードスニペットを使用する場合は、これらのヘルパーメソッドをあなたのメソッドコードにコピーする必要があります。
TEXT & TEXTAREA フィールド
TEXTとTEXTAREAフィールドに対しては、単純にカスタムクラスでデフォルトのクラスを置き換えるだけです。
DATE フィールド
Dateフィールドは、２つのパートから構成されています。日付値を表示するinputフィールドと、日付ピッカーダイアログをトリガーするボタンのinputフィールドの２つです。私たちのJavaScriptは、フィールド値を表示するinputフィールドのクラスを更新するとともに、ボタンのinputフィールドのソースイメージを置き換えます。
ITEM フィールド
Dateフィールドのように、Itemフィールドは二つのinput要素から構成されています。次のサンプルコードは、ボタンアイコンを GitHubのオープンソース Octicon アイコンセットから入手したアイコンで更新します。
さらなるアイディアを求めて
さらなるお役立ち情報をお求めの場合は、私たちのブログを購読し、ツイッターで@ArasLabsをフォローしてください。Aras Labs GitHubページで私たちの最新のオープンソースプロジェクトやサンプルコードを見つけることもできます。
前編Arasフォームをカスタマイズする：パート１はご覧になりましたか? フォームにクラス別アイコンを表示し、item_infoフィールドをカスタマイズし、フィールドグループのスタイル調整をする方法については、前編をご覧ください。