[SFDC] Visualforce에서 Javascript 사용하기

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