Uso del componente web Lightning para mostrar un banner de alerta

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

Gran idea o pregunta duradera:

• ¿Cómo utiliza el componente web lightning para mostrar un banner de alerta en las páginas lightning para mostrar mensajes como una próxima notificación de lanzamiento interno/de Salesforce o un recordatorio para finalizar las reuniones de seguimiento de fin de año con los clientes?

Objetivos:

Después de leer este blog, podrá:

• Comprender qué son los tipos de metadatos personalizados y la representación condicional
• Crear tipos de metadatos personalizados
• Acceda a tipos de metadatos personalizados en el componente web lightning
• Mostrar mensajes de alerta dinámicos mediante el componente web lightning
• Use SLDS para mostrar un banner de alerta sin interacción del 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. Comprobar los permisos de usuario para el usuario que ha iniciado sesión en el componente web Lightning
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 recibió la tarea de diseñar una aplicación utilizando el componente web lightning para mostrar los lanzamientos de productos de Salesforce o las notificaciones de lanzamiento internas sin la interacción del usuario.

Quiere brindarle al administrador del sistema la capacidad de establecer las fechas de inicio y finalización para la visualización del banner.

¿Qué es el renderizado condicional?

La representación condicional en el componente web lightning (lwc) es una forma de mostrar componentes o elementos en función de una condición específica. Por ejemplo, puede mostrar diferentes mensajes de saludo según la hora del día.

El renderizado condicional le permite renderizar diferentes componentes o elementos de lwc si se cumple una condición. En este tutorial, aprenderá sobre las diferentes formas en que puede usar la representación condicional en el componente web Lightning.

Lea este artículo para aprender cómo funciona la representación condicional en el componente web Lightning.

¿Qué es un tipo de metadatos personalizados? ¿Por qué uno debería usarlo? ¿Cómo se debe usar? Y, por último, pero no menos importante, ¿en qué se relaciona el tipo de metadatos personalizados o en qué se diferencia del objeto personalizado? Bueno, ¡exploremos estos conceptos juntos!

El tipo de metadatos personalizados es similar a un objeto personalizado: permite a los desarrolladores de aplicaciones crear conjuntos de datos personalizados, así como crear y asociar datos personalizados con una organización. Todos los datos de tipos de metadatos personalizados están disponibles en la memoria caché de la aplicación . Como resultado, permite un acceso eficiente a los datos sin el costo de consultas repetidas (SOQL) a una base de datos. El tipo de metadatos personalizados se utiliza principalmente para almacenar información a la que se accederá con frecuencia desde el código Apex.

El tipo de metadatos personalizados funciona mejor que un objeto personalizado porque está disponible en la memoria caché; por lo tanto, no tiene que ser consultado. La otra diferencia, que notará entre el tipo de metadatos personalizados y un objeto personalizado, es la diferencia en el sufijo. El tipo de metadatos personalizados tiene el sufijo __mdt al final del tipo de metadatos personalizados , a diferencia del __c habitual para los objetos personalizados .

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

Los banners de alerta comunican un estado que afecta a todo el sistema, no solo a una función o página. Persiste durante una sesión y aparece sin que el usuario inicie la acción.

Hay tres pasos para resolver el requisito empresarial de Janel utilizando el componente web Lightning y los tipos de metadatos personalizados . Debemos:

1. Cree un tipo de metadatos personalizado para almacenar los detalles del banner
   1. Fecha de inicio del mantenimiento
   2. Fecha de finalización del mantenimiento
   3. Mensaje
2. Cree una clase de Apex para acceder a un registro de tipo de metadatos personalizado
3. Cree un componente web relámpago para mostrar u ocultar un banner de alerta

Paso 1: Cree tipos de metadatos personalizados para almacenar los detalles del banner

1. Primero, crearemos un tipo de metadatos personalizados para almacenar los detalles del banner .
2. Para crear un nuevo tipo de metadatos personalizados, vaya a Configuración | Código personalizado | Tipos de metadatos personalizados y haga clic en el botón Nuevo tipo de metadatos personalizados .
3. Cree algunos campos para almacenar la fecha de inicio, la fecha de finalización y el mensaje. Al final, el tipo de metadatos personalizados de Notificación de mantenimiento debería verse como lo que se muestra en la siguiente captura de pantalla:
4. El siguiente paso es insertar un registro en el tipo de metadatos personalizados.
5. Para hacerlo, haga clic en el botón Administrar notificaciones de mantenimiento en la página de detalles del tipo de metadatos personalizados y luego haga clic en Nuevo para insertar algunos registros, como se muestra en la siguiente captura de pantalla:

Paso 2: Cree una clase de Apex para acceder al registro de tipo de metadatos personalizados

La siguiente clase de vértice accede al registro Salesforce_Release desde el tipo de metadatos personalizado Mantenimiento de notificación .

público con clase compartida BannerController {
@AuraEnabled(cacheable=true) Public static Maintenance_Notification__mdt getBannerDetail() { devolver [ SELECCIONE Id, Maintenance_Start_Date__c, Maintenance_End_Date__c, Message__c DESDE Mantenimiento_Notificación__mdt donde DeveloperName ='Salesforce_Release' LÍMITE 1 ];
}
}

Paso 3: cree un componente web Lightning para mostrar u ocultar el banner de alerta

Ahora crearemos un componente web relámpago para mostrar u ocultar el banner de alerta según la fecha de inicio y finalización.

alerta de banner .html

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

Cuando un usuario carga la página, la clase BannerAlert establece el valor de la expresión y el banner   propiedad. Si las propiedades de la expresión y el banner son verdaderas , la directiva if:true representa la plantilla anidada, que muestra Message!

<plantilla> <div class="slds-card slds-theme_shade" if:true={expresión}> <div class="slds-card__header slds-grid"> <div class="slds-notify slds-notify_alert slds-alert_warning" role="alert"> <span class="slds-assistive-text">advertencia</span> <span class="slds-icon_container slds-icon-utility-warning slds-m-right_x-small" title="Descripción del icono cuando sea necesario"> <svg class="slds-icon slds-icon_x-small" aria-hidden="true"> <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#warning"></use> </svg> </span> <h2 if:true={banner.data}>{mensaje}&nbsp; <a href="https://status.salesforce.com" target="_blank">Más información</a> </h2> </div> </div> </div>
</plantilla>

alerta de banner .js

Este código JavaScript de muestra utiliza el decorador @wire . Se utiliza para invocar a Apex para obtener el registro Salesforce_release del tipo de metadatos personalizado de Mantenimiento de notificaciones .

Luego, JavaScript también realiza una operación lógica para asegurarse de que:

• La fecha de inicio del mantenimiento es menor o igual que la actual
• La fecha de finalización del mantenimiento es mayor o igual que la actual

importar { LightningElement, cable } de 'lwc';
importar getBannerDetail desde '@salesforce/apex/BannerController.getBannerDetail'; exportar la clase predeterminada BannerAlert extiende LightningElement { @wire(getBannerDetail) banner; obtener mensaje () { devolver este.banner.data.Message__c; } fechaIniciomantenimiento() { devolver este.banner && este.banner.datos ? this.banner.data.Maintenance_Start_Date__c : 'Cargando...'; } mantenimientoEndDate() { devolver este.banner && este.banner.datos ? this.banner.data.Maintenance_End_Date__c : 'Cargando...'; } obtener expresión() { let hoy = nueva Fecha(); hoy.setMinutes(nueva Fecha().getMinutes() - nueva Fecha().getTimezoneOffset()); // Devuelve la fecha de hoy en formato "YYYY-MM-DD" let fecha = hoy.toISOString().slice(0,10); let planningMaintenanceStartDate = this.maintenanceStartDate(); let planningMaintenanceEndDate = this.maintenanceEndDate(); if (fecha >= fecha de inicio de mantenimiento planificado && fecha <= fecha de finalización de mantenimiento planificado) { devolver verdadero; } más { falso retorno; } }
}

bannerAlert.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 objetivos admitidos y la configuración de diseño para Lightning App Builder y Experience Builder.

Este archivo de configuración hace que el componente esté disponible para todas las páginas Lightning, incluidos el escritorio y el teléfono.

<?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> <configuraciones de destino> <targetConfig objetivos="relámpago__AppPage"> <factores de forma admitidos> <supportedFormFactor type="Large" /> <supportedFormFactor type="Pequeño" /> </factores de forma admitidos> </targetConfig> <targetConfig objetivos="relámpago__RecordPage"> <factores de forma admitidos> <supportedFormFactor type="Large" /> <supportedFormFactor type="Pequeño" /> </factores de forma admitidos> </targetConfig> <targetConfig objetivos="relámpago__HomePage"> <factores de forma admitidos> <supportedFormFactor type="Large" /> <supportedFormFactor type="Pequeño" /> </factores de forma admitidos> </targetConfig> </configuraciones de destino>
</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/07/10/using-lightning-web-component-to-show-an-alert-banner/