Acceda a etiquetas personalizadas en el componente web Lightning

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

Gran idea o pregunta duradera:

¿Cómo usar etiquetas personalizadas en componentes web Lightning?

Objetivos:

Después de leer este blog, podrá:

Comprender el propósito de la etiqueta personalizada
Cree etiquetas personalizadas y agréguele traducción
Importar etiquetas personalizadas en el componente web lightning
Acceda a etiquetas personalizadas 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?

Rachel Gillett trabaja como desarrolladora junior en Gurukul on Cloud (GoC). Ha creado un formulario utilizando el componente web lightning (lwc) después de leer este artículo, como se muestra a continuación:

La etiqueta de los campos está codificada en el archivo HTML del componente web Lightning.


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

El director de ventas le ha pedido que se asegure de que las etiquetas de los formularios sean compatibles con varios idiomas (principalmente inglés, francés, español y alemán). Por lo tanto, un usuario cuyo idioma pertenezca a uno de ellos debe ver las etiquetas en su idioma local.

¿Qué son las etiquetas personalizadas?

Las etiquetas personalizadas son valores de texto personalizados que se pueden traducir a cualquier idioma compatible con Salesforce.

También es útil para brindar la mejor experiencia de usuario en su clase a través de aplicaciones multilingües que presentan información automáticamente en el idioma nativo del usuario.
Puede contener hasta 1000 caracteres.
Se puede acceder a las etiquetas personalizadas desde Apex, páginas de Visualforce, Lightning Component, Lightning Web Components y Salesforce Flow.

Crear etiquetas personalizadas

Cree una etiqueta personalizada para almacenar la etiqueta de la dirección de correo electrónico y su traducción.

Haga clic en Configuración .
En la interfaz de usuario, escriba Etiquetas personalizadas .
Haga clic en el botón Nueva etiqueta personalizada .
Introduzca una descripción breve; el Nombre se completará automáticamente.
Ahora ingrese la dirección de correo electrónico en el valor .
Haga clic en Guardar .
Agregar traducción para los idiomas alemán y francés .

Repita los pasos anteriores para crear otra etiqueta personalizada para dispositivos móviles .

¿Cómo acceder a las etiquetas personalizadas en el componente web Lightning?

Para acceder a las etiquetas personalizadas en los componentes web Lightning, primero debemos importar desde @salesforce/label al archivo JavaScript del componente.


importar LabelName desde '@salesforce/label/label-reference';

labelName : un nombre que hace referencia a la etiqueta.
labelReference : el nombre de la etiqueta en su organización en el formato namespace.labelName.

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

Ahora es el momento de crear un componente web Lightning para acceder mediante programación a etiquetas personalizadas.

customLabelExample.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 etiqueta personalizada .html

Para hacer referencia a un recurso en una plantilla, use la sintaxis {property } (es decir , {label.emailAddress} en nuestro ejemplo), que es la misma sintaxis que usamos para hacer referencia a cualquier propiedad de JavaScript.


<!-- ejemploEtiquetaPersonalizada.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 etiqueta personalizada</b></div> <div class="slds-box slds-theme_default"> <entrada de rayo escriba = "correo electrónico" label={etiqueta.dirección de correo electrónico} valor=""> </relámpago-entrada> <entrada de rayo tipo = "tel" nombre="móvil" etiqueta={etiqueta.móvil} valor=""> </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>

ejemplo de etiqueta personalizada .js

El código JavaScript importa dos etiquetas personalizadas: una para dirección de correo electrónico y otra para móvil.


//EjemploEtiquetaPersonalizada.js
importar { LightningElement } desde 'lwc';
importar dirección de correo electrónico desde '@salesforce/label/c.Email_Address';
importar móvil desde '@salesforce/label/c.Mobile'; exportar clase predeterminada InputExample extiende LightningElement() { // Exponer las etiquetas para usar en la plantilla. etiqueta = { dirección de correo electrónico, móvil, }; manejarSiguiente(){ } manejarCancelar(){ }
}

Prueba de concepto

Ahora, si un usuario cuyo idioma está configurado como francés ve el formulario, verá la etiqueta del campo (dirección de correo electrónico y móvil) en su idioma nativo.

¡Excelente! ¡Estás listo! Siéntase libre de modificar el código del componente web Lightning para usar el encabezado personalizado y las etiquetas de los botones.

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/21/access-custom-labels-in-lightning-web-component/