O NavigationMixin deve ser importado do relâmpago/navegação no arquivo “javascript”. Navegar é o método disponível neste módulo. Leva o tipo e os atributos. O tipo especifica o tipo de página que estamos navegando e os atributos levam o pageName.
- Em Configuração, pesquise “Lightning App Builder” e clique em “Novo”.
- Escolha a “Página do aplicativo” e clique em “Avançar”.
- Dê o rótulo como “Serviços de Navegação”.
- Vá com uma região e clique em “Concluído”.
Seu aplicativo está pronto para uso. Procure-o em “App Launcher”.
Para todos os exemplos de serviço de navegação que serão discutidos neste guia, usamos o mesmo arquivo “meta-xml”. Você pode colocar os componentes na página do aplicativo que criou agora. Não especificaremos este arquivo (meta-xml) novamente nos trechos de código de exemplo.
'1,0' ?>
Navegando para a página inicial
Se você quiser navegar até a página inicial padrão do Salesforce, veja o exemplo a seguir:
Navegação.html
Criamos um botão. O clique deste “homeNavigation” será tratado no arquivo “js”.
< divisão aula = 'slds-var-m-around_medium' estilo = 'altura:20px; largura:400px' >
< b > Você será redirecionado para a página inicial < / b >< br >< / divisão >
< / cartão relâmpago>
< / modelo>
Navegação.js
O tipo deve ser “standard__namedPage” e o pageName deve ser “home”. Isso é especificado dentro do método manipulador homeNavigation().
importar { Elemento Relâmpago } de 'sorte' ;
importar { NavegaçãoMixin } de 'relâmpago/navegação'
exportar padrão aula Navegação estende NavegaçãoMixin ( Elemento Relâmpago ) {
// método manipulador
// pageName deve estar em casa
// o tipo da página é standard__namedPage para a página inicial
homeNavegação ( ) {
esse [ NavegaçãoMixin. Navegar ] ( {
tipo : 'standard__namedPage' ,
atributos : {
nome da página : 'lar'
}
} )
}
}
Saída:
Adicione este componente à página do aplicativo e clique no botão “Ir para a página inicial”.
Agora você está na página inicial.
Navegando para o Chatter
Você pode compartilhar arquivos, mensagens de texto e detalhes de registro usando o Salesforce Chatter. Pode ser possível navegar diretamente para o Chatter usando o serviço de navegação.
Navegação.html
Criamos um botão. O clique deste “chatterNavigation” será tratado no arquivo “js”.
< divisão aula = 'slds-var-m-around_medium' estilo = 'altura:20px; largura:400px' >
< b > Você será redirecionado para o Chatter < / b >< br >< / divisão >
< / cartão relâmpago>
< / modelo>
Navegação.js
O tipo deve ser “standard__namedPage” e o pageName deve ser “chatter”. Isso é especificado dentro do método manipulador chatterNavigation(). Cole o seguinte trecho dentro da classe “js”.
// método manipulador// pageName deve ser chatter
// o tipo de página é standard__namedPage para o chatter
chatterNavigation ( ) {
esse [ NavegaçãoMixin. Navegar ] ( {
tipo : 'standard__namedPage' ,
atributos : {
nome da página : 'conversa'
}
} )
}
Saída:
Recarregue a página. Agora você pode publicar as atualizações e compartilhar os arquivos no Chatter navegando até ele.
Navegando para o novo registro
Sem acessar a guia do objeto específico para criar um novo registro, você pode criar diretamente um novo registro para um objeto específico usando o Serviço de Navegação. Neste cenário, precisamos especificar objectApiName e actionName como atributos.
- O objectApiName é o nome da API do objeto Salesforce como “Conta”, “Contato”, “Caso”, etc.
- Criamos um novo registro. Portanto, o actionName deve ser “novo”.
Navegação.html
Vamos criar um registro de caso. Criamos um botão. O clique deste “newRecordNavigation” será tratado no arquivo “js”.
< divisão aula = 'slds-var-m-around_medium' estilo = 'altura:20px; largura:400px' >
< b > Você pode criar um caso aqui... < / b >< br >< / divisão >
< / cartão relâmpago>
< / modelo>
Navegação.js
O tipo deve ser “standard__objectPage”. Isso é especificado dentro do método manipulador newRecordNavigation(). Cole o seguinte trecho dentro da classe “js”.
// método manipulador// Case é o objectApiName e actionName é New.
// o tipo da página é standard__objectPage
novoRecordNavigation ( ) {
esse [ NavegaçãoMixin. Navegar ] ( {
tipo : 'padrão__objetoPágina' ,
atributos : {
objectApiName : 'Caso' ,
açãoNome : 'novo'
}
} )
}
Saída:
Recarregue a página. Agora você pode criar um registro relacionado ao Caso.
Se você salvá-lo, você navegará para sua página de registro.
Navegando até a página de registro
Semelhante à navegação anterior (Exemplo 3), podemos ir até o registro específico e visualizar ou editar os detalhes. Mais uma propriedade que você precisa passar nos atributos é o “recordId” (Id do registro existente). O actionName deve ser “view” neste cenário.
Navegação.html
Vamos navegar até o registro do caso. Criamos um botão. O clique deste “viewRecordNavigation” será tratado no arquivo “js”.
< divisão aula = 'slds-var-m-around_medium' estilo = 'altura:20px; largura:400px' >
< b > Você pode ver o registro do caso aqui... < / b >< br >< / divisão >
< / cartão relâmpago>
< / modelo>
Navegação.js
O tipo deve ser “standard__recordPage”. Isso é especificado dentro do método manipulador viewRecordNavigation(). Cole o seguinte trecho dentro da classe “js”.
// método manipulador// Case é o objectApiName e actionName é view.
// o tipo da página é standard__recordPage
viewRecordNavigation ( ) {
esse [ NavegaçãoMixin. Navegar ] ( {
tipo : 'standard__recordPage' ,
atributos : {
registroId : '5002t00000PRrXkAAL' ,
objectApiName : 'Caso' ,
açãoNome : 'visualizar'
}
} )
}
Saída:
Você pode ver os detalhes do caso após a navegação. Aqui você pode visualizar e editar os detalhes do caso.
Outras navegações
Vamos navegar até a visualização de lista e arquivos. Para a visualização de lista, você precisará do nome do objeto e do filterName. Você encontrará isso no URL. Iremos elaborar isso no exemplo.
Os arquivos são armazenados no objeto ContentDocument. Assim, para os arquivos, o objectApiName será “ContentDocument” e o actionName será “home”.
Exibição de lista:
Arquivos:
Navegação.html
< divisão aula = 'slds-var-m-around_medium' estilo = 'altura:20px; largura:400px' >
< b > Você pode navegar até a visualização de lista < / b >< br >< / divisão >
< divisão aula = 'slds-var-m-around_medium' estilo = 'altura:20px; largura:400px' >
< b > Você pode navegar até Arquivos < / b >< br >< / divisão >
< / cartão relâmpago>
< / modelo>
Navegação.js
// manipulador de listviewviewListNavigation ( ) {
esse [ NavegaçãoMixin. Navegar ] ( {
tipo : 'padrão__objetoPágina' ,
atributos : {
objectApiName : 'Caso' ,
açãoNome : 'lista' ,
estado : {
filtroNome : '00B2t000002oWELEA2'
}
}
} )
}
// Manipulador de visualização de arquivos
viewFileNavigation ( ) {
esse [ NavegaçãoMixin. Navegar ] ( {
tipo : 'padrão__objetoPágina' ,
atributos : {
objectApiName : 'ConteúdoDocumento' ,
açãoNome : 'lar'
}
} )
}
Saída:
Você navegará até a visualização da lista de casos. O filterName que especificamos é “Todos os casos encerrados”.
Você pode visualizar seus arquivos nesta página do aplicativo clicando no botão “Ir para Arquivos”.
Conclusão
O Salesforce LWC fornece a navegação direta na qual você pode navegar permanecendo em uma página específica. Neste guia, aprendemos as diferentes navegações usando o Lightning Web Component Navigation Service. Existem muitas outras navegações, mas discutimos a navegação importante que todos os desenvolvedores LWC devem conhecer. Em todas as navegações, o NavigationMixin deve ser importado do relâmpago/navegação.