Skip to content

Escáner de código de barras para el flujo de pantalla con la API de BarcodeScanner

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

Gran idea o pregunta duradera:

  • ¿Cómo escanear y procesar un código de barras de Screen Flow?

Objetivos:

Después de leer este blog, podrá:

  • Utilice la API BarcodeScanner en el componente web Lightning
  • Crear un componente web Lightning para flujo de pantalla con un editor de propiedades personalizado
  • Agregar un componente web Lightning al flujo de pantalla
  • Obtenga el resultado del escáner de código de barras y cree un caso
  • y mucho más

Rachel Gillett trabaja como desarrolladora junior en Gurukul on Cloud (GoC). Ella recibió un requerimiento de la gerencia que requiere que él cree un componente web Lightning para el flujo de pantalla para escanear el código de barras y luego usar el resultado del código de barras para crear un caso en Salesforce.

¿Qué es un escáner de código de barras y cómo funciona?

El escáner de código de barras no hace más que escanear un código de barras, interpretar y decodificar los datos del código de barras y enviar los datos a un dispositivo (teléfono inteligente o tableta) que tiene una aplicación que procesará los datos.

¿Qué es una API de escáner de código de barras?

BarcodeScanner es un módulo de JavaScript que proporciona una API a los componentes web Lightning para hacer que la función de plataforma (sistema operativo) y hardware móvil esté disponible en JavaScript. Requiere acceso al hardware del dispositivo y a las API de la plataforma del dispositivo.

Este acceso solo está disponible cuando BarcodeScanner se ejecuta dentro de una aplicación móvil Salesforce compatible. No funciona ni puede funcionar cuando se ejecuta en un navegador web, ya sea que el navegador se ejecute en una computadora de escritorio o en un dispositivo móvil.

¿La API Barcode Scanner puede leer todos los códigos de barras?

Hay dos clases de códigos de barras: 1D y 2D. Los códigos 1D, como el código UPC, suelen ser espacios en blanco y negro de ancho variable. Los códigos 2D, como los códigos QR y Data Matrix, usan cuadrados, hexágonos y otras formas para almacenar datos.

No todos los escáneres de códigos de barras pueden leer todos los códigos de barras, el mismo principio se aplica a BarcodeScanner API. BarcodeScanner puede reconocer las siguientes simbologías de códigos de barras estándar.

Simbología de código de barras Tipo de escáner de código de barras
Código 128 CODE_128
Código 39 CODE_39
Código 93 CODE_93
Matriz de datos DATA_MATRIX
EAN-13 / GTIN-13 EAN_13
EAN-8 / GTIN-8 EAN_8
Intercalado 2 de 5 ITF
PDF417 PDF_417
Código QR QR
UPC-E / GTIN-12 UPC_E

BarcodeScanner está disponible en aplicaciones Lightning distribuidas mediante:

  • Aplicación móvil Salesforce
  • Editor móvil para Salesforce
  • Publicador móvil para comunidades

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

Hay algunas soluciones posibles para el escenario empresarial anterior . Usaremos Flow para resolver el requisito. Consulte este artículo para comprender por qué estamos utilizando el flujo desencadenado por registro posterior al guardado para este escenario.

Antes de discutir la solución, permítame mostrarle un diagrama de un flujo de proceso de alto nivel. Dedique unos minutos a repasar el siguiente diagrama de flujo y comprenderlo.

Comencemos a construir este proceso de automatización.

Práctica guiada (nosotros hacemos):

Hay 3 pasos para resolver el requisito comercial de Rachel usando Screen Flow . Debemos:

  1. Cree un componente de flujo de pantalla de escaneo de código de barras utilizando el componente web lightning
  2. Pasos de flujo de Salesforce
    1. Definir propiedades de flujo para el flujo de pantalla
    2. Agregue una variable de texto para almacenar el resultado del escáner de código de barras
    3. Agregue una variable de texto para almacenar la identificación del registro
    4. Agregue una pantalla para mostrar el componente web Lightning del escáner de código de barras
    5. Agregar un elemento de creación de registros para crear un caso
  3. Agregar un flujo de pantalla a la página de registro de contacto

Paso 1: Cree un componente de flujo de pantalla de escaneo de código de barras utilizando el componente web Lightning

En primer lugar, cree un componente web Lightning de escáner de código de barras con el siguiente código. Si no sabe cómo crear un componente Lightning, consulte esta guía para desarrolladores Crear un componente web Lightning .

BarcodeScannerScreenFlow.html

código de barrasScannerScreenFlow.js

BarcodeScannerScreenFlow.js-meta.xml

código de barrasScannerScreenFlow.css

Copie el código de GitHub . El código de muestra se toma de la guía para desarrolladores de Salesforce para la API de Barcode Scanner.

