Replace Javascript custom button (To display VF Page) with New Custom Visualforce Action for Lightning

Hi All,

This is my first blog post and I plan to start this journey by writing a post on one common issue faced with Javascript custom button while trying to migrate from Class to Lightning. I know there are many other resources available online, in fact Lightning Component Developer Guide itself is a great resource and my attempt here is just to post my experience!

Here we are going to create a new "Action" Button that will display content from our existing VF Page and this will replace our use case of using JavaScript Custom Button in Classic

VF Page:
<apex:page standardController="Expense__c" extensions="Expenses_VF_1Contlr">
<apex:form >
    <apex:pageBlock >
        <apex:pageblockButtons location="top">
            <apex:commandButton value="Save" action="{!updtRcd}"/>
        <apex:pageMessages />
        <apex:pageBlockSection >
            <apex:inputText label="Expnese Name: " value="{!input1}"/>
            <apex:outputField label="Expense Id: " value="{!Expense__c.Id}"/>
        <apex:pageBlockSection title="Expenses" columns="1" collapsible="false">
            <apex:pageBlockTable value="{!lstExpns}" var="expn" columns="2">
                <apex:column headerValue="Expense Id">
                    <apex:outputLink value="/{!expn.Id}" target="_top">{!expn.Name}</apex:outputLink>
                <apex:column headerValue="Expense Name" value="{!expn.Name}"/>

Controller Class:
public with sharing class Expenses_VF_1Contlr {
    public String input1 {get; set;}
    public String input2 {get; set;}
    public Expense__c expns;
    public List<Expense__c> lstExpns {get; set;}
    public Expenses_VF_1Contlr(ApexPages.StandardController controller) {
        this.expns = (Expense__c) Controller.getRecord();
        lstExpns = [Select Id, Name From Expense__c];
    public void updtRcd() {
        if (String.isNotBlank(input1)) {
            expns.Name = input1;
            update expns;
            ApexPages.Message myMsg = new ApexPages.Message(ApexPages.Severity.confirm, 'Expense record Successfully updated!');
        } else {
            ApexPages.Message myMsg = new ApexPages.Message(ApexPages.Severity.warning, 'Please input expense name');


Custom Action:
From Object edit page, go to Buttons, Links, and Actions and create a new Action with  Action Type as 'Custom Visualforce'. Once you pick this you should be able to view all available Visualforce Pages that have standardController as the Object that you are currently creating Action on (Here in this case my Object Api Name is 'Expense__c'). Once you select your VF page for the Action and input some Label Name and hit Save!

Once above steps are done, edit your Page Layout to add our new Action to the Page Layout

Once this is done, we should be able to see our new 'Test Quick Action VF Page' Action button available on our detail page and when I click on this button, it will render current record Id and display our VF Page Content

Hope you like this post and any kind of feedback or corrections are mostly welcome! 


Popular posts from this blog

Displaying Toast Message from Modal in Lightning Components

Lightning RecordForm - An enhanced Lightning Data Service

Lightning Component to display dynamic sObject data