Redirect To Custom Page after Record Creation in Lightning

By -

As we know that in Salesforce Lightning there is no direct way to override Save button and redirect to new custom page after creating record from Standard Record creation page.
This blog may help you redirect to new Custom Lightning Page after creating record.
Requirement: 

I want to redirect to a custom page after creating any record. Redirection should not work if record is getting updated.

Solution 1: 

 If Page Layouts do not have lot of fields then create new Lightning Component with Custom Save Button. But cannot use Lightning Data Service because LDS does allow to override Save Button.

Solution 2:

But what if Page Layouts have 100s of fields. Now it's not possible to create a Lightning Component and add all fields on that Lightning Component.
For this situation we have a work-around. Below are the steps need to perform for this requirement:


  • Create a custom Field. Let's call it isCreated. Data Type - Checkbox
  • By default value of this True. Why true? - We will understand this later in the same blog.
  • All profiles should have access and this field will not present on page layout.
  • Now it's time to create a Lightning Component. 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<!--RedirectLightningComponent-->
<aura:component implements="lightning:isUrlAddressable,force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
 <!--ATTRIBUTE-->
    <aura:attribute name="recordId" type="String" default=""/>
    
    <!--EVENT-->
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    
    <!--LIBRARY-->
    <lightning:navigation aura:id="navService"/>
</aura:component>


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
({
 doInit : function(component, event, helper) {
  var pageReference = {
            type: 'standard__component',
            attributes: {
                componentName: 'c__CustomRedirectPage',//Mention your Component where you want to redirect.
            },
            state: {
                "c__accountId": component.get('v.recordId')
            }
        };
        component.set("v.pageReference", pageReference);
        var navService = component.find("navService");
        navService.navigate(pageReference);
 }
})
  • After creating this component place this component on Record Detail Page. Because Body is empty so it will not impact your existing Page layout.
  • After placing this component, set the visibility criteria. If isCreated Checkbox is true then only make it visible. Else it will be invisible. Even if this component is visible User will not able to see anything on this component because body of this component is blank. 
  • Now every time when user will create new record, because isCreated checkbox will be checked so this new component will be visible on layout (not visible to user) and on execution on doInit method it will redirect to custom Lightning Page.
  • Once custom Lightning Page (Lightning Component) will open in doInit method it will call the apex class and update the isCreated checkbox true. So next time when record detail page will open it will not redirect to custom lightning page.
  • Now we marked isCreated checkbox true because if we mark it by default false then for all the existing records also we need to mark this checkbox true so that for existing record it should not redirect to custom lightning page.
  • Once main Lightning page (Component) will open. It will execute doInit method and call the apex class to update isCreated checkbox false. So that next time when user will open the Record detail page it will not redirect to this custom page. 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<!--CustomRedirectPage-->
<aura:component implements="lightning:isUrlAddressable,force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
 <!--ATTRIBUTE-->
    <aura:attribute name="accountId" type="String" default=""/>
    
    <!--EVENT-->
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    
    <!--BODY-->
    Hello This is redirected Page after record Creation.
</aura:component>


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
({
    doInit : function(component, event, helper) {
        var action = component.get("c.isNewRecord");
        action.setParams({ 
            recordId : component.get("v.accountId") 
        });
        action.setCallback(this, function(response) {
            
        });
        $A.enqueueAction(action);
    }
})


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
/*************************
* Class Name - RedirectController
* CreatedBy - FlightToSalesforce
* Date - 7th December 2019
* Description - Handle Redirections after record creation.
**************************/
public class RedirectController{
    @auraEnabled
    public static void isNewRecord(String recordId){
        Account acc = new Account(Id = recordId, isCreated__c = false);
        Database.update(acc);
    }
}
Location: London, UK

Comments

Post a Comment

Followers

Popular posts from this blog

Salesforce LWC: Multi-Record Creation using Lightning Web Component

By -
Image
In this blog we will learn about one very common business use case. Most of the time we get requirement to create a table kind of view from which we can see most of the record's information and also we can manage creating updating and deleting record from same view.  So in this blog we will see how to create such kind of UI using Lightning Web Component. We will take one use case and will implement the same. Use Case:  There will be one input field for Account selection. Once user select any account then user can see all related Contacts. Also user should have capability to add multiple new contacts for selected Account and user can delete existing Contacts. Solutions: To implement above solution first we need one input field where user can select Account Name. For this we can utilize Lightning Data Service. Once User will select Account we can pass the Account Id to Apex Class for getting related Contacts and show it on UI using HTML table. Lets see some code for the UI: 1 2 3
Read more

Salesforce LWC: Basic Drag and Drop Functionality

By -
Image
Recently I attended Salesforce VirtualDearmin session and I found this session very interesting and I thought to share this with everyone of you. For more detail you can refer below link on Drag and Drop Functionality: https://forcementor.github.io/lwc_dnd_20/#/ In this blog we will see about Drag and Drop functionality in Salesforce using Lightning Web Component. To implement drag and drop functionality there are few standard HTML events which we will use to implement. Lets see first what we are going to achieve in this blog with a small video- Now we have clear understanding what we are going to achieve. Let us go to the code. First we will create very basic UI with 3 layout-item. One for each New Task, In Progress Task and Completed Task. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <template> <lightning -layout vertical-align= "stretch" multiple-rows= "true" class= "x-large" > <lightning -layout-item
Read more

Salesforce Lightning Web Component: Dynamic Column Selection in Lightning Datatable

By -
Image
Today in this post we will see how to create Lightning Data Table where we can dynamically select the columns of lightning data table. Below are the properties of this Lightning Data Table: User can select any column for Lightning Data Table User can select only those fields on which user has FLS. User can re-arrange the order of Columns in Data Table. So in UI we will show one Dual List box where user can select any field for table. Once user will select the fields and click on save then selected fields will be visible on UI: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 <template> <lightning -card title= "Dynamic Lead Table" > <lightning -button label= "Modify Columns" slot= "actions" onclick= {showColumnSelectionWindow} > < /lightning-button> <p class= "slds-p-horizontal_small" > <lightning -
Read more