Skip to main content

Descobrir ações de componentes Web do Lightning

Objetivos de aprendizagem

Após concluir esta unidade, você estará apto a:

  • Criar uma ação e um componente Web do Lightning para preencher campos com base nos dados do usuário e enviar mensagens de feedback aos usuários.
  • Começar a migrar a funcionalidade do botão personalizado JavaScript para alternativas que funcionem bem com o Lightning.
Nota

Nota

Deseja aprender em português (Brasil)? Nesse emblema, as validações dos desafios práticos do Trailhead funcionam em inglês. As traduções são fornecidas entre parênteses como referência. No Trailhead Playground, (1) mude a localidade para Estados Unidos, (2) mude o idioma para inglês e (3) copie e cole apenas os valores em inglês. Siga as instruções aqui.

Consulte o emblema Trailhead no seu idioma para saber mais sobre como aproveitar a experiência de Trailhead em outros idiomas.

Ações de componentes Web do Lightning: inteligentes, rápidas e flexíveis

Abordamos várias soluções que funcionam tanto no Lightning Experience quanto no Salesforce Classic e que são ótimas substitutas dos botões JavaScript. Mas reconhecemos que essas soluções declarativas e programáticas não tratam de todos os casos de uso. A boa notícia é que existe algo que trata de muitas outras coisas. Apresentamos as ações do componentes Web do Lightning: ações rápidas que chamam componentes Web do Lightning.

Nota

A partir da versão Spring ‘19 (API versão 45.0), é possível criar componentes do Lightning usando dois modelos de programação: o modelo de componentes Web do Lightning e o modelo original de componentes do Aura. Os componentes Web do Lightning e os componentes do Aura podem coexistir e operar em conjunto em uma página. Este conteúdo aborda os componentes Web do Lightning.

As ações do componente Web do Lightning são criadas na estrutura de componente Web do Lightning existente. É fácil converter seus componentes Web do Lightning existentes em ações e usá-las no Lightning Experience.

Você torna um componente Web do Lightning invocável como uma ação adicionando lightning__RecordAction como um destino no arquivo XML de configuração de metadados do componente e especificando o actionType para targetConfigs. Para que a ação apareça em uma janela modal definida pelo Salesforce, defina actionType como ScreenAction. Para executar a ação sem um modal ou para definir uma janela modal personalizada, defina actionType como Action.

Outra propriedade útil para uma ação do componentes Web do Lightning é recordId, que fornece o contexto do registro para o componente quando ele é invocado de uma página de registro do Lightning. Para acessar os dados ou metadados de um registro, na classe JavaScript do componente, você usa o decorador @api para criar uma propriedade recordId pública.

Vamos ver as ações dos componentes Web do Lightning em detalhes. A seguir, falaremos sobre algumas funcionalidades dos botões JavaScript que podem ser abordadas com ações do componente Web do Lightning, como preencher campos com base nas informações do usuário e enviar mensagens de feedback durante a entrada de dados.

Preencher campos com base nas informações do usuário e enviar mensagens de feedback aos usuários

Digamos que você use botões JavaScript para validar ou manipular dados e dar a seus usuários feedback ou instruções quando eles trabalham com registros. Vejamos um exemplo de como você poderá validar ou manipular dados facilmente em um componente Web do Lightning antes de seus usuários criarem ou atualizarem um registro.

Criamos um objeto personalizado em nossa organização de exemplo chamado Estudo de caso, que usamos para rastrear projetos de pesquisa diferentes. Também temos um objeto personalizado Test User (Usuário de teste) para que possamos adicionar novos usuários de teste aos estudos de caso e capturar seus nomes e endereços de e-mail. Como o endereço de email é nosso método de contato principal, queremos ter a certeza de que ele foi digitado corretamente. Também queremos criar um apelido exclusivo para os usuários de teste no estudo de caso, de forma que eles possam permanecer anônimos.

Vamos criar uma ação do componente Web Lightning que exibe os campos de nome e de endereço de email, valida o endereço de email e usa o nome e um número aleatório para criar o apelido automaticamente.

