1

Context: I tackle with creating a simple LWC to be used in a Flow Screen. While LWC still does not support screen flows I wrapped it up by aura component. The idea is simple:

  1. Place the Screen component in a flow with Custom LC (a wrapper for the LWC)
  2. Define inputs (e.g.oppo of the sObject type, inValue of the String type)
  3. Define output (e.g.modified oppo, outValue of the String type)
  4. Define the rest of the flow

Goal: There are two:

  1. Minimum: Get a primitive value from LWC flow screen and feed it into the flow

  2. Maximum: Get an sObject from LWC flow screen and feed it into the flow

Aura pieces

screenFlowExample.design

<design:component>
    <design:attribute name="oppo" label="Opportunity" />
    <design:attribute name="inValue" label="In Value" />
    <design:attribute name="outValue" label="Out Value" />
</design:component>

screenFlowExample.cmp:

<aura:component implements="lightning:availableForFlowScreens">
   <aura:attribute name="oppo" type="Opportunity" access="global"/>
   <aura:attribute name="inValue" type="string" access="global"/>
   <aura:attribute name="outValue" type="string" access="global"/>
   <c:flowScreen oppo="{!v.oppo}" inValue="{!v.inValue}" outValue="{!v.outValue}" />
 </aura:component>

LWC pieces

flowsScreen.js

import { LightningElement, api} from "lwc";

export default class FlowScreen extends LightningElement {
  @api oppo; //sObject
  @api inValue; //screen input
  @api outValue; //screen output

  connectedCallback() {
    this.outValue = this.inValue;
  }

  changeHandler(event) {
    this.outValue = event.target.value;
  }
}  

flowScreen.html

<template>
    <div>
        <h2>outValue {outValue}</h2>
        <lightning-input label="Name" value={outValue} onchange={changeHandler}></lightning-input>
    </div>

</template>

Problems

  1. After moving the aura component into the flow and defining inputs and outputs, only inputs work (I can deal with them in LWC). I cannot push out the outValue into the flow.

  2. In the pieces I put here is also oppo sObject which I would like to change (in memory, in javscript without DML opps), but after reading the docs and a lot of comments on the Internet I doubt it's possible. Am I wrong?

1

outValue being primitive when updated in LWC won't be reflected back to Aura. And as it was not reflected back to the aura, your flow could not read the updated value.

You have to fire an event from LWC and make your Aura component listen to it and its listener will update the attribute in the aura which will be reflected back to the flow.

LWC JS:

 changeHandler(event) {

        this.outValue = event.target.value;
        console.log('Updated out Value');
        const outChangeEvent = new CustomEvent('outchange', {
                   detail: { updatedValue : event.target.value}
               });
               // Fire the custom event
        this.dispatchEvent(outChangeEvent);
      }

Aura Markup:

<c:flowScreen oppo="{!v.oppo}" inValue="{!v.inValue}" outValue="{!v.outValue}"  onoutchange="{!c.handleOutChangeEvent}" />

Aura JS:

({
    handleOutChangeEvent : function(component, event, helper) {

         var updatedValue = event.getParam('updatedValue');
        console.log(JSON.stringify(event));
        component.set('v.outValue', updatedValue);
    }
})
  • Pranay, Thank you for guiding me in a right way. Could you please extend your answer by adding anything about sObject (problem 2)? – Maciek Leks Apr 30 at 8:05
  • @MaciekLeks Hows it different isnt it(oppo) primitive type String? – Pranay Jaiswal Apr 30 at 13:15
  • oppo is of the Opportunity type. Using the same approach gives no effect with sObject. oppo looks like a plain js object (e.g. let oppo be updatedObject in the event: "{"updatedValue":"ABC","updatedObject":{"Id":"0061i000003d37LAAQ","AccountId":"0011i000006qjECAAY","Amount":1,"Description":null,"Name":"XYZ","OrderNumber__c":null}}, so triggering it up into aura works, but when it comes to mapping into the Flow variable of the Opportunity type, it does not work at all. – Maciek Leks Apr 30 at 14:52
  • In LWC convert the opp to JSON string using JSON.stringify(opp); and in AURA convert JSON String back to object using JSON.parse – Pranay Jaiswal Apr 30 at 15:02
  • 1
    You are my private hero today!:) Thank you. – Maciek Leks Apr 30 at 15:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.