Excel로 저장

• Office 파일 작성 방법 (Excel 사례)

  • Excel 파일에서 변수를 출력할 부분에 {!~} 문자열을 사용하여 작성

  • Excel을 htm으로 저장

    • "부호화 -> UTF-8 인코딩" 후 원래 htm을 복사하여 저장

    • replace : '돋움, monospace;' -> 'Arial Unicode MS'

    • replace : '굴림체, monospace;' -> 'Arial Unicode MS'

    • 아래 사항 추가

• zip 파일로 압축하여 Static Resource로 추가

• Apex Code 예

 public class CtrPaymentRequestVoucher {
 	public String urlBase = 'https://cs12.salesforce.com/resource/1319787964000/Template001/';
 	public String content {get; set;} 
 	
     public CtrPaymentRequestVoucher(ApexPages.StandardController standardController) {
     	PageReference page = null;
     	
     	page = new PageReference(urlBase + 'Template001.htm');
     	content = page.getContent().toString();
     	
     	content = content.replace('{!title}', '안녕하세요');
     }
 }    

• Visualforce Page 예

  • Excel로 저장 : contentType="application/vnd.ms-excel#Template.htm"

PDF Page

PDF 개요

• Visualforce Page를 PDF로 저장

  • 최대 15MB

• PDF에 한글 출력

• PDF Page

  • portrait : 720px * 960px

  • A4 portrait : 900px * 1027px

  • landscape : 960px * 720px (?)

 
 
 size: 210mm 297mm;
 
 margin-top	 : 6.0mm;
 margin-left	 : 6.0mm;
 margin-right	: 6.0mm;
 margin-bottom	: 6.0mm;

• @page

  • @page :left { ~ }, :right, :first

 @page {
    margin-top: 10px;
    margin-right: 10px
    margin-bottom: 10px;
    margin-left: 10px;
 }

• top-left-coner, top-left, top-center, top-right, top-right-coner

• right-top, right-middle, right-bottom

• bottom-left-coner, bottom-left, bottom-center, bottom-right, bottom-right-coner

• left-top, left-middle, left-bottom

 @page {
     @bottom-center {
         content: counter(page) "/" counter(pages);
         color: green;
     }
 }

• counter(page), counter(pages), TODAY()

• Page Break

• CSS3, http://dev.w3.org/csswg/

  • Page : http://dev.w3.org/csswg/css3-page/

  • Box 위치, 크기, 색상

    • Box model : http://www.w3.org/TR/CSS2/box.html#box-dimensions

 margin : top right bottom left 
 border : width style color : thin solid black 
      border-width: thin thick medium medium; 
      border-style: dashed solid solid solid; 
          none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset 
      border-color: lime lime lime lime; 
 padding : top right bottom left 

• Text 위치, 크기, 색상

  • Text : http://dev.w3.org/csswg/css3-text/

 vertical-align: middle 방법 :  또는 line-height: 50px;
 text-align: center; text-wrap: normail; text-decoration: none;
 font-color: black; font-size: 18px; font-weight: bold;

• 참고 문헌

  • Creating Professional PDF Documents with CSS and Visualforce

  • Some PDF tricks on Visualforce: Landscape, A4, page number and more, 2011.4

  • paged Box media

동적 CSS3로 PDF 만들기

정적 CSS3로 PDF 만들기

HTML로 PDF 만들기

View - Standard Component

{|cellspacing="0" cellpadding="2" border="1" width="100%" bgcolor="#FFFFFF" align="center" 
|- |width="25%" align="center" valign="middle" style="background-color:#eee;"|Page |width="75%"|

• page, pageMessage, pageMessages

• scontrol
  align="center" valign="middle" style="background-color:#eee;"

• pageBlock, pageBlockButtons, pageBlockSection, pageBlockSectionItem, pageBlockTable

• panelBar, panelBarItem, sectionHeader

• tab, tabPanel, toolbar, toolbarGroup
  align="center" valign="middle" style="background-color:#eee;"

• dataList, dataTable, facet, column (/w inputField)

• panelGrid, panelGroup

• repeat, detail

• enhancedList, listViews, relatedList
  align="center" valign="middle" style="background-color:#eee;"

• form

• commandButton, commandLink, outputLink

• inputText, inputField, inputCheckbox, inputFile, inputHidden, inputSecret, inputTextarea

• selectList, selectOption, selectOptions, selectCheckboxes, selectRadio

• outputText, outputField, outputLabel, outputPanel, image

• inlineEditSupport (inlineEdit=“true”), param

• message, messages
  align="center" valign="middle" style="background-color:#eee;"

• actionSupport, actionStatus, actionPoller, actionFunction, actionRegion
  align="center" valign="middle" style="background-color:#eee;"

• component, attribute, componentBody, variable

• composition, define, insert

• include, includeScript, stylesheet, iframe, flash

• dynamicComponent
  align="center" valign="middle" style="background-color:#eee;"

• feed, feedWithFollowers, follow, followers
  align="center" valign="middle" style="background-color:#eee;"

• interview
  align="center" valign="middle" style="background-color:#eee;"

• detailOutputLink, listOutputLink, profileListOutputLink
  align="center" valign="middle" style="background-color:#eee;"

• articleCaseToolbar, articleList, articleRendererToolbar, articleTypeList, categoryList
  align="center" valign="middle" style="background-color:#eee;"

• attachment, emailHeader, emailTemplate, htmlEmailBody
  align="center" valign="middle" style="background-color:#eee;"

• googleAnalyticsTracking, previewAsAdmin
  align="center" valign="middle" style="background-color:#eee;"

• vote
  |}

