A Hackers’ guide to override “New” button functionality with LWC modal

Introduction

Recently in one of my projects I had a requirement to override the standard New button functionality with custom LWC component to accommodate some business logic.

After searching for the solution online, I came to know that:

1. It is currently not possible to use LWC directly to override the Standard New button. Instead, we have to use an Aura component as a wrapper, and then call the LWC from within the Aura component.
2. Even if we use this approach, the custom component will open in a new tab instead of a modal, which — albeit working perfectly fine — does not result in a good user experience. As shown below:

Figure 1: Result after overriding Standard New button with LWC wrapped inside Aura

So, I started doing some throwaway prototyping and eventually came up with the solution that I have shared below.

In this way we not only be able to open the new record creation window as a modal, but also it does not require any Aura or Visualforce page to work as a wrapper for the LWC component.

Figure 2: My custom solution with LWC Modal

But before diving into the solution let me explain the requirement first. I have given a demo scenario based on the actual requirement below.

Requirement

Universal Containers currently uses the Standard Sales App to manage their Accounts. They use the Standard Account, Opportunity and Contact records to achieve the same. The Department field in Contact is replaced with a custom Department__c picklist field, which refers to a global picklist value set.

Now, the business users wants to add Opportunity SMEs to each Opportunity record. They will have an Effective and an Expiration Date and also a Department picklist field which will refer to the same global value set.

They will only be able to create the SME Records from the Opportunity page related list, but while creating the SME record, the Department picklist should only show those values which are present in the Contact record under the same parent Account of the Opportunity.

For Example: If the Account “Edge Communications” has two Contacts with the Department selected as “Finance” and “Procurement”, then while creating any SME record for an Opportunity under the same “Edge Communications” account, the Department picklist field will show “Finance” and “Procurement” as the only two available options.

Figure 3: Basic ERD of the concerned objects and fields

Solution

Step 1

To implement the solution, first, I have removed the standard New button from the UI and replaced it with a list view button with the same name and set the Content Source as URL.

For the URL, I have used the Opportunity Record Page URL along with a custom state parameter c__openModal, and set it to true.

Figure 4: Custom WebLink configuration

Step 2

I then created a LWC component to be used in Lightning Record Page without any HTML body (newOpportunitySmeModalInvoker).

This component will be embedded in the Opportunity record page. As it does not have any HTML body, it will be hidden from the end user.

Figure 5: Hidden LWC Component on Opportunity Record Page

Step 3

Inside the ConnectedCallback method of this hidden component, I am checking if the pageReference contains the c__openModal state property. If it is set to true, then I’m invoking an LWC modal component (newOpportunitySmeModal).

In the body of the Modal Component, I have embedded my final LWC component (newOpportunitySme) which will be responsible for displaying the input fields with proper picklist values, handling user input and saving the record in the database.

The “Cancel”, “Save & New” and “Save” buttons are present inside the LWC Modal footer section. On click of those buttons it will call the respective @api methods in the main component (newOpportunitySme).

Once the modal is closed, the newOpportunitySmeModalInvoker component will either redirect to the newly created record or refresh the page depending on the button selected.

Figure 6: LWC Components structure

Final Result

The final result is shown as below:

Figure 7: Department values for the two Contacts of Edge Communications

Figure 8: Department picklist on New Opportunity SME modal only showing those two values

Considerations

In our scenario, we do not have any Tab for Opportunity SME records, and it can only be created from the Opportunity Related list. Thus, this solution is feasible, but in case we need the New button on the Tab as well, then the solution needs to be tweaked accordingly.

In case of Standard New button, the Modal opens instantly, but in our case there is a delay as we are basically redirecting to a new URL. During this delay the whole page turns white, which may result in a bad user experience.

Figure 9: The entire page turns white while redirecting

Also, in the background of the custom Modal we can only see the detail page (see: Figure 2), not the related page as it is the case for Standard New button.

For now, I have not found any solution for these two issues. I am sharing the GitHub link to the project here. Please feel free to play around, and let me know if you have any suggestions.