Create Innovative Solution

Master Salesforce App Building Start Your App Builder Journey

Lightning Replacement to JavaScript Buttons

Prior to the release of Lightning, Javascript buttons got users pretty far with their large variety of use cases. Today, in Lighting, however, Javascript buttons are a thing of the past. Below I am going to walk through several different use cases that, may have been previously handled with Javascript, using one of the Lightning ready ways.

Before we begin, here are the Use Cases and the tools in Lightning we will use to solve them.

Create a Contact from Account

    In this use case, we want a way to quickly create a Contact from the Account record we are on, and have some fields auto-populated.

    Step 1: Setup → Object Manager → Account → Buttons, Links, Actions → Select New Action

Step 2: Fill out the information as best you can. Select the fields you want the user to populate → Click Save

Step 3: Next, we are going to add the predefined fields, Account Name, and Phone

  • Click the New Button
  • Select the Object and the field you want
  • Use the Insert Field button to select the corresponding details
  • For Account Name, you will need to use Account ID


Step 4: Now we need to add it to the Page Layout, do this by going to the Layout you want it on and then select go the Mobile and Lightning Actions

Step 5: Add the button to the Salesforce Mobile and Lightning Experience section

Time to try it out!

Go to an Account and look for the button in the top right.

Click on the Quick Create button. On this page, you will see the fields we included and you will see the details that were auto-populated based on our settings:

Changing Status to Multiple Contacts

In this use case we are going to create a Lightning Action that uses a simple Visualforce Page. The action will be a button that we can put on the Related List so that we can adjust multiple records at once. Our goal is to be able to change the “Can Contact” status of multiple contacts on a single account. (The “Can Contact” field is a custom field set as a checkbox).

Step 1: Setup → Object Manager → Contact → Buttons, Links, Actions → Select Button or Link

Note: Prior to step 1 you would have needed to create a Visualforce Page for the Contact record. You can check out this trailhead for information on how to do that.

Step 2: Setup your Button like so:

Step 3: After saving the button, we need to add it to the layout. Go to the Account object and select the relevant Page Layout. Scroll to the Contacts related list and click the Wrench → Go to the Buttons section and add the Button you created.

Click Save and then let’s try it out!

Time to try it out!

Go to an Account and the look for the Contact related list (you should see the button there). Check the boxes of the Contacts you want to update and then click your new button.

On the next screen you will get the ability to adjust the records that you selected:

After you click save check out one of the Contact records to see if your update went through:

Open an External URL

Another functionality that you can do without Javascript is to open a record, an object, or an external URL. In this example, we will create a button that opens http://google.com/, however, in actuality, you may want to direct your users to an internal document or source. In addition to this example, you can also reference this page for other options.

Step 1: Setup → Object Manager → Contact → Buttons, Links, Actions → Select Button or Link

Step 2: Complete the page the like so:

Save it and then add it to your Contact page layout.

Time to try it out!

On the Contact record page, you should the button in the top right corner, based on the order you have your buttons.

Clicking on this takes me to google.com. If you find that you are missing the button and refreshing isn’t working, double-check that you have added not only the Button to the Page Layout but also the Mobile and Lightning Action version to the Salesforce Mobile and Lightning Experience section.

Those are just some of the different ways you can change your Javascript buttons to Lightning compatible actions. In addition to what was shown above, there are also Lightning Actions, often referred to as Lightning Components.

Lightning Components are building blocks that can be used to create tools that your users can use to do just about any action you can think of. The one challenge that comes with Lightning Components though, is that they do require code and development in order to get them setup. 

Salesforce has many resources, articles, and trailheads if this is something that you want to dive deeper into.

What Certification are you studying for now?

Focus on Force currently provides practice exams and study guides for sixteen certifications