如何将HTML输入值经JS传递到Apex控制器在Salesforce中创建Lead

功能说明 #

从Experience Builder页面的输入控件采集用户姓名、邮箱信息，传递到前端JS后调用Apex接口，最终在Salesforce系统中创建Lead线索。 #

完整实现代码 #

1. 页面采集HTML（Experience Builder页面直接使用） #

<div class="slds-form-element__control ">
    <input type="text"
     id="firstName"
     placeholder="名字"
     class="first_name_input slds-input"
      />                 
</div>

<div class="slds-form-element__control ">
    <input type="text"
     id="lastName"
     placeholder="姓氏"
     class="last_name_input slds-input"
     />     
</div>

<div class="slds-form-element__control ">
    <input type="email"
     id="email"
     placeholder="邮箱地址"
     class="email_input slds-input"
     />                 
</div>

<!-- 提交按钮 -->
<div class="slds-m-top_medium">
    <button class="slds-button slds-button_brand" onclick={handleSubmit}>提交创建线索</button>
</div>

2. 前端JavaScript逻辑（LWC环境适用，修正原代码缺失的传参、调用Apex逻辑） #

// 导入Apex控制器方法
import createOrObtainExistingLead from '@salesforce/apex/VOQuickQuoteController.createOrObtainExistingLead';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';

// 提交按钮触发函数
handleSubmit() {
    // 采集表单输入值
    const firstName = this.template.querySelector('.first_name_input').value.trim();
    const lastName = this.template.querySelector('.last_name_input').value.trim();
    const email = this.template.querySelector('.email_input').value.trim();

    // 基础非空校验
    if(!firstName || !lastName || !email) {
        this.dispatchEvent(new ShowToastEvent({
            title: '输入错误',
            message: '请填写完整的姓名、邮箱信息',
            variant: 'error'
        }));
        return;
    }

    // 调用Apex接口传递参数
    createOrObtainExistingLead({
        firstName: firstName,
        lastName: lastName,
        email: email
    }).then(() => {
        this.dispatchEvent(new ShowToastEvent({
            title: '创建成功',
            message: '线索已创建完成',
            variant: 'success'
        }));
        // 跳转到指定页面
        this.navigateToFAPage();
    }).catch(error => {
        this.dispatchEvent(new ShowToastEvent({
            title: '创建失败',
            message: error.body?.message || '系统异常，请稍后重试',
            variant: 'error'
        }));
    });
}

// 跳转逻辑保留
navigateToFAPage() {
    // 原有页面跳转逻辑不变
}

3. Apex控制器代码（修正原代码语法错误、补充必填字段逻辑） #

public class VOQuickQuoteController {

    @AuraEnabled(cacheable = false)
    public static void createOrObtainExistingLead(String firstName, String lastName, String email) {
        // 可选：增加重复线索校验，避免重复创建
        if([SELECT COUNT() FROM Lead WHERE Email = :email LIMIT 1] == 0) {
            Lead newLead = new Lead(
                FirstName = firstName,
                LastName = lastName,
                Email = email,
                // Lead标准必填字段Company，必须赋值，可根据业务调整取值
                Company = '外部自助提交客户'
            );
            insert newLead;
        }
    }
    
}

注意事项 #

• Lead对象的Company为系统标准必填字段，必须赋值否则插入会报错，可根据实际业务需求调整该字段取值
• 若无特殊异步执行需求，可删除原代码的@future注解，同步调用更方便前端感知操作结果
• Experience Cloud站点部署时，需要给站点访客的配置文件开放VOQuickQuoteController类的访问权限，以及Lead对象的创建权限

内容的提问来源于stack exchange，提问作者Greg Fury