레코드, 필드 및 테이블 표시

학습 목표

이 유닛을 완료하면 다음을 수행할 수 있습니다.

• 크게 나눈(coarse-grained) 구성 요소와 잘게 나눈(fine-grained) 구성 요소의 차이점과 둘 중 하나를 사용해야 하는 이유를 설명할 수 있습니다.
  
• 반복 구성 요소의 정의와 사용되는 경우에 대해 설명할 수 있습니다.
  
• 관련 크게 나눈 구성 요소를 사용하여 레코드 세부 사항 및 관련 목록을 표시할 수 있습니다.
  
• 관련 잘게 나눈 구성 요소를 사용하여 크게 나눈 구성 요소를 교체하고 사용자 정의할 수 있습니다.
  

참고

한국어로 학습하시겠어요? Trailhead playground에서 한국어로 실습 과제를 시작하고, 괄호 안에 제공된 번역을 사용해 탐색해 보세요. 영어 데이터를 기반으로 실습 과제 검증이 이루어지므로 영문으로 표시된 값만 복사해 붙여 넣습니다. 한국어 조직에서 실습 과제를 통과하지 못한 경우, (1) 로캘을 미국을 바꾸고 (2) 여기에 제시된 지침에 따라 언어를 영어로 바꾼 후 (3) "Check Challenge(과제 확인)" 버튼을 눌러 다시 진행해 보세요.

원하는 언어로 Trailhead 사용하기 뱃지를 확인해 현지화된 Trailhead 경험을 활용하는 방법에 대해 자세히 알아보세요.

출력 구성 요소 소개

Visualforce에는 페이지에서 사용할 수 있는 거의 150개의 기본 제공 구성 요소가 포함되어 있습니다. 페이지가 요청되면 구성 요소가 HTML, CSS 및 JavaScript로 렌더링됩니다. 크게 나눈 구성 요소는 단일 구성 요소에서 상당한 양의 기능을 제공하며 사용되는 페이지에 많은 정보와 사용자 인터페이스를 추가할 수 있습니다. 잘게 나눈 구성 요소는 보다 집중된 기능을 제공하고 원하는 방식으로 표시되고 동작하도록 페이지를 디자인할 수 있습니다.

여기에서는 출력 구성 요소, 즉 레코드에서 데이터를 출력하고 보기 전용 사용자 인터페이스를 디자인할 수 있도록 하는 구성 요소에 중점을 둡니다.

표준 컨트롤러로 Visualforce 페이지 만들기

표준 컨트롤러와 함께 출력 구성 요소를 사용하여 레코드 세부 사항에 쉽게 액세스하고 표시할 수 있습니다.

이 페이지에서 다양한 출력 구성 요소를 실험해 보겠습니다. 지금은 대부분 빈 페이지를 만들어 보겠습니다.

1. Developer Console을 열고 File(파일) | New(새로 만들기) | Visualforce Page(Visualforce 페이지)를 클릭하여 새 Visualforce 페이지를 만듭니다. 페이지 이름에 AccountDetail을 입력합니다.
   
2. 편집기에서 모든 마크업을 다음으로 바꿉니다.
   

   <apex:page standardController="Account">
       {! Account.Name }
   </apex:page>

3. Preview(미리보기)를 클릭하여 변경 시 볼 수 있는 페이지 미리보기를 엽니다. 새 창이 열리고 표준 Salesforce 페이지 머리글과 사이드바 요소가 표시되지만 본문에는 아무 것도 표시되지 않습니다.
   
4. 미리보기 창 URL에 계정 ID를 추가하고 Return 키를 누릅니다. URL은 https://SalesforceInstance/apex/AccountDetail?core.apexpages.request.devconsole=1&id=001D000000JRBes와 같은 형식이어야 합니다. 이제 본문에 계정 이름이 표시됩니다. 표준 컨트롤러가 작동하고 유효한 레코드 ID가 있는지 확인합니다.
   

레코드 세부 사항 표시

