Lightning Experience Customization: Customize Record Page Components and Fields

Posted on by admin

Admin Beginner > Lightning Experience Customization > Customize Record Page Components and Fields

Overview

  1. Customize Record Page 생성하기 – 시도 #1
    • Setup > App Launcher > Sales 선택
    • 상단메뉴에서 Energy Audit선택
    • All list view
    • Burlington evaluation을 선택
    • 메인 패널 상단에 설정아이콘 Setup누르고 팝업메뉴에서 Edit Page선택
      • Setup이 없음. 작업을 더이상 진행 할 수 없음
  2. Customize Record Page 생성하기 – 시도 #2
    • Setup > Quick Find > Lightning App Builder엽니다
    • New버튼을 클릭하여 팝업이 뜨면 왼쪽메뉴에서 Record Page를 선택하고 Next
    • Create a new Lightning page가 뜨면 해당 페이지명과 어느 Object에 이 페이지를 사용할지 등의 정보를 넣고 Next버튼을 누릅니다.
      • Label: Energy Audit Record Page for Sales
      • Object: Energy Audit
    • 새로만들 페이지의 화면레이어를 Header and Right Sidebar로 선택해주세요. 왜 이걸 선택했냐면요. 지금 현재 Record상세페이지를 보시면 알겠지만 상단에 헤더있고, 왼쪽이 메인이고, 오른쪽에 사이드바가 있는 형태거든요. 물론 다른 레이아웃 선택하셔도 되지만 기존 레이아웃에서 많이 변경하는건 좋지 않은거 같아서 같은 레이아웃으로 가되 조금씩 필요한 부분만 바꿔주는 식으로 할거거든요.
    • 팝업을 닫고 나오면 아래에 레이아웃이 나오고 빈칸이 나오는데 여기에서 일일이 다시 처음부터 뭘 보여줘야할지를 일일이 다 정해주어야합니다. 상단 메뉴는 Highlights Panel이거든요. 왼쪽에 컴포넌트에서 끌어다가 헤더부분에 옮겨주시고요. 메인 패널은 원래 페이지를 자세히 보시면 Related랑 Details두개 탭으로 되어 있어요. 그래서 Tab Component를 우선적으로 끌어다 놔야해요. 그리고 Related탭을 선택한 담에 그 위에 Related Lists컴포넌트를 끌어다 놓고, Details탭을 선택한 담에 Record Detail컴포넌트를 끌어다놔야합니다. 그리고 우측에도 마찬가지로 원래 페이지를 보시면 탭으로 되어 있거든요. Tab컴포넌트 끌어다 놓고 그 위에다가 Chatter컴포넌트를 올립니다. 의도적으로 다르게 구성하고 싶으시면 그렇게 하셔도되는데요. 지금 배우는 단계인데 원래 페이지와 모양이 다르면 놀라실까봐 자세히 알려드립니다.
    • 여기서 중요한건데요. 지금 자세히 보시면 Record Details의 필드들이 하나의 그룹안에 뭉쳐있거든요. 지금 Record Detail넣으신거 필드들의 순서를 변경하거나 위치를 옮길 수가 없단말에요. 지금 그걸 자유롭게 옮겨보려고 이 복잡한 작업을 하고 계신겁니다. 이 컴포넌트를 선택하고 우측 패널에 Upgrade Now 버튼을 클릭하시면 해당 컴포넌트안에 들어가 있는 필드들이 각자 다른 객체로 그 안에서 위치나 순서등을 자유롭게 바꿀 수 있게 바뀝니다.
    • Upgrade Now버튼을 누르면 Dynamic Forms migration wizard가 팝업됩니다. 필드양식이 동적으로 바뀔거다 뭐 그런 내용이고요. Next버튼 누르세요.
    • 이 해당 페이지를 다음 화면과 같이 선택한 뒤 Finish버튼을 눌러서 컴포넌트를 업그레이드 해주세요.
    • 업그레이드가 완료되면 자 이제 다른게 보이시나요? 아까보다 필드간격이 좀 벌어졌잖아요. 그게 마우스를 올려보시면 이제 필드가 각자 객체로 분화되어서 드래그앤 드롭으로 자유롭게 이동이 가능해졌어요.
    • 이제 화면구성을 자유자재로 바꿀 수 있는 환경이 설정되었습니다. 드래그앤 드롭으로 필드를 예쁘게 옮겨줄게요. Type of Installation과 Audit Notes를 Owner필드 위로 옮겨줄게요.

Customize Related Lists

