コンポーネントの表示制御

概要

動的表示は、さまざまな状況に適応するユーザーインターフェースを作成できる強力な機能です。常にすべてのコンポーネントを表示する代わりに、表示されるべきかを決定するルールを定義できます。いつコンポーネントを表示すべきか。

主な利点

ユーザー体験の向上： 適切なタイミングで関連情報のみを表示することで、よりすっきりしたインターフェースを作成します。
パフォーマンスの向上： 非表示のコンポーネントは読み込まれないため、ページ読み込み時間やサーバーリクエストが削減されます。
レスポンシブデザイン： レイアウトやコンポーネント表示をデバイス（デスクトップ、タブレット、携帯）ごとに調整できます。
より応答性の高いUI： アクション、データ、またはデバイスに応じてコンポーネントが出現/消失するため、インターフェースに動的な印象を与えます。
ロジックの簡素化： 複雑なインタラクションやコードなしで、複雑な条件表示を実現できます

動的表示の仕組み

すべてのAvonniコンポーネントには コンポーネントを表示する設定 （プロパティパネル）という表示を制御するプロパティがあります。これを次のように設定できます：

常に表示（を実行します—追加の設定は不要です。): デフォルト；コンポーネントは常に表示されます。
常に非表示（false): コンポーネントは決して表示されません。
条件付き表示: 特定の条件が満たされたときのみコンポーネントが表示されます。

条件付き表示の設定

コンポーネントの表示を条件付きにするには：

Flow が終了した後に発生するアクションを設定できます（例：トーストメッセージの表示、データの更新）。 キャンバス上で表示を制御したいコンポーネントをクリックします。
「コンポーネントの表示設定」プロパティを見つける： プロパティパネル（右側）で、次の項目を見つけます。 表示 プロパティに。
リソースセレクタをクリック： プロパティの横にあるアイコンをクリックします（通常は変数/タグのアイコン）。これでリソース選択メニューが開きます。 表示 プロパティ（通常は変数/タグのアイコン）。これによりリソース選択メニューが開きます。単に入力するだけは を実行します—追加の設定は不要です。 や false コンポーネントを常に表示または常に非表示にしたい場合を除き推奨されません。
条件を選択：

コンポーネント属性： 別の コンポーネントの状態や値に基づいて表示を決定します（例：コンポーネントBを表示するのは 例えば、コンポーネントBを表示するのは @MyCheckbox.checked がtrueの場合のみ）。
変数： 作成した Boolean 変数リソースを使用します。変数が を実行します—追加の設定は不要です。.
数式: 作成した 数式（Formula） 評価されるリソースで を実行します—追加の設定は不要です。 （表示）または false （非表示）になるときにコンポーネントが表示されます。複雑なロジックを許容します。
グローバル変数： システムが提供する情報を使用します。
- 新機能：デバイスタイプ用： を選択し、 $Componentを選択してから、 FormFactor 属性を選択します。これは現在のデバイスタイプをテキストとして保持します： 'Desktop', 'Tablet'、または 'Phone'.

：最大値。

カレンダーの条件付き表示

Avonniのカレンダーコンポーネントが、ユーザーがある選択肢で「Calendar」を選んだときにのみ表示される例を作成してみましょう。 Avonniボタンメニュー.

ボタンメニューを追加

Avonniの Button Menu コンポーネントをキャンバスにドラッグします。
そのプロパティで、次を設定します。 アイテム:
- 次の項目を追加します： ラベル：Table, 値：table
- 次の項目を追加します： ラベル：Calendar, 値：calendar
ボタンメニューにわかりやすい 実際の （例: ViewModeMenu).

カレンダーを追加

Avonniの カレンダー コンポーネントをキャンバスに追加します。

カレンダーの表示を設定

先ほど追加した カレンダー レコード操作のための主要なインタラクション
プロパティパネルで、次を見つけます。 表示 プロパティに。
リソースセレクタのアイコンをクリックします。
を選択し、 コンポーネント属性.
ボタンメニューコンポーネントを選択します（例： ViewModeMenu).
次に、 値を選択します。 属性でそれらの単位を視覚的に示すことを検討してください。
演算子を次に設定します： が
値を次に設定 calendar.

マッピングされた値を使って、有効な Dynamic Component のリソース（変数、定数、数式、コンポーネント属性、グローバル変数）を選択してください。

カレンダーの 表示 プロパティは現在ボタンメニューに直接リンクされています。ユーザーがボタンメニューで「Calendar」を選択すると、 値を選択します。 の ViewModeMenu ボタンメニュー。ユーザーがボタンメニューで「Calendar」を選択すると、 値を選択します。 が 'calendar'になり、条件は を実行します—追加の設定は不要です。と評価され、カレンダーコンポーネントが表示されます。別のオプションが選択されている場合、条件は falseと評価され、カレンダーは 読み込まれません。.

デバイス別レイアウト

デスクトップ/タブレットでは詳細なデータテーブルを、携帯ではシンプルなリストコンポーネントを表示してみましょう。

データテーブルを追加

データテーブルコンポーネントを追加します（例： MyDataTable).

データテーブルの表示を設定

を選択し、 MyDataTable.
計算された数式 表示 プロパティで条件を設定： グローバル変数 $Component.FormFactor と等しくない 'Phone'.

リストコンポーネントを追加

リストコンポーネントを追加します（例： MyList）モバイル表示向けに設計されています。

リストの表示を設定

を選択し、 MyList.
計算された数式 表示 プロパティで条件を設定： グローバル変数 $Component.FormFactor が 'Phone'.

結果： デスクトップやタブレットのユーザーはデータテーブルを、携帯で閲覧しているユーザーはリストコンポーネントを表示され、それぞれのデバイスフォームファクタに最適化された表示が提供されます。

よくある使用例

条件付きフォーム： 以前の選択に基づいてフォーム項目を表示/非表示にします。
パーソナライズされたダッシュボード： ユーザーの役割やプロフィールに基づいて異なるコンポーネントを表示します。
段階的開示： ユーザーの操作に応じて段階的に情報を表示します。
エラーメッセージ： エラーが発生したときのみエラーメッセージを表示します。
ローディングインジケータ： データを取得している間は読み込み表示をし、その後それを非表示にしてデータコンポーネントを表示します。
レスポンシブレイアウトの作成 デスクトップ、タブレット、携帯画面に対応する

ヒント

まずはシンプルに： 簡単な条件から始め、徐々に複雑さを増してください。
十分にテストする： 異なるデータやユーザー操作で表示条件をテストしてください。
式は慎重に使う： 強力ですが、複雑な式は保守が難しくなる可能性があります。
ブール変数を使う： 可読性を高めるためにブール変数を作成してください。

まとめると

動的表示はAvonni Dynamic Componentsのコア機能であり、応答性が高く効率的なユーザーインターフェースを作成する強力な方法を提供します。 表示 プロパティをデータ、コンポーネント属性、式、または新しい $Component.FormFactor グローバル変数にリンクすることで、コンポーネントが表示されるタイミングを正確に制御し、パフォーマンスを最適化し、さまざまな条件やデバイスに合わせてユーザー体験を調整できます。

最終更新 2 か月前

役に立ちましたか？