LWC – Навигационна услуга

Lwc Navigacionna Usluga



Знаете ли, че LWC предоставя начин за навигиране директно от съществуващата страница към начална страница, файлове, запис, аура, VF страница, разговор, списък и раздел? Отговорът е да. Ние ще постигнем тази функционалност с помощта на концепцията за навигационна услуга. В това ръководство ще обсъдим подробно тези навигации с примери. Преди това трябва да имате страница на приложението, за да можете да добавите вашите LWC компоненти, които обсъждаме в това ръководство. Можете да го навигирате от тази страница на приложението.

NavigationMixin трябва да бъде импортиран от lightning/navigation във файла „javascript“. Навигация е наличният метод в този модул. Взима типа и атрибутите. Типът указва типа на страницата, в която навигираме, а атрибутите приемат pageName.

  1. От настройката потърсете „Lightning App Builder“ и щракнете върху „Ново“.
  2. Изберете „Страница на приложението“ и щракнете върху „Напред“.
  3. Дайте етикета като „Навигационни услуги“.
  4. Отидете с един регион и щракнете върху „Готово“.

Вашето приложение е готово за използване. Потърсете го под „Стартов панел за приложения“.









За всички примери за навигационна услуга, които ще бъдат обсъдени в това ръководство, ние използваме един и същ „meta-xml“ файл. Можете да поставите компонентите в страницата на вашето приложение, която сте създали сега. Няма да посочваме отново този файл (meta-xml) под примерните кодови фрагменти.



'1,0' ?>

'http://soap.sforce.com/2006/04/metadata' >

57,0

вярно

<цели>

lightning__AppPage



Навигиране до начална страница

Ако искате да навигирате до стандартната начална страница на Salesforce, вижте следния пример:





Навигация.html

Създаваме бутон. Щракването върху тази „homeNavigation“ ще се обработва във файла „js“.

<шаблон>

<светкавична карта заглавие = „Домашна навигация“ >

< див клас = 'slds-var-m-around_medium' стил = 'височина:20px; ширина:400px' >

< b > Ще бъдете пренасочени към началната страница < / b >< бр >< / див >

<светкавичен бутон етикет = 'Отидете в началната страница' onclick = { homeNavigation } >< / светкавица-бутон>

< / светкавична карта>

< / шаблон>

Navigation.js

Типът трябва да бъде „standard__namedPage“, а името на страницата трябва да бъде „home“. Това е посочено в метода на манипулатора homeNavigation().



импортиране { LightningElement } от 'късмет' ;

импортиране { NavigationMixin } от 'светкавица/навигация'

износ по подразбиране клас Навигация се простира NavigationMixin ( LightningElement ) {

// метод на манипулатор

// pageName трябва да е home

// типът на страницата е standard__namedPage за началната страница

homeNavigation ( ) {

това [ NavigationMixin. Навигирайте ] ( {

Тип : 'standard__namedPage' ,

атрибути : {

pageName : 'У дома'

}

} )

}

}

Изход:

Добавете този компонент към страницата на приложението и щракнете върху бутона „Отидете на началната страница“.

Сега сте на началната страница.

Навигиране към Chatter

Можете да споделяте файловете, текстовите съобщения и подробностите за регистрационния файл с помощта на Salesforce Chatter. Може да е възможно да навигирате до Chatter директно с помощта на услугата за навигация.

Навигация.html

Създаваме бутон. Щракването върху този „chatterNavigation“ ще се обработва във файла „js“.

<шаблон>

<светкавична карта заглавие = „Чатър навигация“ >

< див клас = 'slds-var-m-around_medium' стил = 'височина:20px; ширина:400px' >

< b > Ще бъдете пренасочени към Chatter < / b >< бр >< / див >

<светкавичен бутон етикет = „Отидете на Chatter“ onclick = { chatterNavigation } >< / светкавица-бутон>

< / светкавична карта>

< / шаблон>

Navigation.js

Типът трябва да бъде „standard__namedPage“, а името на страницата трябва да бъде „chatter“. Това е посочено в метода на манипулатора chatterNavigation(). Поставете следния фрагмент в класа „js“.

// метод на манипулатор

// pageName трябва да е chatter

// типът на страницата е standard__namedPage за чатъра

chatterNavigation ( ) {

това [ NavigationMixin. Навигирайте ] ( {

Тип : 'standard__namedPage' ,

атрибути : {

pageName : 'бърборене'

}

} )

}

Изход:

Опреснете страницата. Сега можете да публикувате актуализациите и да споделяте файловете в Chatter, като отидете до него.

Навигация към нов запис

Без да отивате в раздела за конкретен обект, за да създадете нов запис, можете директно да създадете нов запис за конкретен обект, като използвате услугата за навигация. В този сценарий трябва да посочим objectApiName и actionName като атрибути.

  1. objectApiName е името на API на обекта на Salesforce като „Акаунт“, „Контакт“, „Случай“ и т.н.
  2. Създаваме нов запис. Така че actionName трябва да е „ново“.

Навигация.html

Нека създадем запис на случай. Създаваме бутон. Щракването върху този „newRecordNavigation“ ще се обработва във файла „js“.

