The building blocks of a custom property editor

Some of these actions and components are so complicated that admins require documentation to configure them.

In comes the Custom Property Editor! Custom Property Editor is an excellent solution for creating tailored UIs for admins using the custom Flow screen components and Apex actions.

But to truly understand the benefits of the editor, you need to take a closer look at what this custom editor is and what it does.

What are custom property editors?

How ISVs can take advantage of CPEs

• When building a feature or product, the design and ease of usage are two fundamental aspects.
• With the help of a CPE, you can create highly dynamic, compact, reactive, user-friendly, and eye-pleasing UIs for your complex screen components and Apex actions.
• You can enforce custom validation using the CPE on top of the component or action. This is very useful, especially when you want to implement input-based conditional validation. You will also be able to reduce errors caused by incomplete settings and insufficient data, resulting in fewer Flow metadata errors.
• Configuring a component or action becomes very easy for end users (primarily admins).
• With CPEs, you can build UIs with an entity type so that they’re self-documenting – and users do not need to refer to a reference document separately.

How to build a custom property editor

For practice purposes, let’s create a custom property editor for an Apex action that links two or a private string.

Step 1: create the Apex action

Let’s take a look at what the dataset format Apex action looks like:

public inherited sharing class ConcatAction {
 
    @InvocableMethod(label='Concat String')
    public static ActionOutput[] init(ActionInput[] inputs) {
        ActionOutput[] outputs = new ActionOutput[]{};
        for(ActionInput input : inputs) {
            outputs.add(new ActionOutput(input.str1 + input.str2));
        }
        return outputs;
    }
 
    public class ActionInput {
        @InvocableVariable(label='String 1')
        public String str1;
       
        @InvocableVariable(label='String 2')
        public String str2;
    }
   
    public class ActionOutput {
        @InvocableVariable(label='Result String')
        public string linkString;
       
        public ActionOutput(String str) {
            this.linkString = str;
        }
    }
} 

The ’ConcatAction’ Apex action takes in two inputs: ‘String 1(str1)’ and ‘String 2(str2’),’ and they output a ‘Result String’ (‘linkString’).

Step 2: create the custom property editor

You're making a Lightning Web Component by creating a Custom Property Editor and property values.

Let’s call this object type component ‘contactActionCpe’ and look at its code.

HTML File

<template>
    <lightning-input
        type="text"
        label="String 1"
        value={str1}
        onchange={handleInputChange}
        name="str1"
    ></lightning-input>
 
    <lightning-input
        type="text"
        label="String 2"
        value={str2}
        onchange={handleInputChange}
        name="str2"
    ></lightning-input>
 </template>

XML File

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>55.0</apiVersion>
    <isExposed>false</isExposed>
</LightningComponentBundle>

JavaScript controller

import { LightningElement, api } from 'lwc';
 
export default class ConcatActionCpe extends LightningElement {
 
    @api inputVariables; // contains information about all the input variables for the action/component.
 
    /* Declaring Apex action inputs as properties  */
    str1;
    str2;
 
    connectedCallback() {
        this.setFlowInputs(['str1', 'str2']);
    }
 
    /** Initializing the inputs on component load from the last saved state
     *  by finding the variable value in the 'inputVariables'.
     */
    setFlowInputs(inputs) {
        inputs.forEach(variableName => {
            this[variableName] = this.getInputVariableValue(variableName);
        });
    }
 
    getInputVariableValue(variableName) {
 
        const inputVariable = this.getInputVariable(variableName);
        return inputVariable
            ? inputVariable.value
            : null;
    }
 
    /** Change handler for the base input components (in html) */
    handleInputChange(event) {
        this.updateFlowInput(event.target.name, event.detail.value, 'String');
    }
 
    /** Firing change event To report input value changes to Flow Builder with the new input value */
    updateFlowInput(inputVariableName, updatedValue, dataType) {
 
        this[inputVariableName] = updatedValue;
 
        const valueChangedEvent = new CustomEvent(
            'configuration_editor_input_value_changed', {
                bubbles: true, //should be true
                composed: true, //should be true
                detail: {
                    name: inputVariableName,
                    newValue: updatedValue,
                    newValueDataType: dataType
                }
            }
        );
        this.dispatchEvent(valueChangedEvent);
    }
}

When building a Custom Property Editor and custom property definitions, refer to the Flow Builder JavaScript Interface guide.

Step 3: connect an Apex action to the property editor

Once you’re done creating the Property Editor, you can use it with the Apex action by setting the ‘configurationEditor’ property with multi-line text.

@InvocableMethod(
    label='Concat String'
    configurationEditor='c-concat-action-cpe'
)
public static ActionOutput[] init(ActionInput[] inputs) {

If you’d like to create more basic properties, a dataset property, advanced properties, list views, and a list of values for your Custom Property Editor components, you can look at UnofficialSF.com.

Time to get editing

Salesforce is a market-leading CRM, so the sky is truly the limit with what you can customize, develop, and streamline. Your business deserves a platform that will take the load off of you while you increase your productivity.

This guide is just the tip of the iceberg regarding everything you can do with Apex actions and Custom Property Editors.

The more you learn, the more you will be able to solve, integrate, and innovate solutions.

So, get started and get editing!