• 페이지 호출 방법

  • https://salesforce_instance/apex/PageName

  • id=개체의 ID : 개체의 데이터 조회시 사용

   
  

• 반복문

• Button

Rerender

Visualforce Page에서 Controller에 해당하는 Apex Code 함수를 호출하여 동적으로 페이지를 갱신하기 위해서 rerender를 사용할 수 있습니다.

 
 
     {!contact.Name}
     
 
 
 
     
 
 
     
 
 
 
 
 
 
 

View - Global Variables

수식에서도 7가지의 전역 변수를 사용할 수 있습니다.

Action

• $Action

  • ApexPages.Action

  • 참조: [단추 및 링크](Salesforce - App 설정.md#단추 및 링크.md)

API

• $Api

  • $Api.Session_ID

Component

• $Component

  • 화면에서 id로 지정된 항목을 관리 합니다.

  • 주의 : 같은 PageBlock 안에서만 정상 동작 합니다.

 //--- Visualforce Page에서 id가 test로 지정된 항목의 실제 ID값 (text)을 반환 합니다.
 {!$Component.test}
 window.document.all['{!$Component.test}']('{!$Component.test}'.md).innerText

• $Component..

ComponentLabel

• $componentLabel

CurrentPage

• $CurrentPage

 {!$CurrentPage.parameters.parameter_name}
 {!$CurrentPage.parameters.caseId  !=  null}

Label

• $Label

• $Label.Site

ObjectType

• $ObjectType

  • $ObjectType.Account == Schema.SObjectType.Account.getKeyPrefix() (Apex Code에서)

  • 목록 : "/{!$ObjectType.SNB_HR_empoloyees__c}/l", /a0R/l

  • 등록 : "/{!$ObjectType.SNB_HR_empoloyees__c}/e", /a0R/e

    • 관련 목록 등록

  • 수정 : "/개체ID/e", /a0RA000000GA9mDMAT/e

  • 복제 : /a0RA000000GFfks/e?clone=1

  • 삭제 : /setup/own/deleteredirect.jsp?id=a0RA000000GFfks&delID=a0RA000000GFfks&_CONFIRMATIONTOKEN=~

  • 기타 URL

    • /a0RA000000GA9mDMAT/a : 소유권 편집

    • /a0RA000000GFfks/m : 1열로 보기

    • /a0RA000000GFfks/p : 출력 양식 보기

  • 기타 Parameter

    • retURL : 취소시 돌아갈 URL

 $ObjectType.empoloyees__c
 $ObjectType.objectname.accessible
 $ObjectType.account.fields.Name.label
 $ObjectType.Case.Fields[caseField](caseField.md).label
 
   {!$ObjectType.Contact.Fields[f](f.md).label}
   ({!$ObjectType.Contact.Fields[f](f.md).type}):
   
 

Organization

• $Organization

Page

• $Page, Page (in Apex Code)

  • {!URLFOR($Page.ViewItem03)}

Profile

• $Profile

Resource

• $Resource

SControl

• $SControl

Site

• $Site

System

• $System.OriginDateTime

User

• $User : Field는 User 개체 참조

UserRole

• $UserRole

URLFOR

{|cellspacing="0" cellpadding="2" border="1" width="100%" bgcolor="#FFFFFF" align="center" 
|- |width="20%" align="center" valign="middle" style="background-color:#eee;"|탭 |width="40%"|

• URLFOR($Action.개체.Tab, $ObjectType.개체)
  |width="40%"|

• /{!$ObjectType.개체}/o

• '/' + Schema.SObjectType.Account.getKeyPrefix() + '/o'

• /001/o
  align="center" valign="middle" style="background-color:#eee;"

• URLFOR($Action.개체.List, $ObjectType.개체)
  |

• /{!$ObjectType.개체}/l

• /001/l

• /001?fcf=00B90000002WTzh
  align="center" valign="middle" style="background-color:#eee;"

• URLFOR($Action.개체.View, 아이디)
  |

• /00B90000002WTzh
  align="center" valign="middle" style="background-color:#eee;"

• URLFOR($Action.개체.New)

• URLFOR($Action.개체.New, null, parent_id=ParentId)
  |

• /{!$ObjectType.개체}/e

• /001/e

• RecordType을 지정하여 등록 화면 생성

  • /a09/e?RecordType=012V00000008U60IAE
    align="center" valign="middle" style="background-color:#eee;"

• URLFOR($Action.개체.Edit, 아이디)
  |

• /00190000007Pa5U/e
  align="center" valign="middle" style="background-color:#eee;"

• URLFOR($Action.개체.Delete, 아이디)
  | 
  |- 
  |align="center" valign="middle" style="background-color:#eee;"|복제 
  | |

• /00190000007Pa5U/e?clone=1
  align="center" valign="middle" style="background-color:#eee;"
  }

• URLFOR 문법

  • URLFOR(resource, path)

  • URLFOR(target, id, [inputs], override)

  • inputs : name2='value2'

    • retURL=%2F00190000007Pa5U : 작업 완료시 돌아갈 URL

    • saveURL=~

    • cancelUrl=~ : 작업 취소시 돌아갈 URL

   
  

• 재정의 방지 방법

  • URLFOR를 사용할 경우 no override 파라메터로 true를 전달 합니다.

  • 원본 URL에 ?nooverride=1 을 추가 합니다.

   
  

• 기타 Salesforce에서 사용하는 URL
  {|cellspacing="0" cellpadding="2" border="1" width="100%" bgcolor="#FFFFFF" align="center" 
  |- 
  |width="20%" align="center" valign="middle" style="background-color:#eee;"|다운로드 
  |width="40%"|

• URLFOR($Action.Attachment.Download, 아이디)

  width="40%"
  align="center" valign="middle" style="background-color:#eee;"

• /00190000007Pa5U/a
  align="center" valign="middle" style="background-color:#eee;"

• /00190000007Pa5U/m
  align="center" valign="middle" style="background-color:#eee;"

• /00190000007Pa5U/p
  |}

View - StandardController

• ApexPages.StandardController

  • getId(), getRecord()

  • view(), save(), edit(), delete(), cancel()

 public with sharing class ~ {
     public CtrViewItem(ApexPages.StandardController controller) {
     }
 }

• Visualforce Page

  • /apex/pageName?id=~

• {!contact.~} : 소문자 객체명을 데이터명으로 사용

• {!$ObjectType.objectName.accessible}

View - StandardSetController

• ApexPages.StandardSetController

  • getRecords(), getSelected()

  • list(), first(), prev(), next(), last(), getHasNext(), getHasPrevious()

  • save(), cancel()

  • getPageSize(), getPageNumber(), getResultSize()

  • getFilterId(), getListViewOptions()

 public with sharing class ~ {
     public CtrViewList(ApexPages.StandardSetController controller) {
     }
 }

• Visualforce Page

• recordSetVar에서 지정한 data를 데이터 집합명으로 사용

View - Custom Controller

Custom Controller

Extendsion of Controller

• StandardController 확장

 public with sharing class BaseItemController {
     public BaseItemController(ApexPages.StandardController controller) {
     }
 }

• StandardSetController 확장

 public with sharing class BaseDataController {
     public BaseDataController(ApexPages.StandardSetController standardSetController) {
     }
 }

• Visualforce Page에서 사용

View - 필드 집합

• 각 개체 화면에서 "필드 집합" 메뉴 (Beta)

• 사용법

  • Field : Label, Type, Required, FieldPath, DBRequired

  • {!$ObjectType.Account.FieldSets.~}

View - 사용자 정의 설정

• 사용자가 정의한 설정 값(개체)을 관리 합니다.

• "설정 -> App 설정 -> 개발 -> 사용자 정의 설정" 메뉴

  • 설정 유형 : 목록. 전사적으로 설정, 계층. 사용자별, 프로파일별로 설정 (User -> Profile -> Organization)

  • 가시성 : 공용. 모두 사용, 비공개. Managed Package로 배포될 경우 보이지 않음

  • 데이터 유형 : URL, 날짜/시간, 백분율, 숫자, 이메일, 일자, 전화, 텍스트, 텍스트 영역, 통화, 확인란
    

• 제약 사항 : 최대 2MB

• 사용법

 Map ~.getAll()
 ~ = ~.getInstance(name)
 ~ = ~.getValues(name) 

 ~ = ~.getInstance()
 ~ = ~.getInstance(userId 또는 profileId)
 ~ = ~.getValues(userId 또는 profileId)
 ~ = ~.getOrgDefaults()

View - 사용자 정의 라벨

• 사용자 정의 텍스트 값

• "설정 -> App 설정 -> 작성 -> 사용자 정의 라벨" 메뉴, 다국어 지원 가능

• 제약 사항 : 최대 5000개, 1개당 최대 1000자

• 사용법

  • Name으로 지정하면 Value가 표시됨

 {!$Label.~}
 System.Label.~

View - 구성 요소

• Visualforce Page에서 재사용 가능한 공통된 디자인 패턴 (코드 블럭)

• "설정 -> App 설정 -> 개발 -> 구성 요소" 메뉴

• 제약 사항 : 하나당 최대 1MB

• 선언

 
     
     {!~} : name 또는 assignTo에 할당된 변수 사용법
       //--- 전달된 component의 본문(내용)
           //--- 본문에서 사용할 변수 할당
     
 

• Default attribute : id, rendered

• type : String, String, sObject, Apex class

• assignTo는 controller를 사용할 경우, controller의 저장할 변수를 지정함

• Visualforce Page에서 호출 방법

  • <c:~ name=‘value’ />

  • http:///apexcomponent/

   
  

• 오류에 대한 조치

  • Error: Literal value is required for attribute

    • Visualforce Page에서 Attribute로 변수에 담겨져 있는 값을 넘길 때, Component에서 받을 때 Default 값을 선언하면 오류가 발생함

View - 정적 자원

• Visualforce Page에서 참조하려는 .zip 및 .jar 파일, 이미지, 스타일시트, JavaScript 및 기타 정적 파일

• "설정 -> App 설정 -> 개발 -> 정적 자원" 메뉴

  • 캐시 관리 : 공용. 공유됨, 비공개. 본인만 사용

   
  

• 제약 사항 : 하나당 5MB, 최대 250MB

• 사용법

 {!$Resource.~} : 정적 자원의 URL
 {!URLFOR($Resource.~, ‘image/aaa.png’)} : 정적 자원이 zip 파일인 경우 aaa.png 파일의 URL

View - 탭

"설정 -> App 설정 -> 작성 -> 개체 -> 선택 -> 표준 버튼 및 링크/사용자 정의 버튼 및 링크"

View - 버튼 및 링크

"설정 -> App 설정 -> 작성 -> 개체 -> 선택 -> 표준 버튼 및 링크/사용자 정의 버튼 및 링크"

View - 필드

"설정 -> App 설정 -> 작성 -> 개체 -> 선택 -> 페이지 레이아웃"

View - 사이트

• "설정 -> App 설정 -> 개발 -> 사이트"
   
  

View - 대시보드

View - Flow

• 복잡한 사용자 인터페이스를 손쉽게 개발

• "설정 -> 개인 설정 -> 내 개인 정보 -> 개인 정보" 메뉴에서 Force.com Flow 사용자

• <flow:interview />

  • name=flowname

  • interview=“{!myflow}”

  • finishlocation=PageReference

 
 
 Map  myMap  =  new  Map();
 myMap.put('vaCaseNumber','123456');
 myflow  =  new  Flow.Interview.ModemTroubleShooting(myMap);

표준 페이지 Layout

• 사이트 : 풍부한 사용자 경험 제공 (RIA, Rich Internet Application)

• Eclipse 통합 개발 환경(IDE) 설치

Overview

로그인 후에 사용할 수 있는 Visualforce Page로 사이트에서 사용시 로그인 없이도 접속이 가능 합니다.

• 호출 URL

  • /apex/페이지명

  • 예) https://c.na7.visual.force.com/apex/test

  • 구성 요소 참조 : https://na7.salesforce.com/apexpages/apexcomponents.apexp

 
   
     //--- HTML, JavaScript 등
 
     //--- EMP_METATAG 구성 요소 추가
     
 
     //--- 정적자원 (Resource) 사용 방법
     //--- zip 형태의 resource에 포함된 qstyles_N.css 사용
     
     
   
 

