구성요소에 대한 플레이북 리플로우

창 크기 조정 또는 확대/축소 시 UI가 조정되도록 바로 사용 가능한 독립 실행형 및 사용자 지정 레이아웃 플레이북 경험 구성요소에 리플로우를 적용합니다.

리플로우는 Configurable Workspace 브라우저 설정을 통해 페이지와 콘텐츠를 최대 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) 및 특정 CSS 값의 macroponent 속성을 재정의합니다. 스토어 앱에서 제공되는 플레이북 경험 규칙은 640px 페이지 너비를 사용하여 구성 요소의 compactMode 속성을 전환하고 100vh 높이를 사용하여 구성 요소가 공간에 맞게 크기를 조정하도록 합니다.

   독립 실행형 구성 요소를 사용하는 경우 작업이 완료된 것입니다. 사용자 지정 레이아웃 구성요소로 작업하는 경우 다음 단계로 진행합니다.

2. 다음으로 이동 모두 > UI 빌더.
3. Builder에서 리플로우를 적용할 레이아웃을 플레이북 경험 엽니다.
4. 왼쪽 아래 모서리에서 데이터 아이콘을 선택하고 플레이북 사용자 지정 레이아웃 UI 컨트롤러를 엽니다.
5. 활동 뷰 모드 필드에서 stagePickerVisible 출력 속성 값을 true로 업데이트합니다.
6. 리플로우 규칙을 적용할 구성요소를 선택합니다.
7. 이벤트 탭에서 Compact Mode Changed 이벤트 처리기를 추가합니다.
   이렇게 하면 리플로우 규칙에 따라 compactMode 출력 속성 값을 true 또는 false로 변경하여 컴팩트 모드를 자동으로 켜고 끌 수 있습니다. 그런 다음 다른 구성 요소에 플레이북 적용되어 모든 것이 자동으로 크기가 조정됩니다.
8. 옵션: 크기 조정 가능한 창을 선택합니다.
   1. 창 위치를업데이트하여 왼쪽 및 오른쪽 방향 또는 위쪽 및 아래쪽 창으로 표시합니다.
   2. 구성 탭에서 기본 표시 창 필드에서 스크립팅된 속성 값을 엽니다.
   3. 컴팩트 모드가 아닌 경우 "왼쪽"/"위쪽" 창, "오른쪽"/"아래쪽" 창만 표시하거나 "둘 다" 창을 표시하도록 if(!api.data.playbook_custom_layout.compactMode) return의 값을 업데이트합니다.
   4. 컴팩트 모드의 경우 반환의 첫 번째 값 (api.data.playbook_custom_layout. selectedItem || ()).stageContextId ? 스테이지를 선택할 때 "왼쪽"/"상단" 또는 "오른쪽"/"하단" 활동 창을 표시합니다.
      두 번째 값은 스테이지가 선택되지 않은 경우 표시할 창을 나타냅니다.