Skip to content

Crear un formulario con una barra de progreso en el componente web Lightning

Última actualización el 23 de junio de 2022 por Rakesh Gupta

Gran idea o pregunta duradera:

  • ¿Cómo crear un formulario con una barra de progreso en el componente web lightning?

Objetivos:

Después de leer este blog, podrá:

  • Comprender qué es el campo de barra de progreso relámpago y cómo usarlo
  • Cree un formulario usando el componente web lightning
  • Agregue una barra de progreso a su formulario
  • 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. Acceda a recursos estáticos, archivos de activos de contenido en el componente web Lightning
  2. Acceda a etiquetas personalizadas en el componente web Lightning
  3. Agregar cuadro de diálogo de confirmación, alerta y aviso al componente web Lightning

Rachel Gillett trabaja como desarrolladora junior en Gurukul on Cloud (GoC). A estas alturas, tiene una comprensión justa de la creación de un formulario con el componente web Lightning. Ahora quiere aprender a agregar una barra de progreso al formulario, como se muestra a continuación:

¿Qué es un componente lightning-progress-bar ?

El componente lightning-progress-bar se utiliza para mostrar una barra de progreso horizontal de izquierda a derecha para indicar el progreso de una operación.

La barra de progreso es valiosa para escenarios tales como: progreso a través de un formulario, mostrar información de descarga o carga, o incluso mostrar que se desconoce la cantidad de progreso pero el trabajo aún está activo.

Una barra de progreso debe tener una etiqueta de inicio (es decir, <lightning-progress-bar> ) y una etiqueta final (es decir , </lightning-progress-bar> ), como se muestra a continuación.


<valor-barra-de-progreso-del-relámpago={progreso}> </relámpago-barra-de-progreso>

Además de los atributos aria-label y variant , puede tener dos atributos más:

  1. tamaño : el tamaño de la barra de progreso. Los valores válidos son x-pequeño, pequeño, mediano y grande.
  2. Valor : indica el estado actual de la barra de progreso. Debe ser mayor o igual a 0 y menor o igual a 100 o el valor del atributo max (si está presente).

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

En esta publicación de blog, repasaremos todo lo que necesitará para crear su propia barra de progreso, y no se preocupe, es muy simple.

progresoBarExample .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 hace que el componente esté disponible para todos los tipos de páginas Lightning, pero restringe la compatibilidad en la página de inicio solo para escritorios.


<?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>

BarradeProgresoEjemplo .html

Para hacer referencia a un recurso en una plantilla, use la sintaxis {propiedad } (es decir, {progreso} en nuestro ejemplo), que es la misma sintaxis que usamos para hacer referencia a cualquier propiedad de JavaScript.


<!-- EjemploBarraProgreso.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 barra de progreso</b> </div> <div class="slds-box slds-theme_default"> <div style="margen-izquierda: 2%;"> <div> <div class="slds-grid slds-grid_align-spread slds-p-bottom_x-small"> <span>Seguimiento del progreso</span> <span aria-hidden="verdadero"> <strong>{progreso}% completado</strong> </span> </div> </div> <barra de progreso relámpago tamaño = "mediano" valor={progreso} variante="circular"> </relámpago-barra-de-progreso> </div> <entrada de rayo nombre="nombre" etiqueta = "Nombre" valor={nombre} onchange={handleChange}> </relámpago-entrada> <entrada de rayo nombre="apellido" label="Apellido" valor={apellido} onchange={handleChange}> </relámpago-entrada> <entrada de rayo tipo = "fecha" nombre="fecha de nacimiento" label="Fecha de nacimiento" valor={fecha de nacimiento} onchange={handleChange}> </relámpago-entrada> <entrada de rayo escriba = "correo electrónico" nombre="dirección de correo electrónico" label="Dirección de correo electrónico" valor = {dirección de correo electrónico} onchange={handleChange}> </relámpago-entrada> <entrada de rayo tipo = "tel" nombre="móvil" etiqueta="Móvil" valor={móvil} onchange={handleChange}> </relámpago-entrada> <div class="slds-m-top_small slds-align_absolute-center"> <botón-relámpago variante="Neutro" etiqueta="Reiniciar" clase="slds-m-izquierda_x-pequeña" onclick={manejarReset}> </botón-relámpago> <botón-relámpago variante="marca" clase="slds-m-izquierda_x-pequeña" etiqueta="Enviar" onclick={manejarEnviar}> </botón-relámpago> </div> </div> </formulario>
</plantilla>

Barra de progresoEjemplo .js

