0
115
Vistas¿Cómo usar Lightning Web Component dentro de Visual Force Pages?
Quiero lograr la funcionalidad de carga de archivos en el componente LWC a través de la página de fuerza visual. Aquí, mi código de página de fuerza visual
Mi página de Apex, aplicación Aura, código HTML y JS:
<apex:page showheader="false" sidebar="false"> <apex:includelightning /> <div id="LightningComponentid" /> <script> $Lightning.use("c:aH_UDC_AmadeusFileUpload_POC", function() { $Lightning.createComponent("c:aH_UDC_FileUploadLWC_POC", { recordid : "{!$CurrentPage.parameters.id}", }, "LightningComponentid", // the Id of div tag where your component will be rendered function(cmp) { console.log('Calling the LWC Component'); console.log('record id : ' + "{!$CurrentPage.parameters.id}"); }); }); </script> </apex:page> import { LightningElement, api } from 'lwc'; import {ShowToastEvent} from 'lightning/platformShowToastEvent'; export default class AH_UDC_FileUploadLWC_POC extends LightningElement { @api recordId; get acceptedFormats() { return ['.TXT', '.BMP', '.JPEG', '.PNG', '.PDF', '.XLS', '.DOC', '.DOCX', '.XLSX', '.JPG', '.MSG', '.PPT', '.PPTX', '.GIF', '.SVG', '.EPS', '.CDR', '.ZIP','.bak']; } handleUploadFinished(event) { // Get the list of uploaded files const uploadedFiles = event.detail.files; let uploadedFileNames = ''; for(let i = 0; i < uploadedFiles.length; i++) { uploadedFileNames += uploadedFiles[i].name + ', '; } this.dispatchEvent( new ShowToastEvent({ title: 'Success', message: uploadedFiles.length + ' Files uploaded Successfully: ' + uploadedFileNames, variant: 'success', }), ); } } <aura:application extends="ltng:outApp" access="Global"> <aura:dependency resource="c:aH_UDC_FileUploadLWC_POC"/> </aura:application> <template> <lightning-card title="LWC File Upload Example" icon-name="custom:custom19"> <lightning-file-upload label="Attach receipt" name="fileUploader" accept={acceptedFormats} record-id="aAp290000004Nn2CAE" onuploadfinished={handleUploadFinished} multiple> </lightning-file-upload> </lightning-card> </template>lightning-file-upload no funciona correctamente. ¿Qué falta en el código? Por favor, ayúdame.
1 Respuestas
Responde la pregunta0
Este es el comportamiento esperado, desafortunadamente. Cada componente estándar lwc tiene documentación que explica dónde puede funcionar este componente como se espera. Debido a que está utilizando aura como contenedor principal para lwc, consulte la documentación de aura para el componente, por ejemplo, lightning:button . Los objetivos están diciendo:
preste atención Lightning Out / Visualforce está presente aquí. Eso significa que este componente funcionará incrustado en la página VF.
Sin embargo, file:Upload tiene un conjunto limitado de objetivos:
preste atención Falta Lightning Out / Visualforce aquí. Esto funciona correctamente solo en la experiencia Lightning, la aplicación móvil y en la comunidad.