안녕하세요 에스비티글로벌

세일즈포스사업본부입니다 !

여러분은 '톺아보다'라는 말을 알고 계신가요 ?!​

​

[톺아보다]는

'샅샅이 톺아 나가면서 살피다'의 순우리말입니다.

각종 외래어 없이는 대화가 어려운 요즘,

우리말을 지키고자 하는 취지에서 사용하게 되었답니다 😊​

​

[톺아보다] 단어의 뜻처럼

저희 에스비티글로벌의 세일즈포스사업본부가 가진

세일즈포스의 각종 지식들을 CRM 및 세일즈포스 솔루션에 관심있는 분들께 차근차근 공유해 나가고자 합니다 : )

​

​

​

그럼 저희와 함께 톺아볼까요 ?!​

​

​

​

이번에 톺아볼 주제는 이전 포스팅에서 다루지 못한 서버 측 컨트롤러인 Apex 클래스와 Aura 컴포넌트 간의

연결에 대하여 같이 확인해 보도록 하겠습니다.

​

​

​

​

Aura Component (Lightning Component) - 2

​

Aura 컴포넌트는 자바스크립트 컨트롤러와 Apex 컨트롤러 총 두 개의 컨트롤러를 가질 수 있습니다.

​

​

저번 포스팅에서 자바스크립트 컨트롤러를 이용하여 Component.set, Component.get 등을 사용하여 변수를 새로 저장하고 불러오는 등의 방법을 간단히 알아봤으니, 이번에는 Apex 클래스를 자바스크립트 컨트롤러에서 호출하여 사용하는 방법에 대해서 알아보도록 하겠습니다.

​

​

먼저 Aura 컴포넌트에서 Apex 컨트롤러를 사용하기 위해서 컨트롤러를 선언해야 합니다.

​

<aura:component description="test" implements="flexipage:availableForAllPageTypes,force:hasRecordId"    controller="test">

​

이렇게 컨트롤러를 선언해주고 실제 test.cls를 생성해줍니다.

​

​

Apex 클래스 디렉터리 구조

​

public with sharing class test {}

​

​

그럼 저는 Account에서 컴포넌트를 사용 중이니, 간단하게 Account에 연결된 Contact를 가져오는 코드를 짜보도록 하겠습니다.

​

​

컴포넌트에서 서버 측 컨트롤러의 메소드를 호출해서 사용하기 위해서는 어노테이션을 달아주어야 합니다.

​

​

@AuraEnabled

​

@AuraEnabled라는 어노테이션을 달아주어서 컴포넌트에서 호출이 가능한 메소드임을 명시해 주고 메소드를 작성해 보도록 하겠습니다.

​

​

public with sharing class test {    @AuraEnabled    public static List<Contact> getContactList(String recordId){        try {            List<Contact> conList = [SELECT Id, Name, AccountId, Email, Phone FROM Contact WHERE AccountId =: recordId];            if(conList.size() > 0){                return conList;            }else {                return null;            }        } catch (Exception e) {            throw new AuraHandledException(e.getMessage());        }    }        }

​

메소드를 호출하는 데 사용하는 파라미터는 recordId로 컴포넌트가 사용되고 있는 Account의 레코드 Id입니다.

​

​

Account에 연결된 Contact이 많을 수 있으니 List에 Contact을 담아서 컴포넌트로 반환하겠습니다.

​

​

AccountId가 파라미터에 있는 recordId와 같은 것만 conList에 담아서 반환하는데 리스트의 사이즈가 0보다 크면 리스트를 반환하고, 리스트가 비어있으면 null 값을 반환하는 코드입니다.

​

​

이제 Apex 컨트롤러도 Org에 배포하고 컴포넌트단으로 돌아가겠습니다.

​

​

메소드를 호출하기 위해서 자바스크립트 컨트롤러로 이동하여, 컴포넌트가 실행될 때 값을 가져오도록 하겠습니다. 불필요한 alert는 방해되니 잠시 주석 처리를 하고 코드를 입력해 보면

​

​

