구성요소에 플레이북 리플로우 적용
창 크기를 조정하거나 확대/축소할 때 UI가 조정되도록 바로 사용 가능한 독립 실행형 및 사용자 지정 레이아웃 플레이북 경험 구성요소에 리플로우를 적용합니다.
시작하기 전에
필요한 역할: 관리자
프로시저
-
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 컨트롤러를 엽니다.
- 활동 뷰 모드 필드에서 stagePickerVisible 출력 속성 값을 true로 업데이트합니다.
- 리플로우 규칙을 적용할 구성요소를 선택합니다.
-
이벤트 탭에서 컴팩트 모드 변경됨 이벤트 핸들러를 추가합니다.
이렇게 하면 compactMode 출력 속성의 값을 true 또는 false로 변경하여 리플로우 규칙에 따라 컴팩트 모드가 자동으로 켜지고 꺼집니다. 그런 다음 모든 것이 자동으로 크기가 조정되도록 u의 플레이북 다른 구성 요소에 적용됩니다.
- 옵션:
크기 조정 가능한 창을 선택합니다.
- 창 위치를 업데이트하여 왼쪽 및 오른쪽 방향 또는 상단 및 하단 창으로 표시합니다.
- 구성 탭에서 스크립팅된 속성 값(기본 표시 창 필드)을 엽니다.
- if (!api.data.playbook_custom_layout.compactMode) return 값을 업데이트하여 컴팩트 모드가 아닌 경우 "왼쪽"/"맨 위" 창, "오른쪽"/"맨 아래" 창만 또는 "둘 다" 창만 표시합니다.
-
컴팩트 모드의 경우 반환(api.data.playbook_custom_layout. selectedItem || ()).stageContextId ? 스테이지를 선택할 때 "왼쪽"/"상단" 또는 "오른쪽"/"하단" 활동 창을 표시합니다.
두 번째 값은 스테이지를 선택하지 않을 때 표시할 창을 나타냅니다.