How to write Multi-Enom field in Lead Capture

[kmuTools]

I have a quick question. How can I describe a custom field in Lead Capture that I have added to the Lead object via the Entity Manager and save it via web to lead?

It does not work with the conventional method.


Payload
{
"firstName": "FIRST_NAME",
"lastName": "LAST_NAME",
"emailAddress": "EMAIL_ADDRESS",
"salutationName": "SALUTATION_NAME",
"accountName": "ACCOUNT_NAME",
"description": "DESCRIPTION",
"cKontaktgrund": C_KONTAKTGRUND
}



I get the message that it is an array field.

regards
Martin

[lazovic]

Hi kmuTools,

For a regular HTML file, you will need to make several additions. The following example is taken as a basis: https://docs.espocrm.com/administrat...-a-web-browser.

Let's say the Lead entity has a cMultiEnum field and it has options 1, 2, 3. In this case, you first need to add the field itself to the form as follows:

        <div>
            <label for="cMultiEnum">Select Options:</label>
            <select name="cMultiEnum" id="cMultiEnum" multiple>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
            </select>
        </div>

Then, in the part where the JavaScript is processed, you need to add the following line to get the values:

const cMultiEnumValues = Array.from(webToLeadFormElement.cMultiEnum.selectedOptions).map(option => option.value);

You will also need to add this field to the payload constant:

cMultiEnum: cMultiEnumValues.length > 0 ? cMultiEnumValues : null,

The entire file will look something like this:

<div id="web-to-lead-form-container">
    <form id="web-to-lead-form">
        <div>
            <input type="text" name="firstName" placeholder="First Name">
        </div>
        <div>
            <input type="text" name="lastName" placeholder="Last Name" required>
        </div>
        <div>
            <input type="email" name="emailAddress" placeholder="Email Address" required>
        </div>
        <div>
            <label for="cMultiEnum">Select Options:</label>
            <select name="cMultiEnum" id="cMultiEnum" multiple>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
            </select>
        </div>
        <div>
            <button type="submit" name="submit">Submit</button>
        </div>
    </form>
</div>

<script type="text/javascript">
    const webToLeadFormElement = document.getElementById('web-to-lead-form');
    let webToLeadFormIsSubmitted = false;

    webToLeadFormElement.addEventListener('submit', event => {
        event.preventDefault();

        if (webToLeadFormIsSubmitted) {
            return;
        }

        webToLeadFormIsSubmitted = true;
        webToLeadFormElement.submit.setAttribute('disabled', 'disabled');

        const cMultiEnumValues = Array.from(webToLeadFormElement.cMultiEnum.selectedOptions).map(option => option.value);

        const payloadData = {
            firstName: webToLeadFormElement.firstName.value || null,
            lastName: webToLeadFormElement.lastName.value || null,
            emailAddress: webToLeadFormElement.emailAddress.value || null,
            cMultiEnum: cMultiEnumValues.length > 0 ? cMultiEnumValues : null,
        };

        const url = 'https://URL_OF_YOUR_CRM/api/v1/LeadCapture/API_KEY';

        const xhr = new XMLHttpRequest();

        xhr.open('POST', url, true);
        xhr.setRequestHeader('Content-Type', 'application/json');
        xhr.setRequestHeader('Accept', 'application/json');

        xhr.onreadystatechange = function () {
            if (xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200) {
                const containerElement = document.getElementById('web-to-lead-form-container');
                containerElement.innerHTML = 'Sent';
            }
        };

        xhr.onerror = () => {
            webToLeadFormElement.submit.removeAttribute('disabled');
            webToLeadFormIsSubmitted = false;
        };

        xhr.send(JSON.stringify(payloadData));
    });
</script>