Arasフォームをカスタマイズする:パート1

※本記事は、 2016年11月03日にELI DONAHUEによって投稿された記事を和訳したものです。

Arasは、フォームレイアウトや振る舞いを定義するための強力なフォームエディタを提供していますが、外部CSSファイルを使用してフォームのスタイルを設定できることもご存知でしょうか?この記事では、Arasフォームのルック&フィールを調整する3つの方法をご紹介します。

はじめに

このデモンストレーションに必要な全てのコードとファイルは、”custom-form-css” プロジェクトのAras Labs GitHubページにあります。このプロジェクトをインストールして動作させたい場合は、プロジェクトページに記載しているインストール手順に従ってください。

ArasLabs/custom-form-css

custom-form-css – Demonstrates how to customize form field appearance with custom CSS.

他のプロジェクトで作業中に、この記事を参考にしているなら、いくつかのセットアップ手順を踏む必要があります。

  1. あなたのArasコードツリーのcustomerフォルダにあなたのカスタムCSSファイルを追加または作成する: [Install Path]\Innovator\Client\customer\[file].css
  2. Arasに管理者としてログインする。
  3. フォームエディタであなたのフォームを開く。
  4. フォームボディタブの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_iconHTMLコードの中身です。このコードは、コンテキストアイテムの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の組み合わせを使用するのが簡単です。上図のスクリーンショットは、2つのフィールドグループがあります。1つは、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フォームをカスタマイズする:パート2で、フォームのインプットフィールドのスタイル調整の仕方も取り上げますので、是非ご参照ください。

広告