mokochi's Logs

본 포스트에서는 사용자 정의 라벨(Custom Labal)를 사용하는 방법에 대해 알아보겠습니다.

# 목차

• 사용자 정의 라벨(Custom Label) 이란?

• 사용자 정의 라벨(Custom Label) 등록

• 사용자 정의 라벨에 번역 기능 추가

• 사용자 정의 라벨을 Apex 와 Visualforce에서 사용하는 방법

• 번역 기능 실행 결과

# 사용자 정의 라벨(Custom Label) 이란?

개발자는 사용자 정의 라벨을 사용하여 도움말 텍스트 및 오류 메시지 등의 정보를 자동으로 사용자의 모국어로 번역, 표시하는 다국어 프로그램을 만들 수 있습니다.

예를 들어, 사용자 정의 라벨을 이용해서 "사과" 라는 단어를 표시하고 있는 페이지가 있다고 가정했을 때, 

사용자의 언어(로그인 중인 유저의 언어)를 영어로 바꾸면 자동으로 "사과"에서 "Apple"로 표시가 됩니다.

언어는 Salesforce에서 지원되는 모든 언어로 번역이 가능합니다.

하지만, 딱히 번역 기능이 필요하지 않은 경우에는 고정 텍스트를 표시하기 위한 수단만으로도 사용하기도 합니다.

예를 들어, 다수의 페이지(화면)에 똑같은 항목명 (ex: 이름, 나이, 등)을 표시할 경우,

사용자 정의 라벨 하나로 편하게 수정, 표시가 가능합니다.

# 사용자 정의 라벨(Custom Label) 등록

사용자 정의 라벨은 [설정 > 사용자 인터페이스 > 사용자 정의 라벨]을 선택해 "사용자 정의 라벨" 화면으로 이동합니다.

"사용자 정의 화면" 에서 [새 사용자 정의 라벨] 버튼을 눌러 "사용자 정의 라벨 편집" 화면을 표시합니다.

그

그 후, "사용자 정의 라벨 편집" 화면에서 정보를 입력한 후, [저장] 버튼을 눌러 라벨을 저장합니다.

여기서는 말머리에서 예를 든 "사과"를 예시로 사용하겠습니다.

☞ 입력 항목 정보

• 짧은 설명 : 라벨에 대한 간단 설명 (임의)

• 이름 : Apex코드 등에서 사용될 API 참조명

• 언어 : 사용자(로그인 중인 유저)의 언어가 기본값으로 지정되어 있음

• 보호된 구성요소 : 라벨을 보호 구성요소로 설정

• 값 : 표시할 텍스트 데이터

위 방법으로 "사용자 정의 라벨"을 등록할 수 있습니다. 

하지만 현재로서는 번역 기능이 추가되지 않은 단순 텍스트를 표시하기 위한 라벨인 상태이기 때문에, 

번역 기능을 따로 추가해 줄 필요가 있습니다.

(번역 기능을 사용하지 않는 경우는 이대로 사용해도 무방)

# 사용자 정의 라벨에 번역 기능 추가

먼저, [설정 > 사용자 인터페이스 > 번역 워크벤치 > 번역]을 클릭해 "번역" 화면을 표시합니다.

그 후, [활성화] 버튼을 눌러 사용자 정의 라벨의 번역 기능을 활성화 합니다.

번역 기능이 활성화 되면 "번역 언어 설정" 화면이 자동으로 표시되며, 이 곳에서 사용자 정의 라벨에서 번역 기능을 추가할 언어를 설정해주어야 합니다. [추가] 버튼을 눌러 언어를 추가합니다.

본 포스트에서는 영어, 일본어만 추가하겠습니다.

번역할 언어의 설정이 끝났다면, 다시 [설정 > 사용자 인터페이스 > 사용자 정의 라벨]을 클릭해 "사용자 정의 라벨" 화면을 표시합니다.

그 후, 번역 기능을 추가할 사용자 정의 라벨의 이름 링크(여기서는 LabelApple)를 클릭해 상세화면을 표시합니다. 

