LWC – Navigační služba

Lwc Navigacni Sluzba



Víte, že LWC poskytuje způsob, jak přejít přímo z existující stránky na Home, Files, Record, Aura, VF page, Chatter, List a Tab? Odpověď je ano. Této funkcionality dosáhneme pomocí konceptu Navigační služby. V tomto návodu tyto navigace s příklady podrobně probereme. Předtím musíte mít stránku aplikace, abyste mohli přidat své komponenty LWC, o kterých diskutujeme v této příručce. Můžete ji procházet z této stránky aplikace.

NavigationMixin je třeba importovat z lightning/navigace v souboru „javascript“. Navigace je dostupná metoda v tomto modulu. Chce to typ a atributy. Typ určuje typ stránky, kterou procházíme, a atributy mají název stránky.

  1. V nastavení vyhledejte „Lightning App Builder“ a klikněte na „Nový“.
  2. Vyberte „Stránka aplikace“ a klikněte na „Další“.
  3. Uveďte štítek jako „Navigační služby“.
  4. Přejděte na jednu oblast a klikněte na „Hotovo“.

Vaše aplikace je připravena k použití. Vyhledejte jej pod „Spouštěčem aplikací“.









Pro všechny příklady navigačních služeb, které budou probrány v této příručce, používáme stejný soubor „meta-xml“. Komponenty můžete umístit na stránku aplikace, kterou jste nyní vytvořili. Tento soubor (meta-xml) nebudeme znovu specifikovat pod ukázkovými úryvky kódu.



'1,0' ?>

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

57,0

pravda



lightning__AppPage



Přechod na domovskou stránku

Pokud chcete přejít na standardní domovskou stránku Salesforce, podívejte se na následující příklad:





Navigace.html

Vytvoříme tlačítko. Kliknutí na tuto „homeNavigation“ bude zpracováno v souboru „js“.

<šablona>

titul = 'Navigace domů' >

< div třída = 'slds-var-m-around_medium' styl = 'výška:20px; šířka:400px' >

< b > Budete přesměrováni na domovskou stránku < / b < br < / div >

označení = 'Jít na domovskou stránku' při kliknutí = { homeNavigace } < / blesk-tlačítko>

< / blesková karta>

< / šablona>

Navigation.js

Typ by měl být „standard__namedPage“ a název stránky by měl být „home“. Toto je specifikováno uvnitř metody obslužné rutiny homeNavigation().



import { LightningElement } z 'štěstí' ;

import { Navigační mix } z 'blesk/navigace'

vývozní výchozí třída Navigace rozšiřuje Navigační mix ( LightningElement ) {

// metoda handleru

// název stránky by měl být home

// typ stránky je standard__namedPage pro domov

homeNavigace ( ) {

tento [ Navigační mix. Navigovat ] ( {

typ : 'standard__namedPage' ,

atributy : {

název stránky : 'Domov'

}

} )

}

}

Výstup:

Přidejte tuto komponentu na stránku aplikace a klikněte na tlačítko „Přejít na domovskou stránku“.

Nyní jste na domovské stránce.

Navigace na Chatter

Pomocí aplikace Salesforce Chatter můžete sdílet soubory, textové zprávy a podrobnosti protokolu. Je možné navigovat do Chatter přímo pomocí navigační služby.

Navigace.html

Vytvoříme tlačítko. Kliknutí na tuto „chatterNavigation“ bude zpracováno v souboru „js“.

<šablona>

titul = 'Navigace chatování' >

< div třída = 'slds-var-m-around_medium' styl = 'výška:20px; šířka:400px' >

< b > Budete přesměrováni na Chatter < / b < br < / div >

označení = „Přejít na Chatter“ při kliknutí = { kláboseníNavigace } < / blesk-tlačítko>

< / blesková karta>

< / šablona>

Navigation.js

Typ by měl být „standard__namedPage“ a název stránky by měl být „chatter“. Toto je specifikováno uvnitř metody obsluhy chatterNavigation(). Vložte následující úryvek do třídy „js“.

// metoda handleru

// název stránky by měl být chatter

// typ stránky je standard__namedPage pro chatování

kláboseníNavigace ( ) {

tento [ NavigationMixin. Navigovat ] ( {

typ : 'standard__namedPage' ,

atributy : {

název stránky : 'klábosení'

}

} )

}

Výstup:

Obnovte stránku. Nyní můžete zveřejňovat aktualizace a sdílet soubory ve službě Chatter tak, že do ní přejdete.

Přechod na Nový záznam

Aniž byste museli přejít na kartu konkrétního objektu a vytvořit nový záznam, můžete přímo vytvořit nový záznam pro konkrétní objekt pomocí navigační služby. V tomto scénáři musíme zadat objectApiName a actionName jako atributy.

  1. ObjectApiName je název API objektu Salesforce, jako je „Účet“, „Kontakt“, „Případ“ atd.
  2. Vytvoříme nový záznam. Název akce by tedy měl být „nový“.

Navigace.html

Vytvoříme záznam případu. Vytvoříme tlačítko. Kliknutí na tuto „newRecordNavigation“ bude zpracováno v souboru „js“.

