[SalesForce] Pass Custom Object into LWC from Flow, then back to Flow

When creating a screen flow using LWC, how do we pass a custom object into the flow, update the custom object, then pass the updated object back to the flow? No child components used here, just one component designed to update the object.

When passing my custom object to the flow, I understand that you must use a FlowAttributeChangeEvent to push changes back to the flow for updates in subsequent screens. I've successfully used this method with primitive variables, but I can't seem to make this work with an object.

To get any variables set in previous screens to show in the page, or to bind a change to a variable in the JavaScript, I had to clone the object passed in from the flow, and use that variable to bind the data in the markup.

When proceeding to the next screen in the flow, the custom object is not reflecting any changes.

Here's an example of the code I'm currently using:

lwcInFlow.html

<template>
 <lightning-input type="checkbox" label="Field 1" value={clonedCustomObject.field1__c} onchange={handleChangeCustomObject} name="input1"></lightning-input>
</template>

lwcInFlow.js

import { LightningElement, api} from 'lwc';
import { FlowAttributeChangeEvent} from 'lightning/flowSupport';
export default class customObjectScreenName extends LightningElement {

@api customObject;
@api clonedCustomObject;
connectedCallback() {
        this.clonedCustomObject = {...this.customObject};
    }
handleChangeCustomObject(event) {
        this.clonedCustomObject.field1__c = event.target.checked;
        console.log('JSON: ' + JSON.stringify(clonedCustomObject)); //outputs JSON: {"Field1__c":true}
        const attributeChangeEvent = new FlowAttributeChangeEvent('customObject', this.clonedCustomObject);
        this.dispatchEvent(attributeChangeEvent);
    }
}

lwcInFlow.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>47.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__FlowScreen</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__FlowScreen">
            <property name="customObject" type="@salesforce/schema/CustomObject__c" label="customObject"/>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

This method works just fine when using Aura components, but I'm thinking there is something I'm missing here that is specific to LWC.

Any ideas on how to achieve this would be greatly appreciated.


UPDATE: Okay, so for anybody that comes across this post, here is what I ended up doing. The issue was that I was trying to use the value property to toggle the checkbox on off. LWC's use the checked property to toggle the box on or off, and to bind to your variable. I also modified my change handler to work with all the input fields, rather than have a handler for every field. Code below.

lwcInFlow.html

<template>
 <lightning-input type="checkbox" name="Field_1__c" label="Field 1" checked={clonedCustomObject.field1__c} onchange={handleChangeCustomObject}></lightning-input>
<lightning-input type="checkbox" name="Field_2__c" label="Field 2" checked={clonedCustomObject.field2__c} onchange={handleChangeCustomObject}></lightning-input>
</template>

lwcInFlow.js

import { LightningElement, api} from 'lwc';
import { FlowAttributeChangeEvent} from 'lightning/flowSupport';
export default class customObjectScreenName extends LightningElement {

@api customObject;
@api clonedCustomObject;
connectedCallback() {
        this.clonedCustomObject = {...this.customObject};
    }
handleChangeCustomObject(event) {
        const name = event.target.name;
        switch(name){
            case "Field_1__c": this.clonedCustomObject.Field_1__c = event.target.checked;
            break;
            case "Field_2__c": this.clonedCustomObject.Field_2__c = event.target.checked;
            break;
        }
        const attributeChangeEvent = new FlowAttributeChangeEvent('customObject', 
        this.clonedCustomObject);
        this.dispatchEvent(attributeChangeEvent);
    }
}

Best Answer

The value property is not relevant for the Lightning-Input field, you need to look at the "checked" property on it. This has caught me out before!