Paso 2.1: Definir propiedades de flujo

  1. Haga clic en Configuración .
  2. En el cuadro Búsqueda rápida, escriba Flujos .
  3. Seleccione Flujos y luego haga clic en Nuevo flujo .
  4. Seleccione el flujo de pantalla   opción y haga clic en Crear y configurar el flujo.
  5. Se abrirá el diseñador de flujo para usted.

Paso 2.2: Cree una variable de texto para almacenar el resultado del escáner de código de barras

El propósito de crear una variable de texto es almacenar el resultado del escáner de código de barras.

  1. En Caja de herramientas , seleccione Administrador y luego haga clic en Nuevo recurso para almacenar la URL base de la organización.
  2. Ingrese la siguiente información:
    1. Tipo de recurso : Variable
    2. Nombre de la API : varT_barcodeResult
    3. Tipo de datos : Texto
    4. Valor predeterminado: {!$GlobalConstant.EmptyString}
    5. Comprobar disponible para entrada
    6. Comprobar disponible para la salida
  3. Haga clic en Listo .

Paso 2.3: Cree una variable de texto para almacenar la identificación del registro

El propósito de crear una variable de texto es almacenar la identificación del registro actual.

  1. En Caja de herramientas , seleccione Administrador y luego haga clic en Nuevo recurso para almacenar la URL base de la organización.
  2. Ingrese la siguiente información:
    1. Tipo de recurso : Variable
    2. Nombre de la API : varT_recordId
    3. Tipo de datos : Texto
    4. Valor predeterminado: {!$GlobalConstant.EmptyString}
    5. Comprobar disponible para entrada
    6. Comprobar disponible para la salida
  3. Haga clic en Listo .

Paso 2.4: agregue un elemento de pantalla para mostrar el componente web Lightning del escáner de código de barras

  1. En Flow Designer, haga clic en el icono + y seleccione el elemento Pantalla .
  2. Ingrese la siguiente información :
    1. Ingrese la etiqueta , el nombre de la API se completará automáticamente.
  3. En la sección Entrada en Elemento de pantalla , arrastre y suelte el componente personalizado de BarcodeScanner en la pantalla.
  4. Ingrese la siguiente información :
    1. Nombre de API : Escáner de código de barras
    2. Código del botón (código hexadecimal) : # 800080
    3. Etiqueta del botón : Escanear código de barras
  5. Avanzado
    1. Marque Asignar variables manualmente
    2. Resultado del código de barras: {!varT_barcodeResult}
  6. Haga clic en Listo .

Paso 2.5: Agregue el elemento Crear registros para crear un caso

El paso final es crear un caso. Para ello, utilizaremos el elemento Crear registros .

  1. En Flow Designer, debajo del nodo Ejemplo de código de barras, haga clic en el icono + y seleccione el elemento Crear registros .
  2. Introduzca un nombre en el campo Etiqueta ; el nombre de la API se completará automáticamente.
  3. Ingrese la siguiente información :
    1. Cuántos registros crear : uno
    2. Cómo establecer los campos de registro : use recursos separados y valores literales
    3. Objeto : Caso
    4. Establecer valores de campo para el caso
    5. Fila 1:
      1. Campo : Origen
      2. Valor : Internet
    6. Haga clic en Agregar campo
    7. Fila 2:
      1. Campo : Estado
      2. Valor : Nuevo
    8. Haga clic en Agregar campo
    9. Fila 3:
      1. Campo : Tipo
      2. Valor : Otro
    10. Haga clic en Agregar campo
    11. Fila 4:
      1. Campo : Descripción
      2. Valor : creado a partir del escaneo del código de barras para el producto {!varT_barcodeResult}
    12. Haga clic en Agregar campo
    13. Fila 5:
      1. Campo : ID de contacto
      2. Valor : {!varT_recordId}
  4. Haga clic en Listo .

Al final, Rachel's Flow se verá como la siguiente captura de pantalla:

Una vez que todo se vea bien, realice los siguientes pasos:

  1. Haga clic en Guardar .
  2. Ingrese la etiqueta de flujo , el nombre de la API se completará automáticamente.
  3. Haga clic en Mostrar avanzado .
  4. Versión de API para ejecutar el flujo : 55
  5. Etiqueta de entrevista : Usar código de barras en el flujo de pantalla {!$Flow.CurrentDateTime}
  6. Haga clic en Guardar .

¡Casi ahí! Una vez que todo se vea bien, haga clic en el botón Activar .

Paso 3: agregue un flujo de pantalla a la página de registro de contacto

El siguiente paso es distribuir un flujo a los usuarios de la aplicación Lightning Experience o Salesforce incrustándolo en una página de registro de Lightning para objetos de contacto.

Prueba de concepto

A partir de ahora, cuando un usuario empresarial escanee un código de barras y haga clic en el botón Finalizar, el flujo creará automáticamente un caso .

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/08/barcode-scanner-for-screen-flow-using-the-barcodescanner-api-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?

Escáner de código de barras para el flujo de pantalla con la API de BarcodeScanner
Escáner de código de barras para el flujo de pantalla con la API de BarcodeScanner