사용자 정의 라벨의 상세화면에 번역란이 생긴 것을 확인하실 수 있을겁니다.

번역란에서 [새로 만들기] 버튼을 클릭해 "번역 편집" 화면을 표시, 번역할 정보를 입력한 뒤 [저장] 버튼을 눌러 사용자 정의 라벨의 번역 정보를 저장합니다.

번역 정보까지 등록이 완료되면, 사용자 정의 라벨의 상세화면은 다음과 같이 표시됩니다.

이것으로 사용자 정의 라벨을 이용한 텍스트 자동 번역 기능 설정이 완료되었습니다.

# 사용자 정의 라벨을 Apex와 Visualforce에서 사용하는 방법

사용자 정의 라벨을 코드상에서 사용하는 방법은 다음과 같습니다.

※ Apex

// System.Label.[사용자 정의 라벨 이름]
ex) String labelValue = System.Label.LabelApple;  // 결과: labelValue = "사과"

※ Visualforce 

<!-- $Label.[사용자 정의 라벨 이름] -->
ex) <apex:outputText value="{!$Label.LabelApple}"/>

# 번역 기능 실행 결과

코드 예시)

※ Apex 컨트롤러

public class CntrlCustomLabelTrans {

	// 화면에 표시할 사용자 정의 라벨의 텍스트 값 변수
    public String labelTxt { get; set; }

    public CntrlCustomLabelTrans() {
        
        // 사용자 정의 라벨의 텍스트 값 습득
        labelTxt = System.Label.LabelApple;
    }
}

※ Visualforce 페이지

<apex:page controller="CntrlCustomLabelTrans" sidebar="false">
    <apex:form id="form">
        <apex:pageBlock>
            <apex:pageBlockSection columns="1" showHeader="true" collapsible="true" title="사용자 정의 라벨 테스트">
	        	<apex:pageBlockSectionItem>
	                <apex:outputText value="Apex 컨트롤러에서 사용자 정의 라벨 표시"/>
	                <apex:outputText value="{!labelTxt}"/>
            	</apex:pageBlockSectionItem>

            	<apex:pageBlockSectionItem>
                	<apex:outputText value="Visualforce 내에서 사용자 정의 라벨 표시"/>
                	<apex:outputText value="{!$Label.LabelApple}"/>
            	</apex:pageBlockSectionItem>
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>
</apex:page>

☆표시 결과(한국어)

번역 기능을 확인하기 위해, [설정 > 사용자 > 사용자]를 클릭해 "사용자" 화면을 표시합니다.

그 후, 로그인 중인 유저의 이름 왼쪽에 표시된 편집 링크를 클릭해 "사용자 편집 화면"을 표시합니다.

"사용자 편집 화면"의 아래를 보면, 언어를 변경할 수 있는 언어 선택란이 있습니다.

언어를 영어 또는 일본어로 바꾸어 준 후, [저장] 버튼을 눌러 저장합니다.

언어 설정이 완료된 후, 다시 한 번 페이지를 표시하면 번역된 텍스트가 표시됩니다.

☆표시 결과(영어)

☆표시 결과(일본어)

주의할 점은 사용자 정의 라벨에 설정한 언어와 그 텍스트 값으로만 표시되기 때문에, 현재 상황에서 중국어 등을 선택하면 한국어인 "사과"가 그대로 표시됩니다.

따라서 필요에 따라 언어 설정을 추가해야만 합니다.

이상으로 사용자 정의 라벨(Custom Label)의 사용법에 대해 알아보았습니다.

사용자 정의 라벨을 사용할 때의 주의점 중 하나는, 개발한 애플리케이션을 판매하기 위해 패키지를 만들었을 경우

즉, 관리 패키지를 생성한 경우, 사용자 정의 라벨의 텍스트값(여기서는 "사과")의 변경이 불가능합니다.

따라서, 패키지를 제공하여 거래처에 따라 서로 다른 항목명 등을 사용할 목적으로 사용자 정의 라벨을 사용하는 것은 바람직하지 않은 방법입니다.

