0

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. enter image description here

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 -

enter image description here

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 -

enter image description here

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.

enter image description here

1 Answer 1

3

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.

4
  • Hello Phil, I have added an update to the original post after trying out your code.
    – sumchans
    Jan 16 at 21:38
  • Have you looked at console logs from the imperative Apex promise then to verify the case ID gets back to the LWC correctly? If that is working, try ensuring the event is dispatched with this.outputCaseId. Also please edit to include the flow's variable declaration and show how you bound it to the LWC output property.
    – Phil W
    Jan 16 at 22:14
  • I have added the flows variable declaration to the post. Also added a second update. Mt flow is still not displaying the case id value.
    – sumchans
    Jan 16 at 22:24
  • Thank you Phil.W. I was able to figure it out. It was some extra js code that was in there doing all this trouble without conveying any error .
    – sumchans
    Jan 17 at 1:48

You must log in to answer this question.

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