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
  • That part is configured in the meta file of the LWC. You can define input and output variables. Please see this for more details jitendrazaa.com/blog/salesforce/point-and-click/…
    – manjit5190
    Commented Sep 17, 2020 at 18:44
  • That is a bit different than what I am doing I think, still helpful, but doesn't provide a solution. Commented Sep 17, 2020 at 19:14

2 Answers 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.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .