Skip to content

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/

Últimas novedades 
de EGA Futura
1954
Desde hace más de 25 años potenciamos a las Empresas de Iberoamérica

🎬 Video de Juan Manuel Garrido » Claves para tu Productividad diaria 🙌✅

🎬 Video de EGA Futura » Facturación Electrónica en Uruguay » Conceptos básicos con EGA Futura Windows

🎬 Video de EGA Futura » Facturación Electrónica en Uruguay » Configuración de EGA Futura Windows

🎬 Video de EGA Futura » Facturación Electrónica en Uruguay » Funcionamiento con EGA Futura Windows

🎬 Video de EGA Futura » Configuración de la Plataforma EGA Futura

🎬 Video de EGA Futura » Configuración de usuario en EGA Futura

🎬 Video de EGA Futura » Como automatizar la publicación en Redes Sociales?

🎬 Video de Juan Manuel Garrido » Cómo restaurar la configuración de fábrica de EGA Futura Windows sin perder la información

🎬 Video de Juan Manuel Garrido » Factura electrónica: Prueba de Factura Electronica previa a la activacion

🎬 Video de EGA Futura » Como se registran los Beneficios de cada Empleado en la base de datos de EGA Futura

🎬 Video de EGA Futura » EGA Futura Time Clock » Reloj de Control horario y asistencia

🎬 Video de EGA Futura » Como registrar Observaciones en un Empleado dentro de EGA Futura People?

🎬 Video de EGA Futura » Cómo registrar la Educación de cada Empleado en EGA Futura People?

🎬 Video de EGA Futura » Como hacer la Desvinculación de un Empleado? (Offboarding)

🎬 Video de EGA Futura » Como registrar Habilidades o Skills de empleados dentro de EGA Futura

🎬 Video de EGA Futura » Como hacer el Onboarding o Proceso de Incorporación de un Empleado?

🎬 Video de EGA Futura » Cómo administrar Turno de trabajo dentro de EGA Futura

🎬 Video de EGA Futura » Que es un Ticket interno dentro de la Plataforma EGA Futura

🎬 Video de EGA Futura » Que son los Entrenamientos de Empleado en EGA Futura people?

🎬 Video de EGA Futura » Qué son los Epics dentro de EGA Futura

🎬 Video de EGA Futura » Qué es EGA Futura People?

🎬 Video de EGA Futura » EGA Futura People » Asistencias

🎬 Video de EGA Futura » Soporte EGA Futura » Software de Gestión Windows vs Software de Gestión Nube 🤩

🎬 Video de EGA Futura » ツ Comparando un Objeto con un Fichero

🎬 Video de EGA Futura » ✍( ͡* ͜ʖ ͡*) ¿Qué es una Aplicación?

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