Skip to content

Aprenda MOAR con Summer '21: Acciones rápidas de LWC ☁️

Esta es una traducción que desde EGA Futura ofrecemos como cortesía a toda la Ohana y comunidad de programadores , consultores , administradores y arquitectos de Salesforce para toda Iberoamérica .

El enlace a la publicación original, lo encontrarás al final de este artículo.

Siga y complete una mezcla de prueba de Learn MOAR Summer ’21 para administradores o desarrolladores antes del 31 de julio para obtener una insignia especial de la comunidad y participar para tener la oportunidad de ganar uno de los cinco cupones de certificación de Salesforce de $ 200 USD. Aprenda a participar y revise las Reglas oficiales visitando la página Trailhead Quests .

Lleve acciones rápidas al siguiente nivel con Lightning Web Components

A partir de la versión Summer ’21, ahora puede usar Lightning Web Components como acciones rápidas. Si bien actualmente puede hacer esto con Aura Components, ¡esta nueva implementación trae algunas características nuevas excelentes! En primer lugar, hay DOS tipos diferentes de acciones rápidas de LWC: acciones en pantalla y acciones sin cabeza. Estos te ayudarán a crear experiencias increíbles e interactivas para tus usuarios.

Acciones de pantalla

Tradicionalmente, cuando hace clic en una acción en Salesforce, se abre una ventana modal que puede usar para mostrar datos o interactuar con datos. Esto es exactamente lo que obtiene cuando crea una acción de pantalla. Puede tomar cualquier componente web Lightning que haya creado y exponerlo como una acción rápida.

my-action.js-meta.xml

 <objetivos> <target> lightning__RecordAction </target> </objetivos> <targetConfigs> <targetConfig objetivos = "lightning__RecordAction"> <actionType> ScreenAction </actionType> </targetConfig> </targetConfigs>

my-action.js

 importar {LightningElement, api} de 'lwc'; exportar clase predeterminada MyAction extiende LightningElement { @api invoke () { console.log ('¡Hola, mundo!'); }
}

my-action.html

 <template> </template>

Acciones sin cabeza

Las acciones sin cabeza son una adición bienvenida a las capacidades de LWC. Le permiten ejecutar JavaScript directamente con el clic de un botón a través de un componente web Lightning sin cabeza. Esto puede sonar familiar si recuerda haber escrito botones de JavaScript en el pasado. Una de las diferencias clave entre una acción en pantalla y una acción sin cabeza es que no necesita el archivo HTML en su LWC.

headless-action.js-meta.xml

 <objetivos> <target> lightning__RecordAction </target> </objetivos> <targetConfigs> <targetConfig objetivos = "lightning__RecordAction"> <actionType> ScreenAction </actionType> </targetConfig> </targetConfigs>

headless-action.js

 importar {LightningElement, api} de 'lwc'; exportar clase predeterminada MyAction extiende LightningElement { @api invoke () { console.log ('¡Hola, mundo!'); }
}

Las acciones rápidas de LWC actualmente solo están disponibles para su uso en las páginas de registro de iluminación.

Panel de acción rápida relámpago

De forma predeterminada, una acción de pantalla LWC no tiene el encabezado y pie de página que normalmente ve en una ventana modal. Esto le brinda la oportunidad de crear interfaces de usuario altamente personalizadas. Sin embargo, si desea crear una experiencia coherente, existe un nuevo componente básico para hacer precisamente eso, el Panel de acción rápida Lightning.

 <plantilla> <lightning-quick-action-panel title = "Título de acción rápida"> Contenido corporal <div slot = "footer"> <lightning-button variant = "neutral" label = "Cancelar"> </lightning-button> <lightning-button variant = "brand" label = "Guardar"> </lightning-button> </div> </panel-acción-rápida-relámpago>
</template>

Este componente le permite:

  • Establezca el atributo de título del componente para representar el título en el encabezado modal
  • Coloca el contenido de tu acción en el cuerpo.
  • Use un espacio para colocar contenido en el pie de página modal

Cerrar evento de pantalla de acción

Cuando usa acciones de pantalla, puede cerrar el modal importando el nuevo CloseActionScreenEvent de 'lightning/actions' . Cuando se activa, esto cerrará la ventana del modelo si el usuario necesita cancelar o cerrar la acción rápida.

 importar {CloseActionScreenEvent} de 'relámpago / acciones'; closeAction () { this.dispatchEvent (new CloseActionScreenEvent ());
}

Acciones sin cabeza

Como mencioné anteriormente, las acciones sin cabeza se ejecutan directamente desde el archivo JavaScript en su LWC. Lo que hace que esto sea aún mejor es que puede aprovechar todos los excelentes servicios proporcionados en el marco de LWC. Por ejemplo, puede usar Lightning Data Services para obtener datos de Salesforce, puede usar Apex para realizar operaciones complejas y puede usar Lightning Navigation Service para navegar a otras páginas en Salesforce.