Veja o código do componente chamado por essa ação do componentes Web do Lightning.

  • createUser.html: A estrutura para o componente Web do Lightning que você vê ao abrir a ação. Ele contém a implementação da IU, que inclui os campos de texto, os botões, o título da ação, etc.
  • createUser.js: O controlador que escuta o componente e os eventos de IU ocorridos, como o ciclo de vida de renderização, a entrada de texto e os cliques em botões. Os métodos JavaScript definem o que fazer com entradas, dados, eventos, alterações de estado e muito mais para fazer seu componente funcionar.
  • createUser.js-meta.xml: O código que define os metadados do componente, incluindo a configuração de design dos componentes destinados ao uso no Lightning Experience.

createUser.html

<template>
 <lightning-quick-action-panel header="Add Test User to Case Study">
     <lightning-input
             type="text"
             data-field="firstName"
             label="User's First Name"
             onblur={updateNickName}
             required
     ></lightning-input>
     <lightning-input
             type="text"
             data-field="lastName"
             label="User's Last Name"
             required
     ></lightning-input>
     <lightning-input
             type="text"
             data-field="nickName"
             label="Nickname"
             required
     ></lightning-input>
     <lightning-input
             type="email"
             data-field="email"
             label="User's Email"
             onblur={handleEmailBlur}
             required
     ></lightning-input>
     <lightning-input
             type="password"
             data-field="password"
             label="User's Password"
             onblur={handlePasswordBlur}
             required
     ></lightning-input>
     <div slot="footer">
         <lightning-button
                 variant="neutral"
                 label="Cancel"
                 onclick={handleCancel}
         ></lightning-button>
         <lightning-button
                 variant="brand"
                 label="Save User"
                 onclick={handleSave}
         ></lightning-button>
     </div>
 </lightning-quick-action-panel>
</template>

createUser.js

import { LightningElement, api } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import { CloseActionScreenEvent } from 'lightning/actions';
import { createRecord } from 'lightning/uiRecordApi';
import TEST_USER_OBJECT from '@salesforce/schema/Test_User__c';
import NAME_FIELD from '@salesforce/schema/Test_User__c.Name';
import PASSWORD_FIELD from '@salesforce/schema/Test_User__c.Password__c';
import EMAIL_FIELD from '@salesforce/schema/Test_User__c.Email__c';
import NICKNAME_FIELD from '@salesforce/schema/Test_User__c.Nickname__c';
import CASE_STUDY_FIELD from '@salesforce/schema/Test_User__c.Case_Study__c';
export default class CreateUser extends LightningElement {
   @api recordId;
   async handleSave() {
       // query form elements
       const firstNameEl = this.template.querySelector('[data-field="firstName"]');
       const lastNameEl = this.template.querySelector('[data-field="lastName"]');
       const nickNameEl = this.template.querySelector('[data-field="nickName"]');
       const emailEl = this.template.querySelector('[data-field="email"]');
       const passwordEl = this.template.querySelector('[data-field="password"]');
       // check for errors on form elements (custom or otherwise)
       const isFirstNameValid = firstNameEl.reportValidity();
       const isLastNameValid = lastNameEl.reportValidity();
       const isNickNameValid = nickNameEl.reportValidity();
       const isPasswordValid = passwordEl.reportValidity();
       const isEmailValid = emailEl.reportValidity();
       if(!isFirstNameValid || !isLastNameValid || !isNickNameValid || !isPasswordValid || !isEmailValid) {
           return;
       }
       const recordInput = {
           apiName: TEST_USER_OBJECT.objectApiName,
           fields: {
               [NAME_FIELD.fieldApiName]: `${firstNameEl.value} ${lastNameEl.value}`,
               [PASSWORD_FIELD.fieldApiName]: passwordEl.value,
               [EMAIL_FIELD.fieldApiName]: emailEl.value,
               [NICKNAME_FIELD.fieldApiName]: nickNameEl.value,
               [CASE_STUDY_FIELD.fieldApiName]: this.recordId,
           }
       };
       try {
           await createRecord(recordInput);
           this.dispatchEvent(
               new ShowToastEvent({
                   title: 'Success!',
                   message: 'The test user has been created.',
                   variant: 'success'
               })
           );
           this.dispatchEvent(new CloseActionScreenEvent());
       } catch (error) {
           new ShowToastEvent({
               title: 'Error creating the test user, try again...',
               message: error.body.message,
               variant: 'error'
           });
       }
   }
   updateNickName() {
       const firstName = this.template.querySelector('[data-field="firstName"]').value;
       const nickNameEl = this.template.querySelector('[data-field="nickName"]');
       if(firstName && !nickNameEl.value) {
           const today = new Date();
           nickNameEl.value = firstName + today.valueOf(today)
       }
   }
   handleCancel() {
       this.dispatchEvent(new CloseActionScreenEvent());
   }
   handlePasswordBlur() {
       const passwordEl = this.template.querySelector('[data-field="password"]');
       // clear custom errors
       passwordEl.setCustomValidity('');
       this.validatePassword(passwordEl);
   }
   validatePassword(input) {
       // check lightning-input validity
       if(input.reportValidity()) {
           // perform custom validation
           const value = input.value;
           if (value === undefined) {
               input.setCustomValidity('You must enter a password.');
           } else if (value.length < 7) {
               input.setCustomValidity('The password is the wrong length (must be >= 7): ' + value.length);
           } else if (value.length > 15) {
               input.setCustomValidity('The password is the wrong length (must be <= 15): ' + value.length);
           } else if (value.search(/[0-9]+/) === -1) {
               input.setCustomValidity('The password must contain at least one number.');
           } else if (value.search(/[a-zA-Z]+/) === -1) {
               input.setCustomValidity('The password must contain at least one letter.');
           }
           // display custom validation errors (if any)
           input.reportValidity();
       }
   }
   handleEmailBlur() {
       const emailEl = this.template.querySelector('[data-field="email"]');
       // clear Custom Errors
       emailEl.setCustomValidity('');
       this.validateEmail(emailEl);
   }
   validateEmail(input) {
       // check lightning-input validity
       if (input.reportValidity()) {
           const value = input.value;
           if (!/@gmail\.com$/.test(value)) {
               input.setCustomValidity('Email must be a Gmail account.');
           }
           // display custom validation errors (if any)
           input.reportValidity();
       }
   }
}

