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.
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.
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) |
|
Rótulo |
|
Name (Nome) |
|
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.
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.