Lightning Web Components – Accessing Flow Loop Variables in Custom Property Editors

invocable-methodlightning-web-componentsvisual-workflow

I having been trying out Custom Property Editors for Flow as outlined here.
For the most part, with some trial and error, I have gotten it to work, with one notable exception:

In a Flow Loop, it now automatically generates a Loop Variable you can reference:
enter image description here

But in the custom property editor, I can't find a way to reference it?
enter image description here

I looked at the Loop Flow Metadata that gets sent to the LWC, but the old manual variable you used to use is null, and I don't see it in the metadata?

"loops": [
    {
      "name": "Test_Loop",
      "description": "",
      "label": "Test Loop",
      "locationX": 176,
      "locationY": 242,
      "nextValueConnector": {
        "targetReference": "Set_curPlace"
      },
      "assignNextValueToReference": null,
      "collectionReference": "varCollection1",
      "iterationOrder": "Asc"
    }
  ],

As a workaround, I can do an assignment in the loop to a local variable (e.g. the currPlace2 variable in the first image), and then use that, but that is going to be a bit confusing for an admin\and is really a regression from Summer 20.
Is there someplace else I should be looking for that variable?

Best Answer

As noted above, the new automatically created variable for the loop can be accessed by referencing the API name of the Loop itself. To ensure that this is accessible in a Custom Property Editor, we need to create a list of options for admins to select that is a combination of the variables and loops elements supplied by the Flow to the LWC.

Something similar to the below should work:

get valueOptions() {
    const variables = this.builderContext.variables;
    const loops = this.builderContext.loops;
    let options = [];

    variables.forEach(variable => {
      options.push({label: name, value: name});
    });

    loops.forEach(loop => {
      options.push({label: 'Current Item for ' + loop.label, value: loop.name});
    });

    return options;
}

EDIT: As per comments (thanks sfdcfox and Phil W), a more modern approach to this would be:

get valueOptions() {
    return [...this.builderContext.variables.map(name => ({
        label: name,
        name
    })), ...this.builderContext.loops.map(({
        label,
        name
    }) => ({
        label: `Current Item for ${label}`,
        name
    }))];
}
Related Topic