0

I'm getting this error based on when I click my LWC "Next" button to save my record edit form and navigate me to the following Flow screen. The data I enter in my LWC still saves fine, but everytime I click the button to save and navigate to the next screen, it will throw this error.

enter image description here

I have seen on other posts that this error mainly relates to parent/child components, but I am not using different components (apart from conditionally if an error is caused from my wired method).

Note: This error only occurs if I am using any user BUT System Administrator. System Admins will not get this error. I cannot see any permission issues in relation to these users getting this error.

I have to use this component within a flow and also launched from a quick action on a record page, so I am having to incorporate logic catered to both flow navigation and quick actions (e.g. closing the LWC if it's launched from the quick action).

Here is my HTML and JS for the component:

<template>
    <!-- Log errors to Neubla Logger -->
    <c-logger></c-logger>

    <template if:true={error}>
        <c-hsaap-error-panel errors={error}></c-hsaap-error-panel>
    </template>

    <template if:false={error}>
        <!-- If the payee record exists, show the modal header (when editing from an existing payee record) -->
        <template if:true={payeeRecord}>
            <lightning-modal-header label="Edit Bank Account"></lightning-modal-header>
        </template>
        <!-- Displays the form to edit the bank account details with custom validation on bank number fields -->
        <lightning-record-edit-form object-api-name="HSAAP_Payee__c" record-id={recordId} onsuccess={handleSuccess} onsubmit={handleSubmit} onerror={handleError}>
            <lightning-layout>
                <lightning-layout-item size="6">
                    <lightning-input 
                        class="slds-m-around_medium" 
                        type="text" 
                        name="accountName"
                        label="Account Name" 
                        value={accountName}
                        onchange={handleAccountNameChange}>
                    </lightning-input>
                </lightning-layout-item>
            </lightning-layout>
            <lightning-layout class="slds-m-bottom_large">
                <lightning-layout-item size="2">
                    <lightning-input 
                        class="slds-m-horizontal_medium" 
                        data-id="bankid"
                        type="text" 
                        name="bank"
                        label="Bank" 
                        max-length="2" 
                        min-length="2"
                        placeholder="XX"
                        pattern="^[0-9]*$"
                        message-when-pattern-mismatch="Bank can only contain numbers."
                        message-when-too-short="Bank must be two numbers."
                        message-when-value-missing="Bank is required."
                        required
                        value={bank}
                        onchange={handleBankChange}>
                    </lightning-input>
                </lightning-layout-item>
                <lightning-layout-item size="3">
                    <lightning-input 
                        class="slds-m-right_medium" 
                        type="text" 
                        name="branch"
                        label="Branch" 
                        max-length="4" 
                        min-length="4"
                        placeholder="XXXX"
                        pattern="^[0-9]*$"
                        message-when-pattern-mismatch="Branch can only contain numbers."
                        message-when-too-short="Branch must be four numbers."
                        message-when-value-missing="Branch is required."
                        required
                        value={branch}
                        onchange={handleBranchChange}>
                    </lightning-input>
                </lightning-layout-item>
                <lightning-layout-item size="4">
                    <lightning-input 
                        type="text" 
                        name="account"
                        label="Account" 
                        max-length="7" 
                        min-length="7" 
                        placeholder="XXXXXXX"
                        pattern="^[0-9]*$"
                        message-when-pattern-mismatch="Account can only contain numbers."
                        message-when-too-short="Account must be seven numbers."
                        message-when-value-missing="Account is required."
                        required
                        value={account}
                        onchange={handleAccountChange}>
                    </lightning-input>
                </lightning-layout-item>
                <lightning-layout-item size="3">
                    <lightning-input 
                        class="slds-m-horizontal_medium" 
                        type="text" 
                        name="suffix"
                        label="Suffix" 
                        max-length="3" 
                        min-length="2" 
                        placeholder="XXX"
                        pattern="^[0-9]*$"
                        message-when-pattern-mismatch="Suffix can only contain numbers."
                        message-when-too-short="Suffix must be at least two numbers."
                        message-when-value-missing="Suffix is required."
                        required
                        value={suffix}
                        onchange={handleSuffixChange}>
                    </lightning-input>
                </lightning-layout-item>
            </lightning-layout>

            <div class="slds-m-vertical_small slds-border_top slds-color__border_gray-6"></div>
    
            <lightning-layout class="slds-m-bottom_small" horizontal-align="end">
                <!-- Displays button to save the values from the form if viewed on an existing payee record -->
                <template if:true={payeeRecord}>
                    <lightning-layout-item>
                        <lightning-button class="slds-m-around_small" variant="brand" type="submit" label="Save" name="save"></lightning-button>
                    </lightning-layout-item>
                </template>

                <!-- Displays save button as next if payee record doesn't exist, as this process will be when it the bank details are in a flow -->
                <template if:false={payeeRecord}>
                    <lightning-layout-item>
                        <lightning-button class="slds-m-around_small" variant="brand" type="submit" label="Next" name="save"></lightning-button>
                    </lightning-layout-item>
                </template>
            </lightning-layout>

        </lightning-record-edit-form>
    </template>
</template>

import { LightningElement, api, wire } from 'lwc';
import { refreshApex } from '@salesforce/apex';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import { CloseActionScreenEvent } from 'lightning/actions';
import { FlowNavigationNextEvent } from 'lightning/flowSupport';
import getPayeeBankDetails from '@salesforce/apex/HSAAP_BankAccountDetailsController.getBankDetailsByPayeeId';
import ID_FIELD from '@salesforce/schema/HSAAP_Payee__c.Id';
import BANK_FIELD from '@salesforce/schema/HSAAP_Payee__c.HSAAP_Bank_ID__c';
import BRANCH_FIELD from '@salesforce/schema/HSAAP_Payee__c.HSAAP_Bank_Account_Branch__c';
import ACCOUNT_FIELD from '@salesforce/schema/HSAAP_Payee__c.HSAAP_Bank_Account_Base_Number__c';
import SUFFIX_FIELD from '@salesforce/schema/HSAAP_Payee__c.HSAAP_Bank_Account_Suffix__c';
import ACCOUNT_NAME_FIELD from '@salesforce/schema/HSAAP_Payee__c.HSAAP_Bank_Account_Name__c';

export default class HsaapBankAccountDetailsInput extends LightningElement {
    @api recordId;
    @api accountNameValue; // The bank account name value to be passed to flow builder
    @api bankValue; // The bank Id value to be passed to flow builder
    @api branchValue; // The bank branch value to be passed to flow builder
    @api accountValue; // The bank account base number value to be passed to flow builder
    @api suffixValue; // The bank suffix value to be passed to flow builder
    payeeRecord; // The payee record returned from the wired method
    error; // The error returned from the wired method
    wiredRecordsResult; // The result returned from the wired payee, used when refreshing UI based on form success

    // Wired payee data, passing in the record Id of the payee
    // This returns the bank details of the payee
    @wire(getPayeeBankDetails, {
        payeeId: '$recordId'
    })
    wiredPayee(result) {
        this.wiredRecordsResult = result;
        const { data, error } = result;
        if (error) {
            this.error = error;
        } else if (data) {
            this.payeeRecord = data;
        }
    }

    // Returns the bank account name to be rendered in the UI
    get accountName() {
        if (this.payeeRecord) {
            return this.payeeRecord.HSAAP_Bank_Account_Name__c;
        }
    }

    // Returns the bank Id to be rendered in the UI
    get bank() {
        if (this.payeeRecord) {
            return this.payeeRecord.HSAAP_Bank_ID__c;
        }
    }

    // Returns the bank branch to be rendered in the UI
    get branch() {
        if (this.payeeRecord) {
            return this.payeeRecord.HSAAP_Bank_Account_Branch__c;
        }
    }

    // Returns the bank account base number to be rendered in the UI
    get account() {
        if (this.payeeRecord) {
            return this.payeeRecord.HSAAP_Bank_Account_Base_Number__c;
        }
    }

    // Returns the bank suffix to be rendered in the UI
    get suffix() {
        if (this.payeeRecord) {
            return this.payeeRecord.HSAAP_Bank_Account_Suffix__c;
        }
    }

    // Captures the value of the bank account name from the UI input field
    handleAccountNameChange(event) {
        this.accountNameValue = event.target.value;
    }

    // Captures the value of the bank Id from the UI input field
    handleBankChange(event) {
        this.bankValue = event.target.value;
    }

    // Captures the value of the bank branch from the UI input field
    handleBranchChange(event) {
        this.branchValue = event.target.value;
    }

    // Captures the value of the bank account number from the UI input field
    handleAccountChange(event) {
        this.accountValue = event.target.value;
    }

    // Captures the value of the bank suffix from the UI input field
    handleSuffixChange(event) {
        this.suffixValue = event.target.value;
    }

    // Save field inputs on submission
    handleSubmit(event) {
        event.preventDefault();

        // Assign each field the matching field value
        const fields = event.detail.fields;
        fields[ID_FIELD.fieldApiName] = this.recordId;
        fields[BANK_FIELD.fieldApiName] = this.bankValue;
        fields[BRANCH_FIELD.fieldApiName] = this.branchValue;
        fields[ACCOUNT_FIELD.fieldApiName] = this.accountValue;
        fields[SUFFIX_FIELD.fieldApiName] = this.suffixValue;
        fields[ACCOUNT_NAME_FIELD.fieldApiName] = this.accountNameValue;

        // If the input is valid then submit the form, close the quick action screen and navigate to the next flow screen,
        // otherwise prevent the user from submitting and closing the screen
        if (this.isInputValid()) {
            this.template.querySelector('lightning-record-edit-form').submit(fields); // Submit fields by querying for record edit form in html
            this.dispatchEvent(new FlowNavigationNextEvent());
            this.dispatchEvent(new CloseActionScreenEvent());
        } else {
            event.preventDefault();
            const evt = new ShowToastEvent({
                title: 'Please review error messages.',
                variant: 'error'
            });
            this.dispatchEvent(evt);
        }
    }

    // Handles logic on success of form submission
    handleSuccess() {
        const evt = new ShowToastEvent({
            title: 'Bank Account Details Saved Successfully',
            variant: 'success'
        });
        this.dispatchEvent(evt);
        // Refresh the wire adapter to update the bank account details in the UI
        refreshApex(this.wiredRecordsResult);
    }

    // When an error is thrown on the form, show a toast with the error message and log an error
    handleError(event) {
        const logger = this.template.querySelector('c-logger');
        logger.error(event.detail.detail).addTag('DmlException', 'LWCException');
        logger.saveLog();
        const evt = new ShowToastEvent({
            title: event.detail.message,
            message: event.detail.detail,
            variant: 'error'
        });
        this.dispatchEvent(evt);
    }

    // Method that returns a boolean value based on if an input field is valid or not
    isInputValid() {
        let isValid = true;
        let inputFields = this.template.querySelectorAll('lightning-input');
        inputFields.forEach((inputField) => {
            if (!inputField.checkValidity()) {
                inputField.reportValidity();
                isValid = false;
            }
        });
        return isValid;
    }
}

Any help would be much appreciated, as I'm stuck on how to debug this :)

Improve this question

1 Answer 1

Reset to default
1

Found the issue! The user didn't have apex class access to "ComponentLogger" which relates to the Nebula Logger framework. Just needed to provide this as part of one of the permission sets and was away laughing.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.