タイプが表示のみのページ・アイテムの表示色を、入力値の条件によって変更するにはどうしたらよいか、という質問があったので実装してみました。
同じ結果が得られますが、３つの異なる実装方法を試してみます。
レベルには0から10までの値を入力します。ステータスとして、レベルが0-4までは緑で安全、5-10で赤で危険と表示します。
試験実装にはAlways FreeのAutonomous DatabaseのAPEX 21.2を使用しています。実装に使用している動的アクションのクライアント側の条件は、APEX 21.1から追加された機能であるため、それ以前のバージョンでは利用できません。コードによる実装では、ネームスペースapex.itemsを使っているため、APEX 21.2以降のバージョンでのみ動作します。
続いて、ページ・アイテムP1_STATUS1を作成します。識別のタイプは表示のみ、ラベルはステータスとします。ページの送信時に送信はOFFにします。OFFの場合spanタグで囲まれたテキストとして値が生成されます。ONの場合はinputタグのvalue属性として値が設定されます。そのため、CSSクラスを設定しても効果がありません。
ページ・アイテムP1_LEVEL1に数値が入力されたときにP1_STATUS1の表示を決めるように、P1_LEVEL1に動的アクションを作成します。
宣言的実装
レベルを入力するページ・アイテムとしてP1_LEVEL1、ステータスを表示するページ・アイテムとしてP1_STATUS1を作成します。P1_STATUS1の表示は、P1_LEVEL1に設定する動的アクションで実行します。TRUEアクションにクライアント側の条件を設定することにより、レベルの入力値に依存して、表示を変更します。
リージョンを作成し、識別の名前を宣言的実装、タイプを静的リージョンとします。
作成したリージョンに、ページ・アイテムP1_LEVEL1を作成します。識別のタイプは数値フィールド、ラベルはレベル、設定の最小値を0、最大値を10、数字の位置合せはLeftにします。
作成した動的アクションの識別の名前を、ステータスの設定１とします。タイミングは、イベントは変更、選択タイプはアイテム、アイテムはP1_LEVEL1になります。
ステータスに安全という文字列を設定するTRUEアクションを作成します。
識別のアクションとして、値の設定を選択します。設定のタイプの設定はStatic Assignment、値は安全です。影響を受ける要素として、選択タイプがアイテム、アイテムとしてP1_STATUS1を指定します。これで、ページ・アイテムP1_STATUS1に安全という文字が設定されます。
実行オプションの初期化時に実行はONにします。この設定によりページ・ロード時（ページ・アイテムP1_LEVEL1は変更されていない）に、このアクションが評価されます。実行されるかどうかは、この後に設定するクライアント側の条件に依存します。
クライアント側の条件のタイプとしてアイテム < 値を選択し、アイテムにP1_LEVEL1、値に5を設定します。このTRUEアクションは、P1_LEVEL1の値が5より小さいときに実行されます。
作成したTRUEアクションを重複させ、表示色を初期化するTRUEアクションに変更します。
識別のアクションをクラスの削除に変更し、設定のクラスとしてu-dangerを指定します。それ以外の設定は、重複元の安全という文字を設定したTRUEアクションと同じです。
u-dangerはOracle APEXのUniversal Themeにて定義されているCSSクラスになります。標準で定義されている危険色を使用することにより、標準が変更されたときに、ここで指定した色も合わせて変更されます。
TRUEアクションを再度重複させます。設定のアクションをクラスの追加、設定のクラスをu-successとします。これでアイテムの表示色が緑になります。
これらのTRUEアクションのクライアント側の条件はすべて同じく、P1_LEVEL1が5より小さいです。
反対に５以上のときに、ステータスを赤で危険と表示するTRUEアクションを作成します。
作成済みの３つのTRUEアクションを選択し、重複を実行します。
作成された３つのTRUEアクションのクライアント側の条件のタイプを、アイテム >= 値に変更します。
重複したTRUEアクション値の設定の、設定の値を安全から危険へ変更します。
クラスの削除はu-dangerからu-successへ変更します。
クラスの追加はu-successからu-dangerへ変更します。
１つめの実装は以上で完了です。
コードによる実装
先ほどと同じ条件で、リージョンコードによる実装、ページ・アイテムP1_LEVEL2、ページ・アイテムP1_STATUS2を作成します。
リージョン宣言的実装を重複させ、識別のタイトルをコードによる実装に変更します。レイアウトの新規行の開始はOFFにします。同時にコピーされたページ・アイテムP1_LEVEL1_1をP1_LEVEL2、P1_STATUS1_1をP1_STATUS2に変更します。動的アクションはコピーされません。
ページ・アイテムP1_LEVEL2に動的アクションを作成します。識別の名前はステータスの設定２とします。作成する動的アクションは、ページ・アイテムP1_LEVEL1の設定と同様なので、スクリーンショットは割愛します。
作成するTRUEアクションはJavaScriptコードの実行です。以下のコードを、設定のコードに記述します。
if (apex.items.P1_LEVEL2.value < 5) {
apex.items.P1_STATUS2.setValue("安全");
apex.items.P1_STATUS2.element.removeClass("u-danger");
apex.items.P1_STATUS2.element.addClass("u-success");
}
else
{
apex.items.P1_STATUS2.setValue("危険");
apex.items.P1_STATUS2.element.removeClass("u-success");
apex.items.P1_STATUS2.element.addClass("u-danger");
}実行オプションの初期化時に実行はONにします。
以上で、実装は完了です。
見かけ上の動作は変わりませんが、大きな違いがあります。
宣言的にTRUEアクションを並べた場合、この通りの順番でTRUEアクションが実行/終了することは保証されません。そのため、実行の順番に関わらず、結果は同じになるようにTRUEアクションを定義する必要があります。
一塊のコードで記述している場合は、コードに記載された通りの順番で実行されます。実行順を保証したい場合は、JavaScriptのコードを記述する必要があります。
宣言的実装２
クライアント側の条件をTRUEアクションに設定する代わりに、動的アクションに設定することもできます。
コードによる実装のときと同様の準備を行い、リージョン宣言的実装２、ページ・アイテムP1_LEVEL3、P1_STATUS3を作成します。
動的アクションの作成も同様に行いますが、クライアント側の条件を設定します。
識別の名前をステータスの設定 - 安全とし、クライアント側の条件のタイプはアイテム < 値、アイテムはP1_LEVEL3、値は5とします。
もう一つ、動的アクションを作成します。
識別の名前をステータスの設定 - 危険とし、クライアント側の条件のタイプはアイテム >= 値、アイテムはP1_LEVEL3、値は5とします。
それぞれの動的アクションに、同じ効果を得るためのTRUEアクションを作成します。動的アクションにクライアント側の条件を設定するため、TRUEアクションにはクライアント側の条件は設定しません。
今回作成したAPEXアプリケーションのエクスポートを以下に置きました。
https://github.com/ujnak/apexapps/blob/master/exports/color-display-only-item.sql
Oracle APEXのアプリケーション作成の参考になれば幸いです。
完
