Lightning Web Components – Configure LWC to Accept and Map JSON String

javascriptjsonlightning-web-componentsvisual-workflow

I am trying to modify my LWC, which launches a Flow, to accept a JSON string as input with any variables that I want to pass to the flow defined in the JSON string. Reason is to allow the LWC to be very flexible vs listing each variable name I wish to pass into each different flow.

I have two inputs flowName which is working fine and flowParams which is supposed to be the JSON string.

  1. I do not think the get inputVariables() is written correctly and likely needs to map the string? If so I do not understand what that should look like.
<template>
    <lightning-flow
        flow-api-name={flowName}
        flow-input-variables={inputVariables}
        onstatuschange={handleStatusChange}
        flow-finish-behavior="NONE"
    >
    </lightning-flow>
</template>

import { LightningElement, api } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';

export default class CardNpiSingFlowCmp extends LightningElement {
  @api flowName;
  @api flowParams;

    get inputVariables() {
      return this.flowParams;
    }
    
    handleStatusChange(event) {
        if (event.detail.status === 'FINISHED') {
            // set behavior after a finished flow interview
        }
    }
}
  1. In the Properties for the LWC what the JSON string should look like when passed in?

[{ name: 'varEntryPoint', type: 'String', value: 'lwcType1' },{ name: 'varTwo', type: 'String', value: 'lwcType2' }]

Best Answer

The this.flowParams must not be a JSON string, but rather a JavaScript object.

If you are receiving it as a JSON string, consider updating how it is passed in. If you can't change this to a JavaScript object (array), use JSON.parse to convert it to the array of values you need before it gets passed to the flow. E.g.

get inputVariables() {
  return JSON.parse(this.flowParams);
}

The format of the objects in the array is as you have shown, and as covered in the documentation, though to be valid JSON the property names ("name", "type" and "value") must be in double quotes.

Related Topic