<apex:detail>을 사용하여 표준 컨트롤러를 사용하는 페이지에 레코드 세부 사항을 빠르게 추가할 수 있습니다.

일부 출력 구성 요소는 많은 기능을 가져옵니다. 이러한 "크게 나눈" 구성 요소는 많은 필드, 레이블 및 기타 사용자 인터페이스 요소를 표시하는 많은 기능을 제공합니다. 이를 통해 기본 제공 Salesforce 사용자 인터페이스에서 변형된 페이지를 빠르게 작성할 수 있습니다.

1. 다음 마크업을 사용하여 {!Account.Name }으로 라인을 변경하고 변경 사항을 저장합니다.
   <apex:detail />정말 큰 변화네요! 마크업 한 줄로 계정 개체의 전체 표준 보기 페이지를 재현했습니다.
   

<apex:detail>은 단 한 줄의 마크업으로 많은 필드, 섹션, 버튼 및 기타 사용자 인터페이스 요소를 페이지에 추가하는 크게 나눈 출력 구성 요소입니다. 또한 페이지에 추가하는 모든 항목은 Salesforce Classic 스타일을 사용합니다. <apex:detail> 모양을 사용자 정의하기 위한 몇 가지 속성이 있습니다. 지금 몇 분 동안 몇 가지를 변경하여 기능을 확인합니다. Lightning Experience의 스타일에 더 잘 맞는 페이지를 만들려면 Visualforce & Lightning Experience 모듈의 중요한 시각적 디자인 고려 사항 이해를 참조하세요.

관련 목록 표시

<apex:relatedList>를 사용하여 현재 레코드와 관련된 레코드 목록을 표시합니다.

관련 목록이란 정확히 무엇인가요? <apex:relatedList>를 페이지에 추가하면 어떤 기능을 수행하나요?

• 유사한 데이터 요소 목록을 가져옵니다. 예를 들어 계정의 연락처 목록입니다.
  
• 각 필드에 대한 열, 각 열 위에 헤더 등이 있는 테이블을 설정합니다.
  
• 목록의 각 항목에 대해(각 관련 연락처에 대해) 테이블에 행을 추가하고 해당 레코드의 적절한 필드로 각 열을 채웁니다.
  

<apex:detail> 구성 요소는 연락처, 사례, 기회 등과 같은 관련 레코드 목록뿐 아니라 특정 레코드의 세부 사항을 표시합니다. 항목이 너무 많을 수 있으므로 관련 목록을 제거한 다음 다른 크게 나눈 구성 요소를 사용하여 몇 개만 다시 추가할 수 있습니다.

1. relatedList="false"를 <apex:detail> 구성 요소에 추가하여 관련 목록을 생략하도록 마크업을 수정합니다.
   

<apex:detail relatedList="false"/>

계정 레코드의 세부 사항은 계속 표시되지만 관련 목록은 사라집니다.

2. <apex:detail /> 줄 아래에 다음 마크업을 추가합니다.
   

<apex:relatedList list="Opportunities" pageSize="5"/>
<apex:relatedList list="Contacts"/>

이제 페이지에 두 개의 관련 목록이 표시됩니다. 또한 해당 구성 요소의 속성만 변경하여 각 관련 목록을 독립적으로 구성할 수 있습니다.

<apex:relatedList> 구성 요소는 또 다른 크게 나눈 구성 요소이지만 <apex:detail>보다 낮은 수준입니다. <apex:detail>은 많은 관련 목록을 한 번(또는 없음)에 표시하는 반면 <apex:relatedList>는 하나씩 표시됩니다. 이를 통해 관심 있는 관련 목록만 표시할 수 있으며 각 관련 목록의 표시를 개별적으로 사용자 정의할 수 있습니다.

필요한 기능을 제공할 때 상위 수준 구성 요소를 사용하고 페이지에 표시되는 내용을 더 많이 제어해야 하는 경우 하위 수준 구성 요소를 사용합니다.

개별 필드 표시

<apex:outputField>를 사용하여 레코드의 개별 필드를 표시합니다.

