条件を使用したコンポーネントの表示または非表示

oj-bind-ifコンポーネントを使用すると、「ビジュアル・アプリケーション」のUIコンポーネントを条件付きで表示または非表示にできます。 oj-bind-ifを使用して他のコンポーネントを囲み、コンポーネントを表示するかどうかを決定するための条件を設定します。

たとえば、国や金額(US通貨)などのフィールドを使用して経費精算書を発行するフォームがあるとします。米国以外の国のユーザーが経費を発行する場合、為替レートや金額などの追加のフィールドをUSDで表示したいと考えています。つまり、選択した国が米国でない場合のみ、これらのフィールドを表示する必要があります。これを行うには、oj-bind-ifコンポーネントのこれらのフィールド(コンポーネント・パレットで「条件」として使用可能)を囲みます。

oj-bind-ifコンポーネントを追加する場合、プロパティ・ペインでテスト・プロパティに式を入力して、コンポーネントを表示する条件も設定します。たとえば、ページ変数の値が事前定義された値と等しくないかどうかを評価する式を使用できます。含まれるコンテンツは、値が等しくない(式が真の)場合は表示され、値が等しい場合は非表示になります。

この例では、変数を使用して式を作成し、国に対して選択された値が米国以外のものである場合、囲まれたコンテンツを表示する式を作成し、選択した国が米国の場合はこれらのフィールドを非表示にします。

また、oj-bind-ifを使用して、式内の$application.user.roles.role_nameを使用して、ボタンやナビゲーション要素を非表示にするなど、ユーザー・ロールに基づいてユーザーに表示されるコンポーネントを動的に制御することもできます。ページ全体またはページ内の特定のコンポーネントのみに制限を設定できます。ロールに基づくコンポーネントの可視性がクライアントにのみ適用され、クライアントでロールの値を変更できます。このため、コンポーネントの非表示に加えて、「ロールベースのセキュリティ」を使用して、アプリケーションとデータをページ内に保護する必要があります。

oj-bind-ifコンポーネントを使用してページにコンポーネントを表示するタイミングを制御するには:

設計モードで、動的に制御するコンポーネントを特定します。
キャンバスまたは構造ビューでコンポーネントを右クリックし、ポップアップ・メニューで「囲む」 > 「条件」を選択します。この例では、動的に制御する為替レート・フィールドと金額(USD)フィールドの2つのoj-input-numberコンポーネントを選択します。

「図page-designer-surround-if.pngの説明」

構造ビューには、「バインド条件」コンポーネントに囲まれているコンポーネントが表示されます。 (コード・モードでは、oj-bind-ifが表示されます。)
「
図page-designer-pagestructure-bind.pngの説明」
キャンバスまたは構造ビューで「バインド条件」コンポーネントを選択し、プロパティ・ペインを開きます。

条件の設定に使用するTestプロパティが表示されます。デフォルトの式は[[True]]です。

「図page-designer-bind-override.pngの説明」
コンポーネントの表示を制御する条件を入力します。次に示すように、テスト・フィールドに条件を入力するか、式エディタを使用して使用可能な変数を使用して式を作成できます:
「図page-designer-expression-editor.pngの説明」
この例では、country変数のタイプが数値の場合、前述の式を使用して、国フィールドの値が米国の場合、USDフィールドの為替レートおよび金額を非表示にします。国フィールドが空であってもこれらのフィールドを非表示にする場合は、次のように式を拡張できます:
```
[[ $variables.expenseReport.country !== 1 &&
    $variables.expenseReport.country]]
```
変数タイプが数値でない場合は、式エディタの値の前後に引用符('')を使用してください。
オプショナル: プロパティ・ペインで、一時上書きプロパティを使用して、テスト条件の結果を一時的にTrueまたはFalseに設定します。たとえば、ページを設計する際に、テスト条件の結果がFalseであるため一部のコンテンツがキャンバス上で非表示になっている場合、一時オーバーライドをTrueに設定してコンテンツをキャンバスに表示するか、オフを選択してテストを一時的に無効にできます。この設定は一時的であり、ページをリロードするとオフに戻ります。

プロパティ・ペインまたは構造ビューまたはキャンバスのコンポーネント・ポップアップ・メニューで一時オーバーライドを設定できます。
applicationをライブ・モードでテストします。動的UIコントロールが有効になっているフォームの例を次に示します: