Custom Button에 URL로 LWC연결하는 방법( + URL로 원하는 값 넘겨주기 )

1. 연결하고 싶은 LWC를 Aura Component로 감싼후, Aura에서 lightning:isUrlAddressable를 implement한다.

 

<aura:component
        description=""
        implements="lightning:isUrlAddressable,lightning:actionOverride,force:lightningQuickAction,force:hasSObjectName,force:hasRecordId,lightning:hasPageReference"
        access="global" >

    <c:lwcName></c:lwcName>

</aura:component>

 

2. Object Manager에서 Button을 만들고 싶은 Object를 선택한 후, 해당 탭을 클릭한다.

 

 

3. New Button Or Link를 통해 새로운 버튼을 생성한다.

 

 

4. 원하는 Display Type과 Beehavior를 선택한 후, Content Type을 URL로 선택한다.

 

 

5. URL에 다음과 같이 작성한다.

 

/lightning/cmp/c__AuraComponentName

 

---

+ 만약, Lwc에 Record ID와 같이 값을 넘겨주고 싶은 경우 URL을 통해 해결이 가능하다.

 

1. LWC에 @api를 통해 받고자 하는 값을 저장하는 변수를 생성한다.

 

@api userName;

 

2. URL에 넘겨주고자 하는 값을 c__apiName={!원하는 값}으로 넘겨준다.

 

/lightning/cmp/c__AuraComponentName?c__userName={!User.Name}

 

3. ConnectrdCallback()에서 다음과 같은 코드를 통해 값을 받아오고 저장한다.

 

connectedCallback() {
        this.userName = new URLSearchParams(window.location.search).get('c__userName');
        console.log('User Name',this.userName);
}