Ú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?
- Pasar el valor del campo de entrada Lightning de un clic de botón al controlador de componentes web Lightning
- Restablecer el campo de entrada Lightning al hacer clic en un botón en el componente web Lightning
- 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:
- Campeón_de_automatización
- 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
Cuando el recurso estático tiene un espacio de nombres
- 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
Cuando el recurso estático tiene un espacio de nombres
- 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:
- Cargue el logotipo de Automation Champion como un recurso estático
- Cargue la carpeta zip SLDS Icons como un recurso estático
- 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.
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/
