ページ・アイテムに含まれるラベルの色を変更するにはどうすればよいのか、という問い合わせを受けました。Oracle APEXはリージョン、ページ・アイテム、ボタン、その他色々なコンポーネントが含まれます。その見かけを変更する方法をそれぞれ覚えるのは、あまり現実的ではないでしょう。
これから、見かけを変更するための勘所というか、どこを変更すれば良いのか調べる方法について紹介しようと思います。
今回はページ・アイテムのラベルでした。
画面上に表示されるコンポーネントは必ずテンプレートの指定を含みます。ページ・デザイナにて、該当のラベルを持つページ・アイテムのテンプレートの設定を確認します。右ペインに配置されているプロパティ・エディタの外観のセクションに含まれています。
テンプレートとしてOptionalが選択されています。その他にも選択肢がいくつかあります。
Optional - Aboveを選ぶと以下のように表示されます。
Optional - Floatingでは以下です。
このように表示形式が変わるのは、ページ・アイテムに紐づいているテンプレートが異なるためです。では、使用しているテンプレートを参照します。
左ペインで共有コンポーネント・ビューを選びます。このビューは、ページ・デザイナで開いているページが参照している共有コンポーネントへのアクセスを提供します。今回の対象となっているP1_COLORED_TEXTという名前のページ・アイテムが参照しているテンプレートはOptionalです。Optionalを選択し、プロパティ・エディタからコンポーネントの編集を開きます。
ページ・アイテムが使用しているテンプレートの定義が開きます。
定義を確認します。
ラベルの前には、次のHTMLが出力されます。
<div class="t-Form-labelContainer col col-#LABEL_COLUMN_SPAN_NUMBER#">
<label for="#CURRENT_ITEM_NAME#" id="#LABEL_ID#" class="t-Form-label">
ラベルの後は、次のHTMLです。
</label>
</div>
labelエレメントのclass指定にテキスト色を指定するCSSクラスを指定すれば、色を設定できそうなことがわかります。id属性である#LABEL_ID#として何が設定されるのかを確認します。Chromeの開発者ツールを使ってみました。
<label for="P1_COLORED_TEXT" id="P1_COLORED_TEXT_LABEL" class="t-Form-label">色付きテキスト</label>
idはP1_COLORED_TEXT_LABELであることが分かります。
後はclassに文字の色付けを行うクラス定義を追加するだけです。色々な方法があるかと思いますが、ここではjQueryを使ってみます。
$("#P1_COLORED_TEXT_LABEL").addClass("u-color-8-text")
このコードがページ・ロード時に実行されるようにJavaScriptのページ・ロード時に実行へ指定します。
以上で、ページ・アイテムのラベルに色をつけることができました。
画面上の見かけを変更するために、元となるテンプレートの参照方法について紹介しました。今回はテンプレート自体は変更せずに、テンプレートを元に出力されたページをJavaScriptによって動的に変更しています。
より手の込んだ変更を行う場合は、テンプレートの記述そのものを変更します。特にクラシック・レポートに適用するテンプレートが対象である場合に有効な手法ですが、そちらについては、また記事を改めて紹介したいと思います。
完
