[Salesforce] Aura Component NameSpace 들이 궁금하다고?

 안녕하셀포 (●'◡'●)✨

그동안 Aura Component를 개발하면서 수많은 Namespace 들을 보셨을텐데요!

여러분은 해당 Namespace들이 "정확히" 어떤 역할을 하는지 알고 지나가셨나요?🧐

 

Aura Component의 특정 기능을 제공하는 Namespace Interface들은 총 34개가 있지만,

그 중 자주 쓰는것들에 대해 정리해보려고 합니다. (추후 추가예정!)

참고 : https://developer.salesforce.com/docs/component-library/overview/interfaces

---

✨여기서 Marker interface는 특정 인터페이스로, 구현함으로써 클래스에 특정한 특성이나 기능을 부여하는것을 의미합니다. 메소드를 포함할 필요가 없으며, 그저 해당 인터페이스를 구현한 클래스에 대한 정보를 제공합니다.✨

Force Namespace

• force:appHostable
  • Target : Lightning Experience, Salesforce Mobile App
  • Marker interface로 Experience 또는 Salesforce Mobile App 에서사용자 정의 탭으로 사용할 수 있도록 Lightning 구성 요소에 NameSpace를 추가합니다. 이 인터페이스를 구현하는 구성 요소는 Lightning Experience 및 Salesforce 모바일 앱 모두에서 탭을 만드는 데 사용할 수 있습니다.

<!-- auraInterfacesTest.cmp -->

<aura:component implements="force:appHostable" description="auraInterfacesTest">
    <div>force:appHostable</div>
</aura:component>

 

Setup -> Tabs -> New Lightning Component Tab -> auraInterfacesTest.cmp 가 있는 모습

결과

Custom Tab 생성 완료!

 

• force:hasRecordId
  • Target : Lightning Experience, Salesforce Mobile App
  • Marker interface로, component가 record Detail Page 내에 있는 경우, record Id가 component의 recordId 속성에 자동으로 바인딩 됩니다.  ex) component.get(”v.recordId”);
• force: hasSObjectName
  • Target : Lightning Experience, Salesforce Mobile App
  • Marker interface로, 현재 레코드의 sObject유형을 component의 구성요소에 할당할 수 있습니다. sObjectName 속성에 자동으로 바인딩 됩니다. ex) component.get("v.sObjectName");

ex) Contact record Detail Page에 Component 추가

<!-- auraInterfaceTest.cmp -->
<aura:component implements="force:hasRecordId, force:hasSObjectName, flexipage:availableForRecordHome" description="auraInterfacesTest">
    
    <!-- handler -->
    <aura:handler name="init" value="{!this}" action="{!c.fnInit}" />

    <aura:html tag="style">
        .div{
            background-color : white;
        }
    </aura:html>

    <h2 class="div">
        hasRecordId, hasSObjectName 테스트!
    </h2>
</aura:component>

<!-- auraInterfacesTest.js -->
({
    fnInit : function(component){
        console.log('fnInit');
        console.log('recordId', component.get('v.recordId'));
        console.log('SObjectName', component.get('v.sObjectName'));
    }
});

 

Console 결과

Console 결과

 

• force: lightningQuickAction
  • Target : Lightning Experience, Salesforce Mobile App
  • Marker interface로, Custom Action버튼에 Component를 연결할 수 있도록 해줍니다.
  • 기본적으로 Header를 포함합니다.

<aura:component implements="force:lightningQuickAction" description="auraTest">
    <lightning:input type="number" name="myNumber" aura:id="num1" label="숫자 1"/>
    <lightning:input type="number" name="myNumber" aura:id="num2" label="숫자 2"/>
</aura:component>

결과

• force: lightningQuickAction WithoutHeader
  • Target : Lightning Experience, Salesforce Mobile App
  • Marker interface로, Custom Action버튼에 컴포넌트를 연결할 수 있도록 해줍니다.
  • Header를 포함하지 않는다. 사용자에게 간단한 작업을 제공하고 싶을때 유용

<aura:component implements="force:lightningQuickActionWithoutHeader" description="withoutHeader">
    <lightning:input type="number" name="myNumber" aura:id="num1" label="숫자 1"/>
    <lightning:input type="number" name="myNumber" aura:id="num2" label="숫자 2"/>
</aura:component>

결과

 

💥💥💥여기서 주의할 점은💥💥💥
같은 Component 내에서 force:lightningQuickAction 과 force:lightningQuickActionWithoutHeader 는 동시 작성이 불가능합니다.

 

---

Flexipage Namespace

• flexipage:availableForAllPageTypes
  • Lightning 앱의 유틸리티 막대를 포함하여 레코드 페이지 및 기타 모든 유형의 페이지에 Component를 사용할 수 있도록 합니다.
• flexipage:availableForRecordHome
  • 레코드 페이지 전용으로 Component를 사용할 수 있도록 합니다.

<!-- flexiPageForRecordTest -->
<aura:component implements="flexipage:availableForRecordHome" description="flexiPageForRecordTest">
    <h2>flexipage:availableForRecordHome Test</h2>
</aura:component>

Lightning App Builder recordPage에 해당 component를 추가할 수 있도록 나옵니다.

 

---

Lightning Namespace

• Lightning:actionOverride
  • 기본 Standard Button(New, Edit 등등)들의 작업을 component로 재정의 할 수 있습니다. (= 사용자 지정 작업으로 Override)

<!-- actionOverride -->
<aura:component implements="lightning:actionOverride" description="actionOverride">
    <article class="slds-card">
        <div class="slds-card__header slds-grid">
            <header class="slds-media slds-media_center slds-has-flexi-truncate">
                <div class="slds-media__body">
                    <h2><span class="slds-text-heading_small">Expense Details</span></h2>
                </div>
            </header>
            <div class="slds-no-flex">
                <lightning:button label="Edit" onclick="{!c.handleEdit}"/>
            </div>
        </div>
        <div class="slds-card__body">(expense details go here)</div>
    </article>
</aura:component>

Record Detail Page에서 Edit (Standard)버튼을 클릭했을때, override 한 actionOverride.cmp 화면으로 넘어간걸 확인 할 수 있습니다.

---

혹시 틀린 부분이 있다면 피드백 적극 환영입니다!!!!!! 댓글 남겨주세요👍❤️

 

그럼 안녕히계셀포( •̀ ω •́ )✧