Visualforce 기초 02

 

 

 

목차

• Visualforce Standard Controller
• 레코드, 필드 출력하기
• Form 사용하여 레코드 입력하기

 

 

 

 

 

---

Visualforce Standard Controller

 

 

 

Visualforce는 기존의 MVC(Model-View-Controller) 패러다임 사용
View :  컨트롤러와 상호작용, 컨트롤러는 페이지에 기능 제공
Controller : Model(데이터베이스)과 상호작용, View에서 표시할 수 있는 데이터 사용 / 변경 사항 DB로 푸시

 

Standard Controller를 확장해 새로운 기능 추가

또는

처음부터 맞춤형 Controller 생성 O

 

 

 

Record ID를 Request URL에 추가하기

1) Visualforce Page 'Account Summary' 생성

<apex:page standardController="Account">
    <apex:pageBlock title="Account Summary">
        <apex:pageBlockSection >
            Name: {! Account.name } <br/>
            Phone: {! Account.Phone } <br/>
            Industry: {! Account.Industry } <br/>
            Revenue: {! Account.AnnualRevenue } <br/>
            //custom object & field의 경우 : {! customObject__c.customField__c }
            
            //관련 레코드 표시하기 {! Account.Owner.필드명 }
            Account owner: {! Account.Owner.Name} <br/>
        </apex:pageBlockSection>
    </apex:pageBlock>
</apex:page>

 

미리 보기에서 로드하기

2) Account Summary - 미리보기 - URL 수정 ( ~~~devconsole=1 다음에 &id=<<id 입력>> )

 

 

Lightning Experience context에서 페이지 미리보기

2) Account 페이지에서 자바스크립트 콘솔 열기( Ctrl+Shift+J )

3) 아래 코드 입력

$A.get("e.force:navigateToURL").setParams(
    {"url": "/apex/pageName"}).fire();
//pageName에 페이지명 적기
    
또는

$A.get("e.force:navigateToURL").setParams(
    {"url": "/apex/pageName?&id=00141000004jkU0AAI"}).fire();
//pageName에 페이지명, id에 찾고싶은 id 적기

 

출력 예시

 

 

 

 

 

 

 

---

Record, Field 출력하기

 

 

 

Output Component

레코드 세부 사항 출력

< apex:detail />

 

세부 사항에서 관련 목록 표시 X

< apex:detail relatedList = "false" >

 

관련 목록 표시

< apex:relatedList >

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

 

개별 필드 표시

< apex:outputField >

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

 

테이블 표시

< apex:pageBlockTable >

<apex:page standardController="Account">
    <apex:detail relatedList="false"/>
    <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:page>

 

 

 

 

 

 

 

---

Form을 사용하여 데이터 입력하기

 

 

 

Visualforce Standard Controller와 < apex:form >을 사용하면 다음을 자동으로 수행 :

• 편집할 레코드를 찾아 데이터베이스에서 검색
• 해당 레코드 데이터를 페이지에 편집 폼으로 삽입
• 변경된 데이터가 포함된 양식 제출 받음
• 새 값 확인
• 유효한 변경 사항 데이터베이스에 다시 저장
• 변경 사항을 제출하는 사람에게 적절한 메세지 제공

 

 

 

< apex:inputField >에 Account 레코드 출력하고 변경 사항 저장하기

아래 코드 입력 후 Preview URL에 'id=표시할 id값' 입력!

<apex:page standardController="Account">
    <h1>Edit Account</h1>
    <apex:form>
        <apex:inputField value="{! Account.Name }"/>
        <apex:commandButton action="{! save }" value="Save" />
    </apex:form>
</apex:page>

 

< apex:form >

페이지 작업의 일부로, 서버로 다시 보낼 수 있는 것으로 내부의 모든 것을 패키징 하는 Visualforce component.

세일즈포스로 데이터를 다시 보내야 하는 경우 대부분 <apex:form> 내부에서 수행

 

< apex:inputField >

연결된 레코드 데이터 필드에 대한 onscreen form 만듦

value 속성에서 관련 필드를 참조하는 표현식 제공해 이를 수행

 

< apex:commandButton >

페이지의 유저 인터페이스에 버튼 추가

버튼 클릭하면 작업 실행됨

제공된 표현식에서 호출될 action 메소드 참조해 연결

 

 

 

필드 Label & 플랫폼 스타일 & Form 에러 메세지

< apex:pageBlock > & < apex:pageBlockSection >

<apex:page standardController="Account">
    <apex:form>
    <apex:pageBlock title="Edit Account">
    	<apex:pageMessages />	//에러 메세지 출력
        <apex:pageBlockSection>
            <apex:inputField value="{! Account.Name }"/>
            <apex:inputField value="{! Account.Phone }"/>
    	    <apex:inputField value="{! Account.Industry }"/>
    	    <apex:inputField value="{! Account.AnnualRevenue }"/>
        </apex:pageBlockSection>
        <apex:pageBlockButtons>
            <apex:commandButton action="{! save }" value="Save" />
        </apex:pageBlockButtons>
    </apex:pageBlock>
    </apex:form>
</apex:page>

 

 

관련 레코드 편집

<apex:pageBlock title="Contacts">
    <apex:pageBlockTable value="{!Account.contacts}" var="contact">
        <apex:column>
            <apex:outputLink
                value="{! URLFOR($Action.Contact.Edit, contact.Id) }">
                Edit
            </apex:outputLink>
            &nbsp;
            <apex:outputLink
                value="{! URLFOR($Action.Contact.Delete, contact.Id) }">
                Del
            </apex:outputLink>
        </apex:column>
        <apex:column value="{!contact.Name}"/>
        <apex:column value="{!contact.Title}"/>
        <apex:column value="{!contact.Phone}"/>
    </apex:pageBlockTable>
</apex:pageBlock>

 

 

 

 

 

 

 

 

참조 : Trailhead - Visualforce basics

Visualforce 기본 사항