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
Raju Chi 5Raju Chi 5 

cancel button help

How to add custom Cancel button in <Lightning:recordEditform> to navigate vf page when click on cancel button.

I tried myltiple ways but not navigating.

Please provide sameple code.

<lightning:recordEditForm recordId="{!v.RwaIDFromVfPage}" 
                              objectApiName="Risk_Waiver_Agreement__c" 
                              aura:id="recordHandler"
                               onload="{!c.handleLoad}"
                              onsubmit="{!c.handleSubmit}"
                              onsuccess="{!c.handleSuccess}"
                              
                              >
         
        <lightning:messages />
        <div class="slds-wrap slds-text-align_center">
            <lightning:button disabled="{!v.disabled}"  type="submit" name="save" label="Save" />
             <lightning:button   type="button" name="Approve" label="Approve" />
             <lightning:button   type="button" name="Reassign" label="Reassign" />            
            <lightning:button variant="neutral" label="Cancel" title="Cancel" type="text" onclick="{!c.handleCancel}" />
            
handleCancel : function (component, event, helper) {
    var urlEvent = $A.get("e.force:navigateToURL");
    urlEvent.setParams({
      "url": "/lightning/page/home"
    });
    urlEvent.fire();
},

And called above component from Vf page and to show the site.

 
ANUTEJANUTEJ (Salesforce Developers) 
Hi Raju,

>> https://salesforce.stackexchange.com/questions/228556/lightningrecordform-cancel-button-unresponsive

As mentioned in the above link, can you try implementing with the use of oncancel attribute?
 
try to add oncancel event in your component.

    <lightning:recordForm
                      objectApiName="Custom_Object__c" 
                      recordTypeId="{!v.Applicant.recordTypeId}"
                      layoutType="Compact"
                      columns="2"
                      mode = "edit"
                      onload="{!c.handleLoad}"
                      oncancel="{!c.onCancel}"
                      />
In your component controller

onCancel: function(component, event, helper) {

// Handle the cancel here.

}

Let me know if it helps you and close your query by marking it as solved so that it can help others in the future.  

Thanks.
Suraj Tripathi 47Suraj Tripathi 47
Hi Raju,

You can check that code you only have to change some code like change button to cancel and their event as well.
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes" access="global" >
 <div>
    HI I AM COMPONENT AND I AM GETTING CALLED FROM VF.
    </div>
    <aura:attribute name="VfPageMethod" type="object"/>  <!--Attribute to take Vf page method-->
    <lightning:button label="Click me to pass message to VF page" onclick="{!c.doAction}"/>
</aura:component>


COMPONENT JS CONTROLLER
({
 doAction : function(component, event, helper) {
  var msgForVf="Hi This message was pass from component to me and I am VF page displaying this message";
        var vfMethod=component.get("v.VfPageMethod");
        // Calling Vf page method
        vfMethod(msgForVf,function()
                           {
     
                           });
 }
})



VISUALFORCE PAGE (Name: VfPageToCallLightningComp)
<apex:page >
    <apex:includeLightning />
    <div  id="LightningCompContainer" />
   
    <script>
        $Lightning.use("c:LightningCompForVFAPP", function() {
            $Lightning.createComponent("c:LightningCompForVF", {
            VfPageMethod:getMessageFromComp,
            },
            "LightningCompContainer",
            function(cmp) {
             
            });
        });
    function getMessageFromComp(compMsg)
    {
        alert(compMsg);
    }
    </script>
</apex:page>


LIGHTNING APP (Name: LightningCompForVFAPP)
<aura:application access="GLOBAL" extends="ltng:outApp">

    <aura:dependency resource="c:LightningCompForVF"/>

</aura:application>

Refrence Link: https://www.sfdc-lightning.com/2019/07/how-to-call-vf-page-javascript-method.html

Thanks And Regards ,
Suraj Tripathi.