현재, 패키지에 관련된 포스팅이 없기 때문에 무슨 말인지 이해하기 힘드실 수도 있지만, 차차 패키지 관련 포스트도 업로드 할 예정이기 때문에 그 때 다시 한 번 전체적으로 주의점을 나열해 볼 생각입니다.

(언제가 될지는 모르겠지만)

참고) help.salesforce.com/articleView?id=cl_about.htm&type=5 - Trailhead Community - Custom Labels

본 포스트에서는 화면을 pdf로 표시하는 방법에 대해 알아보겠습니다.

pdf 표시는 주로 시스템에서 계약서, 청구서 등과 같은 장표(?)를 표시, 출력하기 위해 사용합니다.

( 일본에서는 계약서 같은 것들을 통틀어 장표(帳票)라고 하는데 한국에서도 쓰는 말인가..? 서류인가? )

# Visualforce 페이지를 pdf 화면으로 설정하기

Visualforce 페이지를 pdf 페이지로 설정하기 위해서는 <apex:page> 태그에 renderAs="pdf" 속성을 추가해주면 됩니다.

<apex:page standardController="Account" renderAs="pdf" showHeader="false" applyHtmlTag="false">

<!-- showHeader : Salesforce 탭 헤더 표시 유무 -->
<!-- applyHtmlTag : Visualforce에서 자동으로 html 태그를 생성할지에 대한 유무 -->

그럼 이것으로 끝난건가요?

아니죠. 우리는 용도에 맞게 페이지를 설정할 필요가 있습니다. 예를 들어 A4용지 사이즈의 세로형 이라던가..

페이지의 규격 등의 설정에는 CSS가 사용됩니다.

<style>
    body {
        // 폰트 설정
        font-family:Arial;
        // font-family:Arial Unicode MS; (일본어 표시가 가능한 유일한 폰트)
    }
    @page {
        // 페이지 설정
        size:A4 portrait;       // A4 세로
        // size:A4 landscape;   // A4 가로
        margin:10mm;            // 상하좌우 여백

        @top-left {
            // 헤더(header) 표시
            font-family: Arial;
            content: "헤더 표시";
        }

        @bottom-center {
            // 풋터(footer)표시
            // [페이지 번호 / 총 페이지 수] 표시
            content: "Page: " counter(page) " / " counter(pages);
        }

        @top-center {
            // 뒷 배경 넣기
            font-family: Arial
            content: "Hello PDF World!";
            white-space: pre;
            font-size:2em;
            font-weight:bold;
            color:#ccc;
            padding-top:300px;
        }
    }
    @media print {
        // 화면 인쇄용 CSS 설정
        // 이곳에서 지정한 CSS는 화면을 인쇄할 때 사용
        body {}
    }
    @media screen {
        // 화면 출력용 CSS 설정
        // 이곳에서 지정한 CSS는 화면을 표시할 때 사용
    }

    .pagebreak {
        // 다음 화면으로 넘기기
        page-break-before:always;
    }
</style>

# pdf 페이지 표시하기

이곳에서는 버튼을 클릭하여 pdf 페이지를 표시하는 샘플을 작성하겠습니다.

1. Apex 컨트롤러에서 pdf 페이지 표시하기

☞ Apex Controller

/**
 * @description 버튼 클릭 이벤트로 pdf 페이지를 표시
 */
public PageReference openPdfPage() {

    // pdf 페이지를 지정
    return Page.DspPdf;
}

☞ Visualforce page

<apex:commandButton value="PDF 표시" action="{!openPdfPage}"/>

2. Visualforce에서 pdf 표시하기

☞ Visualforce page

<apex:commandButton value="PDF 표시" action="{!URLFOR($Page.DspPdf)}"/>

3. Apex에서 URL지정, Visualforce에서 javascript를 통해 pdf 표시하기

☞ Apex Controller

/**
 * @description PDF 페이지 표시용 컨트롤러
 */
public class CntrlDspPdf {

    // PDF 페이지 URL
    public String pdfPageUrl { get; set; }