• Visualforce Components

  • actionFunction : JavaScript 함수 생성

StandardController

• {!EvaluationResult__c.필드명} : StandardController에 해당하는 레코드의 필드값

Standard Extension - Single

 
 
 public class CtrUserHome {
    private final SNB_HR_empoloyees__c item;
 
    public CtrUserHome(ApexPages.StandardController controller) {
        ID id = null;
        
        if (id == null) {
            item = new SNB_HR_empoloyees__c();
        } else {
            item =  [SELECT id
                       FROM Account
                      WHERE id = :ApexPages.currentPage().getParameters().get('id')];
        }
        //--- 또는
        item = (Account)controller.getRecord();
    }
 
    public PageReference gotoTest() {  
        PageReference acctPage = new PageReference('/apex/test);          
        acctPage.setRedirect(true);
        return acctPage;
    }
 }

Standard Extension - Multi

 
 
 public class CtrUserHome {
    public ApexPages.StandardSetController controller = null;
    private final List data;
 
    public CtrUserHome(ApexPages.StandardSetController controller) {
        if (this.controller == null) {
            this.controller = new ApexPages.StandardSetController(Database.getQueryLocator(
                                  [SELECT id, name,closedate
                                     FROM Account]));
        }
        //--- 또는
        data = (List)controller.getRecords();
    }
 
    public PageReference gotoTest() {  
        PageReference acctPage = new PageReference('/apex/test);          
        acctPage.setRedirect(true);
        return acctPage;
    }
 }

목록 Layout

목록 Controller

• pageBlockButtons

• panelGrid

Table 목록

• enhancedList

  • Page에서 showHeader가 true인 경우에만 사용할 수 있음

 
   
 
  
         
  
    <p>개체에 대한 권한이 없습니다.</p>
  
 

• ListViews

 
   
 
  
         
  
    <p>개체에 대한 권한이 없습니다.</p>
  
 

• pageBlockTable

 
   
 
  
    
      
      
      
      
    
  
  
  
    <p>개체에 대한 권한이 없습니다.</p>
  
 

Text 목록

• dataTable

 
   
 
  
 	계정 목록
 	table header
 	table footer
 	
 	
   	  Name
 	  column  footer
 	  
 	
 	
 	  Owner
 	  column  footer
 	  
 	
  
          
  
    <p>개체에 대한 권한이 없습니다.</p>
  
 

• dataList

 
   
 
  
    {!item.name}, {!item.site}, 
    {!item.type}, {!item.accountNumber}
  
          
  
    <p>개체에 대한 권한이 없습니다.</p>
  
 

배열 표시

• List, Map에 저장된 data 표시 방법

 
   
 
  
    ,
    ,
    ,
    

  
          
  
    <p>개체에 대한 권한이 없습니다.</p>
  
 

개체 Layout

개체 정보

• detail

 
  
         
  
    <p>개체에 대한 권한이 없습니다.</p>
  
 

• pageBlockSection / inputField, outputField

 
   
  
  
    
      
      
      
      
    
  
  
 
  
          
  
    <p>개체에 대한 권한이 없습니다.</p>
  
 

• apex:dynamicComponent

개체 필드

관련 목록

• relatedList

Mobile Page

• Mobile 확인을 위한 UserAgent 체크

 String userAgent = null;
 
 userAgent = ApexPages.currentPage().getHeaders().get('USER-AGENT');
 if (userAgent.contains('iPhone')) {
 } else if(userAgent.contains('Android')) {
 } else if(userAgent.contains('BlackBerry')) {
 }

• 모바일 화면의 높이를 계산

 function getScreenHeight() {
    var orientation 	= null;
     
    try {
        orientation 	= jQuery.event.special.orientationchange.orientation();
     } catch (ex) {
        orientation = "portrait";
     }
    var port			= orientation === "portrait",
    winMin			= port ? 480 : 320,
    screenHeight	= port ? screen.availHeight : screen.availWidth,
    winHeight		= Math.max( winMin, $( window ).height() ),
    pageMin			= Math.min( screenHeight, winHeight );
 
    return pageMin;
 }

VF Tips

DatePicker

<apex:inputText id="smsReserveDate" value="{!smsReserveDate}" onfocus="DatePicker.pickDate(true, this.id, false);" style="width: 75px;" /> 
href="javascript:DatePicker.insertDate('2012. 4. 12', '{!$Component.smsReserveDate}', true);">2012. 4. 12 

참고 문헌

• 세일즈포스닷컴

• AppExchange

• SuccessForce

• Developer.force.com

지원 업체

{{지원업체}} 
[[Category:Salesforce|Category:Salesforce]]
[[Category:Cloud|Category:Cloud]]분류: CRM