NavigationMixin은 'javascript' 파일의 Lightning/navigation에서 가져와야 합니다. 탐색은 이 모듈에서 사용할 수 있는 방법입니다. 유형과 속성을 사용합니다. 유형은 탐색 중인 페이지의 유형을 지정하고 속성은 pageName을 사용합니다.
- 설정에서 'Lightning App Builder'를 검색하고 '새로 만들기'를 클릭합니다.
- '앱 페이지'를 선택하고 '다음'을 클릭하세요.
- 라벨을 '내비게이션 서비스'로 지정합니다.
- 한 지역으로 이동하여 '완료'를 클릭하세요.
앱을 사용할 준비가 되었습니다. '앱 실행기'에서 검색하세요.
이 가이드에서 논의할 모든 탐색 서비스 예제에는 동일한 'meta-xml' 파일을 사용합니다. 지금 만든 앱 페이지에 구성 요소를 배치할 수 있습니다. 예제 코드 조각에서는 이 파일(meta-xml)을 다시 지정하지 않습니다.
'1.0' ?>
<대상>
홈 페이지로 이동
Salesforce 표준 홈 페이지로 이동하려면 다음 예를 살펴보십시오.
Navigation.html
버튼을 만듭니다. 이 'homeNavigation' 클릭은 'js' 파일에서 처리됩니다.
<템플릿><번개 카드 제목 = '홈 내비게이션' >
< div 수업 = 'slds-var-m-around_medium' 스타일 = '높이:20px; 너비:400px' >
< 비 > 홈 페이지로 리디렉션됩니다 < / 비 >< br >< / div >
<번개 버튼 상표 = '홈페이지로 이동' 클릭하면 = { 홈내비게이션 } >< / 번개 버튼>
< / 번개카드>
< / 템플릿>
Navigation.js
유형은 'standard__namedPage'여야 하고 pageName은 'home'이어야 합니다. 이는 homeNavigation() 핸들러 메소드 내부에 지정됩니다.
수입 { 번개요소 } ~에서 '운' ;
수입 { NavigationMixin } ~에서 '번개/내비게이션'
내보내다 기본 수업 항해 연장하다 NavigationMixin ( 번개요소 ) {
// 핸들러 메소드
// pageName은 홈이어야 합니다.
// 페이지 유형은 홈의 경우 표준__namedPage입니다.
홈내비게이션 ( ) {
이것 [ NavigationMixin. 탐색 ] ( {
유형 : 'standard__namedPage' ,
속성 : {
페이지이름 : '집'
}
} )
}
}
산출:
이 구성 요소를 앱 페이지에 추가하고 '홈 페이지로 이동' 버튼을 클릭하세요.
이제 홈 페이지에 있습니다.
Chatter로 이동
Salesforce Chatter를 사용하여 파일, 문자 메시지 및 로그 세부 정보를 공유할 수 있습니다. 탐색 서비스를 사용하여 Chatter로 직접 이동할 수 있습니다.
Navigation.html
버튼을 만듭니다. 이 'chatterNavigation' 클릭은 'js' 파일에서 처리됩니다.
<템플릿><번개 카드 제목 = '채터 내비게이션' >
< div 수업 = 'slds-var-m-around_medium' 스타일 = '높이:20px; 너비:400px' >
< 비 > Chatter로 리디렉션됩니다. < / 비 >< br >< / div >
<번개 버튼 상표 = '채터로 가세요' 클릭하면 = { chatterNavigation } >< / 번개 버튼>
< / 번개카드>
< / 템플릿>
Navigation.js
유형은 'standard__namedPage'이어야 하고 pageName은 'chatter'여야 합니다. 이는 chatterNavigation() 핸들러 메소드 내부에 지정됩니다. 'js' 클래스 안에 다음 코드 조각을 붙여넣습니다.
// 핸들러 메소드// 페이지 이름은 chatter여야 합니다.
// 페이지 유형은 chatter의 표준__namedPage입니다.
chatterNavigation ( ) {
이것 [ NavigationMixin. 탐색 ] ( {
유형 : 'standard__namedPage' ,
속성 : {
페이지이름 : '끽끽 우는 소리'
}
} )
}
산출:
페이지를 새로 고칩니다. 이제 Chatter로 이동하여 업데이트를 게시하고 파일을 공유할 수 있습니다.
새 레코드로 이동
새 레코드를 생성하기 위해 특정 개체 탭으로 이동할 필요 없이 내비게이션 서비스를 이용하여 특정 개체에 대한 새 레코드를 직접 생성할 수 있습니다. 이 시나리오에서는 objectApiName 및 actionName을 속성으로 지정해야 합니다.
- objectApiName은 '계정', '연락처', '사례' 등과 같은 Salesforce 개체 API 이름입니다.
- 우리는 새로운 기록을 만듭니다. 따라서 actionName은 'new'여야 합니다.
Navigation.html
사례 기록을 만들어 보겠습니다. 버튼을 만듭니다. 이 'newRecordNavigation'을 클릭하면 'js' 파일에서 처리됩니다.
<템플릿><번개 카드 제목 = '신기록 내비게이션' >
< div 수업 = 'slds-var-m-around_medium' 스타일 = '높이:20px; 너비:400px' >
< 비 > 여기에서 케이스를 생성할 수 있습니다... < / 비 >< br >< / div >
<번개 버튼 상표 = '케이스 만들기' 클릭하면 = { newRecordNavigation } >< / 번개 버튼>
< / 번개카드>
< / 템플릿>
Navigation.js
유형은 'standard__objectPage'여야 합니다. 이는 newRecordNavigation() 핸들러 메서드 내에서 지정됩니다. 'js' 클래스 안에 다음 코드 조각을 붙여넣습니다.
// 핸들러 메소드// Case는 objectApiName이고 actionName은 New입니다.
// 페이지 유형은 표준__objectPage입니다.
newRecordNavigation ( ) {
이것 [ NavigationMixin. 탐색 ] ( {
유형 : '표준__객체페이지' ,
속성 : {
objectApi 이름 : '사례' ,
작업 이름 : '새로운'
}
} )
}
산출:
페이지를 새로 고칩니다. 이제 케이스와 관련된 기록을 생성할 수 있습니다.
저장하면 해당 기록 페이지로 이동됩니다.
레코드 페이지로 이동
이전 탐색(예 3)과 유사하게 특정 레코드로 이동하여 세부 정보를 보거나 편집할 수 있습니다. 속성에 전달해야 하는 또 다른 속성은 'recordId'(기존 레코드의 ID)입니다. 이 시나리오에서는 actionName이 'view'여야 합니다.
Navigation.html
사례 기록으로 이동해 보겠습니다. 버튼을 만듭니다. 이 'viewRecordNavigation' 클릭은 'js' 파일에서 처리됩니다.
<템플릿><번개 카드 제목 = '기록 탐색 보기' >
< div 수업 = 'slds-var-m-around_medium' 스타일 = '높이:20px; 너비:400px' >
< 비 > 여기에서 사건 기록을 볼 수 있습니다. < / 비 >< br >< / div >
<번개 버튼 상표 = '뷰케이스' 클릭하면 = { viewRecordNavigation } >< / 번개 버튼>
< / 번개카드>
< / 템플릿>
Navigation.js
유형은 'standard__recordPage'여야 합니다. 이는 viewRecordNavigation() 핸들러 메서드 내에서 지정됩니다. 'js' 클래스 안에 다음 코드 조각을 붙여넣습니다.
// 핸들러 메소드// Case는 objectApiName이고 actionName은 view입니다.
// 페이지 유형은 표준__recordPage입니다.
viewRecordNavigation ( ) {
이것 [ NavigationMixin. 탐색 ] ( {
유형 : '표준__기록페이지' ,
속성 : {
레코드 ID : '5002t00000PRrXkAAL' ,
objectApi 이름 : '사례' ,
작업 이름 : '보다'
}
} )
}
산출:
탐색 후 사건 세부정보를 확인할 수 있습니다. 여기에서 사례 세부정보를 확인하고 편집할 수 있습니다.
기타 내비게이션
목록 보기와 파일로 이동해 보겠습니다. 목록 보기의 경우 개체 이름과 filterName이 필요합니다. URL에서 이를 찾을 수 있습니다. 이에 대해서는 예제에서 자세히 설명하겠습니다.
파일은 ContentDocument 개체에 저장됩니다. 따라서 파일의 경우 objectApiName은 'ContentDocument'이고 actionName은 'home'입니다.
목록보기:
파일:
Navigation.html
<템플릿><번개 카드 제목 = '탐색' >
< div 수업 = 'slds-var-m-around_medium' 스타일 = '높이:20px; 너비:400px' >
< 비 > 목록 보기로 이동할 수 있습니다. < / 비 >< br >< / div >
<번개 버튼 상표 = '목록 보기로 이동' 클릭하면 = { viewListNavigation } >< / 번개 버튼> < br >< br >
< div 수업 = 'slds-var-m-around_medium' 스타일 = '높이:20px; 너비:400px' >
< 비 > 파일로 이동할 수 있습니다. < / 비 >< br >< / div >
<번개 버튼 상표 = '파일로 이동' 클릭하면 = { viewFileNavigation } >< / 번개 버튼>
< / 번개카드>
< / 템플릿>
Navigation.js
// 리스트뷰 핸들러viewListNavigation ( ) {
이것 [ NavigationMixin. 탐색 ] ( {
유형 : '표준__객체페이지' ,
속성 : {
objectApi 이름 : '사례' ,
작업 이름 : '목록' ,
상태 : {
필터 이름 : '00B2t000002oWELEA2'
}
}
} )
}
// 파일뷰 핸들러
viewFileNavigation ( ) {
이것 [ NavigationMixin. 탐색 ] ( {
유형 : '표준__객체페이지' ,
속성 : {
objectApi 이름 : '콘텐츠 문서' ,
작업 이름 : '집'
}
} )
}
산출:
사례 목록 보기로 이동합니다. 우리가 지정한 filterName은 'All Closed Cases'입니다.
'파일로 이동' 버튼을 클릭하면 이 앱 페이지에서 파일을 볼 수 있습니다.
결론
Salesforce LWC는 특정 페이지에 머무르면서 탐색할 수 있는 직접 탐색 기능을 제공합니다. 이 가이드에서는 Lightning 웹 구성 요소 탐색 서비스를 사용하여 다양한 탐색을 배웠습니다. 이 외에도 많은 네비게이션이 존재하지만 우리는 모든 LWC 개발자가 알아야 할 중요한 네비게이션에 대해 논의했습니다. 모든 탐색에서는 Lightning/Navigation에서 NavigationMixin을 가져와야 합니다.