    /**
     * @description 생성자
     */
    public CntrlDspPdf() {

        // PDF 페에지의 URL 습득
        pdfPageUrl = Page.DspPdf.getUrl();
    }
}

☞ Visualforce page

<script type="text/javascript">
    /**
     * @description VF페이지를 팝업으로 표시
     * @param targetUrl 표시할 페이지의 URL
     */
    function printCliamBill(targetUrl) {

        // PDF페이지를 팝업으로 표시
        var printTarget = window.open(targetUrl, 'PDF Page', 'width=1024,height=800,left=0,top=0');
    }
</script>

<apex:commandButton value="PDF 표시" onclick="printPdf('{!targetUrl}')"/>

이상으로 Visualforce를 PDF 형식으로 출력하는 방법에 대해 알아보았습니다.

Salesforce AppExchange(Salesforce store)에서 유료로 배포되는 "SkyVisualEditor"라는 것을 사용하면

VIsualforce 페이지나 청구서 같은 pdf 서류 등을 쉽게 작성할 수 있습니다.

(현재 회사에서는 돈 아낀다고 다 직접 만들고 있는 것이 스트레스지만..)

참고) developer.salesforce.com/docs/atlas.en-us.226.0.pages.meta/pages/pages_output_pdf_renderas.htm - Visualforce Developer Guide - Render a Visualforce Page as a PDF File

본 포스트에서는 Apex 내에서 Email을 송신하는 방법에 대해 설명하겠습니다.

Apex에서 메일을 송신하기 위해서는 Salesforce에서 제공하는 SingleEmailMessage 클래스를 사용하면 됩니다.

# 메일 작성 및 송신 방법

public void sendMail(){

    // mail 인스턴스 생성
    Messaging.SingleEmailMessage mail = new Messaging.SingleEmailMessage();

    // 받는 사람 주소 설정(To)
    mail.setToAddresses(new List<String>{ 'toAddr@abc.com' });
    
    // 받는 사람 주소 설정(Bcc)
    //mail.setBccAddresses(new List<String>{ 'bccAddr@abc.com' });
    
    // 받는 사람 주소 설정(cc)
    //mail.setCcAddresses(new List<String>{ 'ccAddr@abc.com' });

    // 제목
    mail.setSubject('메일 타이틀');

    // 본문
    mail.setPlainTextBody('메일 송신 테스트');

    // 보내는 사람 이름 설정
    mail.setSenderDisplayName('Salesforce Support');

    // 메일 송신
    Messaging.sendEmail(new Messaging.Email[] { mail });  
}

☞ 실행 결과

# 샘플 코드

간단하게 화면에서 메일 주소, 제목, 본문을 작성하고 버튼으로 송신하는 화면을 작성하겠습니다.

소스 코드는 아래에서 확인 가능합니다.

https://github.com/mokochi/Blog_SFDC_SendMail

☞ 실행 결과

이상으로 Apex 내에서 Email을 송신하는 방법에 대해 알아보았습니다.

Email 송신에 대한 부분은 따로 Utility 클래스로 작성해서 공용으로 사용하면 편하게 사용하실 수 있습니다.

참고) https://developer.salesforce.com/docs/atlas.en-us.226.0.apexcode.meta/apexcode/apex_classes_email_outbound_single.htm - Apex Developer Guide - SingleEmailMessage

본 포스트에서는 Visualforce를 통한 csv파일 출력 방법에 대해 알아보겠습니다.

csv에 출력할 내용은 Apex 컨트롤러에서 작성하고, csv 출력 기능은 Visualforce 에서 템플릿을 작성합니다.

Apex 코드

/**
 * @description csv 출력 컨트롤러
 */