doinit : function(component, event, helper) {        component.set('v.hello', 'Hello, Salesforce!!');        // alert('Hello, world!!');           var action = component.get('c.getContactList');        action.setParams({            'recordId' : component.get('v.recordId'),        });        action.setCallback(this,function(res){            var state = res.getState();            if(state == 'SUCCESS'){                var result = res.getReturnValue();                component.set('v.itemList',result);            }        });        $A.enqueueAction(action);    }

​

​

보시는 코드와 같이 컨트롤러의 getContactList를 가져와서 action이라는 변수에 넣고, setParams로 클래스로 보낼 파라미터를 넣어줍니다. 파라미터는 recordId입니다.

​

• Aura 컴포넌트의 implements에 넣어놓은 force:hasRecordId 가 있기에 v.recordId로 해당 컴포넌트가 위치한 레코드의 아이디를 가져올 수 있습니다.

​

​

그리고 setCallback으로 함수를 호출하고 난 이후의 액션을 작성할 수 있습니다.

​

함수에서 넘어온 state가 SUCCESS 일 때, 리턴 받은 값을 itemList에 세팅하겠습니다. 이후 $A.enqueueAction으로 action 변수를 실행시킵니다.

​

​

이제 메소드 호출 부분은 완료되었고 실제로 데이터가 넘어온 것을 바탕으로 컴포넌트에 보여야겠죠?

​

​

간단하게 테이블로 만들어보겠습니다.

​

​

<aura:component description="test" implements="flexipage:availableForAllPageTypes,force:hasRecordId"    controller="test">    <aura:attribute type="String" name="hello" default="Hello, world!!"/>    <aura:attribute type="List" name="itemList" />    <aura:handler name="init" value="{!this}" action="{!c.doinit}"/>    <div>        Hello, world!!        <div>            <input type="text" value="Hello, world!!" />            <lightning:input value="Hello, world!!" />        </div>        <div>            <input type="text" value="{!v.hello}" />            <lightning:input value="{!v.hello}" />        </div>        <table>            <thead>                <th>이름</th>                <th>이메일</th>                <th>연락처</th>            </thead>            <tbody>                <aura:iteration items="{!v.itemList}" var="item" indexVar="index">                    <tr>                        <td>{!item.Name}</td>                        <td>{!item.Email}</td>                        <td>{!item.Phone}</td>                    </tr>                </aura:iteration>            </tbody>        </table>    </div></aura:component>

​

<table>태그를 이용해서 테이블을 만들고 body 부분이 여러 개가 들어갈 수 있으니 <aura:attribute>로 itemList라는 변수를 만들어주고,<aura:iteration> 자체 태그를 이용하여 리스트를 전체 다 불러올 수 있도록 순회합니다.

​

​

순회할 items에 itemList를 넣어주고, 위와 같이 코드를 입력해 주고 난 뒤 배포를 진행합니다.

​

​

​

​

컴포넌트 부분에 이렇게 테이블 형식으로 호출이 완료되게 됩니다!!

​

​

이를 통해서 여러 가지 데이터를 불러오고, 혹은 파라미터를 넘겨서 데이터를 저장하고 업데이트를 다는 등의 CRUD 기능을 구현할 수 있습니다.

​

​

​

이번에는 Aura Component의 서버 측 컨트롤러를 연결하여 메소드를 호출하고 사용하는 방법에 대하여 알아보았습니다.

다음 포스팅에는 세일즈포스의 최신 기술인 LWC에 대하여 간단하게 알아보도록 하겠습니다!!

​

​

​

​

세일즈포스에 대해 궁금점이 있으신 분들께서는

댓글 남겨주시면 답변 달아드리도록 하겠습니다!

​

CRM과 세일즈포스에 대해 관심 있으신 분들께 조금이나마 도움이 되었으면 좋겠습니다 :-)

​

그럼 다음 포스팅에서 만나요!

‍

#CRM #Salesforce #세일즈포스 #에스비티글로벌 #SBTGlobal #영업관리 #고객관리 #고객관리체 #CRM솔루션 #소베텍 #ERP연동 #Component #컴포넌트 #SalesforceComponent #세일즈포스컴포넌트 #AuraComponent #아우라컴포넌트 #오라컴포넌트 #SalesforceApex #세일즈포스에이펙스 #LightningComponent #라이트닝컴포넌트