Aquí está el JavaScript que cambia el valor de la barra de progreso. Aumenta la barra de progreso en un 20% a medida que los usuarios comienzan a completar el campo del formulario uno a la vez.


//ProgressBarExample.js
importar { LightningElement } desde 'lwc'; exportar clase predeterminada InputExample extiende LightningElement() { progreso = 0; dirección de correo electrónico = ''; móvil = ''; fecha de nacimiento = ''; primerNombre = ''; apellido = ''; handleChange(evento) { const campo = evento.objetivo.nombre; if (campo === 'nombre') { this.firstName = event.target.value; } más si (campo === 'apellido') { this.lastName = event.target.value; } más si (campo === 'móvil') { este.móvil = evento.objetivo.valor; } más si (campo === 'dirección de correo electrónico') { this.emailAddress = event.target.value; } else if (campo === 'fecha de nacimiento') { this.birthdate = event.target.value; } this.fieldsCompleted(); } campos Completados() { var numVal = 0; if (this.firstName != null && this.firstName != '') { numVal = numVal + 1; } if (este.apellido != nulo && este.apellido != '') { numVal = numVal + 1; } if (esta.fecha de nacimiento != null && esta.fecha de nacimiento != '') { numVal = numVal + 1; } if (esta.dirección de correo electrónico != null && esta.dirección de correo electrónico !='') { numVal = numVal + 1; } if (este.móvil != null && este.móvil !='') { numVal = numVal + 1; } this.progressBar(numVal); } barraprogreso(valornum) { si (valornumero >= 1) { este.progreso = numVal * 20; } más { este.progreso = 0; } } manejarEnviar() { } manejarReset() { este.progreso = 0; esta dirección de correo electrónico = ''; este.movil = ''; esta.fecha de nacimiento = ''; este.nombre = ''; este.apellido = ''; }
}

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/23/create-a-form-with-a-progress-bar-in-lightning-web-component-2/

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

🎬 Video de Juan Manuel Garrido » Claves para tu Productividad diaria 🙌✅

🎬 Video de EGA Futura » Facturación Electrónica en Uruguay » Conceptos básicos con EGA Futura Windows

🎬 Video de EGA Futura » Facturación Electrónica en Uruguay » Configuración de EGA Futura Windows

🎬 Video de EGA Futura » Facturación Electrónica en Uruguay » Funcionamiento con EGA Futura Windows

🎬 Video de EGA Futura » Configuración de la Plataforma EGA Futura

🎬 Video de EGA Futura » Configuración de usuario en EGA Futura

🎬 Video de EGA Futura » Como automatizar la publicación en Redes Sociales?

🎬 Video de Juan Manuel Garrido » Cómo restaurar la configuración de fábrica de EGA Futura Windows sin perder la información

🎬 Video de Juan Manuel Garrido » Factura electrónica: Prueba de Factura Electronica previa a la activacion

🎬 Video de EGA Futura » Como se registran los Beneficios de cada Empleado en la base de datos de EGA Futura

🎬 Video de EGA Futura » EGA Futura Time Clock » Reloj de Control horario y asistencia

🎬 Video de EGA Futura » Como registrar Observaciones en un Empleado dentro de EGA Futura People?

🎬 Video de EGA Futura » Cómo registrar la Educación de cada Empleado en EGA Futura People?

🎬 Video de EGA Futura » Como hacer la Desvinculación de un Empleado? (Offboarding)

🎬 Video de EGA Futura » Como registrar Habilidades o Skills de empleados dentro de EGA Futura

🎬 Video de EGA Futura » Como hacer el Onboarding o Proceso de Incorporación de un Empleado?

🎬 Video de EGA Futura » Cómo administrar Turno de trabajo dentro de EGA Futura

🎬 Video de EGA Futura » Que es un Ticket interno dentro de la Plataforma EGA Futura

🎬 Video de EGA Futura » Que son los Entrenamientos de Empleado en EGA Futura people?

🎬 Video de EGA Futura » Qué son los Epics dentro de EGA Futura

🎬 Video de EGA Futura » Qué es EGA Futura People?

🎬 Video de EGA Futura » EGA Futura People » Asistencias

🎬 Video de EGA Futura » Soporte EGA Futura » Software de Gestión Windows vs Software de Gestión Nube 🤩

🎬 Video de EGA Futura » ツ Comparando un Objeto con un Fichero

🎬 Video de EGA Futura » ✍( ͡* ͜ʖ ͡*) ¿Qué es una Aplicación?

Crear un formulario con una barra de progreso en el componente web Lightning
Crear un formulario con una barra de progreso en el componente web Lightning