안녕하세요 에스비티글로벌
세일즈포스사업본부입니다 !
여러분은 '톺아보다'라는 말을 알고 계신가요 ?!
[톺아보다]는
'샅샅이 톺아 나가면서 살피다'의 순우리말입니다.
각종 외래어 없이는 대화가 어려운 요즘,
우리말을 지키고자 하는 취지에서 사용하게 되었답니다 😊
[톺아보다] 단어의 뜻처럼
저희 에스비티글로벌의 세일즈포스사업본부가 가진
세일즈포스의 각종 지식들을 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입니다.
그리고 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 #라이트닝컴포넌트
.png)
.png)
.svg)
.svg)
.svg)
