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

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

리플로우는 Configurable Workspace 브라우저 설정을 통해 페이지와 콘텐츠를 최대 400%까지 확대할 수 있는 기능입니다. 리플로우가 활성화된 플레이북 상태에서 플레이북 200% 브라우저 확대/축소로 확대하면 컴팩트 모드로 변경되고 다시 줌아웃하면 컴팩트 모드가 유지됩니다.

구성 요소에 대해 플레이북 경험 리플로우가 작동하도록 하려면 문서를 참조하십시오 구성요소에 플레이북 리플로우 적용.

리플로우에 대한 자세한 내용은 다음 문서를 참조하십시오 Reflow for Configurable Workspace.

구성요소에 플레이북 리플로우 적용

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

시작하기 전에

필요한 역할: 관리자

프로시저

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