CSV 레이아웃 업로드
레이아웃 사양이 포함된 CSV 파일을 만들고 업로드하는 방법에 대해 알아봅니다.
레이아웃은 Blueprint에 정의되어 있습니다. Blueprint에 대해 둘 이상의 레이아웃이 정의된 경우 최종 사용자는 구매측 UI의 오른쪽 위 모서리에 있는 대체 레이아웃 버튼을 사용하여 레이아웃을 회전합니다.
레이아웃은 레이아웃에 대한 모든 지침이 포함된 CSV 파일을 통해 정의됩니다. 관리 용이성을 위해 관리자는 스프레드시트(Google 스프레드시트, Microsoft Excel 등)로 레이아웃을 빌드하고 CSV 형식으로 익스포트하는 것이 좋습니다.
레이아웃 생성 및 편집
해당 Blueprint 관리 페이지에서 레이아웃에 액세스합니다.
- 관리자 탐색 창에서 CPQBlueprints (2)를 클릭합니다.
- 레이아웃 탭(3)을 클릭합니다.
- 액세스하려는 Blueprint의 이름을 클릭합니다.
새 레이아웃을 시작하려면 레이아웃 만들기를 클릭합니다. 기존 레이아웃을 편집하려면 목록에서 레이아웃의 이름을 클릭합니다.
레이아웃 마법사에서 레이아웃을 편집할 수도 있습니다. Blueprint를 재배포하면 구매 측에 새 UI 변경 내용이 표시됩니다.
새 레이아웃을 시작하면 새 레이아웃 창이 열립니다. CSV 파일을 상자에 놓아 임포트하거나 클릭하여 컴퓨터에서 선택할 수 있습니다. (i) 참조용으로 샘플 레이아웃 파일을 다운로드할 수도 있습니다. (ii)
기존 레이아웃을 편집하는 경우:
익스포트를 클릭하여 현재 레이아웃 파일을 다운로드합니다. (ᅡ)
바꾸기를 클릭하여 레이아웃 CSV 파일을 임포트합니다(b).
저장(c)을 클릭하여 현재 레이아웃을 편집된 레이아웃으로 바꿉니다. CSV 파일 업로드에 실패하면 파일에서 발견된 모든 오류가 오류 대화 상자의 관리자에게 표시됩니다.
레이아웃 사용 CSV 파일 업로드
레이아웃 CSV 형식에 대한 자세한 소개는 다음 26분짜리 비디오를 참조하십시오.
레이아웃 CSV가 사용되는 방법의 예시는 다음 4분짜리 비디오를 참조하십시오.
해당 HiTech 레이아웃 CSV 파일을 다운로드합니다.
레이아웃 CSV 형식
열 제목은 소문자입니다.
유형 열은 레이아웃 구성요소를 정의합니다. 다음 표에서는 이 열에 유효한 값을 보여줍니다.
| 유형 값 | 설명 |
|---|---|
| 계층 정의 | 속성: Pages, PagesWithLabels, PagesWithNavigation, ExpandableSection, Tab, TabWithNavigation, VerticalTab, VerticalTabWithNavigation, Accordion, AccordionWithNavigation |
| 계층 | |
| 열 세트 | |
| 이미지 | |
| 제품 목록 | |
| 제품 목록 열 | |
| 필드 |
경로 열 값 형식은 요소 재정의 소스 레이블의 배치에 대한 시각적 단서를 제공하며 현재 애플리케이션에서 사용되지 않습니다. 비워 둡니다.
레이블 은 계층 및 필드에 대한 UI에서 최종 사용자에게 표시할 레이블을 정의합니다.
variableName 은 계층 또는 필드에 대한 고유 식별자를 정의합니다.- 계층의 경우 관리자는 고유 값을 정의해야 합니다.
- 필드의 경우 필드 변수 이름을 채웁니다.
구성요소 표시 유형 열은 필드를 표시하는 방법을 정의합니다. 다음 유형을 사용할 수 있습니다.
| 필드 유형 | 구성요소 표시 유형 |
|---|---|
| 텍스트 |
읽기 전용 텍스트 텍스트 텍스트 영역 날짜 |
| 부울 |
부울 라디오 라디오 버튼 |
| 번호 |
번호 슬라이더 NumberWithSubmit 읽기 전용 텍스트 읽기 전용 통화 서식 있는 번호 |
| 선택 목록(단일 선택) |
확장된 선택 목록 확장된 picklistDisplayOnly 선택 목록 읽기 전용 선택 목록 라디오 라디오 버튼 단일 선택 picklistGrid 수직 라디오 비주얼 선택기 |
| 선택 목록(다중 선택) |
MultiSelectExtended 선택 목록 MultiSelectExtended picklistDisplayOnly 다중 선택 선택 목록 다중 선택 picklistGrid MultiSelectVisualPicker 확인란 세로 확인란 |
columnOrder 는 열 집합의 구성요소와 관련이 있습니다. 응답형 UI에서 화면 해상도를 기준으로 필드의 정렬 순서를 제공하는 데 사용됩니다.
className 은 에서 CPQ사용할 수 있는 미리 정의된 클래스를 참조하는 데 사용됩니다. 예를 들어 이미지를 배치할 때 클래스는 해당 이미지 주위의 필드 플로우를 정의할 수 있습니다. 이러한 클래스 이름을 className 열의 레이아웃 CSV 파일에 추가합니다. 최대 높이 및 그리드 컨트롤은 브라우저의 너비와 상호 작용하므로 각 클래스를 고유하게 실험하여 클래스가 다양한 브라우저 크기에 응답하는 방법을 탐색하는 것이 좋습니다.
| 효과 | 적용 대상 | 지원되는 클래스 | 메모 및 예시 |
|---|---|---|---|
| 그리드 | 필드, 이미지 | topleft1col1row, topleft1col2row ... topleft1col6row |
topleft1col1row { 그리드 열: 1/2; } topleft1col2row { 그리드 열: 1/2; 그리드 행: 1/3; } topleft1col3row { 그리드 열: 1/2; 그리드 행: 1/4; } topleft1col4row { 그리드 열 : 1/2; 그리드 행 : 1/5; } topleft1col5row { grid-column: 1/2; grid-row: 1/6; } topleft1col6row { 그리드 열 : 1/2; 그리드 행 : 1/6; } |
| topleft2col1row, topleft2col2row ... topleft2col6row |
topleft2col1row { 그리드 열: 1/3; } topleft2col2row { 그리드 열: 1/3; 그리드 행: 1/3; } topleft2col3row { 그리드 열 : 1/3; 그리드 행 : 1/4; } topleft2col4row { 그리드 열 : 1/3; 그리드 행 : 1/5; } topleft2col5row { 그리드 열: 1/3; 그리드 행: 1/6; } topleft2col6row { 그리드 열: 1/3; 그리드 행: 1/6; } |
||
| topleft3col1row, topleft3col2row ... topleft3col6row |
topleft3col1row { 그리드 열: 1/4; } topleft3col2row { 그리드 열 : 1/4; 그리드 행 : 1/3; } topleft3col3row { 그리드 열: 1/4; 그리드 행: 1/4; } topleft3col4row { grid-column: 1/4; grid-row: 1/5; } topleft3col5row { grid-column: 1/4; grid-row: 1/6; } topleft3col6row { 그리드 열 : 1/4; 그리드 행 : 1/6; } |
||
| topright1col1row, topright1col2row ... topright1col6row |
topright1col1row { 그리드 열: -2/-1; } topright1col2row { 그리드 열: -2/-1; 그리드 행: 1/3; } topright1col3row { 그리드 열: -2/-1; 그리드 행: 1/4; } topright1col4row { 그리드 열: -2/-1; 그리드 행: 1/5; } topright1col5row { 그리드 열: -2/-1; 그리드 행: 1/6; } topright1col6row { 그리드 열: -2/-1; 그리드 행: 1/6; } |
||
| 높이 | 필드 | MH5, MH10, MH15 ... MH40 | 5 rem에서 40 rem까지 최대 높이(5 단위씩) |
| 너비 | 필드 | w5, w10, w15 ... w40 | 5 rem에서 40 rem까지의 최대 너비(5 단위씩) |
| 그리드 열 너비 | 필드 | LC-15M-15MAX, LC-15M-20MAX, LC-15M-25MAX, LC-15M-30MAX | 이러한 클래스는 레이아웃 그리드에서 열의 너비를 설정합니다.
|
| 세로로 표시, 가운데 맞춤 | 선택 목록 필드 | 세로 레이아웃, align-center | 기본값: 가로(레이아웃이 세로일 때는 기본값은 왼쪽) |
| 필드 레이블 숨기기, 필드 옵션 레이블 숨기기 | 표시 구성요소: 확장된 선택 목록, MultiSelectExtended 선택 목록 | 필드 레이블 숨기기, 필드 옵션 레이블 숨기기 |
값 열에는 해당 행에서 참조되는 요소(필드 또는 productlistcolumn)의 속성을 나타내는 JSON 문자열이 포함되어 있습니다.
자리 표시자를 사용하면 최종 사용자가 값을 입력할 때까지 텍스트 필드에 표시될 자리 표시자 텍스트를 관리자가 정의할 수 있습니다.
이미지가 있는 구성요소
이미지를 포함하는 선택 목록 표시 구성요소의 경우 옵션을 사용하지 않도록 설정하면 이미지가 희미해집니다. 관리자는 레이아웃의 classname 필드에 재정의 비활성화 클래스를 적용하여 이 동작을 재정의하고 이미지가 정상적으로 보이도록 할 수 있습니다.