public with sharing class CntrlCsvDownload {

    // 개행 코드
    final String CSV_LINEFEED = '\r\n';

    /**
     * @description csv 출력 관련 변수
     */
    public String csvFileName { get ; set; }    // csv파일명
    public String csvHeader { get; set; }       // csv헤더
    public List<String> csvBodyList { get; set; }  // csv본문

    /**
     * @description 생성자
     */
    public CntrlCsvDownload() {

        csvBodyList = new List<String>();
    }

    /**
     * @description csv 출력
     */
    public PageReference exportToCsv() {

        // 파일명 : Member[년월일].csv
        csvFileName = 'Member' + Datetime.now().format('yyyyMMdd') + '.csv';

        // csv헤더 설정
        csvHeader = '회원번호,회원명,회원등록일,전화번호,이메일주소' + CSV_LINEFEED;

        // 회원 레코드 습득
        List<Member__c> memberList = [SELECT Id, Name, MemberNo__c, RegistDate__c, Phone__c, Email__c FROM Member__c];

        for (Member__c member : memberList) {

            // csv 본문 생성
            String body = convertNullToBlank(member.MemberNo__c)
                            + ',' + convertNullToBlank(member.Name)
                            + ',' + convertNullToBlank(member.RegistDate__c)
                            + ',' + convertNullToBlank(member.Phone__c)
                            + ',' + convertNullToBlank(member.Email__c);

            // csv 본문에서 행의 마지막에 개행코드를 추가(행 구분)
            body += CSV_LINEFEED;

            // csv 출력에 사용할 본문 리스트에 추가
            csvBodyList.add(body);
        }

        // csv 출력 템플릿 페이지 호출
        return Page.ExportToCsvTemplate.setRedirect(false);
    }

    /**
     * @description csv본문 출력시, null을 공백문자로 표시하기 위해 치환
     * @param str 확인할 문자열
     * @return 공백 또는 문자열
     */
    private String convertNullToBlank(String str) {

        return (String.isBlank(str)) ? '' : str;
    }

    /**
     * @description csv본문 출력시, null을 공백문자로 표시하기 위해 치환
     * @param dt 확인할 날짜 변수
     * @return 공백 또는 날짜
     */
    private String convertNullToBlank(Date dt) {

        // 날짜(년월일) 또는 공백
        // String.leftPad(prm1: 문자수, prm2: 남은 문자수가 빈칸인 경우, 채워 넣을 지정 문자)
        return (dt == null) ? '' : String.valueOf(dt.year()) + String.valueOf(dt.month()).leftPad(2, '0') + String.valueOf(dt.day()).leftPad(2, '0');
    }
}

Visualforce 페이지

<apex:page controller="CntrlCsvDownload" sidebar="false">
    <apex:form id="form">
        <apex:pageBlock title="CSV출력">
            <!-- CSV 출력 실행 버튼 -->
            <apex:commandButton value="CSV출력" action="{!exportToCsv}"/>
        </apex:pageBlock>
    </apex:form>
</apex:page>

Visualforce 페이지(csv 출력 템플릿)

<apex:page controller="CntrlCsvDownload" cache="true" contentType="text/csv#{!csvFileName};charset=UTF-8">
    <!-- csv헤더(첫번째 행) -->
    <apex:outputText value="{!csvHeader}"/>

    <!-- csv 본문을 1행씩 출력 -->
    <!-- apex:repeat : List를 1개의 요소씩 반복 -->
    <apex:repeat value="{!csvBodyList}" var="body">
        <apex:outputText value="{!body}"/>
    </apex:repeat>
</apex:page>

☞ 실행 결과

이상으로 Visualforce을 통해 csv 파일을 출력하는 방법을 알아 보았습니다.

이렇게 해서 간편하게 csv 파일을 출력할 수 있지만, 문제가 되는 부분이 있습니다.

Gorvoner Limits 중, "1개의 컬렉션에 1000개 까지 출력 가능" 이라는 제한이 있기 때문에,

csv 본문을 표시할 때 리스트 내에 요소가 1000개 이상이 되는 경우 예외가 발생하게 됩니다.

본인은 지금까지 이 방법을 회피하기 위해서 1000개 까지 저장 가능한 컬렉션(리스트 등)을 여러개 정의하여,

각 리스트 순서대로 출력시키는 방법을 사용하고 있습니다만, 상당히 불편한 방법입니다.

(혹시 고수분들 중, 좋은 방법이 있다면 알려주시길 바랍니다.)

