NavigationMixin необходимо импортировать из Lightning/Navigation в файл «javascript». Navigate — доступный метод в этом модуле. Он принимает тип и атрибуты. Тип определяет тип страницы, по которой мы просматриваем, а атрибуты принимают имя страницы.
- В настройках найдите «Lightning App Builder» и нажмите «Создать».
- Выберите «Страница приложения» и нажмите «Далее».
- Дайте ярлык «Службы навигации».
- Выберите один регион и нажмите «Готово».
Ваше приложение готово к использованию. Найдите его в разделе «App Launcher».
Для всех примеров навигационной службы, которые будут обсуждаться в этом руководстве, мы используем один и тот же файл «meta-xml». Вы можете разместить компоненты на странице приложения, которую вы создали сейчас. Мы не будем снова указывать этот файл (мета-xml) в примерах фрагментов кода.
'1,0' ?>
<цели>
Переход на домашнюю страницу
Если вы хотите перейти на стандартную домашнюю страницу Salesforce, посмотрите на следующий пример:
Навигация.html
Создаем кнопку. Щелчок по этому «homeNavigation» будет обрабатываться в файле «js».
<шаблон><карта-молния заголовок '=' «Домашняя навигация» >
< делитель сорт '=' 'slds-var-m-around_medium' стиль '=' «высота: 20 пикселей; ширина: 400 пикселей» >
< б > Вы будете перенаправлены на главную страницу < / б >< бр >< / делитель >
<кнопка-молния этикетка '=' 'Вернуться на домашнюю страницу' по щелчку '=' { ГлавнаяНавигация } >< / кнопка-молния>
< / молния-карта>
< / шаблон>
Навигация.js
Тип должен быть «standard__namedPage», а имя страницы должно быть «home». Это указывается внутри метода-обработчика homeNavigation().
Импортировать { МолнияЭлемент } от 'удача' ;
Импортировать { НавигацияMixin } от 'молния/навигация'
экспорт по умолчанию сорт Навигация простирается НавигацияMixin ( МолнияЭлемент ) {
// метод-обработчик
// имя страницы должно быть домашней
// тип страницы стандартный__namedPage для домашней страницы
ГлавнаяНавигация ( ) {
этот [ НавигацияМиксин. Навигация ] ( {
тип : 'стандартная__namedPage' ,
атрибуты : {
имя страницы : 'дом'
}
} )
}
}
Выход:
Добавьте этот компонент на страницу приложения и нажмите кнопку «Перейти на домашнюю страницу».
Теперь вы находитесь на главной странице.
Переход к Chatter
Вы можете поделиться файлами, текстовыми сообщениями и сведениями журнала с помощью Salesforce Chatter. Перейти к Chatter можно напрямую с помощью службы навигации.
Навигация.html
Создаем кнопку. Щелчок по этому «chatterNavigation» будет обрабатываться в файле «js».
<шаблон><карта-молния заголовок '=' «Навигация по болтовне» >
< делитель сорт '=' 'slds-var-m-around_medium' стиль '=' «высота: 20 пикселей; ширина: 400 пикселей» >
< б > Вы будете перенаправлены в Chatter < / б >< бр >< / делитель >
<кнопка-молния этикетка '=' 'Иди в болтовню' по щелчку '=' { болтовняНавигация } >< / кнопка-молния>
< / молния-карта>
< / шаблон>
Навигация.js
Тип должен быть «standard__namedPage», а имя страницы — «chatter». Это указывается внутри метода-обработчика ChatterNavigation(). Вставьте следующий фрагмент в класс «js».
// метод-обработчик// имя страницы должно быть болтовней
// тип страницы стандартный__namedPage для болтовни
болтовняНавигация ( ) {
этот [ НавигацияМиксин. Навигация ] ( {
тип : 'стандартная__namedPage' ,
атрибуты : {
имя страницы : 'болтовня'
}
} )
}
Выход:
Обновите страницу. Теперь вы можете публиковать обновления и делиться файлами в Chatter, перейдя к нему.
Переход к новой записи
Не переходя на вкладку конкретного объекта для создания новой записи, вы можете напрямую создать новую запись для определенного объекта с помощью службы навигации. В этом сценарии нам нужно указать objectApiName и actionName в качестве атрибутов.
- ObjectApiName — это имя API объекта Salesforce, например «Учетная запись», «Контакт», «Обращение» и т. д.
- Создаем новую запись. Итак, имя действия должно быть «новым».
Навигация.html
Давайте создадим запись обращения. Создаем кнопку. Щелчок по этому «newRecordNavigation» будет обрабатываться в файле «js».
<шаблон><карта-молния заголовок '=' «Новая запись навигации» >
< div сорт '=' 'slds-var-m-around_medium' стиль '=' «высота: 20 пикселей; ширина: 400 пикселей» >
< б > Здесь вы можете создать дело... < / б >< бр >< / div >
<кнопка-молния этикетка '=' «Создать дело» по щелчку '=' { новаяЗаписьНавигация } >< / кнопка-молния>
< / молния-карта>
< / шаблон>
Навигация.js
Тип должен быть «standard__objectPage». Это указывается внутри метода-обработчика newRecordNavigation(). Вставьте следующий фрагмент в класс «js».
// метод-обработчик// Регистр — это objectApiName, а actionName — New.
// тип страницы стандартный__objectPage
новаяЗаписьНавигация ( ) {
этот [ НавигацияМиксин. Навигация ] ( {
тип : 'standard__objectPage' ,
атрибуты : {
имя_объектаApiName : 'Случай' ,
имя действия : 'новый'
}
} )
}
Выход:
Обновите страницу. Теперь вы можете создать запись, связанную с делом.
Если вы сохраните его, вы перейдете на страницу его записи.
Переход на страницу записи
Как и в предыдущей навигации (пример 3), мы можем перейти к конкретной записи и просмотреть или отредактировать детали. Еще одно свойство, которое вам необходимо передать в атрибутах, — это «recordId» (идентификатор существующей записи). В этом сценарии имя действия должно быть «просмотр».
Навигация.html
Перейдем к записи дела. Создаем кнопку. Щелчок по этому «viewRecordNavigation» будет обрабатываться в файле «js».
<шаблон><карта-молния заголовок '=' «Навигация по просмотру записей» >
< div сорт '=' 'slds-var-m-around_medium' стиль '=' «высота: 20 пикселей; ширина: 400 пикселей» >
< б > Посмотреть историю дела можно здесь... < / б >< бр >< / div >
<кнопка-молния этикетка '=' 'Видовая витрина' по щелчку '=' { просмотрЗаписьНавигация } >< / кнопка-молния>
< / молния-карта>
< / шаблон>
Навигация.js
Тип должен быть «standard__recordPage». Это указывается внутри метода-обработчика viewRecordNavigation(). Вставьте следующий фрагмент в класс «js».
// метод-обработчик// Case — это имя объектаApiName, а имя действия — это представление.
// тип страницы стандартный__recordPage
просмотрЗаписьНавигация ( ) {
этот [ НавигацияМиксин. Навигация ] ( {
тип : 'стандарт__recordPage' ,
атрибуты : {
идентификатор записи : '5002t00000PRrXkAAL' ,
имя_объектаApiName : 'Случай' ,
имя действия : 'вид'
}
} )
}
Выход:
Подробности дела вы можете увидеть после навигации. Здесь вы можете просмотреть и отредактировать детали дела.
Другая навигация
Давайте перейдем к представлению списка и файлам. Для представления списка вам потребуются имя объекта и имя фильтра. Вы найдете это в URL-адресе. Мы подробно опишем это на примере.
Файлы хранятся в объекте ContentDocument. Таким образом, для файлов имя объектаApiName будет «ContentDocument», а имя действия — «home».
Посмотреть список:
Файлы:
Навигация.html
<шаблон><карта-молния заголовок '=' 'навигационный' >
< div сорт '=' 'slds-var-m-around_medium' стиль '=' «высота: 20 пикселей; ширина: 400 пикселей» >
< б > Вы можете перейти к просмотру списка < / б >< бр >< / div >
<кнопка-молния этикетка '=' «Перейти к просмотру списка» по щелчку '=' { просмотр списканавигация } >< / кнопка-молния> < бр >< бр >
< div сорт '=' 'slds-var-m-around_medium' стиль '=' «высота: 20 пикселей; ширина: 400 пикселей» >
< б > Вы можете перейти к файлам < / б >< бр >< / div >
<кнопка-молния этикетка '=' «Перейти к файлам» по щелчку '=' { просмотр файланавигация } >< / кнопка-молния>
< / молния-карта>
< / шаблон>
Навигация.js
// Обработчик просмотра спискапросмотр списканавигация ( ) {
этот [ НавигацияМиксин. Навигация ] ( {
тип : 'standard__objectPage' ,
атрибуты : {
имя_объектаApiName : 'Случай' ,
имя действия : 'список' ,
состояние : {
имя фильтра : '00B2t000002oWELEA2'
}
}
} )
}
// Обработчик просмотра файлов
просмотр файланавигация ( ) {
этот [ НавигацияМиксин. Навигация ] ( {
тип : 'standard__objectPage' ,
атрибуты : {
имя_объектаApiName : «СодержимоеДокумента» ,
имя действия : 'дом'
}
} )
}
Выход:
Вы перейдете к просмотру списка обращений. Указанное нами имя фильтра — «Все закрытые дела».
Вы можете просмотреть свои файлы на этой странице приложения, нажав кнопку «Перейти к файлам».
Заключение
Salesforce LWC обеспечивает прямую навигацию, с помощью которой вы можете перемещаться, оставаясь на определенной странице. В этом руководстве мы изучили различные способы навигации с помощью службы навигации веб-компонентов Lightning. Существует множество других способов навигации, но мы обсудили важную навигацию, которую должны знать все разработчики LWC. Во всех способах навигации NavigationMixin необходимо импортировать из файла Lightning/Navigation.