Energy Audit은 아직 Related list가 하나도 없는데요. 하나 만들어 줄게요

  1. 지금 보고 계시는 Lightning App Builder상단에 보시면 뒤로가기 뒤로 가기버튼이 있는데 그걸 클릭해주세요.
  2. 우측상단에 Setup메뉴누르면 새창에 Setup메뉴가 뜨거든요. 지금 보고 있는 화면은 나중에 돌아와서 다시 쓸거니까 그대로 두고 새창에 있는 Setup에서 계속 진행해주세요.
  3. Setup > Object Manager > Energy Audit을 찾아서 선택해주세요
  4. 왼쪽 메뉴에서 Page Layouts을 선택한 뒤 Energy Audit Layout를 클릭해주세요
  5. 화면 맨 아래에 Related Lists넣을수 있는 박스가 있거든요
  6. 메인패널 맨 윗쪽에 보면 스크롤 내려도 따라오는 상단 기능박스가 있죠? 왼쪽에 뭔가 선택할 수 있는 목록이 있고 오른쪽에 패널에는 버튼들 막 보여주고요. 거기에서 왼쪽 목록에 Related Lists를 선택하세요.
  7. 그러면 오른쪽에 이런저런 버튼들이 보여지거든요. 거기 중에 Files라는 버튼을 끌어다가 아까 그 Related Lists넣는 박스에다 끌어다 담으세요.
  8. 상단에 Quick Save > Yes 눌러서 저장합니다.

Activate the Page

이제 지금까지 만든 페이지를 고객 서비스에 활성화 시킬겁니다.

  1. 아까 Setup메뉴 새창열기 전에 있었던 그 화면 Lightning App Builder로 가주세요.
  2. Energy Audit Record Page for Sales > Edit 눌러서 편집화면으로 들어갑니다.
  3. 이제 이 페이지를 어느 앱에 적용할지 결정하는 순간이 왔어요. 우측 상단에 Activation클릭하시면 다음과 같은 팝업이 뜹니다.
  4. App Default탭 선택한 뒤 Assign as App Default버튼 클릭하세요
  5. 고객의 요청에 이 화면을 영업팀이 볼수 있게 해달라고 요청을 했어요. 그러면 Sales팀이 보는 Sales앱에 적용을 해야겠죠.
  6. Phone과 Desktop둘다 선택한 뒤 Next
  7. Energy Audit Record Page가 Sales 앱의 Mobile과 Desktop버젼에 들어간다네요. Save버튼 누릅니다.
  8. Save하고 Sales앱에 가서 Energy Audits레코드의 상세 화면을 보면 필드위치가 살짝 바껴있죠.
  9. Energy Consultations의 상세페이지와 비교해보시면 확연히 다른걸 아시겠죠.
  10. 그리고 Related탭을 눌러보시면 이제 관련파일을 올릴수 있게 되었네요.

Hands-on Challenge

Customize a contact record page

Give users a customized set of fields on their contact record pages.

  • Select Edit Page from a contact record
  • Upgrade the page to use Dynamic Forms
  • Use the Contact Layout as the source for the fields
  • Remove these fields from the page:
    • Fax
    • Other Phone
    • Home Phone
  • Remove the Notes & Attachments related list from the Contact Layout page and replace it with the Files related list.
  • Save and activate the page as the org default, and make it available to both desktop and phone users

풀이

  1. Create Lightning Page
    • Setup > Quick Find > Lightning App Builder엽니다
    • New버튼을 클릭하여 팝업이 뜨면 왼쪽메뉴에서 Record Page를 선택하고 Next
    • Create a new Lightning page
      • Label: Contact Record Page for Sales
      • Object: Contact
    • Choose Page Template: Header and Right Sidebar
      • Contact Record페이지 참고해서 선택했음
    • 일단 현재 기본페이지의 구성을 똑같이 구현하고 그 이후에 변경되는 것들만 추가하는 걸로 할게요
    • Header
      • Highlights Panel
    • Main Panel
      • Tab
        • Related
          • Related List
        • Details
          • Record Detail
      • Side Panel
        • Tab
          • Activity – 얘는 오른쪽 패널에서 기존 탭을 더블클릭하면 선택상자가 뜸.
            • Activities
          • Chatter
            • Chatter
  2. 변경사항
    • 필드를 변경하기에 앞서 필드독립화를 우선적으로 진행해야합니다.
      • 메인패널에 Recode Detail 컴포넌트를 선택하고 사이드바에 Upgrade Now버튼클릭
      • Dynamic Forms
        • Select ✅ MIgrate fields and sections into an Accordion component to improve page performance
        • Layout: Contact Layout
    • Remove Fields
      • Fax
      • Other Phone
      • Home Phone
    • Fields & Relationships
      • Setup > Object Manager > Contact > Page Layouts > Contact Layout
      • 가운데 패널의 상단 상자에 리스트중 Related Lists를 선택 후
      • 하단에 Notes & Attachments 삭제
      • 그 자리에 Files를 갖다 넣음 (위에 버튼을 드래그앤 드롭해서 원래 자리에 넣음)
      • Quick Save > Yes
    • Activate
      • 다시 Lightning App Builder로 돌아와서
      • 우측상단에 Activation버튼 클릭
      • ORG DEFAULT탭 선택
      • Assign as Org Default버튼 클릭
      • Assign Form Factor: Desktop and phone