Skip to content

Diferentes formas de hacer que el componente de la pantalla sea de solo lectura

Última actualización el 9 de abril de 2023 por Rakesh Gupta

Gran idea o pregunta duradera:

  • ¿Cómo hacer que el componente de pantalla sea de solo lectura?

Objetivos:

Después de leer este blog, podrá:

  • Agregue texto de solo lectura al componente de pantalla usando Display Text
  • Agregar texto de solo lectura al componente de pantalla mediante un componente web Lightning personalizado
  • Configurar el componente web lightning personalizado para el flujo de pantalla
  • Y mucho más

¿Qué es el componente de solo lectura?

Los estados de solo lectura se aplican a los componentes cuando el usuario puede revisar pero no modificar el valor. Salesforce Flow tiene una función nativa para mostrar textos en formato de solo lectura, pero a veces no es suficiente para el diseño de UI/UX.

Ahora puedes ver la diferencia entre las dos opciones. Recomiendo usar la función estándar lista para usar si cumple con los requisitos de su negocio.

Warren Mason es administrador de sistemas en Gurukul on Cloud (GoC). En GoC están utilizando Salesforce Flow para optimizar los procesos de ventas. Warren tiene el requisito de mostrar los siguientes campos de usuarios registrados en un flujo de pantalla en el modo de solo lectura:

  1. Nombre de pila
  2. Apellido
  3. Correo electrónico
  4. Móvil

Enfoque de Campeón de Automatización (I-do): Opción 1 – Mostrar texto

Usaremos un elemento Display Text para resolver el requisito comercial anterior.

Paso 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: agregue un elemento de pantalla para mostrar los campos en modo de solo lectura

  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. Haga clic en Listo.

Paso 2.1: agregue un componente de texto de visualización para mostrar los detalles del usuario que ha iniciado sesión

  1. En la sección Entrada en Elemento de pantalla , arrastre y suelte el componente Mostrar texto en la pantalla.
  2. Ingrese la siguiente información :
    1. Introduzca un nombre en el campo Nombre de API .
    2. Escriba su mensaje en el cuadro de texto, como se muestra en el video.
  3. Haga clic en Listo.

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

Una vez que todo se vea bien, guarde el flujo.

Prueba de concepto

A partir de ahora, cuando un usuario comercial ejecute el flujo de pantalla, se mostrará automáticamente la información del usuario que inició sesión en formato de solo lectura.

Enfoque de campeones de automatización (I-do): Opción 2: componente de pantalla de flujo personalizado (componente web Lightning)

Crearemos un componente de pantalla de flujo personalizado utilizando el componente web Lightning para resolver el requisito comercial anterior.

Paso 1: Cree un componente de flujo de pantalla personalizado utilizando el componente web Lightning

En primer lugar, cree un componente web Lightning de solo lectura 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 .

screenFlowReadOnlyComponent.html


<plantilla> <template lwc:if={isCheckboxField}> <lightning-input type={fieldType} label={fieldLabel}checked={fieldValue} disabled="true" field-level-help={fieldLevelHelp}></lightning-input> </plantilla> <template lwc:elseif={isPhoneField}> <lightning-input type={fieldType} label={fieldLabel} value={fieldValue} disabled="true" pattern="[0-9]{3}-[0-9]{3}-[0-9] {4}" ayuda a nivel de campo={fieldLevelHelp}></entrada-relámpago> </plantilla> <plantilla lwc: más> <lightning-input type={fieldType} label={fieldLabel} value={fieldValue} disabled="true" field-level-help={fieldLevelHelp}></lightning-input> </plantilla>
</plantilla>

screenFlowReadOnlyComponent.js


import { LightningElement, wire, api, track } desde 'lwc'; exportar la clase predeterminada ScreenFlowReadOnlyField extiende LightningElement { @api etiqueta de campo; @api campoValor; @api tipo de campo; @api fieldLevelHelp; isCheckboxField = falso; isPhoneField = falso; conectadoDevolución de llamada() { if (this.fieldType != null && (this.fieldType=='toggle' || this.fieldType=='checkbox' )) { this.isCheckboxField = verdadero; } else if (this.fieldType != null && this.fieldType=='tel'){ this.isPhoneField = verdadero; }
}
}

screenFlowReadOnlyComponent.xml


<?versión xml="1.0" codificación="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadatos"> <apiVersion>57.0</apiVersion> <isExposed>verdadero</isExposed> <masterLabel>Componente de solo lectura</masterLabel> <description>Componente de solo lectura</description> <objetivos> <target>relámpago__FlowScreen</target> </objetivos> <configuraciones de destino> <targetConfig objetivos="relámpago__FlowScreen"> <property name="fieldLabel" label="Field Label" type="String" required="true" description="La etiqueta que aparece sobre el campo."/> <property name="fieldValue" label="Valor de campo" type="String" required="true" description="Para proporcionar un valor, establezca este valor de atributo."/> <property name="fieldType" label="Field DataType" type="String" required="true" description="Los tipos de entrada válidos son casilla de verificación, fecha, fecha y hora, correo electrónico, contraseña, teléfono, URL, número, texto ( predeterminado), alternar."/> <property name="fieldLevelHelp" label="Ayuda de nivel de campo" type="String" description="Texto de ayuda"/> </targetConfig> </configuraciones de destino>
</LightningComponentBundle>

Copie el código de GitHub o instálelo usando esta URL .

Paso 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: agregue un elemento de pantalla para mostrar los campos en modo de solo lectura

  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. Haga clic en Listo.

Paso 2.1: agregue un componente de texto de visualización para mostrar los detalles del usuario que ha iniciado sesión

  1. En la sección Entrada en Elemento de pantalla , arrastre y suelte el componente Mostrar texto en la pantalla.
  2. Ingrese la siguiente información :
    1. Introduzca un nombre en el campo Nombre de API .
    2. Escriba su mensaje en el cuadro de texto, como se muestra en el video.
  3. Haga clic en Listo.

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

Una vez que todo se vea bien, guarde el flujo.

Prueba de concepto

A partir de ahora, cuando un usuario comercial ejecute el flujo de pantalla, se mostrará automáticamente la información del usuario que inició sesión en formato de solo lectura.

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/2023/04/09/different-ways-to-make-screen-component-read-only-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?

Diferentes formas de hacer que el componente de la pantalla sea de solo lectura
Diferentes formas de hacer que el componente de la pantalla sea de solo lectura