Apresentando a extensão do Lightning Studio
O Lightning Studio cria o desenvolvimento do Salesforce LWC de maneira fácil e rápida. Dentro deste editor, podemos criar diretamente os canais Apex/mensagem e scripts LWC. Além disso, podemos implantar diretamente os componentes LWC (personalizados) de uma só vez. Vamos ver como adicionar isso ao nosso site e abri-lo.
Vá para o site e procure por “Lightning Studio – Add Chrome” (se você estiver usando o Chrome). Clique no botão 'Adicionar ao Chrome'.
Podemos ver que ele é adicionado ao Chrome. Agora, está desativado. Ele será ativado apenas se a Salesforce Org estiver aberta.
Ele é ativado após o login no Salesforce Org.
Clique na extensão.
Vá para a esquerda e selecione o terceiro ícone que é usado para criar um novo componente LWC.
- Primeiro, precisamos especificar o nome do componente.
- O “isExposed” é usado para definir a visibilidade do componente no Salesforce. Deve ser definido como verdadeiro.
- É importante especificar o destino onde o componente será colocado. Vários alvos podem ser selecionados.
- A implantação do componente é a etapa final (clique em “Deploy”).
Exemplo 1: adicionando à página de registro
Neste cenário, criamos o script LWC “firstComponent” que exibe o texto “Added to Record page” e adicionamos este componente à página “Account Record”. No arquivo “firstComponent.js-meta.xml”, precisamos especificar o destino como Lightning__RecordPage.
Estrutura do código:
firstComponent.html
< modelo >< cartão relâmpago variante = 'Estreito' título = 'Linux' >
< p >> Adicionado à página de registro p >
cartão relâmpago >
modelo >
firstComponent.js
importar { Elemento Relâmpago } de 'sorte' ;exportar classe padrão FirstComponent estende LightningElement {
}
firstComponent.js-meta.xml
< ?xml versão = '1,0' ? >< LightningComponentBundle xmlns = 'http://soap.sforce.com/2006/04/metadata' >
< apiVersion > 57,0 apiVersion >
< está exposto > verdadeiro está exposto >
< alvos >
< alvo > Lightning__RecordPage alvo >
alvos >
LightningComponentBundle >
Adicionando um componente:
Acesse a Salesforce Org e procure o aplicativo “Sales” no Iniciador de aplicativos.
Abra qualquer registro de conta navegando até a guia 'Contas'. Vá para o ícone de engrenagem e selecione 'Editar página'.
Agora, vá para a esquerda e procure seu componente.
Arraste o componente e coloque-o abaixo do “Painel Destaques”.
Clique em “Ativar” e atribua-o como padrão da organização. Finalmente, salve a página de registro.
Está feito. Agora, volte para a página do app “Vendas” e vá em “Registro de Conta” (qualquer registro). Você pode ver que o componente personalizado foi adicionado.
Exemplo 2: adicionando à página inicial
Vamos utilizar o “firstComponent”. Modifique o texto do parágrafo como “Adicionado à página inicial” no arquivo HTML. Especifique o destino como “lightning__HomePage” no arquivo “firstComponent.js-meta.xml”.
firstComponent.html
< p > Adicionado à página inicial < / p >
< / cartão relâmpago>
< / modelo>
firstComponent.js-meta.xml
versão = '1,0' ?>< / alvos>
< / LightningComponentBundle>
Adicionando um componente:
Acesse o app “Vendas” e clique na aba “Página inicial”.
Clique na página de edição disponível no ícone de engrenagem. Procure o componente e coloque-o acima do componente “Desempenho”. Salve a página.
Atualize a guia 'Página inicial de vendas'.
Podemos ver que nosso componente é adicionado à página inicial.
Exemplo 3: adicionando à página do aplicativo
Vamos utilizar o “firstComponent”. Modifique o texto do parágrafo como “Adicionado à página do aplicativo” no arquivo HTML. Especifique o destino como “lightning__AppPage” no arquivo “firstComponent.js-meta.xml”.
firstComponent.html
< modelo >< cartão relâmpago variante = 'Estreito' título = 'Linux' >
< p > Adicionado à página do aplicativo p >
cartão relâmpago >
modelo >
firstComponent.js-meta.xml
versão = '1,0' ?>< / alvos>
< / LightningComponentBundle>
Adicionando um componente:
Primeiro, precisamos criar uma página de aplicativo no Salesforce usando o Lightning App Builder. Pesquise por “Lightning App Builder” em “Quick Find” e clique em “New” para criar uma nova página Lightning.
Escolha a página do aplicativo e vá para “Avançar”.
Dê o rótulo como “Linuxhint App” e vá para “Next”.
A partir de agora, só precisamos de uma região para colocar o componente. Então, escolha “Uma região” e clique em “Concluído”.
Agora, arraste o “firstComponent” para a página e salve a página.
Aparecerá um pop-up no qual a página precisa ser ativada. Clique em “Ativar”.
Depois disso, você precisa adicionar uma página ao aplicativo. Vá para a guia “LIGHTNING EXPERIENCE” e faça isso. Salve esta ativação.
Agora, vá para o App Launcher e procure por “Linuxhint App”. Você pode ver que nosso componente foi adicionado à página do aplicativo.
Conclusão
Agora, podemos entender como adicionar o LWC à página do aplicativo, à página inicial e à página de registro. Em todos os cenários, usamos os mesmos exemplos para ter uma ideia melhor. Certifique-se de que o “isExposed” seja verdadeiro. Caso contrário, o componente não ficará visível na Salesforce Org. Em todo este guia, utilizamos o editor Lightning Studio (Beta) para desenvolver o código. Todas as etapas são explicadas sobre como baixar e usar este editor no início deste guia.