条件を使用したコンポーネントの表示または非表示
oj-ifコンポーネントを使用して、アプリケーションのUIコンポーネントを条件付きで表示または非表示にできます。 oj-ifを使用して、他のコンポーネントを囲み、コンポーネントを表示するかどうかを決定する条件を設定します。
ノート:
oj-ifコンポーネントは、oj-bind-ifと同様の機能を提供します。ただし、バインディングの適用後にoj-bind-if要素がDOMから削除されない場合、oj-ifはDOMに保持されるため、カスタム要素のスロット・コンテンツとして直接使用できます。 スロットのコンテンツを条件付きでレンダリングする場合、または要素をDOMに保持する場合は、oj-bind-ifよりもoj-ifをお薦めします。
ページでoj-ifを使用するには、ビジュアル・アプリケーションにJET 17.x以降が必要です。
oj-ifを使用してコンテンツを条件付きで表示する方法を次に示します: たとえば、ユーザーが「国」や「金額」(USドル)などのフィールドを含む経費精算書を発行するためのフォームがあるとします。 米国以外の国のユーザーが経費を発行する場合、為替レートや金額などの追加のフィールドをUSDで表示したいと考えています。 つまり、選択した国が米国でない場合のみ、これらのフィールドを表示する必要があります。 これを行うには、oj-ifコンポーネント(コンポーネント・パレットで「次の場合」として使用可能)でこれらのフィールドを囲みます。
oj-ifコンポーネントを追加する場合、その「テスト」プロパティに式を追加して、コンポーネントを表示する条件も設定します。 たとえば、ページ変数の値が事前定義された値と等しくないかどうかを評価する式を使用できます。 囲まれたコンテンツは、値が等しくない場合は表示され(式がtrue)、値が等しい場合は非表示になります(式がfalse)。
この例では、Countryに選択した値がUnited States以外である場合に、囲まれたコンテンツを表示する式を作成し、選択したCountryがUnited Statesである場合にこれらのフィールドを非表示にします。
oj-ifを使用して、式で$application.user.roles.role_nameを使用して、ボタンやナビゲーション要素を非表示にするなど、ユーザーのロールに基づいてユーザーに表示されるコンポーネントを動的に制御することもできます。 ページ全体またはページ内の特定のコンポーネントのみに制限を設定できます。 ロールに基づくコンポーネントの可視性がクライアントにのみ適用され、クライアントでロールの値を変更できます。 このため、コンポーネントの非表示に加えて、「ロールベースのセキュリティ」を使用して、アプリケーションとデータをページ内に保護する必要があります。
oj-ifコンポーネントを使用して、ページにコンポーネントが表示されるタイミングを制御するには:
- キャンバスまたは「構造」ビューでコンポーネントを右クリックし、コンテキスト・メニューから「囲み」 > 「次の場合」を選択します:
「構造」ビューには、「次の場合」コンポーネントで囲まれたコンポーネントが表示されます。 (コード・ビューには、
oj-ifが表示されます。)
「
図page-designer-pagestructure-bind.pngの説明」
- 「構造」ビューで「次の場合」コンポーネントを選択し、「プロパティ」ペインを開いて、条件の設定に使用する「テスト」プロパティを表示します。 デフォルトの式は
[[True]]です。
- コンポーネントの表示を制御する条件を入力します。 「テスト」フィールドに条件を入力するか、次に示すように、式エディタを使用して使用可能な変数を使用して式を作成できます:
この例では、country変数のタイプが数値の場合、前述の式を使用して、国フィールドの値が米国の場合、USDフィールドの為替レートおよび金額を非表示にします。 「国」フィールドが空の場合でもこれらのフィールドを非表示にする場合は、次のように式を拡張できます:[[ $variables.expenseReport.country !== 1 && $variables.expenseReport.country]]変数タイプが数値でない場合は、式エディタの値の前後に引用符('')を使用してください。
- ライブ・ビューでapplicationをテストします。 動的UIコントロールが有効になっている場合のフォームの例を次に示します:
