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.
…
En Spring '22, puede extender el poder de Lightning Web Components (LWC) a los tableros de Tableau CRM y crear aplicaciones de análisis aún más ricas y personalizadas. Las opciones con LWC y Tableau CRM son muchas. Puede crear extensiones reutilizables personalizadas, como gráficos, widgets e incluso visualizaciones de datos de Tableau, y llevarlas directamente a sus tableros para brindar una experiencia perfecta a sus usuarios finales.
Hay dos tipos principales de LWC de Analytics: los que se adjuntan a una consulta (también conocidos como "pasos" en Tableau) y los que no.
Los casos de uso típicos para LWC con un paso incluyen una visualización de datos personalizada, un control personalizado, una vista de lista o una tabla personalizada con funcionalidad adicional. Estos LWC reciben una notificación instantánea cuando la consulta asociada actualiza sus resultados. Esto significa que puede aprovechar todas las facetas, los filtros, los enlaces y la interacción de Tableau CRM, ¡todo sin escribir una sola línea de código! Además, también hay API para obtener las selecciones, los metadatos y el modo de selección de la consulta; si desea permitir que los usuarios usen su LWC para filtrar otros widgets, entonces desea implementar setSelection para notificar al panel cuando se actualice la selección.
El segundo tipo de Analytics LWC no tiene una consulta adjunta y se puede usar para comportamientos genéricos del tablero. Algunos ejemplos incluyen un botón Atrás, una bandeja de todos los filtros existentes, una tabla personalizada en la que desea escribir toda la lógica de consulta de datos directamente mediante Lightning Data Service, adaptadores de cable de Apex o API externas.
Cómo funciona LWC para Tableau CRM
Para que un LWC esté disponible en el tablero de Tableau CRM, debemos definir una serie de atributos para el archivo js-meta.xml .
En primer lugar, debemos hacer que el componente sea compatible con la interfaz de usuario del diseñador de paneles agregando el atributo de destino analytics__Dashboard .
<objetivos> <objetivo>análisis__Panel de control</objetivo> </objetivos>
Para exponer las opciones de configuración, necesitamos agregar el atributo targetConfigs . Aquí podemos definir si estamos consultando o no datos de nuestro conjunto de datos configurando el atributo hasStep en verdadero o falso.
Finalmente, podemos exponer el valor de la propiedad en el tablero al incluir los detalles.
<configuraciones de destino> <targetConfig objetivos="analytics__Dashboard"> <hasStep>falso</hasStep> <propiedad nombre="título" tipo="Cadena" etiqueta="Título" descripción="Título del componente" requerido="verdadero" /> </targetConfig> </configuraciones de destino>
Para encender nuestro LWC, podemos exponer la propiedad en el archivo .js con las anotaciones @api .
Las propiedades son clave para hacer que su código sea reutilizable. Si se encuentra codificando cadenas o valores numéricos, agregue una propiedad en el archivo js-meta.xml . Siempre puede agregar un valor predeterminado, para que no tenga que configurarse en la instalación. La gran parte de hacer esto es que cuando cambian los requisitos comerciales o el tablero principal, no tiene que cambiar su código en absoluto. Todas las propiedades se pueden actualizar desde la interfaz de usuario de Dashboard Designer sin tener que mirar el código (suponiendo que les dio una descripción lo suficientemente buena). Esto también ayudará a asegurarse de que su código sea reutilizable en muchos tableros, incluidos tableros, conjuntos de datos y casos de uso en los que ni siquiera ha comenzado a pensar todavía.
Veamos un ejemplo
Para ilustrar el arte de lo posible con LWC y Tableau CRM, veamos un ejemplo del botón Reproducir. En Tableau CRM, hemos creado un tablero con tres widgets:
- Un gráfico que muestra el valor de la oportunidad y el número por cuenta
- Un widget de lista que muestra la fecha de cierre (Año-Mes)
- Un componente widget con nuestro botón Reproducir
El botón Reproducir utiliza los datos de consulta del widget de lista, lo que significa que cuando hace clic en reproducir, seleccionará y ejecutará todas las fechas del widget de lista.
El botón Reproducir es un ejemplo realmente divertido y único porque se adjunta a una consulta, pero no representa los datos subyacentes. La consulta se puede adjuntar a uno o más widgets para mostrar las distintas selecciones (incluida la selección actual), pero no tiene por qué ser así. También podría ser una consulta oculta que oculta cómo ocurre la magia. ¡Este componente es una gran herramienta para desbloquear su narrador de datos interno!
Nota: Puede encontrar el ejemplo de LWC de playButton en GitHub.
playButton.js-meta.xml
<?versión xml="1.0" codificación="UTF-8"?> <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadatos"> <apiVersion>52.0</apiVersion> <isExposed>verdadero</isExposed> <masterLabel>Botón de reproducción</masterLabel> <objetivos> <objetivo>análisis__Panel de control</objetivo> </objetivos> <configuraciones de destino> <targetConfig objetivos="analytics__Dashboard"> <hasStep>verdadero</hasStep> <property name="retraso" type="Entero" label="Retraso (ms)" description="Retraso entre pasos en milisegundos." min="1" predeterminado="2000" /> </targetConfig> </configuraciones de destino> </LightningComponentBundle>
Botón de reproducción.js
importar { LightningElement, api } desde 'lwc'; exportar la clase predeterminada PlayButton extiende LightningElement { @api resultados; @api metadatos; selección @api; @api setSelección; @api selectMode; @api obtenerEstado; @api establecerEstado; retraso @api; @api curSelectionIndex = 0; @api miTemporizador; reiniciar contador() { este.curSelectionIndex = 0; this.setSelection([this.results[this.curSelectionIndex]]); } dejar de jugar() { clearInterval(this.myTimer); } empezar a jugar() { if (this.curSelectionIndex >= this.results.length - 1) { este.curSelectionIndex = 0; } this.setSelection([this.results[this.curSelectionIndex]]); que = esto; function pasoAdelante() { if (eso.curSelectionIndex >= eso.resultados.longitud - 1) { clearInterval(eso.miTemporizador); } demás { eso.curSelectionIndex += 1; that.setSelection([that.results[that.curSelectionIndex]]); } } this.myTimer = setInterval(stepForward, this.delay); }
}
botón de reproducción.html
<plantilla> <div> <icono-botón-relámpago icon-name="utilidad:saltar_a_la_izquierda" variant="borde-llenado" texto-alternativo="Restablecer" título = "Reiniciar" onclick={resetContador} ></icono-botón-relámpago> <icono-botón-relámpago icon-name="utilidad:detener" variant="borde-llenado" texto-alternativo="Parar" título = "Parar" onclick={dejar de jugar} ></icono-botón-relámpago> <icono-botón-relámpago icon-name="utilidad:jugar" variant="borde-llenado" texto-alternativo="Reproducir" título="Reproducir" onclick={empezar a jugar} ></icono-botón-relámpago> </div>
</plantilla>
Agregar a un tablero existente
Una vez que haya instalado este componente en su organización, puede agregarlo a cualquier tablero. La forma más rápida de ponerse en marcha es simplemente usar un tablero existente, o uno de una aplicación o plantilla de tablero. Una vez que encuentre uno que le guste y lo edite con Tableau CRM Dashboard Designer, simplemente siga estos pasos:
- Busque una consulta que desee utilizar. Una manera fácil de hacer esto es hacer clic en un widget que lo usa, luego hacer clic en la pestaña Consulta en la parte superior derecha y recordar su Etiqueta o ID.
- Arrastre un componente desde la barra de herramientas izquierda a un lugar vacío en el lienzo.
- Haga clic en el botón Configurar en el componente.
- Haga clic en la pestaña Componentes Lightning.
- Elija "Botón de reproducción" y haga clic en "Listo".
- En la siguiente pantalla, seleccione "Consulta existente" (si no ve una barra de pestañas, haga clic en "Cambiar fuente de datos" en la parte superior).
- Haga clic en la consulta del Paso 1.
- Opcionalmente, cambie el tamaño y mueva el botón Reproducir a un buen lugar en el tablero.
- Opcionalmente, haga clic en LWC y expanda "Atributos de componente" a la derecha y modifique el retraso de intervalo predeterminado para acelerar o ralentizar las cosas.
Ahora, haga clic en "Vista previa" y presione el botón Reproducir para verlo en acción. Luego, libera tu Hans Rosling interior y cuéntales a todos una historia emocionante sobre lo que sucede en tu tablero.
Empezando
Si desea obtener más información sobre cómo usar LWC en Tableau CRM, puede leer las notas de la versión y consultar la documentación para desarrolladores . También puede consultar más ejemplos de código LWC en el repositorio sfdx-analytics en GitHub.
Aprende MOAR esta semana
Los Gerentes de Producto y Relaciones con Desarrolladores están de vuelta para compartir las características y funcionalidades más recientes para ayudarlo a desarrollarse más rápido con nuevo contenido de Relaciones con Desarrolladores que cubre sus nuevas funciones favoritas. Asegúrese de ver Release Readiness Live el viernes 4 de febrero a las 9:00 PST. Por último, ¡esté atento al blog de desarrolladores de Salesforce para obtener más publicaciones sobre Spring '22!
Para obtener aún más información, consulta el trailmix de Spring '22 .
Sobre los autores
Rikke Hovgaard trabaja como directora de arquitectura de soluciones en el equipo de productos de Tableau CRM. Se enfoca en ayudar a los clientes a aprovechar al máximo sus datos, independientemente de la complejidad. Puede seguirla en Twitter @HovsaRikke o salesforceblogger.com .
Ed Mengel es director sénior de gestión de productos en el equipo de CRM de Tableau. Le encanta crear funciones que hagan que los datos sean más divertidos y atractivos. Ha estado trabajando en Tableau CRM durante casi diez años y ha estado trabajando desde casa desde antes de que fuera genial. A veces tuitea como @edmengel y publica algunos videos tutoriales útiles en EdForceAnalytics en YouTube.
…
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/02/learn-moar-in-spring-22-with-lwc-in-tableau-crm-dashboards.html
