레이아웃: 심층 분석
에서 계층, 열 세트, 제품 목록 레이아웃 등 고급 레이아웃 개념 CPQ을 알아봅니다. CSV 파일로 페이지, 탭 및 섹션을 구조화하여 체계적이고 직관적인 사용자 경험을 갖춘 동적이고 반응이 빠른 구성 인터페이스를 만드는 방법을 이해합니다.
계층 및 계층 정의
계층은 페이지의 섹션을 정의합니다.
각 계층과 하위 계층에는 구성요소 표시 유형(F열)을 정의하는 tierDef가 필요합니다. 각 계층에는 Tab, ExpandableSection, Pages, Accordion, AccordionWithNavigation 및 VerticalTab 옵션이 있습니다. 아래의 각 예는 계층 구조가 다른 동일한 구성을 보여줍니다.
- 탭:
- ExpandableSection(이렇게 하면 레이아웃이 더 세로로 만들어집니다)
- 페이지:
계층 내에 하위 계층을 가질 수도 있습니다.
ExpandableSection 하위 계층이 있는 탭 계층:
이 2계층 레이아웃을 생성하는 데 사용된 CSV 파일의 스크린샷은 다음과 같습니다. 강조 표시된 셀은 여러 계층에 플래그가 지정되는 방법을 보여줍니다. 행 9와 10의 경로가 8행의 맨 위 행 tierDef와 동일하므로 셀이 탭 레이아웃으로 표시됩니다.
tierDef 수준(이미지의 8행)에서 레이블 또는 변수 이름을 정의하지 마십시오. 계층 수준(9행과 10행)에서 적용됩니다.
레이블 열
필드와 계층 모두에서 레이블 열에 입력된 텍스트는 레이아웃의 화면에 나타나는 텍스트입니다. 노란색 행의 레이블은 각 탭의 레이블로 나타납니다. 레이블 열은 필드에도 사용됩니다.
변수 이름
변수는 경로를 정의하고 에서 CPQ작성된 특정 필드를 호출하는 데 사용됩니다. 다음 이미지의 9행에서 변수 이름 background 은 E 열에 정의되어 있습니다. 행 25-29에서 경로 background (열 B)에 추가됩니다. 이렇게 하면 해당 항목이 계층에 포함된다는 것을 알 CPQ 수 있습니다.background
레이아웃과 관련된 변수는 필드 또는 규칙에 정의된 CPQ 변수와 달라야 합니다. 에 CPQ 정의된 변수가 레이아웃 CSV에도 사용되기 때문입니다. UI의 CPQ 필드에 할당된 변수 이름은 필드를 레이아웃에 추가하는 데 사용됩니다. 다음 이미지는 필드 변수(variablename=desiredIrons) CPQ 를 참조하는 CSV 파일을 보여 주며, 그 결과 레이아웃에 필드가 표시됩니다.
열 세트 유형
열 세트는 계층에서 객체의 수직 위치를 정의하는 데 도움이 됩니다. 레이아웃은 브라우저의 너비(변경 CPQ 될 수 있음)에 반응하므로 열 세트를 사용하여 관리자가 의도적인 행 중단점을 식별하는 데 도움을 줍니다.
사용자가 전체 열 세트가 한 행에 맞지 않는 작은 창을 사용하는 경우 열은 다음 행으로 계속 진행됩니다. 열 세트의 끝은 항상 새 행을 트리거합니다.
다음 이미지에서 필드는 user 1열 세트의 일부이고 필드 leftHanded 와 bag 는 두 번째 열 세트의 일부입니다. 브라우저 창이 너무 작아져서 세 그림(에 대한 선택 목록 옵션) user을 모두 볼 수 없으면 열 세트가 다음 행에서 계속됩니다. 세 번째 이미지 옆에 필드를 위한 leftHanded 공간이 있지만 새 행에 있습니다.
열 순서
CSV 파일의 열은 columnorder 동일한 열 세트에 있는 열의 순서를 변경합니다. 다음 이미지와 같이 필드를 순서대로 CSV에 추가할 필요는 없습니다.
제품 목록 레이아웃
제품 목록은 구성의 쇼핑 카트 기능을 사용자 지정하는 방법입니다. 제품 목록에 항목을 추가하기 위해 새 제품 규칙이 생성됩니다. 사용자가 단순을 선택하면 다음 필드를 사용할 수 있습니다.
사용자가 필드를 레이아웃에 표시하려면 필드의 레이아웃 CSV에 열을 추가합니다. (사용자는 연결된 테이블의 열에 있는 ProductList.<param> 값을 변수 이름으로 사용합니다. 다음 이미지는 참고 1을 참조하십시오.)
다음은 레이아웃 CSV의 제품 목록 섹션 스크린샷입니다.
몇 가지 유의 사항:
- 이 열의 변수가 productList의 값과 일치합니다.<param> 열 {hauss- extList 및 List가 누락되었습니다}. 이것은 다음을 알려줍니다. CPQ 테이블에 사용자 입력을 추가합니다.
- 개별 열의 텍스트 정렬을 조정하려면 클래스 slds-text- align_left, , slds-text-align_right또는 slds-text-align_center. 여러 클래스 이름을 추가하려면 공백으로 구분합니다.
- price, list, 숫자 extList 가 잘 정렬되도록 항상 오른쪽으로 정렬합니다.
- 화면의 공간을 절약하려면 을 선택합니다modal.location
계층 구성요소
CSV 레이아웃의 구성요소 열에 이러한 계층 구성요소 속성 이름을 사용합니다.
| 구성요소 | 속성 이름 | 설명 |
|---|---|---|
| 기본 컨테이너 | BasicContainer | 장식 또는 탐색이 없는 계층 컨테이너 |
| 확장 가능한 섹션 | ExpandableSection |
섹션 헤더로 회색 막대가 있는 확장 가능한 섹션의 계층 표시 초기 상태에 대한 값 설정: 계층을 지연 로드하려면 다른 섹션이 렌더링을 시작한 후 섹션을 여는 "지연"을 사용합니다. |
| 아코디언 | Accordion | 확장 가능한 섹션과 유사하지만 하나만 확장됨 |
| 탐색이 있는 아코디언 | AccordionWithNavigation | 확장 가능한 섹션과 비슷하지만 하나만 확장되고 다음/이전 버튼이 포함됩니다. |
| 탭 | Tab | 가로 탭 그룹의 계층 표시 |
| 세로 탭 | VerticalTab | 세로 탭 그룹에 계층 표시(탭은 왼쪽에 있음) |
| 페이지 | Pages | 계층을 상단에 진행률 탐색 표시줄이 있는 페이지로 표시합니다(계층 이름은 마우스를 가리킬 때 표시됨). |
| 레이블이 있는 페이지 | PagesWithLabels | 필요에 따라 잘라내는 레이블을 포함하여 상단에 진행률 탐색 표시줄이 있는 페이지로 계층을 표시합니다(가리키기 표시 없음). |