페이지 레이아웃을 더 많이 제어해야 하는 경우 필드를 개별적으로 추가할 수 있습니다. <apex:outputField> 구성 요소는 정확히 그렇게 수행될 수 있도록 설계되었습니다.

1. <apex:detail/> 줄을 다음 마크업으로 변경합니다.
   

   <apex:outputField value="{! Account.Name }"/>
   <apex:outputField value="{! Account.Phone }"/>
   <apex:outputField value="{! Account.Industry }"/>
   <apex:outputField value="{! Account.AnnualRevenue }"/>

   네 개의 필드가 페이지에 추가됩니다. 그러나 형식이 예상한 것과 다를 수 있습니다. 필드 값은 레이블과 다른 형식 없이 모두 하나의 라인에 표시됩니다. 원하던 항목이 아니며, 플랫폼 스타일을 자동으로 사용하는 <apex:detail> 및 <apex:relatedList> 구성 요소와 상당히 대조됩니다. 자체적으로 <apex:outputField>는 필드의 값만 출력합니다. 하지만 이 항목을 <apex:pageBlock> 및 <apex:pageBlockSection> 구성 요소에 래핑할 경우 동작이 상당히 변경됩니다.
   
2. <apex:outputField> 줄을 <apex:pageBlock> 및 < apex:pageBlockSection> 구성 요소로 래핑하면 마크업이 다음과 같이 표시됩니다.
   

   <apex:pageBlock title="Account Details">
       <apex:pageBlockSection>
           <apex:outputField value="{! Account.Name }"/>
           <apex:outputField value="{! Account.Phone }"/>
           <apex:outputField value="{! Account.Industry }"/>
           <apex:outputField value="{! Account.AnnualRevenue }"/>
       </apex:pageBlockSection>
   </apex:pageBlock>

   더 좋습니다. 
   

<apex:pageBlock> 및 <apex:pageBlockSection> 구성 요소는 플랫폼 모양과 분위기를 활성화하는 데 필요합니다. <apex:pageBlockSection> 내 <apex:outputField>를 사용할 경우 두 개의 열 레이아웃을 채택하고, 필드 레이블을 추가하고, 필드와 레이블을 멋지게 정렬하고 스타일을 지정하는 등의 작업을 수행합니다.

<apex:outputField>는 하나의 필드만 출력하므로 잘게 나눈 구성 요소처럼 보이지만 실제로 상당히 많은 작업을 합니다. 특정 다른 구성 요소 내부에서 사용되고 있는지 알고 출력과 스타일을 적절하게 변경합니다. 형식 지정 및 표시에 대해서도 유용합니다. 연간 매출 필드는 통화 형식으로 지정됩니다. <apex:outputField>는 표시되는 필드의 데이터 형식에 자동으로 적응합니다. 페이지에 날짜, 체크리스트 또는 선택 목록 필드를 추가하고 어떤 일이 일어나는지 확인합니다.

테이블 표시

<apex:pageBlockTable>을 사용하여 페이지에 데이터 테이블을 추가합니다.

반복 구성 요소를 사용하여 Visualforce 마크업에서 동일한 작업을 수행할 수 있습니다. 반복 구성 요소는 단일 값 대신 유사한 항목 모음과 함께 작동합니다. 예를 들어 {!Account.contacts}는 계정의 연락처 목록으로 평가되는 표현식입니다. 이 표현식을 반복 구성 요소와 함께 사용하여 이러한 관련 연락처의 세부 사항이 포함된 목록 또는 테이블을 만들 수 있습니다.

1. 두 개의 <apex:relatedList/> 줄을 다음 마크업으로 변경합니다.
   

   <apex:pageBlock title="Contacts">
      <apex:pageBlockTable value="{!Account.contacts}" var="contact">
         <apex:column value="{!contact.Name}"/>
         <apex:column value="{!contact.Title}"/>
         <apex:column value="{!contact.Phone}"/>
      </apex:pageBlockTable>
   </apex:pageBlock>

   계정의 연락처를 나열하는 테이블이 선택한 열만 있는 페이지에 추가됩니다.
   

