Fields from lightning-record-form not displaying in screenflow

Question

I am struggling with a screenflow here. I made a LWC which I want to include in a screenflow that runs in the salesforce homepage :

When I start the screenflow, I can see that my LWC is here, but the fields from the lightning-record-form are not displayed and the spinner keeps on spinning. Eventually, I have to refresh or whatever to stop the flow from running. I do have to precise that in my flow, a case is created before my LWC is called, and I succeeded in retrieving the recordId of the Case created. This is why I don't understand why the fields are not displayed like they are on the object Case.

I added this LWC on the Case object and it is working perfectly fine, I don't really understand what I am missing here.

Here is my code :

html :

    <lightning-card>
        <div class="slds-media slds-media_center componentHeadline">
            <div class="slds-media__figure">
                <lightning-icon 
                    icon-name="standard:case"
                    size="small"
                    alternative-text="Indicates approval"
                >
                </lightning-icon>
            </div>
            <div class="slds-media__body slds-text-heading_small">
                <h3 class="title">Informations de contact</h3>
            </div>
        </div> 
        <div class="form">   
            <lightning-record-form
            columns="2"
            object-api-name={objectApiName}
            record-id={recordId}
            fields={fields}
            >
            </lightning-record-form>
        </div>
        <lightning-button 
            variant="brand" 
            label="Recherche Maestro" 
            title="Recherche Maestro" 
            onclick={handleClick} 
            class="slds-var-m-left_x-small slds-align_absolute-center"
            disabled={selectionImported}>
        </lightning-button>
    </lightning-card>

</template>

js :

import myModal from 'c/myModal';
import { getRecord, getFieldValue } from 'lightning/uiRecordApi';
import LASTNAME from '@salesforce/schema/Case.Nom_du_contact__c';
import FIRSTNAME from '@salesforce/schema/Case.Prenom__c';
import PHONE from '@salesforce/schema/Case.T_l_phone_du_r_clamant__c';
import EMAIL from '@salesforce/schema/Case.E_mail__c';
import POSTALCODE from '@salesforce/schema/Case.Code_postal__c';
import ACTIONNUMBER from '@salesforce/schema/Case.Numero_d_action__c';
import Id from '@salesforce/user/Id';

export default class LaunchModal extends LightningElement {

    @api recordId;
    @api objectApiName;
    @api record;
    @api selectionImported;

    fields = [LASTNAME, FIRSTNAME, PHONE, EMAIL, POSTALCODE, ACTIONNUMBER];

    @wire(getRecord, { recordId: '$recordId', fields: ['Case.Nom_du_contact__c', 'Case.Id', 'Case.Prenom__c', 'Case.T_l_phone_du_r_clamant__c', 'Case.E_mail__c', 'Case.Code_postal__c', 'Case.Numero_d_action__c', 'Case.OwnerId', 'Case.S_lection_import_e__c']})
    wireRecord({ error, data }) {
        console.log('record id: ' + this.recordId);
        console.log('wiredRecord');
        console.log(data);
        if (error) {
            console.error(error);
        } else if (data) {
            console.log('nom du contact: ' + data.Nom_du_contact__c);
            this.record = data;
            this.selectionImported = this.record.fields.S_lection_import_e__c.value;
            console.log('selection not imported ' + this.selectionImported);
        } else {
            console.info("data is null");
        }
        
    }

    connectedCallback() {
        console.info('connectedcallback: ' + this.recordId);
    }

And xml :

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>57.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <!-- <target>lightning__AppPage</target> -->
        <target>lightning__RecordPage</target>
        <target>lightning__FlowScreen</target>
        <!-- <target>lightning__HomePage</target> -->
    </targets> 
    <targetConfigs>
        <targetConfig targets="lightning__FlowScreen">
            <property name="recordId" type="String" label="Id of the Record"></property>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

Thank you for your help !

Answer 1

The objectApiName property is set by the framework only when the LWC runs in a record page (Reference), therefore when it runs in the screenflow, objectApiName is undefined.

lightning-record-form Specs states that object-api-name is required, that's why the form works only when the LWC is in a record context.

To fix this you should add a new property in the XML to set objectApiName from Flow Builder:

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>57.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
        <target>lightning__FlowScreen</target>
    </targets> 
    <targetConfigs>
        <targetConfig targets="lightning__FlowScreen">
            <property name="recordId" type="String" label="Id of the Record" role="inputOnly" required="true"></property>
            <property name="objectApiName" type="String" label="Api name of the SObject" role="inputOnly" required="true"></property>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

By the way, I defined both properties as required in the XML.

Just for completeness sake, you could get the object api name from the record Id via getRecord wire adapter: the data property holds an apiName attribute with object api name. Anyway I think setting the property via Flow Builder is the fastest way to handle this.