and try to use LWC in a flow. I want to upload a csv file in the flow first. And I then put a Lightning Web App into the next screen. Then inside the LWC, I want to pass the file Id of the uploaded file to an apex class and use to display the apex output. However, even though I annotate the fileId correctly using '@api' in the .js file and added in the .xml file, my apex class seem to fail to get the input and returns nothing. (ps. I selected the input for the LWC in the flow).
Here are the simplified version of my code:
//Apex
public with sharing class getContact {
@AuraEnabled
public static List<Contact> getContact(String hardId) {
return [SELECT Name FROM Contact WHERE Id =: hardId];
}
}
<template>
<div>
<lightning-datatable
key-field="id"
data = {data}
columns = {columns}
></lightning-datatable>
</div>
</template>
//lwc.js
import { LightningElement, track, api, wire } from 'lwc';
import {ShowToastEvent} from 'lightning/platformShowToastEvent';
import getContactttt from '@salesforce/apex/getContact.getContact';
const COLUMNS = [
{label: 'Contact Name', fieldNmae: 'Name'}
]
export default class lwc extends LightningElement {
columns = COLUMNS;
@api hardRecordId;
@wire(getContactttt, {hardId: "$hardRecordId"})
data;
}
///lwc.js-meta.xml
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>52.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__FlowScreen</target>
<target>lightning__AppPage</target>
<target>lightning__Tab</target>
<target>lightning__RecordPage</target>
<target>lightning__HomePage</target>
</targets>
<targetConfigs>
<targetConfig targets="lightning__FlowScreen">
<property name="hardRecordId" type="String" label="Current File Id"
description="Id of the current Uploaded CSV file"/>
</targetConfig>
</targetConfigs>
</LightningComponentBundle>
How I put the input to the lwc in flow:
The result datatable is empty: