FlexCard (管理パッケージ) での応答型要素の作成

管理パッケージランタイムの場合、ビューポートの更新時に要素の幅を変更できるようにします。たとえば、取引先責任者の [名] と [姓] の項目の幅を、小さいデバイスではページ全体の幅に、ラップトップやデスクトップなどの大きなデバイスでは 50% に縮小します。

管理パッケージアプリケーションアイコンこの情報は、OmniStudio for Managed Packages 用です。標準ランタイムの OmniStudio については、OmniStudio ヘルプを参照してください。

デフォルトでは、ユーザーが FlexCard を表示するデバイスのビューポートの幅に関係なく、要素の幅は同じです。応答性を有効にすると、要素の幅は各ビューポートブレークポイントで設定された幅に変更されます。デフォルトの幅は、モバイルファーストアプローチの最小のビューポートブレークポイントの幅になります。「FlexCards Element Responsiveness (Managed Package)」を参照してください。

要素のほとんどまたはすべてが反応型の場合、モバイルファーストのアプローチで構築します。[Viewport (ビューポート)] ドロップダウンから [Mobile L/S (モバイル L/S)] を選択して、最小のキャンバスサイズで FlexCard を作成します。[スタイル] パネルから各要素のすべてのブレークポイントの幅を設定したら、[ビューポート] ドロップダウンを切り替えて、さまざまなビューポートでレイアウトを表示します。「異なるビューポートブレークポイントでの FlexCard の表示」を参照してください (管理パッケージ)

FlexCard Designer のビューポートブレークポイントドロップダウン

FlexCard Designer で、キャンバス上の要素をクリックし、[スタイル] をクリックして [スタイル] パネルを開きます。
[ディメンション] セクションで、[応答型] を有効にします。

メモ
要素を選択またはマウスポインターを置くことで、反応型要素を簡単に識別できます。[コンポーネント名] の横にデバイスアイコンが表示されます。
ビューポートブレークポイントごとに、スライダーを調整して幅を設定します。

応答型件名および CaseId 項目要素の例

ユーザーが [件名] フィールドと CaseId フィールド要素を [中] ビューポートと [大] ビューポートで隣り合わせにして、[小] ビューポートと [小] ビューポートに積み上げたいと考えています。
要素の応答性をテストするには、[ビューポート] ドロップダウンからビューポートの幅を切り替えます。「異なるビューポートブレークポイントでの Flexcard の表示 (管理パッケージ)」を参照してください。