Lightning Studio 확장 기능 소개
Lightning Studio는 Salesforce LWC 개발을 쉽고 빠르게 구축합니다. 이 편집기 내에서 Apex/메시지 채널 및 LWC 스크립트를 직접 생성할 수 있습니다. 또한 LWC(사용자 지정) 구성 요소를 한 번에 직접 배포할 수 있습니다. 이것을 웹 사이트에 추가하고 여는 방법을 살펴보겠습니다.
웹사이트로 이동하여 'Lightning Studio – Chrome 추가'(Chrome을 사용하는 경우)를 검색합니다. 'Chrome에 추가' 버튼을 클릭합니다.
Chrome에 추가된 것을 확인할 수 있습니다. 이제 비활성화되었습니다. Salesforce 조직이 열려 있는 경우에만 활성화됩니다.
Salesforce 조직에 로그인하면 활성화됩니다.
확장 프로그램을 클릭하십시오.
왼쪽으로 이동하여 새 LWC 구성 요소를 만드는 데 사용되는 세 번째 아이콘을 선택합니다.
- 먼저 구성 요소의 이름을 지정해야 합니다.
- 'isExposed'는 Salesforce에서 구성 요소 가시성을 설정하는 데 사용됩니다. true로 설정해야 합니다.
- 구성 요소를 배치할 대상을 지정하는 것이 중요합니다. 여러 대상을 선택할 수 있습니다.
- 구성 요소를 배포하는 것이 마지막 단계입니다('배포' 클릭).
예 1: 레코드 페이지에 추가
이 시나리오에서는 'Added to Record page' 텍스트를 표시하는 'firstComponent' LWC 스크립트를 생성하고 이 구성 요소를 'Account Record' 페이지에 추가합니다. 'firstComponent.js-meta.xml' 파일에서 대상을 lightning__RecordPage로 지정해야 합니다.
코드 구조:
firstComponent.html
< 주형 >< 번개 카드 변종 = '좁은' 제목 = '리눅스' >
< 피 >> 레코드 페이지에 추가됨 피 >
번개 카드 >
주형 >
firstComponent.js
수입 { 번개 요소 } ~에서 '운' ;내보내다 기본 클래스 FirstComponent는 LightningElement를 확장합니다. {
}
firstComponent.js-meta.xml
< ?xml 버전 = '1.0' ? >< LightningComponentBundle xmlns = 'http://soap.sforce.com/2006/04/metadata' >
< apiVersion > 57.0 apiVersion >
< isExposed > 진실 isExposed >
< 대상 >
< 표적 > lightning__RecordPage 표적 >
대상 >
LightningComponentBundle >
구성 요소 추가:
Salesforce 조직으로 이동하여 App Launcher에서 'Sales' 앱을 검색합니다.
'계정' 탭으로 이동하여 계정 레코드를 엽니다. 기어 아이콘으로 이동하여 '페이지 편집'을 선택합니다.
이제 왼쪽으로 이동하여 구성 요소를 검색합니다.
구성 요소를 드래그하면 '하이라이트 패널' 아래에 배치됩니다.
'활성화'를 클릭하고 조직 기본값으로 할당합니다. 마지막으로 레코드 페이지를 저장합니다.
끝났다. 이제 '판매' 앱 페이지로 돌아가서 '계정 레코드'(모든 레코드)로 이동합니다. 커스텀 컴포넌트가 추가된 것을 확인할 수 있습니다.
예 2: 홈페이지에 추가
'firstComponent'를 활용해 봅시다. HTML 파일에서 단락 텍스트를 '홈 페이지에 추가됨'으로 수정합니다. 'firstComponent.js-meta.xml' 파일에서 대상을 'lightning__HomePage'로 지정합니다.
firstComponent.html
<템플릿><번개 카드 변형 = '좁은' 제목 = '리눅스' >
< 피 > 홈페이지에 추가됨 < / 피 >
< / 번개 카드>
< / 템플릿>
firstComponent.js-meta.xml
버전 = '1.0' ?><대상>
< / 대상>
< / LightningComponentBundle>
구성 요소 추가:
'Sales' 앱으로 이동하여 'Home' 탭을 클릭합니다.
톱니바퀴 아이콘 아래에 있는 편집 페이지를 클릭합니다. 구성 요소를 검색하여 '성능' 구성 요소 위에 배치합니다. 페이지를 저장합니다.
'판매 홈' 탭을 새로 고칩니다.
컴포넌트가 홈 페이지에 추가된 것을 볼 수 있습니다.
예 3: 앱 페이지에 추가
'firstComponent'를 활용해 봅시다. HTML 파일에서 단락 텍스트를 '앱 페이지에 추가됨'으로 수정합니다. 'firstComponent.js-meta.xml' 파일에서 대상을 'lightning__AppPage'로 지정합니다.
firstComponent.html
< 주형 >< 번개 카드 변종 = '좁은' 제목 = '리눅스' >
< 피 > 앱 페이지에 추가됨 피 >
번개 카드 >
주형 >
firstComponent.js-meta.xml
버전 = '1.0' ?><노출됨> 진실 < / isExposed>
<대상>
<대상> 번개__AppPage < / 대상>
< / 대상>
< / LightningComponentBundle>
구성 요소 추가:
먼저 Lightning 앱 빌더를 사용하여 Salesforce에서 앱 페이지를 만들어야 합니다. '빠른 찾기'에서 'Lightning 앱 빌더'를 검색하고 '새로 만들기'를 클릭하여 새 번개 페이지를 만듭니다.
앱 페이지를 선택하고 '다음'으로 이동합니다.
레이블을 'Linuxhint App'으로 지정하고 'Next'로 이동합니다.
현재로서는 구성 요소를 배치하는 데 하나의 영역만 필요합니다. 따라서 '한 지역'을 선택하고 '완료'를 클릭합니다.
이제 'firstComponent'를 페이지로 드래그하고 페이지를 저장합니다.
페이지를 활성화해야 하는 팝업이 나타납니다. '활성화'를 클릭합니다.
그런 다음 앱에 페이지를 추가해야 합니다. 'LIGHTNING EXPERIENCE' 탭으로 이동하여 이 작업을 수행합니다. 이 활성화를 저장하십시오.
이제 App Launcher로 이동하여 'Linuxhint App'을 검색합니다. 앱 페이지에 구성 요소가 추가된 것을 볼 수 있습니다.
결론
이제 앱 페이지, 홈 페이지 및 레코드 페이지에 LWC를 추가하는 방법을 이해할 수 있습니다. 모든 시나리오에서 더 나은 아이디어를 얻기 위해 동일한 예를 사용했습니다. 'isExposed'가 참인지 확인하십시오. 그렇지 않으면 구성 요소가 Salesforce 조직에 표시되지 않습니다. 이 전체 가이드에서는 Lightning Studio(베타) 편집기를 사용하여 코드를 개발했습니다. 이 가이드의 시작 부분에 이 편집기를 다운로드하고 사용하는 방법에 대한 모든 단계가 설명되어 있습니다.