‘주문 관리’ 애플리케이션 만들기 - 04 화면의 변경/조정

지금까지 만든 ‘주문 관리’ 애플리케이션의 ‘JL 주문’과 ‘JL 주문 상세 내역’ 탭을 클릭해보면 아래 그림과 같이 레코드가 아직 없기 때문에 화면이 비어 있다.

 

또한 탭을 눌러 표시된 목록 화면의 우측 상단에 있는 ‘새로 만들기’ 버튼을 눌러보면 아래 그림 들과 같이 보기에 불편한 화면들이 생성되어 있는 것을 볼 수 있다.

 

새 JL 주문 입력 화면

새 JL 주문 상세 내역 입력 화면

 

이제 이 화면들을 사용자들이 편리하게 사용할 수 있는 화면으로 변경해보자. 화면을 변경하는 방법은 아래와 같이 2가지가 있다;

• Lightning 페이지 편집
• 개체의 페이지 레이아웃 편집

‘JL 주문’은 ‘Lightning 페이지 편집’으로, ‘JL 주문 상세 내역’은 ‘개체의 페이지 레이아웃 편집’을 사용하여 변경해보기로 하자.

 

◈ Lightning 페이지 편집 기능을 이용한 페이지 레이아웃 변경

이 기능을 사용하기 위해서는 먼저 레코드가 입력되어 있어야 하므로 ‘JL 주문’ 탭을 클릭하여 목록 화면으로 이동한 다음, 우측 상단에 표시되는 ‘새로 만들기’ 버튼을 클릭하여 새로운 레코드를 아래입력한다. (데이터는 본인이 편한대로 입력해도 상관 없다.)

하단의 ‘저장’ 버튼을 눌러 저장한 다음, 아래 그림과 같이 우측 상단의 설정 메뉴 버튼( ⚙️)을 클릭하고, 펼쳐진 메뉴중에서 ‘페이지 편집’을 선택한다.

 

그러면 아래와 같이 Lightning 앱빌더 화면이 표시된다. Lightning 앱 빌더는 레코드의 상세 페이지는 물론 앱의 홈페이지를 만들수 있는 다양한 기능을 제공하는데, 드랙 앤 드롭 방식으로 레코드의 화면을 구성할 수 있는 매우 편리한 툴이다.

 

 

이제 다음 과정에 따라 화면을 좀 더 단순하며 사용자 친화적인 화면으로 만들어 보기로 하자.

• 화면 템플릿의 변경 : 아래 그림을 참고하여 템플릿중에서 ‘머릿글 및 2개의 동일한 영역’이라는 모양으로 변경한다. 변경후 우측 상단의 ‘저장’ 버튼을 누른다. 저장 후  활성화 절차가 진행되는데, ‘다음’ 버튼을 누른면서 진행하고 ‘조직 기본값으로 할당’ 옵션을 체크후 계속 진행한다.

 

• 저장 후 ’활성화’ 절차가 진행되는데, 아래 그림을 참조하여 활성화 시킨다.

• 아래 그림을 참조하여 ‘세부사항’ 영역 및 ‘관련 목록 영역’을 조정한다.

• 아래 그림을 참조하여 ‘세부사항’ 영역의 필드 배열을 조정한다.

• 변경 내용을 저장후 좌측 상단의 화살표 (‘⇜’) 를 클릭하여 레코드 화면으로 돌아가면 아래와 같이 화면이 깔끔하게 정리되어 있다. (섹션명의 변경은 추후에 설명하겠다.)

◈ 개체의 페이지 레이아웃 기능을 이용한 페이지 레이아웃 변경

개체의 페이지 레이아웃 기능은 ‘주문 상세 내역’ 탭을 클릭하여 표시된 목록 화면의 우측 상단의 설정 메뉴 버튼( ⚙️)을 눌러 표시된 메뉴에서 아래 그림과 같이 ‘개체 편집’ 메뉴를 선택한 후, ‘JL 주문 상세 내역’의 ‘개체 관리자’ 화면의 좌측 사이드바에서 ‘페이지 레이아웃’을 클릭한다. 우측에 표시된 ‘페이지 레이아웃’ 목록에서 ‘주문 상세 내역 레이아웃’을 선택한다. 또는 아래와 같이 메뉴를 선택할 수도 있다.

 

설정 > 개체 관리자 > (좌측 사이드바) 페이지 레이아웃 > 목록에서 ‘주문 상세 내역 레이아웃’ 선택

 

표시된 ‘주문 상세 내역 레이아웃’ 은 아래와 같다.

 

페이지 레이아웃 설정 화면에서 아래와 같은 단계로 화면을 변경 한다.

• 필드의 배열을 아래 그림을 참조하여 변경한다.

• 관련 목록등은 불필요하므로 아래 그림을 참고하여 정리하고 레이아웃 화면의 좌측 상단의 ‘저장’ 버튼을 눌러 저장한다.

• ‘주문 상세 내역’ 화면으로 되돌아가서 ‘새로 고침’을 하면 아래와 같은 변경된 화면을 볼 수 있을 것이다. 마지막으로 아래 화면을 참고하여 나머지 화면 정리를 하면 완료된다.

◈ 맺음말

여기까지 화면 정리를 마치고, 이어서 탐색 레이아웃, 축소 레이아웃의 설정을 이어서 진행하기로 하자.