Visualforce로 화면을 작성할 때, Visualforce 고유의 태그나 속성만을 이용해서는 구현하기 힘든 부분들이 있습니다.

예를 들면, 버튼 클릭 이벤트가 처리되기 이전에, 확인용 dialog를 표시한다던가, 체크 박스를 일괄 선택/해제 하는 기능 구현 한다던가 등등 이 있습니다.

이러한 경우, Javascript를 연동하면 추가적인 기능을 구현할 수 있습니다.

이번 포스팅에서는 간단히 Visualforce 개발 시, javascript를 연동하여 사용하는 방법에 대해서 설명하겠습니다.

# 목차

• Javascript 함수 정의 방법

• Visualforce 태그 내에서 Javascript 함수를 호출하는 방법

• Javascript 함수 내에서 Apex 컨트롤러에 정의한 변수 및 함수 사용 방법

• Javascript 사용 예시

# Javascript 함수 정의 방법

Visualforce 내에서 javascript 코드를 사용하는 방법은 <script type="text/javascript"> 태그 내부에 함수를 작성하는 것으로 사용할 수 있습니다.

<script type="text/javascript">
  // javascript methods 정의
</script>

또는 Visualforce 태그 내에서 직접적으로 정의하는 것도 가능합니다.

<apex:commandButton onclick="[JavaScript Code]"/>

# Visualforce 태그 내에서 Javascript 함수를 호출 하는 방법

정의한 javascript를 호출하기 위해서는 Visualforce의 각 태그의 속성 중, javascript 코드를 호출하는 onclick, oncomplete 등과 같은 속성에 지정하여 호출해야 합니다.

하지만, Visualforce의 모든 태그가 javascript 를 호출 할 수 있는 속성을 갖고 있는 것은 아니니, 항상 개발자 가이드를 확인하여 사용할 수 있는 속성을 파악하는 것이 중요합니다.

여기서는 <apex:commandButton> 태그를 예시로 사용하겠습니다. 

<apex:page>
    <script type="text/javascript">
        function jsMethod() {
            // javascript 코드
        }
    </script>

    <apex:form id="form">
        <!-- javascript 호출용 버튼 -->
        <apex:commandButton value="JS호출" onclick="jsMethod()"/>

        <!-- 아래의 방법으로도 javascript 코드 실행 가능 -->
        <!-- <apex:commandButton value="JS호출" onclick="[javascript 코드]"/> -->
    </apex:form >
</apex:page>

commandButton의 속성은 다음의 개발자 가이드를 확인해주세요.

Visualforce 개발자 가이드 - apex:commandButton

# Javascript 함수 내에서 Apex 컨트롤러에 정의한 변수 및 함수 사용 방법

Apex 컨트롤러에서 정의한 변수나 함수를 호출하기 위해서는, 먼저 각 변수와 함수의 정보를 Visualforce 내에 지정할 필요가 있습니다.

예시로 다음과 같은 Apex 컨트롤러 클래스가 있습니다.

/**
 * @description Visualforce Javascript 연동 페이지의 컨트롤러
 */
public with sharing class CntrlVfCallJs{

    /**
     * @description javascript에서 호출할 변수
     */
    public String myVariable { get; set; }

    /**
     * @description 생성자
     */
    public CntrlVfCallJs() {

        myVariable = 'Hello World';
    }

    /**
     * @description javascript에서 호출할 변수
     */
    public void myMethod() {

        // 화면에 메세지 표시
        ApexPages.addMessage(new ApexPages.Message(ApexPages.Severity.INFO, 'Apex method called'));
    }
}

Visualforce에서 Apex의 변수와 메서드를 지정하는 방법은 다음과 같습니다.

    <!-- Apex 변수 지정 -->
    <apex:inputHidden id="myVar" value="{!myVariable}"/>
    
    <!-- Apex 메서드 지정 -->
    <apex:actionFunction name="myMthd" action="{!myMethod}"/>

위에서 지정한 Apex 변수와 메서드를 호출하는 방법은 다음의 샘플 코드와 같습니다.

