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

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

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

​

[톺아보다]는

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

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

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

​

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

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

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

​

​

​

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

​

​

​

이번에 톺아볼 주제는 세일즈포스의 커스텀 컴포넌트 3가지 중 Visualforce입니다!

Visualforce는 ​세일즈포스에서 사용되는 웹 개발 프레임워크로, 인터페이스를 개발하고 정의할 수 있게 해주는 기술이라고

알려드렸는데 실제 코드를 작성해 보고 어떻게 화면에 표시할 수 있는지 같이 알아보도록 해요.

​

​

Visualforce

​

Visualforce는 Apex 서버 측 컨트롤러를 통해서 통신을 하기에 미리 컨트롤러 부분의 Apex 클래스를 작성하여야 합니다!

​

​

Apex Class(서버측 컨트롤러)

public with sharing class MyController {    public MyController() {    }}

작성이 완료되었으면 개인 Org에 배포합니다.

​

Visualforce Page

​

<apex:page controller="MyController">    <apex:pageBlock title="Hello {!$User.FirstName}!">        This is your new page.    </apex:pageBlock>    <p>Hello {!$User.FirstName}!</p>    <p>This is your new page.</p></apex:page>

저번 시간에 미리 만들어 두었던 test.page에 위와 같이 코드를 작성한 뒤 Org에 배포합니다.

​

Visualforce Page에서 컨트롤러를 사용하기 위해서는 위와 같이 <apex:page>태그에 controller의 이름을 입력해 주어야 합니다.

​

그리고 코드의 내용을 보면 Apex 태그를 사용하여 <apex:pageBlock>을 만들어 구역을 설정할 수도 있고, 일반적인 Html 태그를 사용하여 보여줄 수도 있습니다.

​

{!$User.FirstName}은 현재 접속하여 화면을 보고 있는 유저의 FirstName을 보여줍니다.

​

Java가 익숙하신 분들은 JSP에서 사용하는 EL 태그와 흡사하다고 느끼 실 수도 있겠네요.

​

자 그럼 배포한 test.page를 사용하기 위하여 Setup 메뉴로 이동합니다.

​

​

Setup메뉴로 이동

​

​

그리고 Home의 검색창에 Visualforce Pages를 검색하면

​

​

​

​

이렇게 메뉴가 표시되고 메뉴를 클릭하면 Visualforce Page의 메뉴창으로 이동합니다.

​

​

​

​

이 화면에서는 내가 만들고 배포한 모든 Page들을 리스트로 확인할 수 있습니다..

​

우리는 지금 필요한 test.page가 필요하기에 test.page의 Edit 버튼을 누르고 편집창으로 이동하겠습니다.

​

​

​

​

세일즈포스 사이트와 모바일 앱에서 test.page를 사용하기 위하여 Available for Lightning Experience, Experience Builder sites, and the mobile app의 체크박스를 체크하여 줍니다.

​

이제 page의 사용이 가능해졌습니다! 원하는 오브젝트의 페이지 편집창에서 우리가 만든 page를 추가할 수 있습니다.

​

저는 Account에 추가해 보겠습니다.

​

​

​

​

Account 탭으로 들어가서 톱니바퀴 모양을 눌러 Edit Page를 클릭하여 페이지 편집창으로 이동합니다.

​

​

​

​

​

이게 기본적으로 표시되는 페이지 편집창입니다. 여기에서 왼쪽의 Standard라고 표시되는 표준 컴포넌트들이 보이는데 아래로 쭉 스크롤 하여 내려주다 보면....?

​

​

​

맨 아래에 Visualforce 가 보입니다.

Visualforce를 드래그하여 화면 중앙 오른쪽에 있는 Add Component에 넣겠습니다.

​

​

​

​

드래그하여 넣고 나면 우측의 메뉴도 새로운 게 보일 겁니다.

​

​

​

Visualforce Page에 대한 서브메뉴들이 나오게 됩니다. 이를 통하여 test.page의 크기와 라벨, 그리고 표시하고자 하는 Visualforce page의 이름을 선택할 수 있습니다.

​

저는 <apex:pageBlock>과 <p>태그 두 개를 사용하였기 때문에 저렇게 두 개가 동시에 출력되는 것을 보실 수 있습니다!

​

이제 저장 버튼을 누른 뒤 뒤로 돌아가 Account의 화면을 보면?

​

​

​

세일즈포스 Account에서 추가된 Visualforce page를 확인 하실 수 있습니다.

​

이제 Visualforce Component도 출력 해 볼까요?

​

​

미리 만들어둔 test.component에 간단한 텍스트 출력 코드를 입력해 줍니다.

​

<apex:component>    <b>        <apex:outputText value="This is my custom component."/>     </b></apex:component>

​

그리고 동일하게 Org에 배포해 준 뒤

​

test.page로 돌아가서 코드를 한 줄만 추가해 주면 됩니다.

​

<apex:page controller="MyController">    <apex:pageBlock title="Hello {!$User.FirstName}!">        This is your new page.    </apex:pageBlock>    <p>Hello {!$User.FirstName}!</p>    <p>This is your new page.</p>    <c:test/></apex:page>

​

여기서 추가된 부분이 보이시나요?

​

<c:test/>라는 부분이 추가되었습니다. test는 test.Component의 이름입니다.

​

그리고 test.page를 다시 배포한 뒤 세일즈포스 화면을 새로고침하게 되면?

​

​

​

test.component에 적은 텍스트 출력 태그가 작동하여 This is my custom component라는 문구가 출력되는 것을 확인할 수 있습니다!

​

Visualforce는 위와 같이 간단한 기능부터 차트, 지도 등 여러 가지를 화면에서 구성하여 표시하고 사용자에게 보여줄 수 있습니다.

​

세세한 기능들을 하나하나 설명하고 같이 실습하기에는 너무나도 방대하고 많은 방식의 개발이 가능하기에 기초적으로 이렇게 사용이 되는구나! 정도의 내용만 알려드렸어요.

​

그리고 Visualforce Page에서는 Script 태그를 사용해서 직접 javascript로 함수를 생성하고 태그와 연결하여 이벤트를 작동시킬 수도 있기에 기회가 될 때 Visualforce Page로 Google 지도를 세일즈포스 화면에 컴포넌트로 만드는 간단한 코드도 같이 실습해 보도록 하겠습니다.

​

​

다음 포스팅은 커스텀 컴포넌트 3가지 중 Aura 컴포넌트에 대하여 포스팅하도록 하겠습니다.

​

​

​

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

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

​

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

​

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

‍

​

#CRM #Salesforce #세일즈포스 #에스비티글로벌 #SBTGlobal #영업관리 #고객관리 #고객관리체 #CRM솔루션 #소베텍 #ERP연동 #Component #컴포넌트 #SalesforceComponent #세일즈포스컴포넌트 #Visualforce #비주얼포스 #VisualforcePage #VisualforceComponent #비주얼포스페이지 #비주얼포스컴포넌트 #SalesforceApex #세일즈포스에이펙스

‍