<apex:pageBlockTable>은 플랫폼 스타일로 완성된 데이터 테이블을 생성하는 반복 구성 요소입니다. 다음은 마크업에서 진행 중인 작업입니다.

• <apex:pageBlockTable>의 값 속성은 이전에 언급한 표현식 {!Account.contacts}로 설정됩니다. 다음은 <apex:pageBlockTable>로 작업하는 레코드 목록입니다.
  
• 해당 목록의 각 레코드에 대해 한 번에 하나씩 <apex:pageBlockTable>은 해당 레코드를 <apex:pageBlockTable>의 var 속성에 이름이 지정된 변수에 할당합니다. 이 경우 해당 변수의 이름은 contact입니다.
  
• 각 레코드에 대해 <apex:pageBlockTable>은 <apex:pageBlockTable>의 본문 내에 있는 <apex:column> 구성 요소 집합에서 정의된 행을 사용하여 테이블에 새 행을 구성합니다. <apex:column> 구성 요소는 차례로 현재 레코드를 나타내는 연락처 변수를 사용하여 해당 레코드의 필드 값을 가져옵니다.
  
• 루프 외부에서 <apex:pageBlockTable>은 <apex:column> 구성 요소의 필드를 사용하여 각 필드의 레이블을 조회하여 열 헤더를 만듭니다.
  

많은 내용을 다루기 때문에 반복 구성 요소는 처음부터 이해하기 어려울 수 있습니다. 지금 할 수 있는 최선의 방법은 직접 만들어보는 것입니다. <apex:pageBlockTable>을 사용하여 페이지에 기회 관련 레코드 목록을 추가합니다. 테이블에 표시할 필드를 선택합니다. <apex:pageBlockTable> 및 <apex:column>에 대한 다양한 속성을 익숙해질 때까지 찾아봅니다.

추가 정보 알아보기

크게 나눈 구성 요소를 사용하면 페이지에 많은 기능을 빠르게 추가할 수 있고 잘게 나눈 구성 요소를 사용하면 페이지의 특정 세부 사항을 더 잘 관리할 수 있습니다.

<apex:enhancedList> 및 <apex:listViews>는 <apex:relatedList> 대신 사용할 수 있는 크게 나눈 기타 구성 요소입니다. 또한 다양한 기능을 단일 태그에 담은 다른 많은 구성 요소가 있습니다. 아직 해보지 않은 경우 표준 구성 요소 참조를 확인하고 가능성의 범위가 무엇인지 확인해 보세요.

<apex:pageBlockTable>은 Salesforce Classic 스타일을 선택하는 반복 구성 요소입니다. <apex:dataTable> 및 <apex:dataList>는 스타일 지정없이 테이블과 목록을 만들기 위한 반복 구성 요소입니다. <apex:repeat>는 레코드 모음에 대한 임의의 마크업을 만드는 데 사용할 수 있는 반복 구성 요소입니다.

수동으로 만든 관련 목록에는 <apex:relatedList>에서 만든 테이블에 추가된 항목이 일부 누락되어 있습니다. 예를 들어 개별 레코드를 편집하고 삭제할 수 있는 Edit(편집)와 Del(삭제) 링크가 누락되었으며 New Contact(새 연락처) 버튼이 누락되었습니다. 이러한 사용자 인터페이스 요소를 만들려면 Visualforce, 특히 양식과 작업에 대해 좀 더 알아야 합니다. 다음에 살펴보겠습니다.

리소스

• Visualforce 개발자 가이드: Visualforce로 필드 값 표시
• Visualforce 개발자 가이드: Visualforce 구성 요소 라이브러리 사용
• Visualforce 개발자 가이드: 사용자 정의 개체에 대한 관련 목록 표시
• Visualforce 개발자 가이드: 페이지에서 데이터 테이블 구축
• Visualforce 개발자 가이드: 표준 구성 요소 참조