function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Andy Kallio 13Andy Kallio 13 

lwc calling apex imperatively and then saving with lightning-record-edit-form

Hello. I'm basically just an admin trying to figure out their first lwc by piecing together examples. Very little experinece with javascript. 

I am trying to do make a case form to run in a public community that will format phone numbers using a libphone library in apex. The call to apex is returning the expected data. I just can't seem to do anything with it after that. I just get undefined errros in the console. How do I use the value returned from the apex method (phoneInfo.E164) and assign it to my case.suppliedphone field for insert?

Thanks for any help!
 
import {
    LightningElement,
    track,
    api
} from 'lwc';
import { createRecord } from 'lightning/uiRecordApi';
import { ShowToastEvent} from 'lightning/platformShowToastEvent';
import { COUNTRIES_PICKLIST } from "c/libphoneData";
import getPhoneNumberInfo from "@salesforce/apex/communityCaseLWCUtility.getPhoneNumberInfo";

 
export default class CreateCase extends LightningElement {
    @api title;
    @api buttonlabel;
    showSuccessPage = false;
    btnDisabled = true;
    hasData = false;
    phoneInfo;
    phoneNumberE164;

    handleBlur() {
        const input = this.template.querySelector(".phone");
        this.disabled = !input.validity.valid;
    }
    
    handleSubmit(event) {
        const country     = this.template.querySelector(".country").value;
        const phoneNumber = this.template.querySelector(".phone").value;
        console.log('phone number '+phoneNumber);
        getPhoneNumberInfo({countryCode: country, userPhoneNumber: phoneNumber})
        .then(result => {
            this.phoneInfo = result;
            this.hasData = true;
        })
        .catch(error => console.log(error));
        const fields = event.detail.fields;
        fields.service_team__c = 'Customer Experience';
        fields.service_team_brand__c = 'RedBalloon';
        fields.recordtypeid = '0127F000000IQXBQA4';
        fields.status = 'New';
        fields.origin = 'RedBalloon Customer Community';
        fields.service_email__c = 'info@redballoon.com.au'
        fields.suppliedphone = this.phoneInfo.E164;
        console.log(JSON.stringify(fields));
        this.template.querySelector('lightning-record-edit-form').submit(fields);

        this.showSuccessPage = true;
        window.open('/customers/s/contactsupport','_top')
    }

    get countries() {
        return COUNTRIES_PICKLIST
    }

    set disabled(value) {
        this.btnDisabled = value;
    }

    get disabled() {
        return this.btnDisabled;
    }
    
}


The undefined Error happens when I try to set suppliedphone with the value returned from apex: 
 fields.suppliedphone = this.phoneInfo.E164;

 

David Zhu 🔥David Zhu 🔥
The code looks good. I noticed there is semi colon missing at the end of this line and you may need to fix it.
fields.service_email__c = 'info@redballoon.com.au';

 
Andy Kallio 13Andy Kallio 13
Thanks for catching that David. Still get the same result, though.
David Zhu 🔥David Zhu 🔥
If proporty E164 exists, you may change the line after calling apex method.

getPhoneNumberInfo({countryCode: country, userPhoneNumber: phoneNumber})
.then(result => {
    this.phoneInfo = result.data;
 
Andy Kallio 13Andy Kallio 13

thank! But still phoneInfo is still returning undefined. This verison has  your suggestion and a new console.log on line 36 that returns undefined. 

import {
    LightningElement,
    track,
    api
} from 'lwc';
import { createRecord } from 'lightning/uiRecordApi';
import { ShowToastEvent} from 'lightning/platformShowToastEvent';
import { COUNTRIES_PICKLIST } from "c/libphoneData";
import getPhoneNumberInfo from "@salesforce/apex/communityCaseLWCUtility.getPhoneNumberInfo";

 
export default class CreateCase extends LightningElement {
    @api title;
    @api buttonlabel;
    showSuccessPage = false;
    btnDisabled = true;
    hasData = false;
    phoneInfo;
    phoneNumberE164;

    handleBlur() {
        const input = this.template.querySelector(".phone");
        this.disabled = !input.validity.valid;
    }
    
    handleSubmit(event) {
        const country     = this.template.querySelector(".country").value;
        const phoneNumber = this.template.querySelector(".phone").value;
        console.log('phone number '+phoneNumber);
        getPhoneNumberInfo({countryCode: country, userPhoneNumber: phoneNumber})
        .then(result => {
            this.phoneInfo = result.data;
            this.hasData = true;
        })
        .catch(error => console.log(error));
        console.log(this.phoneInfo);
        const fields = event.detail.fields;
        fields.service_team__c = 'Customer Experience';
        fields.service_team_brand__c = 'RedBalloon';
        fields.recordtypeid = '0127F000000IQXBQA4';
        fields.status = 'New';
        fields.origin = 'RedBalloon Customer Community';
        fields.service_email__c = 'info@redballoon.com.au';
        fields.suppliedphone = this.phoneInfo.E164;
        console.log(JSON.stringify(fields));
        this.template.querySelector('lightning-record-edit-form').submit(fields);

        this.showSuccessPage = true;
        window.open('/customers/s/contactsupport','_top')
    }

    get countries() {
        return COUNTRIES_PICKLIST
    }

    set disabled(value) {
        this.btnDisabled = value;
    }

    get disabled() {
        return this.btnDisabled;
    }
    
}
 

And here is a slightly different version where I put a console.log in the .then so that we can see what is in result.

getPhoneNumberInfo({countryCode: country, userPhoneNumber: phoneNumber})
        .then(result => console.log(result))
        .catch(error => console.log(error));
 

It returns the following:

{E164: "+18006676389", INTERNATIONAL: "+1 800-667-6389", NATIONAL: "(800) 667-6389", RFC3966: "tel:+1-800-667-6389"}

The strange thing to me about this is that this showed up in the log after the uncaught error message that happens when I try to assign suupplied to phoneinfo.E164

 

Why would console show the log made on line 31 after the assignment on line 40? Is the apex call somehow executing after line 40 and that is why I am getting the undefined error?