1

I want to create 1 lwc for account record creation and 2nd lwc for contact record creation, in screen flow. (Contact should inherit account Id from previous screen).

I'll attach what I have made so far.(I did everything except the rule,that contact should have be connected automatically to the Account) So,in flow I also created a variable with option 'input' and put in property for both components. Right now I can create account and contact successfully,but contact does not inherit the acccount Id from previous step and is not connected(((

1st lwc for acc creation:

html

  <template>
       <lightning-card title="Create and View Account Record">
          <div class="slds-p-horizontal_small">
        
            <lightning-record-form 
            object-api-name="Account" 
            record-id={accountRecordId}
            columns="2" 
            mode="edit" 
            fields={arrayFields}
            onsuccess={handleSuccess}>
        </lightning-record-form>
        </div>
    </lightning-card>
</template>

js

import { LightningElement,api } from 'lwc';
import {FlowNavigationNextEvent} from 'lightning/flowSupport';
import {ShowToastEvent} from 'lightning/platformShowToastEvent';
export default class AccountCreation extends LightningElement {

    @api availableActions = [];
    @api accountRecordId;
    arrayFields = ['Name', 'AccountNumber', 'Phone', 'Type', 'Website'];
    handleSuccess(event){
        this.accountRecordId = event.detail.id;
        const evt = new ShowToastEvent({
         title: "Record created " + this.accountRecordId,
         message: "Account is created",
         variant:"success"

        });
        this.dispatchEvent(evt);
        this.handleGoNext();
}
handleGoNext(){
    //check if NEXT is allowed on this screen
    if(this.availableActions.find(action => action === 'NEXT')){
        //navigate to next screen
        const navigateNextEvent = new FlowNavigationNextEvent();
        this.dispatchEvent(navigateNextEvent);
}
}
}

xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>54.0</apiVersion>
    <isExposed>true</isExposed>
    <masterLabel>Account Creation Component</masterLabel>
    <description>This is a simple component</description>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__FlowScreen</target>
    </targets>

    <targetConfigs>
        <targetConfig targets="lightning__FlowScreen">
            <property name="accountRecordId" type="String" label="Current Account Id" 
                        description="Id of the current record"/>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

2nd lwc for contact creation:

html

<template>
    <lightning-card title={cardTitle}>
        <div class="slds-m-around_medium">
            <lightning-record-edit-form object-api-name="Contact" onsuccess={handleSuccess}>
                <lightning-messages>
                </lightning-messages>
                <lightning-input-field field-name="Name">
                </lightning-input-field>
                <lightning-input-field field-name="AccountId" value={recordId}>
                </lightning-input-field>
                <lightning-input-field field-name="Title">
                </lightning-input-field>
                    <lightning-button
                        class="slds-m-top_small"
                        type="submit"
                        label="Create new">
                    </lightning-button>
            </lightning-record-edit-form>
        </div>
    </lightning-card>
</template>

js

import { LightningElement,api } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
export default class ContactCreationLWC extends LightningElement {
    @api recordId;
    cardTitle='New Contact';
    
    handleSuccess (){
        const evt = new ShowToastEvent({
            title: "Success!",
            message: "The Contact's record has been successfully saved.",
            variant: "success",
        });
        this.dispatchEvent(evt);
    }
    
}

xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>54.0</apiVersion>
    <isExposed>true</isExposed>
 <masterLabel>Contact Card</masterLabel>
    <description>This component shows the new contact record form.</description>
    <targets>
        <target>lightning__RecordPage</target>
        <target>lightning__AppPage</target>
        <target>lightning__FlowScreen</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__RecordPage">
            <objects>
                <object>Account</object>
            </objects>         
        </targetConfig>
    <targetConfig targets="lightning__FlowScreen">
            <property name="recordId" type="String" label="Current Account Id" 
                        description="Id of the current record"/>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>
7
  • Any reason you don't use 2 screen elements & create record element directly in flow? In terms of your LWC, what are you passing to the recordId parameter in your contact creation form? It doesn't seem like you're storing the acc Id as an output variable in your flow from your first LWC. Apr 8, 2022 at 12:34
  • Hi @KrisGoncalves ,thank you for you response! I am new in LWC,that's why I do tasks like this to train my self. I use recordId parameter to create property in xml. (I'll attach photos from my flow in my post)
    – user113472
    Apr 8, 2022 at 13:38
  • That's a good reason - just wanted to make sure you were aware of other options. Where is this screen flow on? On a record, in an action, etc. Based on my reading of your question, it sounds like you want the Id of the newly created Account from your first LWC to go into the LWC for contact? Or is your flow on an existing account record already? The reason I ask is because you have an Account Id input on the Account LWC - what would you want to pass there? An existing account Id to edit or is this truly a new account creation LWC? Apr 8, 2022 at 14:04
  • @KrisGoncalves I use my flow on my main Home Page . Yes,exactly(I want the Id of newly created acc to go into LWC for contact). So contact record will be connected to account from previous step.
    – user113472
    Apr 8, 2022 at 14:37
  • @KrisGoncalves I cant describe ,how big your help is. I really spent too much time on this task,because of not understanding the logic. And yes - when I used my previous flow, it worked on acc record page. Appreciate the help !
    – user113472
    Apr 8, 2022 at 18:06

1 Answer 1

0

You're looking to do the following:

  1. Create an Account record in LWC
  2. Proceed to next part of Flow
  3. Create a Contact record in LWC that related to the account created in step 1

To accomplish this - you need to pass the recordId from the first LWC to your second LWC.

What you're currently passing to your Contact LWC is the global recordId variable available for input you created for your flow. It will have no values unless you set it based on how you're calling the Flow (see various examples).

  • Custom button calling flow
    • Pass data to variable in URL - /flow/myFlow?recordId={!Account.Id}
  • Lightning page (record page)
    • When you select your flow, your input variables will appear and a checkbox will allow you to pass the record Id into that variable
      • enter image description here

In your case, you're on a home page that has no record context - as such there's no record Id to really pass. Likewise, for your goal, this is not relevant. All the info you need is directly accessible within your flow so there's no need for an input variable before it begins.


To pass info from one LWC to the other LWC - you'll want to leverage input/output variables in the flow. You can set this specifically in role within the property or leave it blank and it'll be input/output by default. You should always suggest just the role you need if it's not truly needed for both input & output:

  • Account LWC
    • Output property for new account record Id
  • Contact LWC
    • Input property to receive Account record Id

In your Account LWC, you already have an input/output property called accountRecordId that you're setting. Great, I would just suggest updating it to be outputOnly (as you're not looking to set a default value for it) and a better description of what it's for

<property name="accountRecordId" type="String" role="outputOnly" label="Created Account Id" 
                        description="Id of the account record created"/>`

Now, in your Contact LWC - you want to make your property inputOnly as that's the only purpose for it (to get the Account Id set) and to update the description again to document what it's for

 <property name="recordId" type="String" role="inputOnly" label="Account Id" 
                        description="The Account Id the Contact should be related to"/>

Now, when you drag your Contact LWC onto your flow - you can pass the right information to its property which is the stored output variable from your Account LWC. This'll be in the format of

{!ApiNameOfLWCinFlow.yourOutputPropertyName}

In this example, I named the Account LWC on my screen flow as CreateAccountLWC and had an output property name of accountRecordId

enter image description here

You don't have to type that as the input should display the LWCs you used in screen components (why it's important to have good API names). Clicking on the relevant LWC will then display what output variables it has.

enter image description here

You must log in to answer this question.