Agregar cuadro de diálogo de confirmación, alerta y aviso al componente web Lightning

Gran idea o pregunta duradera:

• ¿Cómo mostrar una alerta, una confirmación o un aviso con el componente web lightning al realizar acciones específicas?

Objetivos:

Después de leer este blog, podrá:

• Comprender la diferencia entre el cuadro de diálogo modelo de alerta, confirmación o solicitud
• Agregue un modal de alerta dentro de su componente web lightning
• Agregue un modal de confirmación dentro de su componente web lightning
• Agregue un modal rápido dentro de su componente web lightning
• Seguimiento del resultado de la acción del usuario para el cuadro de diálogo del modelo
• y mucho más

En el pasado se escribieron algunos artículos sobre Lightning Web Component . ¿Por qué no echarles un vistazo mientras estás en ello?

1. Cómo implementar la representación condicional en el componente web Lightning
2. Obtener información sobre el usuario que inició sesión en el componente web Lightning
3. Pasar el valor del campo de entrada Lightning de un clic de botón al controlador de componentes web Lightning
4. Restablecer el campo de entrada Lightning al hacer clic en un botón en el componente web Lightning

Rachel Gillett trabaja como desarrolladora junior en Gurukul on Cloud (GoC). Hasta ahora, creó este formulario , aprendió cómo pasar los valores ingresados por el usuario al controlador del componente web Lightning y restableció los campos de entrada cuando un usuario hace clic en el botón Cancelar, como se muestra a continuación:

Ahora quiere brindar la posibilidad de revisar la acción del botón de cancelación mostrando una ventana emergente de confirmación como se muestra a continuación. Si los usuarios seleccionan el botón Aceptar , restablezcan el valor del campo de entrada; de lo contrario, no realice ninguna acción.

Cuadro de notificación de alerta

El cuadro emergente de alerta se usa básicamente para mostrar un mensaje o una advertencia para el usuario. El objetivo principal de la función de alerta es mostrar un mensaje al usuario que contiene información crítica.

Utilice LightningAlert en sus componentes para comunicar un estado que afecta a todo el sistema, no solo a una función o página. LightningAlert.open() no detiene la ejecución en la página; devuelve una Promesa. Use async/ await o .then() para cualquier código que desee ejecutar después de que se haya cerrado la alerta.

Importe LightningAlert desde el módulo lightning/alert en el componente que lanzará el modo de alerta y llame a LightningAlert.open() con los atributos deseados.

El ejemplo anterior crea un modal de alerta con un mensaje de error y un botón Aceptar . La función .open() devuelve una promesa que se resuelve cuando el usuario hace clic en Aceptar .

<!-- EjemploEntradaRelámpago.html -->
<plantilla> <formulario> <div class="slds-p-top_small slds-p-bottom_medium slds-align_absolute-center slds-theme_default slds-text-heading_medium"> <b>Ejemplo de entrada Lightning</b></div> <div class="slds-box slds-theme_default"> <entrada de rayo escriba = "correo electrónico" elemento de datos = "correo electrónico de entrada de usuario" label="Dirección de correo electrónico" value="nombredeusuario@ejemplo.com"> </relámpago-entrada> <entrada de rayo data-element="usuario-entrada-móvil" tipo = "tel" nombre="móvil" etiqueta="Móvil" valor="000-000-0000"> </relámpago-entrada> <div class="slds-m-top_small slds-align_absolute-center"> <botón-relámpago variante="Neutro" etiqueta="Cancelar" clase="slds-m-izquierda_x-pequeña" onclick={manejarCancelar}> </botón-relámpago> <botón-relámpago variante="marca" clase="slds-m-izquierda_x-pequeña" etiqueta="Siguiente" onclick={manejarSiguiente}> </botón-relámpago> </div> </div> </formulario>
</plantilla>

//LightningInputExample.js
importar { LightningElement, api } desde 'lwc';
importar LightningAlert desde 'relámpago/alerta'; exportar clase predeterminada InputExample extiende LightningElement() { manejarSiguiente() { } asincrónico handleCancel(){ espera LightningAlert.open({ mensaje: 'este es el mensaje de alerta', tema: 'error', etiqueta: '¡Error!', variante: 'encabezado', }); }
}

