세일즈포스 커스텀 레코드 생성 만들기 2 - 모달 속 LWC 구현 및 컨트롤러 연결

지난글에 이어 (1) 모달 속 레이아웃 기본적인 구성과 (2) 컨트롤러를 만들어 오브젝트에 레코드 타입이 존재하는 경우 Aura에서 어떻게 받아오는지 다루도록 하겠습니다.

모달 구현

LWC

leadRecordCreationForm 생성

leadRecordCreationForm 구현

//leadRecordCreationForm.html

<template>
    <lightning-record-edit-form object-api-name="Lead">
        <lightning-messages></lightning-messages>
        <lightning-input type="text" label="First Name"></lightning-input>
        <lightning-input type="text" label="Last Name" required></lightning-input>
        <lightning-input type="email" label="Email" placeholder="Type here..." required></lightning-input>
        <lightning-input type="tel" label="Phone" value="" pattern="[0-9]{3}[0-9]{4}[0-9]{4}"></lightning-input>
        <lightning-combobox
                name="About Us"
                label="How Did You Find Out About Us?"
                value={value}
                placeholder="Please select one"
                options={options}
                onchange={handleChange} ></lightning-combobox>
    </lightning-record-edit-form>
</template>

Lead 생성 시 입력을 최소화하고자 위 5개 필드만 입력 받도록 하였습니다.
About Us는 커스텀으로 생성해둔 Picklist 필드 입니다.

Aura

// LeadRecordCreationContainer

<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">
                    <c:leadRecordCreationForm > </c:leadRecordCreationForm> // 추가
                </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>

레코드 타입 정보 가져오기 (Aura <-> Apex)

현재 작업하고 있는 Lead에 Business와 Person 레코드 타입을 추가하였습니다.

Apex

LeadRecordCreationFormController

//LeadRecordCreationFormController

@AuraEnabled
    public static String getRecordTypeName (String recordTypeId){
        if(recordTypeId == null) return null;
        return Schema.getGlobalDescribe().get('Lead').getDescribe().getRecordTypeInfosById().get(recordTypeId).getName();
    }

recordTypeId로 Lead 오브젝트에서 해당 Id와 일치하는 레코드 타입의 레이블을 반환해줍니다.
AuraEnabled를 노테이션을 추가해야 Aura에서 접근 가능합니다.

Aura

handler & attribute 추가

//LeadRecordCreationContainer

<aura:component description="LeadRecordCreationContainer"
                implements="lightning:actionOverride, lightning:hasPageReference, force:lightningQuickActionWithoutHeader"
                controller="LeadRecordCreationFormController" // 추가
                access="global">

    <aura:handler   name="init" value="{!this}" action="{!c.init}"/> // 추가
    <aura:attribute name="recordTypeId" type="String"/> // 추가
    <aura:attribute name="recordTypeName" type="String"/> // 추가

    <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">
                    <c:leadRecordCreationForm > </c:leadRecordCreationForm>
                </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>

init 함수 추가 및 컨트롤러 호출

({
    init: function (component, event, helper){
        let recordTypeId = component.get('v.pageReference').state.recordTypeId;
        component.set('v.recordTypeId', recordTypeId);

        let action = component.get('c.getRecordTypeName');
        action.setParams({recordTypeId: recordTypeId});
        action.setCallback(this, response => {
            let state = response.getState();
            if(state == 'SUCCESS'){
                component.set('v.recordTypeName', response.getReturnValue());
            }else{
                console.log('Error => ' + JSON.stringify(response.getError()));
            }
        });
        $A.enqueueAction(action);
    },
    closePopup : function(component, event, helper) {
        let leadObjectHomeUrl = '/lightning/o/Lead/home';
        window.location.href = leadObjectHomeUrl;
    },
    handleSaveClick: function(component, event, recordData) {

    }
});

2018년 서머 업데이트 이후 lightning:hasPageReference를 통해 recordTypeId를 가져오는게 가능해졌습니다.
component.get으로 연결되어 있는 컨트롤러의 함수 정보를 가져옵니다.
setParams를 통해 Apex에서 정의한 파라미터 이름과 넘겨줄 파라미터 변수를 적어줍니다.
$A.enqueueAction: 클라이언트 사이드 컨트롤러 (Aura)에서 서버 사이드에서 실행시킬 큐 액션을 적재함. 서버사이드에서는 Serializable한 JSON을 결과값을 돌려줍니다.

