이번 시간에는 지난 1편에 이어 Lightning 앱 사용자의 화면에 요소들을 배치하는 방법에 대해 알아보겠습니다.
1. 라이트닝 페이지(Lightning Page)란?
라이트닝 페이지는 Lightning Experience에서 사용자의 페이지 구성을 디자인할 수 있는 사용자 정의 레이아웃입니다. 관리자는 Lightning 앱 빌더를 통해 기존에 제공되는 템플릿 또는 사용자 요구 사항을 바탕으로 새로운 레이아웃을 지정할 수 있습니다. 설정을 통해 홈페이지와 레코드 상세 페이지에 버튼, 필드, 상세 정보, 관련 목록, 차트 등 다양한 항목을 추가/삭제하고 위치를 지정할 수 있습니다.
아래는 라이트닝 페이지 편집 화면으로 이동하는 방법과 예시 화면입니다.
A. 설정하고자 하는 페이지에서 우측 상단 설정 > 페이지 편집 선택
(단, 목록 보기 화면은 해당되지 않습니다.)
B) 설정 > 앱 관리자 > 사용하고 있는 앱 ‘편집’
(단, 유형이 Lightning인 앱에 대해서만 설정 가능합니다.)
C) Lightning 빌더 예시
2. 라이트닝 페이지의 화면구성
A. 템플릿
머릿글, 링크모음 등 기본적인 항목 배치를 위한 구역을 설정합니다. 데스크탑 뿐만 아니라 태블릿, 모바일 등의 환경에서 적용되는 방식을 보여줍니다.
B. 구성 요소
가장 왼쪽에 위치한 구성 요소 메뉴는, 화면에 배치할 수 있는 단위 항목을 보여줍니다. 사용자는 화면에 넣을 구성 요소를 클릭 후, 화면에 끌어 넣어 원하는 위치에 배치할 수 있습니다.
C. 화면
중앙의 화면은 실제 사용자가 보게 될 레이아웃을 의미합니다. 왼쪽의 구성 요소에서 가져온 항목을 배치할 위치에 놓으면 화면 안에 해당 항목이 놓인 새로운 공간이 구성됩니다.
1) 각각의 항목은 위에서 아래로 배치되며, 중간에 빈 공간이 있는 경우 위쪽 항목에 붙어 정렬됩니다.
2) ‘탭’ 항목은 내부에 여러 개의 탭을 만들어 구성 요소를 담을 수 있는 공간을 제공합니다.
3) 모바일 앱 화면을 구성하는 경우, 아래의 목록에 포함된 구성 요소만을 사용할 수 있습니다. (Salesforce 모바일 앱에서 사용 가능한 데이터)
D. 속성
오른쪽 화면에서는 전체 페이지 및 각 항목의 속성을 설정할 수 있습니다. 화면의 빈 공간을 선택하면 전체 페이지의 템플릿, 레이블명과 같은 설정을 수정할 수 있으며, 화면의 구성 요소 선택 시, 각 항목의 특성에 맞춰 레이블명, 개체 선택, 표시할 레코드 수 등의 세부 속성을 지정할 수 있습니다.
라이트닝 페이지를 적용하는 방법에 대한 더 자세한 내용은 Salesforce Help 문서를 통해 확인하실 수 있습니다.
3. 예시
위 내용을 바탕으로, 간단한 예제를 만들어 보겠습니다.
A. 사용자 요구 사항
계정(Account) 화면에서 모든 기회(Opportunity) 중 ‘기회 금액이 99,000’ 이상인 항목만 필터링해서 보고 싶습니다!
B. 사전 준비
기회(Opportunity)의 목록에서 사용자가 보고자 하는 목록 보기를 생성합니다.
C. 페이지 설정
계정 > 페이지 편집 > Lightning 앱 빌더 화면으로 이동
D. 기존 ‘탭’ 항목에 탭 추가
1) 탭 레이블: 사용자 정의
2) 사용자 정의 레이블: 주요 관리 기회
3) 해당 탭 선택
E. 구성 요소에서 ‘목록 보기’를 선택하여 화면에 추가
F. 끌어다 놓은 ‘목록 보기‘ 선택 후 오른쪽의 속성 수정
1) 개체: 기회
2) 필터: 기회 금액이 99,000 이상
3) 표시할 레코드 수: 5
4) 관련 목록: 기회
5) 관련 목록 유형: 향상된 목록
6) 표시할 레코드 수: 10
G. 오른쪽 상단의 ‘저장’ 선택
1) 페이지를 최초로 수정하고 저장하는 경우 ‘저장’ 왼편의 ‘활성화’를 통해 해당 레이아웃이 적용될 범위를 선택해주어야 합니다.
2) 활성화 단계는 1) 조직 기본값 / 2) 앱 기본값 / 3) 앱, 레코드 유형 및 프로필로 구분되며, 본 연습에서는 조직 기본값으로 설정합니다.
2편 마무리
지금까지 사용자의 화면 레이아웃을 배치하기 위한 라이트닝 페이지(Lightning Page)의 구성과 기능에 대해 알아보았습니다.
3편에서는 조건에 따라 다양한 레이아웃을 사용할 수 있는 동적 양식(Dynamic Forms)과 구성 요소 가시성 설정에 대해 알아보겠습니다.
안내해드린 내용 이외에도 문의 사항이 있다면 아래를 통해 언제든 클로비스에 문의 주시기 바랍니다!
클로비스의 월간 뉴스레터를 구독하시면,
그 어디에서도 볼 수 없는 클로비스만의 유용한 🎉Salesforce 사용 꿀팁🎉과 함께 클로비스의 새로운 소식을 메일로 받아보실 수 있습니다! 고객 여러분들의 많은 구독 부탁드립니다!