※本記事は、 2016年11月03日にELI DONAHUEによって投稿された記事を和訳したものです。 Arasは、フォームレイアウトや振る舞いを定義するための強力なフォームエディタを提供していますが、外部ＣＳＳファイルを使用してフォームのスタイルを設定できることもご存知でしょうか？この記事では、Arasフォームのルック＆フィールを調整する３つの方法をご紹介します。
はじめに
このデモンストレーションに必要な全てのコードとファイルは、”custom-form-css” プロジェクトのAras Labs GitHubページにあります。このプロジェクトをインストールして動作させたい場合は、プロジェクトページに記載しているインストール手順に従ってください。
ArasLabs/custom-form-css
custom-form-css - Demonstrates how to customize form field appearance with custom CSS.
他のプロジェクトで作業中に、この記事を参考にしているなら、いくつかのセットアップ手順を踏む必要があります。
- あなたのArasコードツリーのcustomerフォルダにあなたのカスタムCSSファイルを追加または作成する: [Install Path]\Innovator\Client\customer\[file].css
- Arasに管理者としてログインする。
- フォームエディタであなたのフォームを開く。
- フォームボディタブのCSSフィールドを編集し、default.cssと手順1で作成したカスタムCSSファイルの両方のインポート分を追加する。
ソースコード：aras_labs_form_body.css
1. クラス別のアイコン表示
各クラス別のアイテムフォームにカスタムアイコンを表示 ItemTypeから作られるどのArasフ
ォームもitem_infoと呼ばれるフィールドを持っています。このフィールドは、ItemTypeラベル、ItemTypeアイコン、およびコンテキストアイテムのプロパティ一覧が表示されます。フォームが読み込まれると、スクリプトとArasクライアント関数によってこのHTMLフィールドに値が設定されます。 コードツリー内のデフォルトのArasクライアント関数を変更することは、システム全体に意図せぬ影響を与える可能性があるので、その代わりに、新規のHTMLフィールドを作成し、item_infoフィールドのデフォルトの振る舞いを上書きすることにします。 次のコードは、新しく追加したHTMLフィールドcustom_iconのHTMLコードの中身です。このコードは、コンテキストアイテムのclassificationプロパティを取得し、img要素のsrcとstyleの属性値を設定してから、デフォルトのアイコンを非表示にします。 ソースコード：aras_labs_custom_icon.html 新しいアイコンの表示位置は、カスタムの外部CSSファイルで設定します。これにより複数のフォームでこのスタイルを再利用できます。 ソースコード：aras_labs_myicon.css この新しいHTMLフィールドにHTMLコードの中身を貼り付けてフォームを保存した後に、クラスが指定されたアイテムを開くと、指定のクラスに対応するカスタムアイコンが表示されるはずです。
2. アイテム情報テーブルのカスタマイズ
クラス名とスタイル調整されたステートを表示するようにカスタマイズしたitem_infoフィー
ルド Arasフォーム上に表示されるプロパティテーブルをカスタマイズするために、デフォルトのitem_infoフィールドについて詳しく見てきます。このitem_info HTMLフィールドは、デフォルトでspan要素とscriptタグを含みます。scriptタグは、populate_ITEM_INFO_INTERNAL_SPAN 関数を定義しています。この関数は、いくつかのAras関数を呼び出して、span要素にプロパティテーブルの値を設定します。 先述した通り、コードツリー内のデフォルトのArasクライアント関数を変更することは、システム全体に渡って意図せぬ副作用を及ぼす可能性があるので、今回は、このscriptタグに独自の関数を追加することで、デフォルトのitem_infoの内容を上書きします。 item_infoフィールドに設定する更新後のコード内容は次の通りです。このコードは、新しい関数style_ITEM_INFO_INTERNAL_SPANを定義し、新しい要素を作成してstateプロパティを表示し、デフォルトのステートプロパティを隠し、アイテムタイプのタイトルをクラス名で置き換えます。 ソースコード：aras_labs_custom_item_info.html 新しいステートプロパティとフォームタイトルのスタイルを設定する必要があります。カスタムスタイルシートに以下のCSSを追加します。 ソースコード：aras_labs_item_info.css item_infoフィールドへの変更内容を保存し、カスタムスタイルシートを更新して下さい。これで、このスタイル変更は、このアイテムタイプのすべてのフォームで表示されるようになります。
注意：これまでに示したコードでは、item_infoフィールドの背景色は変更していません。次のステップでそれについて扱います。
3. フィールドグループのスタイル
外部CSSによるカスタムフィールドグループのスタイル変更 Arasは、論理的に関連するフォ
ームフィールドをまとめるために”groupbox”フィールドタイプを提供していますが、単に表示上、要素をグループ化したい場合は、上手く配置したHTMLフィールドとCSSの組み合わせを使用するのが簡単です。上図のスクリーンショットは、２つのフィールドグループがあります。１つは、item_infoフィールドのボーダーのスタイルを調整したもので、もう一方は、スタイル調整したdiv要素を使用したHTMLフィールドです。 スクリーンショットで示されるフィールドグループのスタイルを使用するには、カスタムスタイルシートに以下のCSSを追加してください。加えて、item_infoフィールドのspan要素にclass="info_group"を設定し、新しいHTML フィールドのdiv要素にclass="user_group"をセットします。 ソースコード：aras_labs_fieldset_style.css あなたのフォームにフィットするようにフィールドグループのz-indexと表示位置の微調整が必要かもしれません。そちらも調整できたら完成です。
さらに多くのArasインスピレーションをお探しですか？
もっと役立つコンテンツをお探しの場合は、私たちのブログを購読し、Twitterアカウント@ArasLabsをフォローして下さい！また、Aras Labs GitHubページでは、我々の最新のオープンソースプロジェクトやサンプルコードを見つけることもできます。 続編のArasフォームをカスタマイズする：パート２で、フォームのインプットフィールドのスタイル調整の仕方も取り上げますので、是非ご参照ください。