<!-- Apex의 변수를 사용하기 위해 해당 Apex클래스를 "controller" 속성을 지정 -->
<apex:page controller="CntrlVfCallJs" sidebar="false">

  <script type="text/javascript">
    function callApexVarMethod() {
        // Visualforce에 지정한 Apex 변수를 javscript 내에서 습득(apex:inputHidden에 지정한 id 속성으로 대상을 지정)
        var myVar = document.getElementById('{!$Component.form.myVar}').value;
        // 역으로, Apex 변수의 내용을 변경하는 것도 가능
        // document.getElementById('{!$Component.form.myVar}').value = 'Bye World';

        // Apex 메서드 실행(apex:actionFunction에 지정한 name 속성으로 대상을 지정)
        myMthd();
    }
  </script>

  <apex:form id="form">
    <!-- 화면 메시지 표시란 -->
    <apex:pageMessages id="messagearea" showDetail="false"/>

    <!-- Apex 변수 지정 -->
    <apex:inputHidden id="myVar" value="{!myVariable}"/>
    <!-- Apex 메서드 지정 -->
    <apex:actionFunction name="myMthd" action="{!myMethod}"/>

    <apex:pageBlock title="Apex 변수 및 메서드 호출">
        <!-- 화면 메시지 표시란 -->
        <apex:pageMessages id="messagearea" showDetail="false"/>

        <apex:commandButton value="JS호출" oncomplete="callApexVarMethod()"/>
    </apex:pageBlock>
  </apex:form>
</apex:page>

☞ 버튼 클릭 결과 화면

# Javascript 사용 예시

 1. 실행 확인 dialog 표시 

<apex:page>
    <script type="text/javascript">
        function checkConfirm() {
            if(confirm('javascript 호출 테스트')){
                return true;
            }
            return false;
        }
    </script>

    <apex:form id="form">
        <!-- javascript 호출용 버튼 -->
        <apex:commandButton value="JS호출" onclick="checkConfirm()"/>

        <!-- 아래의 방법으로도 javascript 코드 실행 가능 -->
        <!-- <apex:commandButton value="JS호출" onclick="if(confirm('javascript 호출 테스트')){return true;}; return false;"/> -->
    </apex:form >
</apex:page>

☞ 버튼 클릭 결과 화면

 2. 체크박스 전체 선택/ 전체 해제 

Apex 컨트롤러 샘플

/**
 * @description javascript로 체크박스 전체 선택/해제 컨트롤러
 */
public with sharing class CntrlAllCheckByJs {

    /**
     * @description 체크 박스를 표시하기 위한 Wrapper 리스트
     */
    public List<MemberWrapper> memWrapperList { get; set; }

    /**
     * @description 체크박스를 표시하기 위한 Wrapper 클래스
     */
    private class MemberWrapper {

        public Boolean isSelected { get; set; }     // 체크 박스에 사용할 Boolean형
        public String memName { get; set; }         // 회원 이름
        // 개체 변수도 사용 가능
        // 예) public Member__c member { get; set; }

        /**
         * @description 생성자
         */
        public MemberWrapper() {

            isSelected = false;
        }
    }

    /**
     * @description 생성자
     */
    public CntrlAllCheckByJs() {

        memWrapperList = new List<MemberWrapper>();

        for (integer i = 0; i < 10; i++) {

            MemberWrapper memWrapper = new MemberWrapper();

            memWrapper.memName = '홍길동' + i;

            memWrapperList.add(memWrapper);
        }
    }
}

Visualforce 샘플