Cuadro de notificación rápida

El cuadro emergente de solicitud es una forma de mostrar un mensaje y obtener datos del usuario. El cuadro de solicitud se usa para obtener un solo dato del usuario, que podría usarse para realizar tareas basadas en la respuesta. El cuadro de aviso se puede utilizar para tareas como preguntar el nombre del usuario o la edad, el sexo, etc.

El módulo lightning/prompt le permite crear un modal de solicitud dentro de su componente. Utilice LightningPrompt en sus componentes para pedirle al usuario que proporcione información antes de continuar.

Importe LightningAlert desde el módulo lightning/prompt en el componente que iniciará el modo de aviso y llame a LightningPrompt.open() con los atributos deseados.

Este ejemplo crea un mensaje modal con un encabezado, un mensaje y dos botones. Si el usuario ingresa texto y hace clic en Aceptar en el indicador, la función .open() devuelve una promesa que se resuelve en el valor de entrada. Si el usuario hace clic en Cancelar , la función devuelve una promesa que se resuelve en nulo.

<!-- EjemploEntradaRelámpago.html -->
<plantilla> <formulario> <div class="slds-p-top_small slds-p-bottom_medium slds-align_absolute-center slds-theme_default slds-text-heading_medium"> <b>Ejemplo de entrada Lightning</b></div> <div class="slds-box slds-theme_default"> <entrada de rayo escriba = "correo electrónico" elemento de datos = "correo electrónico de entrada de usuario" label="Dirección de correo electrónico" value="nombredeusuario@ejemplo.com"> </relámpago-entrada> <entrada de rayo data-element="usuario-entrada-móvil" tipo = "tel" nombre="móvil" etiqueta="Móvil" valor="000-000-0000"> </relámpago-entrada> <div class="slds-m-top_small slds-align_absolute-center"> <botón-relámpago variante="Neutro" etiqueta="Cancelar" clase="slds-m-izquierda_x-pequeña" onclick={manejarCancelar}> </botón-relámpago> <botón-relámpago variante="marca" clase="slds-m-izquierda_x-pequeña" etiqueta="Siguiente" onclick={manejarSiguiente}> </botón-relámpago> </div> </div> </formulario>
</plantilla>