레코드 타입 정보 가져오기 (Aura -> LWC)

Aura

//LeadRecordCreationContainer

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

    <aura:handler   name="init" value="{!this}" action="{!c.init}"/>
    <aura:attribute name="recordTypeId" type="String"/>
    <aura:attribute name="recordTypeName" type="String"/>

    <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">
                        <c:leadRecordCreationForm recordTypeId = "{!v.recordTypeId}" // 추가
                                                  recordTypeName = "{!v.recordTypeName}"/>  // 추가
                </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>

Aura에서 LWC로 값을 전달해줍시다.

LWC

//LeadRecordCreationForm

import {LightningElement, api} from 'lwc';

export default class LeadRecordCreationForm extends LightningElement {

    @api recordTypeId;
    @api recordTypeName;

    connectedCallback() {
        console.log('recordTypeId >> ' + this.recordTypeId);
        console.log('recordTypeName >> ' + this.recordTypeName);
    }
}

LWC에서는 Aura에 건내주는 요소들과 동일한 이름으로 api 어노테이션을 붙여 받아줍니다.

recordTypeId는 잘 받아오는데 recordTypeName은 undefined 입니다.

왜 그럴까요? 정답은 Aura에서 Apex를 통해 값을 받아 오기전에 LWC가 먼저 렌더링이 되어 값이 undefined로 찍혔습니다.

Loading Parameter 추가

Aura

// LeadRecordCreationContainer

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

    <aura:handler   name="init" value="{!this}" action="{!c.init}"/>
    <aura:attribute name="recordTypeId" type="String"/>
    <aura:attribute name="recordTypeName" type="String"/>
    <aura:attribute name="isReadyToLoadLwc" type="Boolean" default="{!false}"/> // 추가

    <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">
                    <aura:if isTrue="{!v.isReadyToLoadLwc}"> // 추가
                        <c:leadRecordCreationForm recordTypeId = "{!v.recordTypeId}"
                                                  recordTypeName = "{!v.recordTypeName}"/>
                    </aura:if>
                </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>


// LeadRecordCreationContainer Controller

({
    init: function (component, event, helper){
        let recordTypeId = component.get('v.pageReference').state.recordTypeId;
        component.set('v.recordTypeId', recordTypeId);

        let action = component.get('c.getRecordTypeName');
        action.setParams({recordTypeId: recordTypeId});
        action.setCallback(this, response => {
            let state = response.getState();
            if(state == 'SUCCESS'){
                component.set('v.recordTypeName', response.getReturnValue());
                component.set('v.isReadyToLoadLwc', true); // 추가
            }else{
                console.log('Error => ' + JSON.stringify(response.getError()));
            }
        });
        $A.enqueueAction(action);
    },
    closePopup : function(component, event, helper) {
        let leadObjectHomeUrl = '/lightning/o/Lead/home';
        window.location.href = leadObjectHomeUrl;
    },
    handleSaveClick: function(component, event, recordData) {

    }
});

결과

다음 포스트에서는 LWC 부분을 좀 더 고도화 하도록 하겠습니다.

저작자표시 (새창열림)

'Salesforce > 개발_한국어' 카테고리의 다른 글

세일즈포스 커스텀 레코드 생성 만들기 4 - lwc:if 및 Save 구현 (0)	2024.06.30
세일즈포스 커스텀 레코드 생성 만들기 3 - LWC에서 handler 연결 및 Picklist 값 가져오기 (2)	2024.06.02
세일즈포스 커스텀 레코드 생성 만들기 1 - Standard Button 연결 및 모달 구현 (Custom Record Creation Form) (0)	2024.05.19
세일즈포스 Git 연동하기 (IntelliJ & Illuminated Cloud) (0)	2024.05.13
세일즈포스 메타 데이터를 이용한 번역 작업 (0)	2024.03.03

모달 구현

LWC

leadRecordCreationForm 생성

leadRecordCreationForm 구현

Aura

레코드 타입 정보 가져오기 (Aura <-> Apex)

Apex

LeadRecordCreationFormController

Aura

handler & attribute 추가

init 함수 추가 및 컨트롤러 호출

레코드 타입 정보 가져오기 (Aura -> LWC)

Aura

LWC

Loading Parameter 추가

Aura

결과

'Salesforce > 개발_한국어' 카테고리의 다른 글

티스토리툴바

'Salesforce > 개발_한국어' 카테고리의 다른 글