Skip to main content

Descubrir acciones de componentes web Lightning

Objetivos de aprendizaje

Después de completar esta unidad, podrá:

  • Crear un componente web Lightning y una acción para completar campos en función de la entrada del usuario y generar mensajes de comentarios para los usuarios.
  • Iniciar la migración de la funcionalidad de los botones personalizados de JavaScript a alternativas compatibles con Lightning.
Nota

Nota

¿Es su idioma de aprendizaje español (LATAM)? Comience el reto en un Trailhead Playground en español (LATAM) y utilice las traducciones entre paréntesis para navegar. Copie y pegue solo los valores en inglés, ya que las validaciones del reto dependen de los datos en ese idioma. Si no aprueba el reto en su organización en español (LATAM), recomendamos que (1) cambie la configuración local a Estados Unidos, (2) cambie el idioma a inglés (según estas instrucciones) y, luego, (3) haga clic en el botón “Check Challenge” (Comprobar el reto) nuevamente.

Consulte la insignia Trailhead en su idioma para obtener más información sobre cómo aprovechar la experiencia de Trailhead en otros idiomas.

Acciones del componente web Lightning: inteligentes, rápidas y flexibles

Hemos descrito varias soluciones que funcionan tanto en Lightning Experience como en Salesforce Classic además de ser un excelente reemplazo de los botones de JavaScript. No obstante, hemos de admitir que estas soluciones declarativas y programáticas no se adaptan a todos los casos de uso. La ventaja es que contamos con una opción que nos permite abarcar mucho más. Presentamos las acciones del componente web Lightning, un tipo de acciones rápidas que llaman a componentes web Lightning.

Nota

Desde la versión Spring ‘19 (versión 45.0 de la API), puede construir componentes Lightning empleando dos modelos de programación: el modelo Componentes web Lightning y el modelo Componentes Aura original. Los componentes web Lightning y los componentes Aura pueden coexistir y funcionar conjuntamente en una página. En este contenido, se tratan los componentes web Lightning.

Las acciones del componente web Lightning están construidas sobre el marco de trabajo de componentes web Lightning existente. Puede convertir con facilidad los componentes web Lightning existentes en acciones y utilizarlas en Lightning Experience.

Para que un componente web Lightning se pueda invocar como una acción, debe agregar lightning__RecordAction como objetivo en el archivo XML de configuración de metadatos del componente y especificar actionType para targetConfigs. Para que la acción se muestre en una ventana de modal definida por Salesforce, debe establecer actionType como ScreenAction. Para ejecutar la acción sin un modal o definir una ventana de modal personalizada, debe establecer actionType como Action.

Otra propiedad útil para una acción de componente web Lightning es recordId, la cual proporciona el contexto de registro para el componente cuando se invoca desde una página de registro de Lightning. Para acceder a los datos o metadatos de un registro, en la clase JavasScript del componente, debe utilizar el decorador @api para crear una propiedad pública recordId.

Nota

Si no ha creado componentes web Lightning antes, visite el Centro de desarrollo de componentes web Lightning (LWC), realice el proyecto de Inicio rápido de componentes web Lightning y complete el módulo Fundamentos de los componentes web Lightning.

Profundicemos en las acciones de los componentes web Lightning. A continuación, hablaremos sobre algunas funcionalidades de los botones de JavaScript que se pueden abordar, en su lugar, con acciones de componentes web Lightning, como la propagación de campos en función de la entrada del usuario y la generación de mensajes de comentarios durante la entrada de datos.

Completar campos en función de la entrada del usuario y generar mensajes de comentarios para los usuarios

Supongamos que usa botones de JavaScript para validar o manipular datos y proporcionar a los usuarios comentarios o instrucciones para su trabajo con los registros. Este es un ejemplo en el que se demuestra la facilidad con la que puede validar o manipular los datos en un componente web Lightning antes de que los usuarios creen o actualicen un registro.

Creamos un objeto personalizado en nuestra organización de ejemplo, llamada Case Study (Caso práctico), el cual utilizamos para hacer un seguimiento de distintos proyectos de investigación. También tenemos un objeto personalizado Test User (Usuario de prueba) para poder agregar usuarios de prueba nuevos a casos prácticos y capturar sus nombres y direcciones de email. Dado que la dirección de email es nuestro método de contacto principal, queremos asegurarnos de que se ingresa correctamente. Además, queremos crear un apodo único para los usuarios de prueba en el caso práctico, de modo que puedan seguir siendo anónimos.

Vamos a crear una acción de componente web Lightning que muestre los campos de nombre y dirección de email, valide la dirección de email, y utilice el nombre y un número aleatorio para crear el apodo de forma automática.

Este es el código para el componente al que llama esta acción de componente web Lightning.

  • createUser.html: La estructura del componente web Lightning que se observa al abrir la acción. Contiene la implementación de la interfaz de usuario, lo que incluye campos de texto, botones, el título de la acción, etc.
  • createUser.js: El controlador que escucha el componente y cualquier evento de interfaz de usuario que se produzca, como el ciclo de vida de la representación, la entrada de texto y los clics en botones. Los métodos de JavaScript definen qué se hace con las entradas, los datos, los eventos, los cambios de estado y otros elementos que hacen que funcione el componente.
  • createUser.js-meta.xml: El código que define los metadatos del componente, incluida la configuración de diseño de los componentes pensados para su uso en 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>

Crear la acción de componente web Lightning

Después de crear el componente web Lightning, lo asignamos a una acción. En la configuración de gestión de objetos para el caso práctico, vamos a Botones, vínculos y acciones, hacemos clic en Nueva acción y, a continuación, configuramos la acción con estos parámetros.

Campo Valor

Tipo de acción

Lightning Web Component (Componente web Lightning)

Componente web Lightning

c:createUser

Etiqueta

Create Test User (Crear usuario de prueba)

Nombre

Create_Test_User

A continuación, agregamos la nueva acción de componente web Lightning al formato de página de Case Study (Caso práctico). Cuando los usuarios la invoquen desde una página de detalles de registro del caso práctico, verán la acción de componente web Lightning que creamos.

Agregue la acción User LWC (LWC de usuario) en Lightning Experience.

Nota

Las acciones de componentes web Lightning no están disponibles en la aplicación móvil de Salesforce. Para crear una acción que esté disponible en la aplicación móvil de Salesforce, utilice el modelo de programación Aura para crear una acción de componente Lightning.

Las acciones de componentes web Lightning son el futuro de las acciones programáticas en Lightning Experience. Esperamos que empiece a considerar este conjunto de soluciones como una alternativa mejor a los botones de JavaScript.

Además, si depende de aplicaciones de socios que usan botones de JavaScript, le alegrará saber que muchos de nuestros socios ya han empezado a migrar y actualizar sus aplicaciones a Lightning. Encontrará más aplicaciones en AppExchange, las cuales están actualizadas para Lightning Experience.

Recursos

Comparta sus comentarios de Trailhead en la Ayuda de Salesforce.

Nos encantaría saber más sobre su experiencia con Trailhead. Ahora puede acceder al nuevo formulario de comentarios en cualquier momento en el sitio de Ayuda de Salesforce.

Más información Continuar a Compartir comentarios