プレイブックコンポーネントにリフローを適用
すぐに利用可能なスタンドアロンおよびカスタムレイアウトのプレイブックエクスペリエンスコンポーネントにリフローを適用して、ズーム時にウィンドウのサイズを変更したときに UI が調整されるようにします。
始める前に
必要なロール:admin
手順
-
sys_ux_auto_reflow_rule レコードを作成します。
- [すべて] メニューを開きます。
- フィルターバーに、「sys_ux_auto_reflow_rule.list」と入力します。
[UX 自動リフロールール] リストが作成され、表示されます。
プレイブックスタンドアロンおよびカスタムレイアウトコンポーネントにはそれぞれルールがあります。特定のUI ビルダーページサイズ未満の場合、これらのルールはデフォルトのリフローエンジンを使用して、[UX Macroponent 定義] リスト (sys_ux_macroponent.list) の macroponent プロパティと特定の CSS 値を上書きします。プレイブックエクスペリエンスで提供されるルールでは、ストアアプリは 640px のページ幅を使用してコンポーネントの compactMode プロパティを切り替え、同様に 100vh の高さを使用してコンポーネントのサイズをスペースに合わせて変更します。
スタンドアロンコンポーネントを使用している場合は、これで完了です。カスタムレイアウトコンポーネントで作業する場合は、次のステップに進みます。
- 移動先 すべて > UI ビルダー.
- リフローを適用するレイアウトをプレイブックエクスペリエンスビルダーで開きます。
- 左下隅にある [データ] アイコンを選択し、[プレイブックカスタムレイアウト] UI コントローラーを開きます。
- [アクティビティビューモード (Activity View Mode)] フィールドで、stagePickerVisible 出力プロパティの値を true に更新します。
- リフロールールを適用するコンポーネントを選択します。
-
[イベント] タブで、[コンパクトモードの変更 (Compact Mode Changed)] イベントハンドラーを追加します。
これにより、compactMode 出力プロパティの値を true または false に変更することで、リフロールールに従ってコンパクトモードのオンとオフが自動的に切り替わります。次に、これが他のプレイブックの他のコンポーネントに適用されるため、すべてが自動的にサイズ変更されます。
- オプション:
[サイズ変更可能なペイン] を選択します。
- ペインの位置を更新して、左右の向きで表示するか、上下のペインとして表示します。
- [構成] タブで、スクリプト化されたプロパティ値 [デフォルトで表示されるペイン] フィールドを開きます。
- if(!api.data.playbook_custom_layout.compactMode) return の値を更新し、コンパクトモードではないときに、「左」/「上」ペインのみ、「右」/「下」ぺインのみ、または「両方」のペインが表示されるようにします。
-
コンパクトモードの場合は、ステージが選択されたときに、return (api.data.playbook_custom_layout. selectedItem || ()).stageContextId ? の最初の値を「左」/「上」または「右」/「下」アクティビティペインを表示するように更新します。
2 番目の値は、ステージが選択されていないときに表示するペインを示します。