[SalesForce] Pass record ID to custom LWC Component and Modal Flow Screen

I am using lightning and I have a custom action button on the standard Account Detail screen. When the button is clicked, it opens up a Flow Screen which I have my custom Lightning Web Component (LWC). I can't seem to pass the record Id into the LWC. I can display the record Id on a flow screen as shown in my image, but can't seem to get it into the custom LWC component that is on the flow screen.

The custom component displays a file upload screen and I need the Salesforce Record ID of the Account available. I think the problem is I don't know how to pass the Id between the Flow Screen and the Custom LWC component that is embedded on the flow screen if that's even possible?

enter image description here

import { LightningElement, track, api, wire } from 'lwc';
import { getRecord } from 'lightning/uiRecordApi';
import {ShowToastEvent} from 'lightning/platformShowToastEvent';

export default class LwcCSVUploader extends LightningElement {

   @api recordId;
   @track fileName = '';
   selectedRecords;
   filesUploaded = [];
   file;
   fileContents;
   fileReader;

   handleSave() {
     // does not display the account record ID which is my goal
     window.console.log(this.recordId);
   }

   handleFilesChange(event) {

     if(event.target.files.length > 0) {
      this.filesUploaded = event.target.files;
      this.fileName = event.target.files[0].name;
     }

   }

}

HTML file in the LWC:

<template>
 <lightning-card title="File Upload">
 <div>
   <lightning-input label="" name="fileuploader" onchange={handleFilesChange} type="file"></lightning-input>
</div>
 <div>
   <lightning-button variant="brand" label="Upload" title="Upload CSV Data"  onclick={handleSave}> 
   </lightning-button>
 </div>
</lightning-card>
</template>

Best Answer

I solved my problem by creating an aura component and eliminating the flow screen altogether by wrapping the LWC component with an aura:component. This allowed me to then passed in the record id into the LWC component as shown below:

<aura:component implements="force:lightningQuickActionWithoutHeader,force:hasRecordId" >
    <c:lwccsvuploader recordId="{!v.recordId}"/>
</aura:component>

I was then able to add a quick action on the Account Record Detail page.

Related Topic