April 29, 2020

LWC for Flow in Salesforce

HTML:

<template>

    <lightning-datatable key-field="Id"
                         data={contacts}
                         columns={columns}
                         hide-checkbox-column="true"
                         show-row-number-column="true"
                         onrowaction={handleRowAction}>
    </lightning-datatable>

</template>


JavaScript:

import { LightningElement, api, track } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';

const actions = [
    { label: 'View', name: 'view' },
];

const columns = [  
    { label: 'Name', fieldName: 'Name' },
    { label: 'Email', fieldName: 'Email' },
    {
        type: 'action',
        typeAttributes: { rowActions: actions },
    }, 
];

export default class ContactsFlowComponent extends NavigationMixin(LightningElement) {

    @api contacts;
    @track columns = columns;
   
    connectedCallback() {

        console.log( 'Contacts are ' + JSON.stringify( this.contacts ) );
       
    }

    handleRowAction( event ) {

        const row = event.detail.row;
        this[NavigationMixin.Navigate]({
            type: 'standard__recordPage',
            attributes: {
                recordId: row.Id,
                objectApiName: 'Contact',
                actionName: 'view'
            }
        });

    }

}


JavaScript-meta.xml:

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


Flow:


Get Records:


Screen:



Lightning App Builder Configuration:



Output:



6 comments:

  1. this not work in my org. the lwc component gives error while saving component

    ReplyDelete
    Replies
    1. What error are you getting? Put debug logs and check.

      Delete
  2. Is it possible to use this code in the SF Developer console? How do I create a JavaScript-meta.xml:file?

    ReplyDelete
    Replies
    1. No. Please use VS code for LWC(Lightning Web Component) development.

      Delete
    2. Ok, I did deployment from VS. It displays ok but there is no contact showing up in the flow on the account record page. I am using the Dreamhouse Lightning app in SF playground. Account - Dickenson plc, Contact Andy Young. I can't see how to attach screenshot here.

      Delete
    3. Did you add the LWC to the Flow? Debug the Flow with Account Id and check.

      Delete