Lightning Aura Components – Properly Use to Instantiate a Flow in LWC

lightning-aura-componentslightning-web-componentsvisual-workflow

Recently Salesforce made embedding and launching a flow via LWC available.
I have been unsuccessful at making this work even after looking through the documentation. https://developer.salesforce.com/docs/component-library/bundle/lightning-flow/documentation

It looks like you pass the flow name as well as the input variables which in this case would be a recordId. It specifically says that it takes an array in, so I added the recordId to the array and passed it in as a parameter.

html:

<template>
    <lightning-flow if:true={inputVariables}
    flow-api-name='virtual_diagnostic_notes'
    flow-input-variables={inputVariables}
>
</lightning-flow>
    
</template>

JS:

    @api recordId;

    connectedCallback(){
        //do something
        console.log('RECORD ID FOR LWC', this.recordId);
        console.log('inputVariables', this.inputVariables);

    }  
    get inputVariables() {
        return [this.recordId];
    }

I keep getting this error:

Any thoughts?

Best Answer

A flow has variables that you set as available for input. Each variable has a name and a type.

When passing values for these variables you must simply pass a JavaScript array of object with properties that name the variable and provide the variable type and value.

Assuming you called your variable "recordId" in the flow and it is a string that receives an ID from your LWC, you need to do the following:

get inputVariables() {
    return [
        {
            name: 'recordId',
            type: 'String',
            value: this.recordId
        }
    ];
}

On not being able to access default values

If you add a default value to the tag in the metadata file, the behavior is that it prepopulates the input field with that default value. When you edit that property, the component no longer follows the default value. This includes if you edit the field to be blank -- the default value never repopulates unless you delete and recreate the element.

This is not generally useful for retrieving a germane record, but is nice to know, definitely saved me some time copying down Ids testing this LWC.

On not passing in variables

@nbrown's hypothesis that passing $User worked in flows because it's a global variable in the flow context, but not in LWCs because it isn't defined in that context seems to be the case. I could not pass any sort of global variable into the input property, only {!recordId}. If you need data other than recordId, it needs to be resolved outside of the LWC and the Id itself passed into the variable.

Ultimately, my solution was to put the LWC on the User profile page (as it is a User Record Detail Page) to get the User Id from {!recordId}, and within the component use an LDS wire to lookup the ContactId I needed for the form:

JS:

import { LightningElement, api, wire } from 'lwc';
import { getRecord, getFieldValue } from 'lightning/uiRecordApi';

import CONTACT_OBJECT from '@salesforce/schema/Contact';
import USER_CONTACT_FIELD from '@salesforce/schema/User.ContactId';

export default class EditContactExternalForm extends LightningElement {
    // Expose recordId to get info from parent
    @api recordId;
    @wire(getRecord, { recordId : '$recordId', fields: [USER_CONTACT_FIELD]}) user;

    get contactId() {
        return getFieldValue(this.user.data, USER_CONTACT_FIELD);
    }

    objectApiName = CONTACT_OBJECT;
    layoutType = 'Full';

}

HTML

<template>
    <lightning-record-form
    object-api-name={objectApiName}
    record-id={contactId}
    layout-type={layoutType}>

    </lightning-record-form>
</template>

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>lightningCommunity__Page</target>
        <target>lightningCommunity__Default</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightningCommunity__Default">
            <property name="recordId" type="String" required="false"/>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

Best Answer

Related Solutions

Lightning Web Components Platform Event – Using empApi for Publishing and Subscribing

Lightning Web Components – ID Not Passing to LWC in Experience Cloud

On not being able to access default values

On not passing in variables

Related Topic