Blog

JS Buttons to Lightning Actions – Migration

Innovalleyworks - JS Buttons to Lightning Actions - Migration

JS Button To Lightning

JS Button To Lightning

JS Button To Lightning

We have been using JavaScript buttons for years in Salesforce Classic to fulfill several business requirements.But, JS buttons are not supported in salesforce lightning. So, we are in need to migrate from Javascript buttons.

How to Solve?

Migrate the JS buttons to lightning quick actions/buttons with custom lightning components or VF pages. We suggested to go with lightning component unless list view buttons.

Lightning Buttons:

Lightning is based on the LockerService Framework and aims at providing the most robust security model possible. Thus, as a result, OnClick JavaScript buttons are not supported. Quick actions can be used to replace buttons that populate a new record with values based on the values in the record where a user clicks the button.

JavaScript code for Button

      {!REQUIRESCRIPT("/soap/ajax/25.0/connection.js")}
      if({!ISBLANK( Case.Account)}){
      alert('Account Name is blank for requested Case');
      } else{
      var win = window.open('http://localhost:9159/contract_enquiry/{! Case.Account }', 'Account Redirect' ,"width=600, height=550, scrollbars=yes");
      setTimeout(function () { win.close();}, 6000);

      }

Lightning Component Converted from JS

JSButtonToLightning.cmp

      <aura:component implements="force:lightningQuickActionWithoutHeader,forceCommunity:availableForAllPageTypes,force:hasRecordId" controller="JSButtontoLightningController" access="global">
          <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
           <div class="slds-card slds-card_boundary">
              <p>Validating...</p>
              <lightning:spinner alternativeText="Loading" size="small" aura:id="spinner"  />  
          </div>
      </aura:component>

Make sure to use force:lightningQuickActionWithoutHeader interface to utilize the component as quick action.

JSButtonToLightningController.js

      ({
         doInit : function(component, event, helper) {
             var action = component.get("c.getValues");
             action.setParams({
                 "caseID" : component.get("v.recordId")
             });
             action.setCallback(this, function(response){
                 var state=response.getState();
                 if(state=="SUCCESS"){
                     var accountName=response.getReturnValue();
                     console.log(accountName);
                     if(accountName == null)
                     {                       
                         var toastEvent = $A.get("e.force:showToast");
                         toastEvent.setParams({
                             "message": "Account Name is blank for requested case","type": "Error" 
                         });
                         toastEvent.fire();
                     }
                     else
                     {
                         var myWindow=window.open ("http://localhost.9159/item_enquiry/"+accountName,
                                                   "mywindow","menubar=1,resizable=1,width=600,height=550");
                         window.setTimeout(
                             $A.getCallback(function() {
                                 myWindow.close(component, helper)
                             }), 6000
                         );
                     }
                 }
                 else if (state === "INCOMPLETE") {
                     var errors = response.getError();
                     if (errors) {
                         if (errors[0] && errors[0].message) {
                             console.log("Error message: " +
                                         errors[0].message);
                             var toastEvent = $A.get("e.force:showToast");
                             toastEvent.setParams({
                                 "type": "error",
                                 "message": errors[0].message
                             });
                             toastEvent.fire();
                         }
                     }
                 } else if (state === "ERROR") {
                     var errors = response.getError();
                     if (errors) {
                         if (errors[0] && errors[0].message) {
                             console.log("Error message: " +
                                         errors[0].message);
                             var toastEvent = $A.get("e.force:showToast");
                             toastEvent.setParams({
                                 "type": "error",
                                 "message": errors[0].message
                             });
                             toastEvent.fire();
                         }
                     } else {
                         console.log("Unknown error");
                     }
                 }
                 $A.get("e.force:closeQuickAction").fire();
             });
             $A.enqueueAction(action);
         }
     })
JSButtontoLightningController.apxc

      public class JSButtontoLighningController {
          //This method is used to get Account Name 
          @AuraEnabled
          public static String getValues(Id caseID)
          {
              LIST caseList= [SELECT Id,Account.Name FROM Case where Id =:caseID ];
              return caseList[0].Account.Name;
          }
      }
     

More to Know

Lightning Actions are recommended to replace JavaScript buttons, wherever possible, however in certain scenarios they cannot be used. One such scenario is of a JavaScript button that performs a mass action on records from a List View. In this case, VisualForce Pages can be used to replace the button.

We are Inno Valley Works , We are a passionate team of developers, best thinkers and consultants who can solve anything and everything.
With our highly engaging team, you can easily bring the vision to all your business ventures come true.
We have team, put your problem, get your solution