<apex:page controller="CntrlAllCheckByJs" sidebar="false">
    <script type="text/javascript">
        /**
         * @description 체크 박스의 전체 선택/해제
         */
        function checkAll(cb,cbid) {
            var inputElem = document.getElementsByTagName("input");

            for (var i =0 ; i < inputElem.length; i++) {
                if(inputElem[i].id.indexOf(cbid) != -1){
                    inputElem[i].checked = cb.checked;
                }
            }
        }
    </script>

    <apex:form id="form">
        <apex:pageBlock title="체크박스 전체 선택/해제">

            <!-- 리스트를 표 형식으로 출력 -->
            <apex:pageBlockTable value="{!memWrapperList}" var="member" style="width:10%;">

                <apex:column style="width:2%; text-align:center;">
                    <!-- 헤더 부분에 체크박스 추가 -->
                    <apex:facet name="header">
                        <apex:inputCheckbox id="checkAll" onclick="checkAll(this, 'selectRow')"/>
                    </apex:facet>
                    <!-- 데이터 부분에 체크박스 추가 -->
                    <apex:inputCheckbox id="selectRow" value="{!member.isSelected}"/>
                </apex:column>

                <apex:column value="{!member.memName}" headerValue="회원 이름" style="width:8%;"/>
            </apex:pageBlockTable>
        </apex:pageBlock>
    </apex:form>
</apex:page>

☞ 결과 화면

 2-1. 체크 박스로 선택한 요소의 정보 습득 

2의 코드에서 다음 메서드와 버튼을 추가

Apex 컨트롤러 샘플(추가)

    /**
     * @description 체크 박스로 선택된 회원의 회원명 습득
     */
    public void getSelectedItem() {

        List<String> selMembersNameList = new List<String>();

        for (MemberWrapper memWrap : memWrapperList) {

            if (memWrap.isSelected) {
                // 체크 박스가 선택된 경우

                selMembersNameList.add(memWrap.memName);
            }
        }

        System.debug('선택된 멤버명 ' + selMembersNameList);
    }

Visualforce 샘플(추가)

<apex:pageBlock title="체크박스 전체 선택/해제">

            <apex:pageBlockButtons location="top">
                <apex:commandButton id="btnGetSelItems" value="선택" action="{!getSelectedItem}"/>
            </apex:pageBlockButtons>

            <!-- 리스트를 표 형식으로 출력 -->
---- 생략 ----

☞ 결과 화면

 3. 링크로 선택한 요소의 정보 습득 

  ※ 코드는 2에서 작성한 코드에 추가 기능을 추가하는 방법으로 구현하겠습니다.

Apex 컨트롤러 샘플(추가)

/**
 * @description "선택" 링크로 선택된 회원명
 */
public String selMemberName { get; set; }

---- 생략 -----

/**
 * @description "선택" 링크로 선택된 회원의 회원명 습득
 */
public void getMemberNameByLink() {

    System.debug('선택된 멤버명 : ' + selMemberName);
}

Visualforce 샘플(추가)

<script type="text/javascript">
    /**
     * @description "선택" 링크로 선택한 회원 정보 습득
     */
    function selectMember(mName) {
        document.getElementById('{!$Component.form.selMemName}').value = mName;

        getMemNameByLink();
    }
</script>

<apex:form id="form">
    <apex:inputHidden id="selMemName" value="{!selMemberName}"/>

    <apex:actionFunction name="getMemNameByLink" action="{!getMemberNameByLink}"/>

----- 생략 -----

<apex:column style="width:3%;">
    <apex:facet name="header">선택</apex:facet>
    <apex:commandLink id="selectLink" value="선택" onclick="selectMember('{!member.memName}');"/>
</apex:column>

전체 샘플 코드는 아래의 링크에서 확인하실 수 있습니다.

github.com/mokochi/Blog_SFDC_UseJavaScriptInVisualforce.git

이상으로 Visualforce 내에서 javascript를 연동하여 사용하는 방법에 대해 알아보았습니다.

이 포스트의 사용 예시 이외에도 화면 전환, 팝업 표시, pdf화면 표시 등

여러 방면에서 javascript를 필연적으로 사용해야만 하는 상황이 자주 발생하니,

이 부분은 개발자 가이드를 통해 확실하게 익혀두는 것이 중요합니다.

추가로 이곳에서는 사용하지 않았지만, Visualforce 내에서 ajax 나 jQuery도 사용 가능합니다.

참고) https://developer.salesforce.com/docs/atlas.en-us.226.0.pages.meta/pages/pages_javascript_intro.htm - Visualforce 개발자 가이드 - Using JavaScript in Visualforce Page