1

Now that we have LWC great, but more than 50% of my users are still in classic. So I need to publish my new LWC to visualforce. There are quite a few examples when I google, but most don't go beyond the basic "Hello World". I am writing a simple lightning-file-upload and its working fine in lightning, but when I use lighting out to a visualforce page my upload component is grayed out. Here is what I am doing: Create a lwc:

<template>
<lightning-card title={cardTitle} icon-name="standard:file">   
    <p class="slds-p-horizontal_small">This is a LWC.</p>
    <lightning-file-upload
            label="Attach files"
            name="fileUploader"
            accept={acceptedFormats}
            record-id={recordId}
            onuploadfinished={handleUploadFinished}
            multiple>
    </lightning-file-upload>

</lightning-card>

and the js

    import { LightningElement, api } from 'lwc';
export default class FileUploader extends LightningElement {
    @api recordId;

    get acceptedFormats() {
        return ['.pdf', '.png', '.ai', '.bmp', '.gif', '.jpeg', '.jpg', '.tif',  '.tiff', '.key',
                '.odp', '.pps', '.ppt', '.pptx', '.ods', '.xlr', '.xls', '.xlsx', '.doc', '.docx',
                '.rtf', '.txt', '.wks', '.wps', '.wpd', '.csv'];
    }

    handleUploadFinished(event) {
        // Get the list of uploaded files
        const uploadedFiles = event.detail.files;
        alert("No. of files uploaded : " + uploadedFiles.length);
    }

    get cardTitle() {
        return 'File Upload';
    }
}

works fine in lightning:

enter image description here

Now let's move on to lightning out and aura:

Create an aura component with the lwc embedded:

    <aura:component implements="flexipage:availableForAllPageTypes,force:hasRecordId,force:hasSObjectName">
    <div>This is AURA component</div>
    <c:fileUploader/>
</aura:component>

and next an aura app:

    <aura:application access="GLOBAL" extends="ltng:outApp">
    <aura:dependency resource="c:fileUploaderCmp"/>
    <aura:dependency resource="markup://force:showToast" type="EVENT"/>
    <aura:dependency resource="markup://force:navigateToURL" type="EVENT"/>
</aura:application> 

now we are ready to creat our visualforce page:

    <apex:page standardController="Certification__c" lightningStylesheets="true">
  <apex:includeLightning />

    <div id="fileUploaderApp"></div> 

 <script>
      // Here 'fileUploaderApp' Is Lightning Application Name
    $Lightning.use("c:fileUploaderApp", function() {
      /* 'fileUploaderCmp' is Lightning Component Name which we are Displaying In Vf Page 
       * syntax for create lightning component dynamically :
       * $Lightning.createComponent(String type, Object attributes, String locator, function callback) */
    $Lightning.createComponent("c:fileUploaderCmp",
    { 
      // Set Lightning Component Attributes Property before creating Lightning Component In Visualforce page 
        recordId : "{!$CurrentPage.parameters.id}"
    },
   "fileUploaderApp",
    function(component) {
        // create component Callback, Lightning Component has been Created,
        // Now you can set more lightning Component attributes here,
        // and do more cool stuff here
        component.set("v.recordId" , '{!$CurrentPage.parameters.Id}');
    });
 });
 </script>
</apex:page>

Added my new visualforce page as a button to my object make sure my Id in the URL: ....c.visualforce.com/apex/FileUploader?scontrolCaching=1&id=a0Y0W00000DdLL5 the component loads but my upload file is not active. I think it has to do with me not setting or receiving the recordId correctly or some other silly mistake, but I tried for quite some and have not been able to get it to work. Any suggestions are greatly appreciated.

enter image description here

Thanks,

Matthias

1

The "recordId" interface doesn't automatically filter down the component hierarchy. It only works when used in the Lightning experience. To get it to work in Lightning Out, you need to pass in the record Id:

<c:fileUploader recordId="{!v.recordId}" />

It appears that your VF page is passing the value correctly, so this should be the missing piece.

| improve this answer | |
0

Below code worked for me . I have just commented line -

component.set("v.recordId" , '{!$CurrentPage.parameters.Id}'); 
  <apex:page standardController="Certification__c" lightningStylesheets="true">
  <apex:includeLightning />

    <div id="fileUploaderApp"></div> 

 <script>
      // Here 'fileUploaderApp' Is Lightning Application Name
    $Lightning.use("c:fileUploaderApp", function() {
      /* 'fileUploaderCmp' is Lightning Component Name which we are Displaying In Vf Page 
       * syntax for create lightning component dynamically :
       * $Lightning.createComponent(String type, Object attributes, String locator, function callback) */
    $Lightning.createComponent("c:fileUploaderCmp",
    { 
      // Set Lightning Component Attributes Property before creating Lightning Component In Visualforce page 
        recordId : "{!$CurrentPage.parameters.id}"
    },
   "fileUploaderApp",
    function(component) {
        // create component Callback, Lightning Component has been Created,
        // Now you can set more lightning Component attributes here,
        // and do more cool stuff here
       // **component.set("v.recordId" , '{!$CurrentPage.parameters.Id}');**
    });
 });
 </script>
</apex:page>
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.