Se puede invocar una acción sin cabeza creando un @api invoke() que se expone públicamente con un decorador @api. Esto se llama cada vez que se hace clic en el botón Acción rápida. El componente se inserta en el DOM justo cuando se representa la página de registro, por lo que no puede confiar en ninguno de los enlaces estándar del ciclo de vida para ejecutar la acción. Por ejemplo, connectedCallback() se ejecuta justo cuando se carga la página de registro.

Es importante tener en cuenta que las acciones sin cabeza no tienen la capacidad de evitar que el usuario haga doble clic en la acción. El siguiente ejemplo de código le mostrará cómo puede hacer que el invoke() asíncrono para evitar que se llame dos veces.

 importar {LightningElement, api} desde "lwc"; exportar clase predeterminada HeadlessAsync extiende LightningElement { isExecuting = falso; @api async invoke () { if (this.isExecuting) { regreso; } this.isExecuting = true; aguardar este sueño (2000); this.isExecuting = falso; } dormir (ms) { return new Promise ((resolver) => setTimeout (resolver, ms)); }
}

Empezando

Si desea obtener más información sobre las acciones rápidas de LWC, puede consultar la documentación aquí y consultar Release Readiness Live para obtener una demostración y una descripción general de esta gran función.

Recursos
Crear acciones rápidas con componentes web Lightning

Sobre el Autor

Stephan Chandler-García es un desarrollador evangelista sénior en Salesforce. Se centra en el desarrollo de aplicaciones, la seguridad y las comunidades. Puedes seguirlo en Twitter @stephanwcg .

Esta es una traducción realizada por EGA Futura, y este es el link a la publicación original: https://developer.salesforce.com/blogs/2021/05/learn-moar-with-summer-21-lwc-quick-actions.html

Últimas novedades 
de EGA Futura
1954
Desde hace más de 25 años potenciamos a las Empresas de Iberoamérica

🎬 Video de EGA Futura » Qué es un Almacén?

🎬 Video de EGA Futura » Qué es el Stock de almacén?

🎬 Video de EGA Futura » Los 7 pecados capitales que llevarán al infierno a tus argumentos de MKT y ventas [Cómo evitarlo…

🎬 Video de EGA Futura » Por qué Jefes y Gerentes frecuentemente Fallan al motivar Empleados [y en particular a Vendedores]

🎬 Video de EGA Futura » Estrategia de Precios . Cómo funciona este misterioso proceso y cómo Maximizar las Ganancias de …

🎬 Video de EGA Futura » 👉Atrévete a Liderar (levántate fuerte y cambia el Destino de tu Trabajo)

🎬 Video de EGA Futura » 😑 ¿Odias a tu propia Empresa? Guía para dejar de ser un Perdedor (Y encontrar una Salida)

🎬 Video de EGA Futura » 🤑 7 Estrategias Clave para hacer Crecer tu Empresa [Michael Gerber]

🎬 Video de EGA Futura » Qué hacer si Mercado Libre SUSPENDE mi Cuenta? 🤬

🎬 Video de EGA Futura » Como USAR el Manual del Usuario de EGA Futura? [Sistema de Gestión Windows] 😍

🎬 Video de EGA Futura » Recursos Humanos Aprovecha las Fortalezas y construye el Equipo perfecto

🎬 Video de EGA Futura » 8 Reglas de Oro para crear una Empresa Nueva

🎬 Video de Juan Manuel Garrido » Que Clientes DEBO priorizar en mi Empresa?

🎬 Video de EGA Futura » Las relaciones son todo: Claves para la Influencia Estratégica [y el Éxito de Ventas]

🎬 Video de EGA Futura » La Quinta Disciplina de Peter Senge [Método de Transformación continua]

🎬 Video de Juan Manuel Garrido » Adicto al Trabajo y sin Tiempo para tu Familia?

🎬 Video de EGA Futura » Costo dentro de una empresa

🎬 Video de EGA Futura » Aspectos Legales de la Empresa

🎬 Video de EGA Futura » Areas funcionales de una empresa

🎬 Video de EGA Futura » Por qué Dropbox es un Éxito

🎬 Video de EGA Futura » El “Método Turbina” para Potenciar tu Empresa [Receta ganadora]

🎬 Video de Juan Manuel Garrido » Tu energía debe estar puesta en las cosas que puedas cambiar

🎬 Video de Juan Manuel Garrido » Software para #ordenar y #administrar tu #negocio

🎬 Video de EGA Futura » Los 10 Mandamientos del Éxito [Para construir una empresa o carrera exitosa]

🎬 Video de Juan Manuel Garrido » Tu empresa necesita tener métricas claras

Aprenda MOAR con Summer '21: Acciones rápidas de LWC ☁️
Aprenda MOAR con Summer '21: Acciones rápidas de LWC ☁️