화면 요소 및 구성 요소 스타일 및 레이아웃 사용자 정의
화면의 스타일과 레이아웃을 사용자 정의하여 플로를 실행하는 사용자에게 더 나은 환경을 제공합니다. 전체 화면 요소의 스타일 또는 개별 구성 요소의 스타일을 변경하여 원하는 모양을 가져옵니다. 섹션을 사용하여 화면 구성 요소를 열로 구성하여 화면을 더욱 사용자에게 친숙하게 만듭니다. 또한 구성 요소 너비 및 세로 정렬을 조정하여 간격 및 위치를 제어합니다.
필수 Edition
| 지원되는 Edition을 확인하세요. |
| 필요한 사용자 권한 | |
|---|---|
| Einstein 및 Agentforce for Flow를 포함하여 Flow Builder에서 사용할 수 있는 모든 플로 유형, 요소 및 기능을 사용하여 플로를 열고, 편집하고, 만들고, 활성화하거나 비활성화하려면 다음을 수행합니다. | 플로 관리 |
스타일 사용자 정의는 조직 또는 Experience Cloud 사이트의 테마 스타일을 재정의합니다. 스타일 속성에 잘못된 값을 입력하면 스타일 속성이 무시되고 조직 또는 Experience Cloud 사이트 테마가 사용됩니다.
시작하기 전에
화면 플로가 없는 경우 화면 플로를 만듭니다.
-
플로 목록 보기를 엽니다.
- 설정에서 빠른 찾기 상자에 플로를 입력한 다음, 플로를 선택합니다.
- Automation 앱에서 Flows 탭을 선택합니다.
- Lightning 앱의 플로 탭에서 작업 메뉴를 클릭하고 플로 열기를 선택합니다.
-
화면 플로를 만듭니다.
- Automation 앱에서 신규 | 화면 자동화 | 화면 플로 를 클릭합니다.
- 설정에서 새 플로 | 화면 자동화 | 화면 플로 를 클릭합니다.
-
화면 요소를 추가합니다.
-
를 클릭하고 스크린을 선택합니다.
- 레이블, API 이름, 설명을 입력합니다.
-
화면 요소의 스타일 사용자 정의
전체 화면 요소의 스타일을 설정합니다. 예를 들어 화면 주위에 테두리를 추가합니다.
-
화면 요소의 머리글을 클릭합니다.
화면 요소의 속성 패널이 열립니다.
- 스타일 탭을 클릭합니다.
- 컨테이너 스타일 설정 섹션으로 이동합니다.
-
필요에 따라 속성을 조정합니다.
- 백그라운드 색상: 화면 본문의 배경색을 설정합니다.
- 경계 색상: 화면 본문 주위의 테두리 색을 정의합니다.
- 경계 반경: 테두리 모서리의 둥근도를 제어합니다.
- 경계 무게: 테두리의 두께를 조정합니다.
화면 요소 머리글 스타일 사용자 정의
화면 요소의 머리글 스타일을 설정합니다. 예를 들어 머리글 글꼴 크기를 변경합니다.
-
화면 요소의 머리글을 클릭합니다.
화면 요소의 속성 패널이 열립니다.
- 스타일 탭을 클릭합니다.
- 머리글 스타일 설정 섹션으로 이동합니다.
- 단계
-
필요에 따라 속성을 조정합니다.
- 텍스트 색상: 머리글 내의 텍스트 색을 설정합니다.
- 글꼴 크기: 머리글 내의 텍스트 크기를 정의합니다.
화면 요소 바닥글 스타일 사용자 정의
탐색 버튼을 포함하는 화면 요소의 바닥글 스타일을 설정합니다. 예를 들어 사용자가 버튼을 클릭하면 버튼의 색이 변경됩니다.
-
화면 요소의 머리글을 클릭합니다.
화면 요소의 속성 패널이 열립니다.
- 스타일 탭을 클릭합니다.
- 바닥글 스타일 설정 섹션으로 이동합니다.
-
각 버튼에 대해 버튼 및 테두리의 크기와 형태를 설정합니다.
- 경계 반경: 버튼 모서리의 둥근도를 제어합니다.
- 경계 무게: 테두리의 두께를 조정합니다.
-
각 버튼의 사용자 상호 작용 상태에 사용할 색을 설정합니다. 상호 작용 상태:
- 기본값: 사용자가 버튼을 사용하여 상호 작용하지 않는 경우
- 오버: 사용자가 버튼을 가리킬 때
- 활성: 사용자가 버튼을 클릭하면
색상 옵션:- 백그라운드 색상: 버튼의 배경색을 설정합니다.
- 텍스트 색상: 버튼 내의 텍스트 색을 제어합니다.
- 경계 색상: 버튼 주위의 테두리 색을 정의합니다.
구성 요소의 스타일 변경
디자인 요구 사항에 맞게 색상, 테두리, 기타 시각적 속성을 조정하여 일부 화면 구성 요소의 모양을 사용자 정의합니다.
다음 구성 요소의 스타일을 사용자 정의할 수 있습니다. 확인란, 확인란 그룹, 통화, 날짜, 날짜/시간, 표시 텍스트, 숫자, 긴 텍스트 영역, 다중 선택 선택 목록, 암호, 선택 목록, 라디오 버튼, 반복기, 섹션, 텍스트.
-
화면 구성 요소를 추가합니다.
-
구성 요소 목록에서 구성 요소를 클릭합니다.
구성 요소 속성 패널이 열립니다.
-
구성 요소 목록에서 구성 요소를 클릭합니다.
- 스타일 탭을 클릭합니다.
- 스타일 설정 섹션으로 이동합니다.
-
필요에 따라 속성을 조정합니다. 사용 가능한 옵션은 구성 요소의 유형에 따라 다릅니다.
- 백그라운드 색상: 구성 요소의 배경색을 설정합니다.
- 백그라운드 색상 - 선택: 사용자가 선택할 때 구성 요소의 배경색을 설정합니다.
- 백그라운드 색상 - 초점: 사용자가 구성 요소를 클릭하거나 탭 키를 사용하여 구성 요소로 이동할 때 구성 요소의 배경색을 설정합니다.
- 경계 색상: 구성 요소 주위의 테두리 색을 정의합니다.
- 경계 색상 - 선택됨: 사용자가 선택할 때 구성 요소 주위의 테두리 색을 정의합니다.
- 경계 반경: 테두리 모서리의 둥근도를 제어합니다.
- 경계 무게: 테두리의 두께를 조정합니다.
- 텍스트 색상: 구성 요소 내의 텍스트 색을 설정합니다.
- 텍스트 색상 - 초점: 사용자가 구성 요소를 클릭하거나 탭 키를 사용하여 구성 요소로 이동할 때 구성 요소 내의 텍스트 색을 설정합니다.
- 텍스트 색상 - 가리키기: 사용자가 구성 요소 위로 마우스를 이동할 때 구성 요소 내의 텍스트 색을 설정합니다.
- 최소 높이: 구성 요소의 텍스트 상자의 최소 높이입니다.
- 변경 사항을 저장합니다.
섹션을 사용하여 열의 화면 구성 요소 및 필드 구성
섹션은 하나 이상의 열을 사용하여 화면 레이아웃을 만들려는 경우 구성 요소 및 필드를 구성하는 훌륭한 방법입니다. 섹션에 최대 4개의 열을 추가할 수 있습니다. 구성 요소 및 필드는 열이 허용하는 너비만큼 차지할 수 있습니다. 화면 속성 편집기의 스타일 탭을 사용하여 구성 요소 너비 및 세로 정렬을 추가로 조정할 수 있습니다.
-
섹션 구성 요소를 추가합니다.
-
구성 요소 목록에서 섹션을 클릭합니다.
섹션 구성 요소의 속성 패널이 열립니다.
-
구성 요소 목록에서 섹션을 클릭합니다.
- 열 너비를 조정하고 경우에 따라 머리글을 포함합니다.
- 화면 구성 요소를 열에 추가합니다.
- 필요한 경우 열을 더 추가합니다.
- 변경 사항을 저장합니다.
구성 요소 너비 및 세로 정렬 변경
화면에 12열 레이아웃이 있습니다. 너비는 화면 구성 요소 또는 레코드 필드가 화면에 포함하는 가로 그리드 열의 수를 지정합니다. 예를 들어 너비가 12열 중 8개인 구성 요소 또는 필드는 컨테이너에서 사용 가능한 공간의 66%를 차지합니다. 세로 정렬은 구성 요소 또는 필드가 화면의 다른 구성 요소 또는 필드와 관련하여 배치되는 방식을 결정합니다. 구성 요소의 기본 너비는 12/12(전체 너비), 기본 세로 정렬은 상단입니다.
-
화면 구성 요소를 추가합니다.
-
구성 요소 목록에서 구성 요소를 클릭합니다.
구성 요소 속성 패널이 열립니다.
-
구성 요소 목록에서 구성 요소를 클릭합니다.
- 스타일 탭을 클릭하고 이동한 다음, 레이아웃 설정 섹션으로 이동합니다.
-
구성 요소의 너비를 변경하려면 너비 드롭다운 목록에서 옵션을 선택합니다.
화면 캔버스는 12개의 동일한 열로 나눠집니다. 구성 요소의 너비는 구성 요소가 차지하는 열 수로 측정됩니다. 예를 들어 구성 요소의 너비가 3/12로 설정된 경우 12개 열 중 3개를 가로로 또는 컨테이너에서 사용 가능한 공간의 25%로 차지합니다. 기본 구성 요소 너비는 12(전체 너비) 또는 컨테이너에서 사용 가능한 공간의 100%입니다.
-
구성 요소의 세로 정렬을 변경하려면 세로 정렬 아래에서 위쪽, 중간 또는 아래쪽을 선택합니다.
기본 세로 정렬은 상단입니다.
- 변경 사항을 저장합니다.
