0

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>
2
1

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.

0

Use a design attribute in the flow:

HTML file: {recordId}

JS file: @api recordId;

.js-meta.xml file:

    <isExposed>true</isExposed>
<targets>
    <target>lightning__RecordPage</target>
    <target>lightning__FlowScreen</target>
</targets>
<targetConfigs>
    <targetConfig targets="lightning__FlowScreen">
        <property name="recordId" type="String" label="Record Id" description="Input Record Id as a string or use variable {!recordId}"/>
    </targetConfig>
</targetConfigs>

DO NOT USE A DEFAULT VALUE - not supported by lightning flows will return undefined

In the builder, use variable {!recordId} or hardcoded recordId 'exa00fdsjkaflj' to set the field.

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.