세일즈포스 커스텀 레코드 생성 만들기 1 - Standard Button 연결 및 모달 구현 (Custom Record Creation Form)

레코드 생성 화면을 Aura와 LWC를 이용해 커스텀으로 개발하도록 하겠습니다. 이 포스트를 통해 Overriding Standard Buttons에 대해 어느정도 알 수 있게 됩니다.

 

개요

오브젝트는 여러 필드로 구성되어 있습니다. 모든 필드들이 화면에 표시하는 필드들이 아닙니다. 또한, 화면에 표시되는 필드들이 레코드 생성 때 굳이 입력 받을 필요없는 경우도 있습니다. 그리고 레코드 생성 화면에 표시되는 레이아웃은 왜 이렇게 못 생겼을까요? 페이지 레이아웃에서 하던 방식으로 변경할 수 있는 방법이 있을까요? 

 

정답부터 말하자면 커스텀으로 개발해야 하는 영역입니다. 레코드 생성화면을 페이지 레이아웃 처럼 변경할 수 있는 방법은 현재 없습니다. 따라서, 커스텀 개발을 통해 한번 바꾸어 보도록 해보겠습니다.

 

고려사항

• 버튼을 업데이트 할업데이트할 때 Salesforce Classic, Lightning Experience, mobile에서 어느 것을 업데이트할지 고려해야 합니다.
  • Salesforce Classic, Lightning Experience, or mobile 옵션을 제공하는 버튼은 Edit, New, New Event, Tab, and View 입니다. 
•  Lightning Component에서 lightning:actionOverride을 구현한 컴포넌트들만 사용될 수 있습니다.
• 기존 레코드 생성 화면 디자인과 다른 방향으로 개발 될 확률이 높습니다. 다른 오브젝트 레코드 생성화면과 다를 경우 고객사로부터 다른 오브젝트 레코드 생성화면도 똑같이 해달라는 요구를 받을 확률이 높습니다.

개발

구조

Aura

Aura로 Container 생성

Aura Component를 생성합시다. 이름은 'LeadRecordCreationContainer' 로 하였습니다.

<aura:component description="LeadRecordCreationContainer"
                implements="lightning:actionOverride, lightning:hasPageReference, force:lightningQuickActionWithoutHeader"
                access="global">

    <h1>LeadRecordCreationContainer</h1>
</aura:component>

• lightning:actionOverride: Enables a component to be used as an override for a standard action. You can override the View, New, Edit, and Tab standard actions on most standard and all custom components.
• lightning:hasPageReference: This interface is used to indicate that a component takes a pageReference Object as an attribute (CloseModal 시 필요).
• force:lightningQuickActionWithoutHeader: To allow it to be used as a custom action in Lightning Experience or the Salesforce mobile app.

New Button과 Aura Container 연결

 

모달 구현

위 화면은 New 버튼을 눌렀을 때 컴포넌트 페이지로 이동하게 됩니다. 기존 New 버튼은 모달로 뜨니 모달로 구현해보겠습니다.

<aura:component description="LeadRecordCreationContainer"
                implements="lightning:actionOverride, lightning:hasPageReference, force:lightningQuickActionWithoutHeader"
                access="global">
    <div class="slds-modal slds-fade-in-open">
        <div class="slds-modal__container">
            <div class="slds-modal__header">
                <h2 class="slds-text-heading_medium">New Lead </h2>
            </div>
            <div class="slds-modal__content">
                <div class="slds-p-around_medium">
                    <h1>LeadRecordCreationContainer</h1>
                </div>
            </div>
            <div class="slds-modal__footer">
                <lightning:button label="Cancel" aura:id="navService" onclick="{!c.closePopup}"/>
                <lightning:button label="Save" variant="brand" onclick="{!c.handleSaveClick}"/>
            </div>
        </div>
    </div>
    <div class="slds-backdrop slds-backdrop_open"></div>
</aura:component>

LeadRecordCreationContainerController 생성

// LeadRecordCreationContainerController
({
    closePopup : function(component, event, helper) {
        let leadObjectHomeUrl = '/lightning/o/Lead/home';
        window.location.href = leadObjectHomeUrl; // ClosePopup이 실행되면 Lead의 ListView 페이지로 이동시켜줌.
    },
    handleSaveClick: function(component, event, recordData) {

    }
});

참고사항

• 기존 New 버튼을 누르는 경우 모달 뒤로 ListView가 보입니다.
• Standard Button을 오버라이딩을하여 커스텀 레코드 생성 폼을 만드는 경우 ListView가 보이지 않습니다.
• 버튼을 누르는 경우 화면 전체에 컴포넌트가 노출되는 방식이라 위 화면처럼 모달 뒤에 ListView를 노출 시키려면 ListView를 개발해야 합니다.
• 모달뒤로 ListView를 노출시키고자 ListView를 추가로 개발하는 것은 권장하지 않습니다. 다만 고객사의 요청으로 기존과 최대한 똑같은 모습으로 가야한다면 개발해야 합니다.
• 위에서 모달로 구현한 이유는 기존의 느낌과 최대한 비슷하게 가기 위함입니다.

다음 내용

다음 포스트에서는 (1) LWC로 모달 속 레이아웃을 구성, (2) 오브젝트에 레코드 타입이 있는 경우에 대한 로직 추가를 다루도록 하겠습니다.

 

링크

https://help.salesforce.com/s/articleView?id=sf.links_override_considerations.htm&type=5