LWC component on Screen flow returns case id, but not available for the Get Records next flow node instantly

Question

LWC on Screen flow does return case id, but not available for the next flow node instantly I have a screen flow where I have a LWC component as one of the nodes. The component calls an apex class to update case and then returns the case id. Just after the LWC screen flow node I have the Get Records element which uses the case id returned from the LWC screen component to get the actual case record. But what I find weird is that I don't see the case Id being available for the Get Records element. I did add a console.log statement to see if a case id is returned by the LWC component and I see it does. Is this because the apex class is being run asynchronously. Here is the snippet of the flow. The LWC component here is the Screen - Null Values.

Here is the apex code I have for the LWC component -

public without sharing class PopulateValuesForNullFieldsService {
    @AuraEnabled
    public static String updateCaseFields(String caseId, String fieldsToUpdate) {
        Map<String, Object> fieldValues = (Map<String, Object>) JSON.deserializeUntyped(fieldsToUpdate);
        
        Case caseToUpdate = [SELECT Id FROM Case WHERE Id = :caseId];
        
        for(String fieldName : fieldValues.keySet()) {
            caseToUpdate.put(fieldName, fieldValues.get(fieldName));
        }      
        update caseToUpdate;

        // Return the case ID
        return caseId;
    }
}

Here is the LWC code making the call -

Meta file -

    <targetConfig targets="lightning__FlowScreen">
        <property name="caseId" label="Case Id"
            type="String"
            role="inputOnly" />
        <property name="fieldsWithNullValues" label="Fields With Null Values"
            type="String"
            role="inputOnly" />
        <property name="outputCaseId" label="Case Id"
            type="String"
            role="outputOnly" />
    </targetConfig>

Declaration in js file

@api outputCaseId;//

Called on the Next button click

if (allValid) {
            // Dispatch a FlowAttributeChangeEvent with the field values
            const attributeChangeEvent = new FlowAttributeChangeEvent('fieldValues', fieldValues);
            this.dispatchEvent(attributeChangeEvent);

            updateCaseFields({ caseId: this.caseId, fieldsToUpdate: JSON.stringify(fieldValues) })
                .then(caseid => {
                    // Dispatch a FlowAttributeChangeEvent with the updated case ID
                    console.log('Result: ' + caseid);
                    const caseIdChangeEvent = new FlowAttributeChangeEvent('outputCaseId', caseid);
                    this.dispatchEvent(caseIdChangeEvent);
                    console.log(caseIdChangeEvent);
                    console.log('Case ID: ' + this.outputCaseId);
                    
                    const navigateNextEvent = new FlowNavigationNextEvent();
                    this.dispatchEvent(navigateNextEvent);
                })
                .catch(error => {
                    console.error('Error updating case fields: ', error);
                });
        } else {
            console.log('Please enter all required fields.')
        }

I have noticed this console.log statement console.log('Case ID: ' + this.outputCaseId); logs undefined.

I also tried console logging this console.log(caseIdChangeEvent) and I do the see the actual case id value there, here is the snip -

UPDATE - After trying out Phil.W answer-

Hello Phil.W,

Here is my updated code -

_outputCaseId;
@api
get outputCaseId() {
    return this._outputCaseId;
}

set outputCaseId(value) {
    this._outputCaseId = value;
}

This is what I am doing in the button click -

updateCaseFields({ caseId: this.caseId, fieldsToUpdate: JSON.stringify(fieldValues) })
                .then(caseId => {
                    // Dispatch a FlowAttributeChangeEvent with the updated case ID
                    this._outputCaseId = caseId;
                    console.log('Updated Case ID: ' + caseId);
                    this.dispatchEvent(new FlowAttributeChangeEvent('outputCaseId', caseId));
                    console.log('Output Case ID: ' + this.outputCaseId);

                    const navigateNextEvent = new FlowNavigationNextEvent();
                    this.dispatchEvent(navigateNextEvent);
                })

Now as you mentioned I have a variable setup in flow to capture the value returned from LWC. I created an another screen element to print out the value returned by the LWC, next to the Screen - Null Values element. I still don't get the value returned to printed out on that screen.

SECOND UPDATE

The console.log statements do print out the expected values -

Here is how I am dispatching now -

updateCaseFields({ caseId: this.caseId, fieldsToUpdate: JSON.stringify(fieldValues) })
                .then(caseId => {
                    // Dispatch a FlowAttributeChangeEvent with the updated case ID
                    this._outputCaseId = caseId;
                    console.log('Updated Case ID: ' + caseId);
                    this.dispatchEvent(new FlowAttributeChangeEvent('outputCaseId', this.outputCaseId));
                    console.log('Output Case ID: ' + this.outputCaseId);

                    const navigateNextEvent = new FlowNavigationNextEvent();
                    this.dispatchEvent(navigateNextEvent);
                })

This is what I see on my screen component to print out the values from LWC. The flow does not seem to receive it.

Answer 1

You need to set up output API properties as getter/setter, as shown here. An LWC is not allowed to change its own API properties directly, so here you have a private property behind the getter/setter which you can then change.

_outputCaseId;

@api
get outputCaseId() {
  return this._outputCaseId;
}

set outputCaseId(value) {
  this._outputCaseId = value;
}

When notifying the flow you must first update the private property itself then fire the FlowAttributeChangeEvent. Both should have the same value, but anecdotally the flow engine gets the API property value rather than using the value in the event.

updateCaseFields({ caseId: this.caseId, fieldsToUpdate: JSON.stringify(fieldValues) })
    .then(caseid => {
        this._outputCaseId = caseid;
        this.dispatchEvent(new FlowAttributeChangeEvent('outputCaseId', caseid));
        ...

Clearly, the output property must be bound to a variable in the flow to allow the value to be obtained in the flow elements appearing after the screen element.