0

I built a Lighting Web component that opens the standard Opportunity creation Page after a Lighting button is clicked.

<template>
<lightning-card
    title="NavToNewRecordWithDefaults"
    icon-name="custom:custom96"
>
    <lightning-button
        name="new-with-defaults"
        label="Go to New Sales Case with Defaults"
        class="slds-var-m-around_medium"
        onclick={navigateToNewContactWithDefaults}
    ></lightning-button>

</lightning-card>
import { LightningElement } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';
import { encodeDefaultFieldValues } from 'lightning/pageReferenceUtils';

export default class NavToNewRecord extends NavigationMixin(LightningElement) {
    navigateToNewContactWithDefaults() {
        // default fields to be added
        const defaultValues = encodeDefaultFieldValues({
        });

        // eslint-disable-next-line no-console
        console.log(defaultValues);

        this[NavigationMixin.Navigate]({
            type: 'standard__objectPage',
            attributes: {
                objectApiName: 'Opportunity',
                actionName: 'new'
            },
            state: {
                defaultFieldValues: defaultValues
            }
        });
    }
}

Salesforce reference arcticle https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.use_navigate_default

The question:

How to override the "save" button of the opportunity page such that i can call another method instead of having the redirect to the new opportunity record?

Basically i want to achieve what is described in this idea but with Lighting web components:"Callback method for force:createRecord event to redirect or refresh after save" https://trailblazer.salesforce.com/ideaView?id=0873A0000003V4hQAE

6
  • You could override the standard new button to open up a custom lightning web component. In this lwc, you can use provide your own implementation using either record edit form or some custom html along with createRecord method. Have you tried this approach? – arut Aug 18 '20 at 17:40
  • Thank you for your help! I could use lightning-record-edit-form but then I need to specify the opportunity fields to be shown on the component layout. I want the opportunity page layout to still control which fields are shown. – Enry Aug 18 '20 at 20:34
  • I doubt if this functionality is possible in LWC yet (even in Aura, it doesn't exist but people have figured out a work-around). If you want the leverage the existing page layout (& not have to specify fields yourself), then how about using a lightning-record-form (specify the layout-type as 'FULL') and override the standard submit/ success events? This might not a perfect solution you are looking for, but close to your requirements? – arut Aug 19 '20 at 6:49
  • 1
    Thank you. Correct, your solution is not a perfect but close to my requirements. I also don´t think that currently i can solve all my requirements as Aura and LWC has the same limitation. I tried using lightning-record-form (mode=edit ,layout-type=full,record id=record to be cloned) and with onsubmit,onload functions, everything working except that i cannot set default values when opening the standard opportunity page from LWC. I tried changing field values in the onload method but i get that error "read only property" when i try to set field values. – Enry Aug 20 '20 at 6:17
  • 1
    SF Dev Guide states the following: "lightning-record-form does not support prepopulating of field values when the form loads.". However, could you post the current code? May be there is a work-around (I highly doubt it though). – arut Aug 20 '20 at 7:00
0

This is a partial solution, i tried to set default field values with a workaround in the onload method but i get error [Cannot assign to read only property 'value' of object '#']

Please note this is a test component with some hard-coded ids that need to be removed

<template if:false={isMobile}>
    <c-q-a-modal header="Clone Test">
        <lightning-card slot="content" title="Select type of cloning">
            <div class="slds-card__body slds-card__body_inner">
                <ul>
                    <li>Opportunity</li>
                    <li>Opportunity products</li>
                    <li>Others</li>
                </ul>
            </div>
            <div>
                <lightning-record-form
                record-id="0065E00000EOR5VQAX"
                object-api-name="Opportunity"
                layout-type="Full"
                columns="2"
                mode="edit"
                onload={handleLoad}
                onsubmit={handleSubmit}
                >
                </lightning-record-form>
            </div>
        </lightning-card>


        <button slot="footer" class="slds-button slds-button--brand" title="Redirect" onclick={handleRedirect}>Redirect</button>
    </c-q-a-modal>
</template>
import {LightningElement} from 'lwc';
import { NavigationMixin } from 'lightning/navigation';
import FORM_FACTOR from '@salesforce/client/formFactor';

export default class ScLwcClonePoc extends NavigationMixin(LightningElement) {

    get isMobile() {
        return FORM_FACTOR !== 'Large';
    }
    handleLoad(event){
        // id hard-coded as this is a quick test -To be removed
        const fields = event.detail.records['0065E00000EOR5VQAX'].fields;
        //Try to set default value for name field
        fields.Name.value = 'My Custom Name'; // modify a field

    }
    handleSubmit(event){
        event.preventDefault();       // stop the form from submitting
        const fields = event.detail.fields;
        console.log('here fields'+JSON.stringify(fields));
        //here do the cloning
    }
    handleRedirect() {
        this[NavigationMixin.Navigate]({
            type: "standard__recordPage",
            attributes: {
                recordId: 'a055E000005tCAxQAM',
                objectApiName: 'Par__c',
                actionName: 'view'
            }
        }, false);
    }
}
2
  • Like I mentioned before, this code wouldn't work (but I wanted to take a look at your code and hence, thanks for posting). I found few things while trying to check for a work-around. First, you can't call preventDefault() on this event (this is explicitly mentioned in the developer guide). Second, this event is a complex object and its entries are defined as read-only (i.e. probably no setter method) and hence, the error. You'll get this error if you try to set the value for any entry within the event object. – arut Aug 20 '20 at 14:40
  • Now, one could try to deep clone the entire event object (using lodash, ramda or custom code) and replace the entire event object (with value updated) with the cloned object, but I don't think it would be worth it. Reason being that I suspect that the record form would have already passed the field values to individual controls used within the form (possibly via another variable) because there is no prevent default; and updating the values in the detail is not going to have any impact. I guess any work-around should be beyond the above mentioned points. – arut Aug 20 '20 at 14:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.