<шаблон>

<светкавична карта заглавие = „Нова навигация за записи“ >

< див клас = 'slds-var-m-around_medium' стил = 'височина:20px; ширина:400px' >

< b > Можете да създадете случай от тук... < / b >< бр >< / див >

<светкавичен бутон етикет = „Създаване на случай“ onclick = { newRecordNavigation } >< / светкавица-бутон>

< / светкавична карта>

< / шаблон>

Navigation.js

Типът трябва да бъде „standard__objectPage“. Това е посочено в метода на манипулатора newRecordNavigation(). Поставете следния фрагмент в класа „js“.

// метод на манипулатор

// Case е objectApiName и actionName е New.

// типът на страницата е standard__objectPage

newRecordNavigation ( ) {

това [ NavigationMixin. Навигирайте ] ( {

Тип : 'standard__objectPage' ,

атрибути : {

objectApiName : 'случай' ,

име на действие : 'ново'

}

} )

}

Изход:

Опреснете страницата. Сега можете да създадете запис, свързан със случая.

Ако го запазите, ще отидете до неговата страница със запис.

Навигиране до страницата за запис

Подобно на предишната навигация (Пример 3), можем да отидем до конкретния запис и да прегледаме или редактираме подробностите. Още едно свойство, което трябва да предадете в атрибутите, е „recordId“ (Id на съществуващия запис). Името на actionName трябва да бъде „view“ в този сценарий.

Навигация.html

Нека отидем до записа на случая. Създаваме бутон. Щракването върху този „viewRecordNavigation“ ще се обработва във файла „js“.

<шаблон>

<светкавична карта заглавие = „Преглед на навигацията на записите“ >

< див клас = 'slds-var-m-around_medium' стил = 'височина:20px; ширина:400px' >

< b > Можете да видите записа на случая от тук... < / b >< бр >< / див >

<светкавичен бутон етикет = 'витрина' onclick = { viewRecordNavigation } >< / светкавица-бутон>

< / светкавична карта>

< / шаблон>

Navigation.js

Типът трябва да бъде „standard__recordPage“. Това е посочено в метода на манипулатора viewRecordNavigation(). Поставете следния фрагмент в класа „js“.

// метод на манипулатор

// Case е objectApiName, а actionName е view.

// типът на страницата е standard__recordPage

viewRecordNavigation ( ) {

това [ NavigationMixin. Навигирайте ] ( {

Тип : 'standard__recordPage' ,

атрибути : {

recordId : „5002t00000PRrXkAAL“ ,

objectApiName : 'случай' ,

име на действие : 'изглед'

}

} )

}

Изход:

Можете да видите подробностите за случая след навигацията. Тук можете да видите и редактирате подробностите за случая.

Други навигации

Нека отидем до изглед на списък и файлове. За изгледа на списък ще ви е необходимо името на обекта и filterName. Ще намерите това в URL адреса. Ще разработим това в примера.

Файловете се съхраняват в обекта ContentDocument. Така че за файловете objectApiName ще бъде „ContentDocument“, а actionName е „home“.

Изглед на списък:

файлове:

Навигация.html

<шаблон>

<светкавична карта заглавие = 'навигационен' >

< див клас = 'slds-var-m-around_medium' стил = 'височина:20px; ширина:400px' >

< b > Можете да навигирате до Списъчен изглед < / b >< бр >< / див >

<светкавичен бутон етикет = „Отидете на изглед на списък“ onclick = { viewListNavigation } >< / светкавица-бутон> < бр >< бр >

< див клас = 'slds-var-m-around_medium' стил = 'височина:20px; ширина:400px' >

< b > Можете да навигирате до Файлове < / b >< бр >< / див >

<светкавичен бутон етикет = „Отидете на файлове“ onclick = { viewFileNavigation } >< / светкавица-бутон>



< / светкавична карта>

< / шаблон>

Navigation.js

// Манипулатор на Listview

viewListNavigation ( ) {

това [ NavigationMixin. Навигирайте ] ( {

Тип : 'standard__objectPage' ,

атрибути : {

objectApiName : 'случай' ,

име на действие : 'списък' ,

състояние : {

име на филтър : „00B2t000002oWELEA2“

}

}

} )

}

// Манипулатор на Filesview

viewFileNavigation ( ) {

това [ NavigationMixin. Навигирайте ] ( {

Тип : 'standard__objectPage' ,

атрибути : {

objectApiName : „Документ за съдържание“ ,

име на действие : 'У дома'

}

} )

}

Изход:

Ще отидете до вашия изглед на списък със случаи. Името на филтъра, което посочихме, е „Всички затворени случаи“.

Можете да видите вашите файлове от тази страница на приложението, като щракнете върху бутона „Отидете на файлове“.

Заключение

Salesforce LWC предоставя директна навигация, в която можете да навигирате, оставайки в конкретна страница. В това ръководство научихме различната навигация с помощта на услугата за навигация на уеб компонент Lightning. Съществуват много други навигации, но ние обсъдихме важната навигация, която всички LWC разработчици трябва да знаят. Във всички навигации NavigationMixin трябва да се импортира от светкавица/навигация.