<šablona>

titul = 'Nová navigace záznamů' >

< div třída = 'slds-var-m-around_medium' styl = 'výška:20px; šířka:400px' >

< b > Zde můžete vytvořit případ... < / b < br < / div >

označení = 'Vytvořit případ' při kliknutí = { newRecordNavigation } < / blesk-tlačítko>

< / blesková karta>

< / šablona>

Navigation.js

Typ by měl být „standard__objectPage“. Toto je specifikováno uvnitř metody manipulace newRecordNavigation(). Vložte následující úryvek do třídy „js“.

// metoda handleru

// Case je objectApiName a actionName je New.

// typ stránky je standard__objectPage

newRecordNavigation ( ) {

tento [ Navigační mix. Navigovat ] ( {

typ : 'standard__objectPage' ,

atributy : {

objectApiName : 'Pouzdro' ,

actionName : 'Nový'

}

} )

}

Výstup:

Obnovte stránku. Nyní můžete vytvořit záznam související s Případem.

Pokud jej uložíte, přejdete na jeho záznamovou stránku.

Přechod na stránku záznamu

Podobně jako v předchozí navigaci (Příklad 3) můžeme přejít na konkrétní záznam a zobrazit nebo upravit podrobnosti. Další vlastností, kterou musíte v atributech předat, je „recordId“ (ID existujícího záznamu). Název akce by měl být v tomto scénáři „zobrazit“.

Navigace.html

Přejdeme k záznamu případu. Vytvoříme tlačítko. Kliknutí na tuto „viewRecordNavigation“ bude zpracováno v souboru „js“.

<šablona>

titul = 'Zobrazit navigaci po záznamu' >

< div třída = 'slds-var-m-around_medium' styl = 'výška:20px; šířka:400px' >

< b > Záznam případu si můžete prohlédnout zde... < / b < br < / div >

označení = 'Viewcase' při kliknutí = { viewRecordNavigation } < / blesk-tlačítko>

< / blesková karta>

< / šablona>

Navigation.js

Typ by měl být „standard__recordPage“. Toto je specifikováno uvnitř metody obslužné rutiny viewRecordNavigation(). Vložte následující úryvek do třídy „js“.

// metoda handleru

// Case je objektApiName a actionName je pohled.

// typ stránky je standard__recordPage

viewRecordNavigation ( ) {

tento [ NavigationMixin. Navigovat ] ( {

typ : 'standard__recordPage' ,

atributy : {

recordId : '5002t00000PRrXkAAL' ,

objectApiName : 'Pouzdro' ,

actionName : 'Pohled'

}

} )

}

Výstup:

Podrobnosti o případu můžete vidět po navigaci. Zde můžete zobrazit a upravit podrobnosti případu.

Jiné navigace

Přejdeme do zobrazení seznamu a souborů. Pro zobrazení seznamu budete vyžadovat název objektu a název filtru. To najdete v URL. Vysvětlíme si to na příkladu.

Soubory jsou uloženy v objektu ContentDocument. Takže pro soubory bude objectApiName „ContentDocument“ a actionName bude „home“.

Zobrazení seznamu:

Soubory:

Navigace.html

<šablona>

titul = 'navigační' >

< div třída = 'slds-var-m-around_medium' styl = 'výška:20px; šířka:400px' >

< b > Můžete přejít do zobrazení seznamu < / b < br < / div >

označení = 'Přejít na zobrazení seznamu' při kliknutí = { viewListNavigation } < / blesk-tlačítko> < br < br >

< div třída = 'slds-var-m-around_medium' styl = 'výška:20px; šířka:400px' >

< b > Můžete přejít na Soubory < / b < br < / div >

označení = 'Přejít na soubory' při kliknutí = { viewFileNavigation } < / blesk-tlačítko>



< / blesková karta>

< / šablona>

Navigation.js

// Obslužný program Listview

viewListNavigation ( ) {

tento [ Navigační mix. Navigovat ] ( {

typ : 'standard__objectPage' ,

atributy : {

objectApiName : 'Pouzdro' ,

actionName : 'seznam' ,

Stát : {

název filtru : '00B2t000002oWELEA2'

}

}

} )

}

// Obslužný program Filesview

viewFileNavigation ( ) {

tento [ NavigationMixin. Navigovat ] ( {

typ : 'standard__objectPage' ,

atributy : {

objectApiName : 'ContentDocument' ,

actionName : 'Domov'

}

} )

}

Výstup:

Přejdete do zobrazení seznamu případů. Zadaný název filtru je „Všechny uzavřené případy“.

Soubory můžete zobrazit na této stránce aplikace kliknutím na tlačítko „Přejít na soubory“.

Závěr

Salesforce LWC poskytuje přímou navigaci, ve které se můžete pohybovat a zůstat na konkrétní stránce. V této příručce jsme se naučili různé navigace pomocí Lightning Web Component Navigation Service. Existuje mnoho dalších navigací, ale diskutovali jsme o důležité navigaci, kterou musí znát všichni vývojáři LWC. Ve všech navigacích musí být NavigationMixin importován z lightning/navigace.