//LightningInputExample.js
importar { LightningElement, api } desde 'lwc';
importar LightningPrompt desde 'lightning/prompt'; exportar clase predeterminada InputExample extiende LightningElement() { manejarSiguiente() { } asincrónico handleCancel(){ const resultado = esperar LightningPrompt.open({ mensaje: '¿Cuál es tu género?', tema: 'advertencia', etiqueta: '¡Por favor responda!', variante: 'encabezado', valor por defecto: '', }); if(resultado=='masculino'){ //añadir lógica para hombre } else if (resultado=='femenino'){ // agregar lógica para mujer } más{ // logica para el resto } }
}

Enfoque de Campeón de Automatización (I-do):

Ahora volvamos a nuestro caso de uso original, en el que Rachel desea brindar la posibilidad de revisar la acción del botón de cancelación mostrando una ventana emergente de confirmación. Si los usuarios seleccionan el botón Aceptar , restablezcan el valor del campo de entrada ; de lo contrario, no realice ninguna acción. Antes de continuar, dediquemos unos minutos a comprender un cuadro de notificación de confirmación y cómo implementarlo en el controlador del componente web lightning.

Cuadro de notificación de confirmación

El cuadro emergente de confirmación muestra un mensaje a los usuarios solicitando su confirmación para continuar con un evento que han desencadenado. Un ejemplo del cuadro de confirmación sería la ventana emergente en el navegador del usuario para confirmar su acción.

El cuadro emergente de confirmación permite a los usuarios elegir al proporcionarles una opción de dos botones. Cuando los usuarios hacen clic en el botón, se realiza la tarea vinculada al botón en el que se hizo clic. Los dos botones que proporciona el cuadro de confirmación son Aceptar y Cancelar .

lightningInputExample.js-meta.xml

Se puede utilizar un componente web lightning para crear páginas personalizadas para Lightning Experience y la aplicación móvil Salesforce rápidamente con herramientas de apuntar y hacer clic. Asegúrese de agregar el objetivo correcto para ello.

Este archivo de configuración de muestra hace que el componente esté disponible para todos los tipos de páginas Lightning.

<?versión xml="1.0" codificación="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadatos"> <apiVersion>54.0</apiVersion> <isExposed>verdadero</isExposed> <objetivos> <target>relámpago__RecordPage</target> <target>relámpago__AppPage</target> <objetivo>relámpago__Página de inicio</objetivo> </objetivos>
</LightningComponentBundle>

lightningInputExample.html

Cada componente de la interfaz de usuario debe tener un archivo HTML con la etiqueta raíz <plantilla> . La plantilla contiene dos etiquetas de entrada relámpago que crean entrada para correo electrónico y dispositivos móviles. La plantilla incluye dos botones de rayos . El primer botón ( Siguiente ) se usa para pasar el valor al componente de JavaScript, mientras que el segundo botón ( Cancelar ) se usa para restablecer los campos de entrada.

Cuando un usuario hace clic en el botón Cancelar , llamará a un método de JavaScript handleCancel() que utilizará LightningConfirm.open () que iniciará el modal de confirmación.

<!-- EjemploEntradaRelámpago.html -->
<plantilla> <formulario> <div class="slds-p-top_small slds-p-bottom_medium slds-align_absolute-center slds-theme_default slds-text-heading_medium"> <b>Ejemplo de entrada Lightning</b></div> <div class="slds-box slds-theme_default"> <entrada de rayo escriba = "correo electrónico" elemento de datos = "correo electrónico de entrada de usuario" label="Dirección de correo electrónico" value="nombredeusuario@ejemplo.com"> </relámpago-entrada> <entrada de rayo data-element="usuario-entrada-móvil" tipo = "tel" nombre="móvil" etiqueta="Móvil" valor="000-000-0000"> </relámpago-entrada> <div class="slds-m-top_small slds-align_absolute-center"> <botón-relámpago variante="Neutro" etiqueta="Cancelar" clase="slds-m-izquierda_x-pequeña" onclick={manejarCancelar}> </botón-relámpago> <botón-relámpago variante="marca" clase="slds-m-izquierda_x-pequeña" etiqueta="Siguiente" onclick={manejarSiguiente}> </botón-relámpago> </div> </div> </formulario>
</plantilla>

lightningInputExample.js

Este controlador de JavaScript crea un modal de confirmación con dos botones, Aceptar y Cancelar . La función .open() devuelve una promesa que se resuelve en verdadero (y restablece los campos de entrada) cuando un usuario hace clic en Aceptar y en falso (no hacer nada) cuando el usuario hace clic en Cancelar .

importar { LightningElement, api } desde 'lwc';
importar LightningConfirm desde 'relámpago/confirmar'; exportar clase predeterminada InputExample extiende LightningElement() { manejarSiguiente() { alert('email '+ this.template.querySelector('[data-element="user-input-email"]').value); alert('Mobile '+ this.template.querySelector('[data-element="user-input-mobile"]').value,); } asincrónico handleCancel(){ const resultado = esperar LightningConfirm.open({ mensaje: '¿Está seguro de que desea restablecer los campos?', variante: 'encabezado', etiqueta: 'Por favor, confirme', tema: 'error', }); si (resultado == verdadero) { this.template.querySelector('[data-element="user-input-email"]').value= "username@example.com"; this.template.querySelector('[data-element="user-input-mobile"]').value="000-000-0000"; } }
}

Evaluación formativa:

¡Quiero saber de ti!

¿Qué es una cosa que aprendiste de esta publicación? ¿Cómo imagina aplicar este nuevo conocimiento en el mundo real? Siéntase libre de compartir en los comentarios a continuación.

…

Esta es una traducción realizada por EGA Futura, y este es el link a la publicación original: https://automationchampion.com/2022/06/18/add-confirmation-alert-and-prompt-dialog-box-to-lightning-web-component/