コンポーネントのリフロー プレイブック

すぐに利用可能なスタンドアロンおよびカスタムレイアウト プレイブックエクスペリエンス コンポーネントにリフローを適用して、ウィンドウのサイズを変更したりズームしたりしたときに UI が調整されるようにします。

リフローは、ブラウザ設定を使用してページとコンテンツを最大400%ズームできる機能です 構成可能ワークスペース 。リフローが有効になっている場合 プレイブック 、ブラウザの プレイブック 200% ズームにズームインするとコンパクトモードに変わり、ズームアウトするとコンパクトモードを終了します。

コンポーネントで プレイブックエクスペリエンス リフローを機能させるには、「」を参照してください コンポーネントに プレイブック リフローを適用。

リフローの詳細については、以下を参照してください Reflow for Configurable Workspace。

コンポーネントに プレイブック リフローを適用

すぐに利用可能なスタンドアロンおよびカスタムレイアウト プレイブックエクスペリエンス コンポーネントにリフローを適用して、ズーム時にウィンドウのサイズを変更したときに UI が調整されるようにします。

始める前に

必要なロール：admin

手順

1. sys_ux_auto_reflow_ruleレコードを作成します。
   1. [ すべて ] メニューを開きます。
   2. フィルター バーに、 sys_ux_auto_reflow_rule.list を入力して入力します。

   [ UX 自動リフロールール ] リストが作成され、表示されます。

   スタンドアロンおよびカスタムレイアウトコンポーネントには プレイブック それぞれルールがあります。特定の UI ビルダー ページサイズ未満の場合、これらのルールはデフォルトのリフローエンジンを使用して、 UX Macroponent 定義 リスト (sys_ux_macroponent.list) の macroponent プロパティと特定の CSS 値を上書きします。ストアアプリで提供される プレイブックエクスペリエンス ルールでは、640px のページ幅を使用してコンポーネントの compactMode プロパティを切り替え、高さ 100vh を使用してコンポーネントのサイズをスペースに合わせて変更します。

   スタンドアロンコンポーネントを使用している場合は、これで完了です。カスタムレイアウトコンポーネントで作業する場合は、次のステップに進みます。

2. 移動先 すべて > UI ビルダー.
3. リフローを適用するレイアウトをビルダーで プレイブックエクスペリエンス 開きます。
4. 左下隅にある [ データ ] アイコンを選択し、 Playbook カスタムレイアウト UI コントローラーを開きます。
5. [ アクティビティビューモード ] フィールドで、 stagePickerVisible 出力プロパティの値を true に更新します。
6. リフロールールを適用するコンポーネントを選択します。
7. [ イベント ] タブで、[ コンパクト モードの変更] イベント ハンドラーを追加します。
   これにより、 コンパクトモード 出力プロパティの値を true または false に変更することで、リフロールールに従ってコンパクトモードのオンとオフが自動的に切り替わります。次に、これが他の プレイブック コンポーネントに適用されるため、すべてが自動的にサイズ変更されます。
8. オプション: [サイズ変更可能なペイン] を選択します。
   1. ペインの位置を更新して、左右の向きで表示するか、上下のペインとして表示します。
   2. [構成] タブで、スクリプト化されたプロパティ値 [デフォルトの表示] ペインフィールドを開きます。
   3. if(!api.data.playbook_custom_layout.compactMode) リターンの値を更新して、コンパクトモードでない場合は「左」/「上」ペインのみ、「右」/「下」ペインのみ、または「両方」ペインを表示します。
   4. コンパクト モードの場合は、戻り値の最初の値 (api.data.playbook_custom_layout. selectedItem ||()).stageContextId ? ステージが選択されたときに「 左」/「上 」または「 右」/「下」 のアクティビティペインを表示します。
      2 番目の値は、ステージが選択されていないときに表示するペインを示します。