createUser.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
   <apiVersion>57.0</apiVersion>
   <isExposed>true</isExposed>
   <targets>
       <target>lightning__RecordAction</target>
   </targets>
   <targetConfigs>
       <targetConfig targets="lightning__RecordAction">
           <actionType>ScreenAction</actionType>
       </targetConfig>
   </targetConfigs>
</LightningComponentBundle>

Criar a ação de componente Web do Lightning

Depois de criar o componente Web do Lightning, vamos atribuí-lo a uma ação. Nas configurações de gerenciamento de objetos para Case Study (Estudo de caso), acessamos Buttons, Links, and Actions (Botões, Links e Ações), clicamos em New Action (Nova ação) e configuramos a ação com esses parâmetros.

Campo Valor

Tipo de ação

Lightning Web Component (Componente Web do Lightning)

Lightning Web Component (Componente Web do Lightning)

c:createUser

Rótulo

Create Test User (Criar usuário de teste)

Name (Nome)

Create_Test_User

Em seguida, adicionamos nossa nova ação do componente Web Lightning ao layout da página Estudo de caso. Quando os usuários a invocam na página de detalhes do registro de um estudo de caso, eles veem a ação do componente Web do Lightning que criamos.

Ação de LWC Adicionar usuário no Lightning Experience.

Nota

As ações do componente Web do Lightning não estão disponíveis no aplicativo móvel Salesforce. Para criar uma ação disponível no aplicativo móvel Salesforce, use o modelo de programação do Aura para criar uma ação de componente do Lightning.

As ações dos componentes Web do Lightning são o futuro das ações programáticas no Lightning Experience. Esperamos que você comece a ver esse conjunto de soluções como uma alternativa melhor do que os botões JavaScript.

E, se você depende de aplicativos parceiros que usam botões JavaScript, fique sabendo que muitos de nossos parceiros já começaram a migrar e a atualizar seus aplicativos para o Lightning. Você pode encontrar mais aplicativos no AppExchange que foram atualizados para o Lightning Experience.

Recursos

Continue a aprender de graça!
Inscreva-se em uma conta para continuar.
O que você ganha com isso?
  • Receba recomendações personalizadas para suas metas de carreira
  • Pratique suas habilidades com desafios práticos e testes
  • Monitore e compartilhe seu progresso com os empregadores
  • Conecte-se a orientação e oportunidades de carreira