Design Patterns in Salesforce (Ep. 1) – What Are Design Patterns?

When Should You Learn About Design Patterns?

When you first start learning about software development, I’d recommend against beginning with design patterns. Why? If you start with design patterns, you might be misled and start thinking that all of your code must conform to a design pattern, which isn’t the case and makes the process of learning how to code even more complicated. You’ll end up confused and overwhelmed, and your code could end up overengineered and wonky.

Instead, I encourage you to start with the basic building blocks of code, and design a few applications without using any design patterns, and that can serve as a foundation for more advanced functions, such as design patterns, later on. After you’ve mastered the basics of coding, and experienced a handful of difficult development situations, you’ll be ready to go back and learn about design patterns, and use them to solve tricky and difficult problems or situations in the code you develop.

Also, I recommend you learn more about design principles before getting into design patterns since those principles guide the design patterns. Design patterns will make much more sense once you’ve got a handle on the underlying design principles. To learn more about design principles, you can also check out the book Clean Code by Robert Martin, a fantastic resource for any budding code writer.

What Are Design Patterns?

Once you’re comfortable with the basics of coding and design principles, it’s time for the third step: understanding design patterns! True to their name, design patterns are coding patterns that can help you fix tricky situations you’ll find yourself in while coding, but that’s just the start. Design patterns can also make your code more flexible and easier to read, and be more performant when you’re done writing it.

Suppose you wrote something, and it always takes 2-3 minutes to load. You might be able to use the Singleton pattern to only load something that is very time-consuming once, which will likely cut down on the page-load time. And that’s just one example. Design patterns use their patterns to fix practically any problem or mess you’ve got in your software, and certain design patterns can be prescribed for certain coding issues.

You can think of them as medicine for your code, such as a doctor prescribing either Advil, Tylenol, or Ibuprofin for your headache. Any three of those would work 90% of the time for your headache, and in the other 10%, you may need to try something else. It’s the same with design patterns; none of them is a guaranteed miracle fix for a coding issue, but they generally work, and a skilled developer can prescribe one for a development problem.

Which Design Patterns Should You Learn?

Make no bones about it: there are a lot of design patterns out there! I couldn’t possibly list them all. For now, though, we can narrow the field down to 23 particular design patterns that are best learned first, and they are widely used, too (and they’re well-regarded, too). They are described as the “gang of four” design patterns since they were designed by a quartet of people calling themselves the gang of four. They even wrote a book together on this topic titled Design Patterns: Elements of Reusable Object-Oriented Software. You can check it out to get plenty of in-depth information.

These 23 design patterns are sorted into three categories: behavioral design patterns, creational design patterns, and structural design patterns. These include design patterns that you’ve probably heard of before, such as the Singleton pattern or the Observer pattern. Remarkably, these design patterns are almost 30 years old, but are still in use today, proving just how well-designed and universal in usage they are.

Later in my series, we will review all 23 of those design patterns and how to implement them in your own code. We will also go over some basic areas of object-oriented programming, just in case you’re not familiar with that topic, along with inheritance, encapsulation, and polymorphism.

That’s all for now. I hope that in the future, you’ll master all 23 design patterns and put them to work in your own development tasks and see for yourself just how handy they can really be! Until next time!

Get Coding With The Force Merch!!

We now have a tee spring store setup so you can buy cool Coding With The Force merchandise! Please check it out! Every purchase goes to supporting the blog and YouTube channel.

Get Coding With The Force Merch Here!


Check Out More Coding With The Force Stuff!

If you liked this post make sure to follow us on all our social media outlets to stay as up to date as possible with everything!

Youtube
Patreon
Github
Facebook
Twitter
Instagram


Salesforce Development Books I Recommend

Advanced Apex Programming
Salesforce Lightning Platform Enterprise Architecture
Mastering Salesforce DevOps
Apex Design Patterns Book

Good Non-SF Specific Development Books:

Clean Code
Clean Architecture
Design Patterns: Elements of Reusable Object-Oriented Software Book

Salesforce Apex Master Class (Ep. 4) – What is an IDE?

What is an IDE?

Let’s review what an IDE is and why it’s so incredibly helpful to you as a developer in Salesforce and beyond. As a developer, you’re encouraged to use an IDE, since it can make your work so much easier.

An IDE is an integrated development environment, where you can combine a wide variety of development tools to do your work much faster and more efficiently every day. Now, let’s check out an example (below) of an IDE at work. This particular IDE is IntelliJ, and I’m using a plug-in that allows me to do Salesforce development called the Illuminated Cloud 2 plug-in.

Demoing the Benefits of Using an IDE

An IDE like IntelliJ here will make your life, and the lives of your developer teammates, so much easier. In this interface, I have my code editor so I can write Apex code or a lightning web component, among other things. I can also analyze debug logs here in this IDE, or even run anonymous Apex. But why should you use an IDE and not just a developer console? An IDE like IntelliJ has many features that developer consoles don’t.

The first major benefit is if you want to know everywhere that a class is used in your codebase, you can simply copy the name of the class, then press CTRL-shift-F, and then the IDE searches for the class in all of the code in your Salesforce environment. There are also a litany of other hotkeys that will make traversal through your code base considerably easier. Shortcuts like that aren’t available in the developer console.

Autocomplete is another major advantage in using an IDE like IntelliJ with Illuminated Cloud 2. You can type “system.” and the IDE knows methods are available for that system class in the Apex language. So, you it will present to you a list of autocompleted methods that you can select from and have your code auto-completed for you. By contrast, the Salesforce developer console’s auto-complete features struggle and sometimes just outright do not work. This makes it easy for programmers, like you, to know all your options without having to look them up elsewhere in documentation.

There’s even more an IDE can do for you. For example, you can enable version control, allowing you to create local backups of your code, so you can revert back if something goes wrong. You sure can’t do that in a developer console! Meanwhile, you can find more useful stuff in the settings menu too, such as setting all the defaults for code style for a specified language, such as Apex or Javascript. All that will be automatically formatted for you. You can export all this to other developers on your team too, and make everyone’s code consistent. That’s an example of the convenient, time-saving efficiency of an IDE.

Another option is to run your Apex tests in the IDE, and it will display coverage next to the classes that it tests. Yes, you can do that in developer consoles too, but an IDE like IntelliJ will conveniently show you which classes the test covered, and even break down what happened in those tests, such as line coverage. Pretty cool, huh? And this is just the start; an IDE can do a whole lot more!

To recap, an IDE like IntelliJ will make your life as a programmer faster, more convenient, more direct, more consistent, and more intuitive than ever before, acting like a souped-up developer console with more options so you can get more work done. Give it a try, and see what you can accomplish with the power of an IDE! Until next time!


Get Coding With The Force Merch!!

We now have a tee spring store setup so you can buy cool Coding With The Force merchandise! Please check it out! Every purchase goes to supporting the blog and YouTube channel.

Get Coding With The Force Merch Here!


Check Out More Coding With The Force Stuff!

If you liked this post make sure to follow us on all our social media outlets to stay as up to date as possible with everything!

Youtube
Patreon
Github
Facebook
Twitter
Instagram


Salesforce Development Books I Recommend

Advanced Apex Programming
Salesforce Lightning Platform Enterprise Architecture
Mastering Salesforce DevOps
Apex Design Patterns Book

Good Non-SF Specific Development Books:

Clean Code
Clean Architecture
Design Patterns: Elements of Reusable Object-Oriented Software Book

Salesforce Apex Master Class (Ep. 3) – What is the Apex Programming Langage?

The Salesforce Definition of What the Apex Language is

Let’s go over what Apex actually is, and when you, as a developer or administrator, should use it when creating custom functionality in your Salesforce orgs.

Apex is a proprietary development language created specifically for Salesforce’s own platform. Apex looks and feels similar to Java (not Javascript) or C#. The Apex language allows you to build custom functionality that Salesforce’s point-and-click tools can’t support or do on their own. This means that with Apex, you can expand Salesforce’s functionality and build absolutely anything that you or your users can dream up for your Salesforce instance. The sky is the limit with the power of Apex! Go ahead and give it a try, and see what you can do with it.

A Simpler Explanation of What the Apex Language Is

Apex is a strongly typed object-oriented programming language, but what does that really mean? Let’s look at an example.

public class OpportunityCalculator {
    
    Integer numberValue = 1;
    String oppName = 'Cool Opp';
    
    
    public Integer addOpportunityValues(Integer oppValueOne, Integer oppValueTwo){
        Integer oppValuesCombined = oppValueOne + oppValueTwo;
        return oppValuesCombined;
    }
    
    public Integer substractOpportunityValues(Integer oppValueOne, Integer oppValueTwo){
        Integer oppValuesCombined = oppValueOne - oppValueTwo;
        return oppValuesCombined;
    }

This example is a representation of a calculator for opportunities in our org. Like a real, physical calculator, this code calculator could potentially have the ability to add, subtract, multiply, and divide value. My opportunity calculator class above uses methods to add and subtract values, all while creating a representation of an object and the many ways in which that object can interface with its users (such as pressing a calculator’s buttons to do some math). There’s much more I could say about object-oriented programming, but that can should probably wait for a future blog post. It’s too much to unpack here, but eventually, we’ll check it out together!

There are four key things you need to know about object-oriented programming: encapsulation, abstraction, inheritance, and polymorphism. If you’d like to know more about those four in greater detail, check out my video over OOP in Apex here!


What is a Strongly Typed OOP Language?

public class OpportunityCalculator {

Integer numberValue = 1;
String oppName = 'Cool Opp';


public Integer addOpportunityValues(Integer oppValueOne, Integer oppValueTwo){
Integer oppValuesCombined = oppValueOne + oppValueTwo;
return oppValuesCombined;
}

public Integer substractOpportunityValues(Integer oppValueOne, Integer oppValueTwo){
Integer oppValuesCombined = oppValueOne - oppValueTwo;
return oppValuesCombined;
}



At a very high-level, object-oriented programming (OOP) is the representation of an object and its functionality in code. Now, what is a strongly typed language? First, consider variables, or a way to represent a value. When I create a variable called numberValue and I set it equal to 1, I’m declaring that variable as an integer, or a way to declare a number in Apex (among many other development languages). I’m declaring it as type Integer, but note that if I just declared that 1 as a number value without “Integer,” Apex wouldn’t accept it, nor would Apex allow me to save it like that. In short, Apex needs me to specify the type of value I’m trying to store: Integer. I must also specify what kind of value I want to return from those methods if I want to return something.

So, when I declare my method, I’m saying that when my method is done executing, it will return an integer. In programming languages that aren’t strongly typed, you don’t have to declare variables as a specific type (like Integer). Javascript is an example, where you can simply say that the variable you’re declaring equals 1 or Cool or whatever you can think up, and you don’t define a type for those variable.

In short, strongly typed OOP language means you’ve got to tell the code what it’s supposed to return and what your variable types are.


When Should You Actually Choose to Use Apex?

When exactly should you use the Apex development language? It’s a bit subjective, but also not. Often, you’ll find that out-of-the-box, point-and-click Salesforce stuff doesn’t work well with what your users actually need so they can do their job, and that’s when you use Apex. As a Salesforce user or admin, you must know all the administrative capabilities and know how to create new objects with their own fields, among other things. This is so you know when it’s proper to use administrative tools, or when you should use custom development instead.

Usually, you’ll need to use Apex development in one of two different scenarios. The first is, as mentioned earlier, when your out-of-the-box, point-and-click tools aren’t enough to build what you’re trying to make for your users. The second is when your org scales up to a huge size with lots of users (such as the 500-user mark), where your point-and-click tools can’t handle the sheer volume of daily transactions your users are making. When you reach that point, it’s time for Apex code to take over and work its magic!


Get Coding With The Force Merch!!

We now have a tee spring store setup so you can buy cool Coding With The Force merchandise! Please check it out! Every purchase goes to supporting the blog and YouTube channel.

Get Coding With The Force Merch Here!


Check Out More Coding With The Force Stuff!

If you liked this post make sure to follow us on all our social media outlets to stay as up to date as possible with everything!

Youtube
Patreon
Github
Facebook
Twitter
Instagram


Salesforce Development Books I Recommend

Advanced Apex Programming
Salesforce Lightning Platform Enterprise Architecture
Mastering Salesforce DevOps
Apex Design Patterns Book

Good Non-SF Specific Development Books:

Clean Code
Clean Architecture
Design Patterns: Elements of Reusable Object-Oriented Software Book

Salesforce Apex Master Class (Ep. 2): How to Set Up a Free Salesforce Developer Org

Welcome to the second episode of my Salesforce Apex Master Class! Today, I’ll show you how to set up your own Salesforce developer org!

How to Set Up a Free Dev Org!

It’s easy to set up your own Salesforce developer org, even if it’s your first time using the Salesforce platform. First, you’ll visit developer.salesforce.com/signup, then fill in your information and dive right in. It’s quick and easy, but take note that with Salesforce, you’re living in “the cloud” (aka sharing space on a server with other businesses), and there are limits imposed on your orgs because of that! Limits are imposed on things like, the amount of data you can store in your org or the number of queries you can do in your org in a single execution context.

In your developer org, those numbers tend to be pretty low compared to what you’d experience when using regular organizations. I’ve found some ways to bypass those limits, such as with “big objects”, but I probably should not suggest them as they certainly aren’t “best practice” and I’m not sure Salesforce would condone them!

One note when signing up for Salesforce: if you’ve ever created a Salesforce org or if you’ve been placed in a Salesforce org before, and you used your email address as a username in those orgs anywhere at all, you can’t reuse that email address (usernames must be unique across ALL instances of Salesforce in existence, not just your own org). Instead, you’ll make up something new, or a least revise your email address when using it as a username. Such as adding a few letters or numbers at the end.

Once all that’s done, you’ll receive an email that will inform you that your Salesforce org has been created for you! It’ll take a few minutes to get that email, though, so be patient. Next up, you’ll verify your new account via that email you just received. You’ll click “Verify my account” and set up your password. Once all that’s done, you’ll be looking at your very own Salesforce org, and you’re ready for work! It’s quick, easy, and doesn’t cost you a dime.

That’s all for now. Thanks for reading, and happy coding!


Get Coding With The Force Merch!!

We now have a tee spring store setup so you can buy cool Coding With The Force merchandise! Please check it out! Every purchase goes to supporting the blog and YouTube channel.

Get Coding With The Force Merch Here!


Check Out More Coding With The Force Stuff!

If you liked this post make sure to follow us on all our social media outlets to stay as up to date as possible with everything!

Youtube
Patreon
Github
Facebook
Twitter
Instagram


Salesforce Development Books I Recommend

Advanced Apex Programming
Salesforce Lightning Platform Enterprise Architecture
Mastering Salesforce DevOps
Apex Design Patterns Book

Good Non-SF Specific Development Books:

Clean Code
Clean Architecture
Design Patterns: Elements of Reusable Object-Oriented Software Book

Salesforce Apex Master Class (Ep.1): What to Expect to Do as a Salesforce Developer

What is Salesforce?

You may have heard of Salesforce before, and that developers on this platform get paid good money, but what exactly is Salesforce, anyway? No matter how much you earn, your work will suffer unless you actually enjoy what you’re doing. So before you dive into this career, let’s discover what Salesforce is and what you can expect to do as a developer on the platform!

Salesforce is a customer relationship management (CRM) platform, a vital tool for marketing sales, commerce, service, and IT teams to work in unison and be of service to their customers anywhere and everywhere. As of this writing, Salesforce stands as the #1 CRM platform available, overtaking competing platforms such as Siebel, Oracle, and SAP, among others. For context, CRM’s market share in 2015 was 19.7%, and as of today, it rose only slightly to 19.8%, with minor fluctuations. Meaning, CRM and Salesforce are probably going to remain steady for the foreseeable future, though there’s no guarantee of that. If you’re entering the Salesforce Ecosystem just because it’s the #1 CRM platform, don’t bank on that, even though it hasn’t for awhile, it could shift at any time. At one point (not long ago) Siebel was the #1 CRM platform, now you rarely hear of them.

That said, whether or not Salesforce stays at #1, it’s an outstanding platform that can do you a lot of good, and if you know your stuff, it could pay off handsomely. Now let’s go into more detail.


What You Will Likely Build as an SF Dev

As mentioned above, you’ll most likely use Salesforce for work in IT, marketing sales, commerce, services (such as help desk services), and a few others. IT, marketing sales, commerce, and services are probably going to be the central core of your work, with a few exceptions, so those are a good starting point for your use of Salesforce. Personally, I worked on 50 projects for 20 different clients using Salesforce, nearly all of them involving IT, marketing sales, commerce, and services.

So, what can you expect to build? You could build configuration point-and-click administration stuff and custom development in those areas described above, for example. I built extremely customized sales cloud instances and very large custom marketing applications that can sit on top of Salesforce or to be within a particular organization’s instance, just to name two examples.

Your overall goal: to take a client’s older or underperforming platform and upgrade it with Salesforce. This work can be done pretty quickly, too, and Salesforce’s brand prides itself on that fact. Once your work is done, any team working in IT, marketing sales, commerce, and services can coordinate their work and do it faster, more easily, and with better analytics with their daily work.

With that in mind, you might expect to move into Salesforce pretty quickly for two reasons: one, because of Salesforce’s reputation for speed, and two, because Salesforce offers a huge shell for making it easy for devs to get their work done faster than ever. Along the way, you’ll also want to understand Salesforce’s administrative side, through which you will build database tables, and set up anything else you’d have to develop on your own. When you use Salesforce, a lot of the work is already done for you.

In short, it’s incredibly important for you to get a handle on all this admin work with Salesforce. Some might disagree, which is fine, but having worked as a Java and PHP developer myself, Salesforce’s admin features can cut out a lot of clutter for developer work so I can focus on what matters most: writing code. I greatly enjoy Salesforce’s streamlined feel for my development work, and it was an easy and enjoyable transition to this platform while cutting out time-consuming remedial work. Perhaps the same will be true for you, too!


De-Mystifying Some SF Dev Misconceptions

You might have heard some misconceptions online about Salesforce, such as people saying that you don’t have to write much code with Salesforce, or that outdated languages are being used with it, or that there are few customization options with this platform, among other issues. Those were somewhat true in the past (and still a bit true today), but Salesforce is stronger and more effective than these rumors would suggest. Let’s review.

Salesforce didn’t have much IDE support early on (I have a separate video on the topic), but fortunately, IDE support is everywhere today. Meanwhile, maybe you’ve heard that you can’t do source-driven development in Salesforce, which would be a serious issue. Good news: you absolutely can use source-driven development with Salesforce, such as with scratch orgs, if a developer wants to.

As for outdated programming languages: yes, you’ll use the slightly dated language Apex, which can be compared to what Java was like 6-7 years ago. But don’t let that discourage you! No matter its age, Apex provides nearly everything you need for work in Salesforce, just lacking a few of the most advanced capabilities of coding languages. If that’s ever a concern for you, try using open source repos to fill in the gaps.

Another rumor says that with Salesforce, you can’t work with modern front-end technologies. Up until two years ago, that was true, but with today’s lightning web components, you can pretty much perform whatever modern UI front-end development you need.

The only caveat to working with Lightning Web Component’s within Salesforce is lightning locker service, among a few other issues. Locker Service, which is due for an update soon which might render this sentence incorrect, makes it challenging to use outside JavaScript Libraries. Many JS Libraries that you could easily import into a Node JS project (or equivalent) would require you to re-write some of its code (or a lot of its code) just to get it to function inside of an LWC due to Locker Service restrictions.

Typescript also won’t work out very well in Salesforce, for example, being hampered by a variety of problems. While it can be done there is just so much out-of-the-box Salesforce stuff that it won’t cooperate with that it renders it fairly useless.

As a developer, you’ll have endless options with Salesforce, and I myself have made hundreds of custom applications with Salesforce. You’ll simply have to keep those limitations in mind and plan accordingly. Once in a while, for example, you might build an application elsewhere, such as with AWS, then pipe it into Salesforce. Anything you can’t make in Salesforce, you can just slot right in.

On a final note, some folks might think that anyone who’s using Salesforce is mostly an admin, just doing point-and-click stuff instead of coding. This is simply not true, as a developer on the platform you’ll be expected to do development every single day. I’ve been a developer on the Salesforce platform for the past seven years, I’ve done development work every single day. Coding comes first and foremost with Salesforce as a developer on the platform, I can assure you, and it’s simply a pleasure for any developer like me to use.

Salesforce, in short, isn’t for everyone, but for the right developers, it’s a dream come true. Give it a try, and see what you can create! Until next time!


Get Coding With The Force Merch!!

We now have a tee spring store setup so you can buy cool Coding With The Force merchandise! Please check it out! Every purchase goes to supporting the blog and YouTube channel.

Get Coding With The Force Merch Here!


Check Out More Coding With The Force Stuff!

If you liked this post make sure to follow us on all our social media outlets to stay as up to date as possible with everything!

Youtube
Patreon
Github
Facebook
Twitter
Instagram


Salesforce Development Books I Recommend

Advanced Apex Programming
Salesforce Lightning Platform Enterprise Architecture
Mastering Salesforce DevOps
Apex Design Patterns Book

Good Non-SF Specific Development Books:

Clean Code
Clean Architecture
Design Patterns: Elements of Reusable Object-Oriented Software Book

Salesforce Development Tutorial (LWC): How to use Lightning Web Component’s in List View Buttons

Why Bother Using an LWC in a List View Button?

If you need to create some custom functionality that is accessible to your users via a list view (or potentially a related list), then a list view button is the way to go. The reason that you should prefer to utilize an LWC (despite the fact there is no obvious way to use an LWC for a list view button) is because LWC’s load faster than any other component type and, of the available list view button options, they are the most consistent with Salesforce’s Lightning Experience look and feel.

Unfortunately, while it’s super simple to setup and LWC for a list view button, Salesforce has no documentation on how to do so and virtually no answers exist for how to do this anywhere online, but NO MORE!! Today I’ll show you three different methods of creating an LWC List View button! Two methods do not allow you to send the ids of selected records in a list view and one does. I’ll give you the pros and cons of each and how to setup each one below.

One additional note, all of the below solutions will allow the user to traverse from the list view button back to the exact list view they were previously on without the help of visualforce at all! Something else that was undocumented and challenging to figure out.

DISCLAIMER: As of this writing, LWC quick actions are not usable on list views, this could change in the future however, so make sure to investigate that.


Setting up the Lightning Web Component

In any of the three scenarios we are going to use the same Lightning Web Component to demo the functionality, although in the third scenario (a flow based scenario) we will be making slight modifications to allow for the ids of records to get passed through to the component. Let’s take a look at the core of the component below (or on GitHub here).

HTML File:

<template>
	<lightning-button label="Return to List View" onclick={close}></lightning-button>
</template>

JS File:

import {LightningElement} from 'lwc';

export default class ListViewButton extends LightningElement {

	close(){
		setTimeout(
			function() {
				window.history.back();
			},
			1000
		);
	}
}

XML File:

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>51.0</apiVersion>
    <description>List View Button</description>
    <isExposed>true</isExposed>
    <masterLabel>List View Button</masterLabel>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__Tab</target>
        <target>lightning__FlowScreen</target>
    </targets>
</LightningComponentBundle>

Alright alright alright, so we have all of the files outlined above, let’s make talk about the close function in the JavaScript file first. I did an ENORMOUS amount of experimentation trying to get a list view button that spawns an LWC to allow me to traverse back to the exact list view that I had previously come from and this was the only way I could consistently get that to happen. I tried navigationmixin and it had trouble remembering where to go no matter what I did, I tried return urls, I tried a ton of junk, but that close function above does the trick every single time (at least in a browser, never tried on a mobile app). It always goes back to the exact list view I was on when I clicked the button.

So what does that function actually do? It basically looks to your browser windows history and moves back one page in time, the set timeout function allows it to take up to one second to make that happen. I would suggest using the set timeout as I had issues using this function without it, occasionally it wouldn’t have enough time to operate and failed. This however is used by thousands of users in my org now with no complaints.

The second thing I wanna go over is the XML File’s targets. For simplicity I just put every target we are going to need when we go through each of the three LWC list view button methods, that being said, you only need to declare the target for the method you choose to use. If you use the App Builder method, use the AppPage target, if you use the Tab method, use the Tab target, etc.


LWC List View Button Method 1: The Lightning App Builder Page Method

WHETHER YOU USE THIS METHOD OR NOT, READ THROUGH IT!! THE VAST MAJORITY OF THE STEPS ARE IDENTICAL FOR ALL OTHER VERSIONS SO THEY WILL ONLY BE SHOWN HERE AND REFERENCED IN THE OTHER SECTIONS!! Admittedly, this is my least favorite method, however it does work and some people may prefer it, so I’m gonna show you how to do it real quick. To use this method we need to create a lightning app builder app page. If you don’t know what that is, check out this trailhead. Once you’ve created the app builder page, you need to drag and drop the LWC (shown in the section above) onto the page. You can find the LWC in the section show below:

After you’ve placed your LWC on the page, save and activate your App Builder page. Then click anywhere in your lightning app page canvas that isn’t specifically your LWC to bring up the page information on the right side of the screen. Grab the “Developer Name” value, you need it for the next step.

Now that an app builder page houses our component, and we have the dev name for the app page, we need to setup a list view button to pop open our page for us. Kewlio Julio, let’s get to it.

Go to the object manager and find the object you are creating a list view button for. On the object page, click the “buttons links and actions” link, then click the “New Button or Link” on the top right of that page.

On the new button or link page, you are gonna fill out the follow:
1) Fill out a Label (this can be whatever you want)
2) Select the “List Button” display type
3) Select the “Display in existing window without sidebar or header” Behavior.
4) Select the “URL” Content Source
5) In the free text area put the following URL: /lightning/n/App_Page_Developer_Name
6) Save your button

To place your new LWC list view button on your objects list view, click on the “Search Layouts for Salesforce Classic” tab on your object and then click the drop down arrow next to the “List View” layout and select the “Edit” value in the drop down.

On the edit page for the list view layout, scroll down to the “Custom Buttons” section and select your new list view button.

Now, if you traverse to your object in the app launcher, you should be able to see your button on any list view and click it. This should result in your LWC popping up for you as shown below!

The Pros and Cons of this approach are the following:
Pros:
1) It’s the second fastest of the three options to load
Cons:
1) You cannot get rid of the app builder title area without janky css hacks
2) The tab method (outlined below) loads considerably faster.
3) This can load in an iframe depending on your settings.
4) Can’t pass in list view selection ids


LWC List View Button Method 2: The Lightning Component Tab Method

This is my absolute favorite method, it loads ultra fast and is the easiest to setup. If you don’t need list view ids passed into your LWC, this is the way to go in my opinion.

This method works much like the first method, the setup is virtually identical aside from the fact that you setup a Lightning Component Tab to use as opposed to a Lightning App Builder App Page. Even the List View button setup is the same, the only difference is that you use the lightning tabs developer name at the end of the URL. So to save my hands some typing I’m only gonna show you the tab setup, please refer to the rest of the steps in the App Builder setup instruction above.

To setup a tab to use instead of an app builder page is simple. In setup go to Tabs. Then on the Tabs screen, scroll down to the “Lightning Component Tabs” and select the “New” button.

On the new lightning component tab screen select your lightning component (the one shown above or the one you’ve built), enter a tab label, a tab name and select a tab style and you’re done. MAKE SURE YOUR LWC HAS A TARGET IN THE XML FOR TABS (this is shown in the code up above), otherwise it won’t be selectable.

Once you’ve created your tab, just follow the exact steps outlined in the app builder app page scenario to for the lightning button setup and you’re done!

Pros and Cons of this approach:
Pros:
1) Fastest load time
2) Easiest setup
3) Never loads in an iFrame
Cons:
1) Cannot load in list view ids from selected list view values


LWC List View Button Method 3: The Flow Screen Method

I will urge you to please not use this method unless you absolutely need the selected list view ids passed into your LWC. I say this because the load times are significantly slower and now you have to involve two technologies (flow and lwc) instead of one, making it more complex to deal with, albeit not by a ton.

The steps for setting up the actual list view button for this method are virtually identical to others as well, aside from the URL structure for the list view button, which we will cover, but refer to the first method for setting up the majority of the actual button.

Alrightyyyyy then, here we go. This final method utilizes a flow to allow us to capture the incoming selected list view ids and send them to our LWC to manipulate.

The first thing we need to do is update our LWC a bit to allow it to receive these incoming list view ids, so let’s do thattttttt. I’ll post the code below and then discuss it.

HTML:

<template>
	<p>These are the list view ids passed: {listViewIds}</p>
	<lightning-button label="Return to List View" onclick={close}></lightning-button>
</template>

JS:

import {LightningElement, api} from 'lwc';

export default class ListViewButton extends LightningElement {
	@api listViewIds;

	close(){
		setTimeout(
			function() {
				window.history.back();
			},
			1000
		);
	}
}

XML:

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>51.0</apiVersion>
    <description>List View Button</description>
    <isExposed>true</isExposed>
    <masterLabel>List View Button</masterLabel>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__Tab</target>
        <target>lightning__FlowScreen</target>
        <target>lightning__RecordAction</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__FlowScreen">
            <property name="listViewIds" type="String[]"></property>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

First let’s talk about the JavaScript file. We added two things to that file, the first is that we are now importing api at the top so that we can use the api decorator. The second is that we have created the listViewIds variable with the @api decorator on it. This allows the variable to be written to by the flow.

Next let’s talk about the metadata file, in the metadata file we have added a targetConfig. This target config allows us in the flow builder to declaratively assign the incoming list view ids to the LWC’s listViewIds variable.

Last, in the HTML file we have just created a paragraph tag to view the list view ids when they are brought over.

Now that we’ve updated the component, we need to create the flow. In setup, go to Flows and then select “New Flow” at the top to create a new flow.

You will immediately be presented with options for the type of flow you’d like to create, select “Screen Flow” and press the “Next” button., then select the “Freeform” option. You will then land on the flow builder canvas.

The first thing we need to do is create a variable. In the “Toolbox” area on the left side of the screen click the “Manager” tab and then click the “New Resource” button.

After clicking the “New Resource” button a modal will pop-up. Do the following:
1) For Resource Type select “Variable”
2) Fill out the API Name field with the value “ids” (do not include the surrounding quotes). IT MUST BE THIS VALUE TO WORK!
3) For “Data Type” select “Text”
4) Check the, “Allow Multiple Values (Collection)” checkbox
5) Check the, “Available for input” checkbox
6) Click the “Done” button


After setting up this variable you’ll need to grab a screen flow from the “Elements” tab in the toolbox and drag it onto the flow canvas.

On the Screen element modal that pops up you’ll want to do the following:
1) Enter a label and API Name
2) Uncheck the “Show Header” checkbox
3) Uncheck the “Show Footer” checkbox
4) On the left side of the modal in the “Components” area select your LWC and drop it on the page
5) Fill out the API Name for your component
6) place the “ids” variable we created above in the “listViewIds” box for the LWC
7) Click the “Done” button

Then connect your start node to your new screen node, grab the API name of your flow from the settings area of the flow canvas, activate your flow and you’re done!

The one and ONLY step that changes for the list view button setup for the flow variety is the url structure. The URL structure should be changed to the following: /flow/Flow_Developer_Name

Aside from the above, all of the other steps are the same, so please reference the first LWC Button setup method above for more info.

Pros and Cons of this method:
Pros:
1) This is the only method that can receive the ids of values selected in a list view

Cons:
1) This is by far the slowest loading method
2) It forces you to use a flow to embed your LWC
3) It’s the most complex setup
4) It hosts itself in an iFrame

Alright, that’s all folks, this blog post was long and my hands are tired. Hasta Luego!!!!!


Get Coding With The Force Merch!!

We now have a redbubble store setup so you can buy cool Coding With The Force merchandise! Please check it out! Every purchase goes to supporting the blog and YouTube channel.

Get Shirts Here!
Get Cups, Artwork, Coffee Cups, Bags, Masks and more here!


Check Out More Coding With The Force Stuff!

If you liked this post make sure to follow us on all our social media outlets to stay as up to date as possible with everything!

Youtube
Patreon
Github
Facebook
Twitter
Instagram


Salesforce Development Books I Recommend

Advanced Apex Programming
Salesforce Lightning Platform Enterprise Architecture
Mastering Salesforce DevOps

Good Non-SF Specific Development Books:

Clean Code
Clean Architecture

Salesforce Development Tutorial (LWC): How to use Data Attributes to easily pass data from your component HTML template to your JavaScript Controller

What are Data Attributes and Why Should I Use Them?

Data attributes are a truly magical thing that will, at some point, get you out of some prickly situations as a front end developer. They are essentially a way of storing data on an html element so that when a JS event gets fired your JS controller can easily get access to the data on the HTML element that fired the event.

This is especially useful in scenarios where you want to use for:each templates to generate tables, tabs or whatever else on the screen.


How to use Data Attributes (Example Code and Explanation)

Using data attributes is easy peasy lemonnnnnnnnnnn squezzyyyyyyyy… I’m sorry, it just felt right. Seriously though, it’s easy. Let’s first take a look at how we setup our HTML Template to use data attributes on a button element.

<template>
<lightning-button onclick={getDataAttributes} label="Click Me Bruh" data-donkey="donkeysAreKewl" data-turtle="NinjaTurtles"></lightning-button>
</template>

You see those weird attributes on my element? The “data-donkey” and “data-turtle” attributes? Those are data attributes and as you can see they can be named anything! However they must be in this format: data-randomnameyouchoose. Anything can come after the “data-” when setting up the data attributes on your element (do make sure each attribute has a unique name though!). Pretty cool right? The best part comes next though! Let’s check out the JavaScript Controller’s getDataAttributes method.

import {LightningElement} from 'lwc';

export default class LwcDataAttributes extends LightningElement {
	getDataAttributes(event){
		console.log('This is the data set ::: ' + 
                JSON.stringify(event.target.dataset));
		console.log('This is the data set turtle ::: ' + 
                JSON.stringify(event.target.dataset.turtle));
	}
}

You see that console log that has the “event.target.dataset” value in it? That event.target.dataset produces a Map that houses all of your data attributes in it. The output looks like this:

{"donkey":"donkeysAreKewl","turtle":"NinjaTurtles"}

As you can see it’s a key value pair, the key is whatever you named your data attribute on the HTML Element (notice the data- is excluded however) and the value is whatever value you assigned to that element on your HTML Element.

Now, you may also noticed in the console log below that one that we have the “event.target.dataset.turtle”, this line directly accesses the “data-turtle” value so it will just output “NinjaTurtles”. Pretty niftyyyyy! If you used event.target.dataset.donkey you would get the “donkeysAreKewl” value.

And to be honest that’s really all there is to it, there is one other quick thing we should review though.


What is an Event and the Difference between event.target and event.currentTarget

Boy oh boy does this really confuse people, so let me break it down right quick. Whatever element has the JS event attached to it is the one sending the event parameter to your JS method when you trigger the event (for instance when you use an onclick JS event on an HTML element and then click it to invoke the JS method). THIS IS IMPORTANT! I say this because, it is… trust me, but more importantly you can get into some tricky situations with event.target and event.currentTarget.

The key difference here is that event.target is the TRUE TARGET OF YOUR CLICK! and event.currentTarget is the ELEMENT THAT FIRED THE JS EVENT!

Even if you’ve never done it, you can sometimes wrap multiple elements within a div, and that div is actually the one that houses the onclick event. If you click a button within that div, the button is the “event.target” and the div is the “event.currentTarget”. Be wary of this! If you start to see null values or values you don’t expect in your dataset in your JS controller, this is more than likely why! It has confused many a person (including myself), so just make sure you are paying close attention to which target you are using in your controller.


Get Coding With The Force Merch!!

We now have a redbubble store setup so you can buy cool Coding With The Force merchandise! Please check it out! Every purchase goes to supporting the blog and YouTube channel.

Get Shirts Here!
Get Cups, Artwork, Coffee Cups, Bags, Masks and more here!


Check Out More Coding With The Force Stuff!

If you liked this post make sure to follow us on all our social media outlets to stay as up to date as possible with everything!

Youtube
Patreon
Github
Facebook
Twitter
Instagram


Salesforce Development Books I Recommend

Advanced Apex Programming
Salesforce Lightning Platform Enterprise Architecture
Mastering Salesforce DevOps

Good Non-SF Specific Development Books:

Clean Code
Clean Architecture

Salesforce Development Tutorial: How to use Named Credentials to simplify your Apex Salesforce Integrations

Why should you bother using Named Credentials?

In short, it’s gonna save you a bunch of time, code and unnecessary configuration, especially when you are authenticating using OAuth. Named credentials basically simplify the authentication portion of your callouts to to external services and allow you do it declaratively through configuration. No matter how hardcode a dev you are, they are 100% worth your time and effort to learn how to use. I promise.


How do you setup a named credential?

You traverse to Setup -> Named Credentials to setup the named credential of your choosing. Named Credentials allow you to authenticate via the vast majority of the authentication methods used by external service providers. You will likely even be able to connect to your internal data bases via named credentials as well if you need to. I’m not gonna go over them all individually in this article. In the video above I got over three different Named credential types and how to configure them. If you’re interested in that portion, please check it out!


How do we reference named credentials in the code?

This literally could not be easier. In fact it’s so simple I think it confuses the hell out of some people, lol. I will give you a simple example below that connects to GitHub via OAuth:

public class GithubOAuthCallout {
    
    public static void callGitHub(){
    	HttpRequest req = new HttpRequest();
        req.setEndpoint('callout:GitHub_OAuth/users/Coding-With-The-Force/repos');
        req.setMethod('GET');
        req.setHeader('Accept', 'application/json');
        req.setHeader('Content-Type', 'application/json');
        Http http = new Http();
        HTTPResponse res = http.send(req);
        System.debug(res.getBody());
    }
}

There are a couple of important things to point out in the code above:

1) When we are setting the endpoint for the HttpRequest we are add the value ‘callout:GitHub_OAuth’ this is how we reference our Named Credential. When you are setting your endpoints for your HttpRequests you pass in your Named Credential by using the following format: callout:[The name of your named credential].

2) If you’ve ever requested data using OAuth authentication you know that we seem to be missing a few steps… We’re not calling out to any authorization endpoints or getting an access token anywhere in the above code. We’re also not setting an authorization header parameter. THAT’S BECAUSE SALESFORCE DOES IT ALL FOR YOU AUTOMATICALLY! Yes… you read that right, automatically, no need to write that code yourself. That ‘callout:GitHub_OAuth’ is doing a ton of behind the scenes magic. It gets that OAuth token for you and automatically sets the authorization header parameter with that token. So wyld right?

Hopefully just that simple example above makes you think twice about choosing to not use named credentials… and if it doesn’t, you probably haven’t done many integrations with external systems yet and don’t realize how much time this saves. IT SAVES A TON OF TIME, CONFIGURATION AND CODE! Trust me on this one. I promise I’m not selling you garbage here. It’s worth using 100% of the time.


Get Coding With The Force Merch!!

We now have a redbubble store setup so you can buy cool Coding With The Force merchandise! Please check it out! Every purchase goes to supporting the blog and YouTube channel.

Get Shirts Here!
Get Cups, Artwork, Coffee Cups, Bags, Masks and more here!


Check Out More Coding With The Force Stuff!

If you liked this post make sure to follow us on all our social media outlets to stay as up to date as possible with everything!

Youtube
Patreon
Github
Facebook
Twitter
Instagram


Salesforce Development Books I Recommend

Advanced Apex Programming
Salesforce Lightning Platform Enterprise Architecture
Mastering Salesforce DevOps

Good Non-SF Specific Development Books:

Clean Code
Clean Architecture

Salesforce Development Tutorial (LWC): How to create Custom Lightning Web Component Utility Modules

Why create Utility Modules for Lightning Web Components?

If you’re asking this question, I have feeling you don’t often utilize utility modules (or utility classes) anywhere… so let me be the first to welcome you to this absolutely magical world of utilities. They will make your life easier, code updates simpler and your code base a lot less terrifying.

Utility modules are useful in LWC’s because they allow you to take code you commonly use (or may commonly use) between components and allow tons of different components to use that same code without re-writing it a bunch.

Here’s a simple example. Say you pull URL parameters in several different lightning web components and in all of those components you have the exact same method that parses the url and returns those parameters. Instead of adding that method to every single component and having to update that method any time your process for parsing URL parameters change, you could just make a javascript utility module to deal with it, import it into your components and just call that single javascript utility module everywhere you needed to parse URL parameters. In the end this greatly reduces your codebase and the difficulty updating your code in the future.

Maybe the above is still confusing, no worries, let’s check out an example that will hopefully clear any confusion up.


How to create a Utility Module

So to give you a little background on what we’re about to do, I would suggest a little light reading on ES6 Javascript Modules. This will give you a bit better understanding on how all this code I’m about to show you works. If you’re not as obsessive of a reader as me, don’t worry though, I’ll explain everything just a bit throughout the rest of this post.

The first thing we need to do is create an LWC and delete the html file that comes with it as well as all the pre-built code in the javascript file. You might be like wutttttttt??????? But no worries, with utility modules you won’t need them. I know it feels weird right now, but just trust ya boi for one sec.

Next let’s take a look at a very simple LWC module with some exports in it. The name of the below LWC is “util_module”. Knowing the below components name will be important in the near future (GitHub where this code is also available).

//DISCLAIMER: There are many different ways available in ES6 JS to export variables, functions and classes
//you can find out more about exports here: https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export

//How to export a variable and make it available when importing your module
//in other components
export const OPEN_STATUS = 'Open';

//How to export a method and make it available when importing your module
//in other components
export function showError(error) {
    return 'This is an error ' + error;
}

//How to export a class and make it available when importing your module
//in other components
export class util_class {

    newStatus = 'New';

    showConsoleLog(){
        console.log('This is the console log ::: ');
    }

}

So what is all that junk up there? It’s not all that complicated after you get familiar with it. Basically what you are seeing are a handful of ways to make things accessible in a javascript module. The key thing here is that “export” keyword. Placing the export keyword in front of a variable, function or a class will allow you to import them into other components. Which brings us to the next part of this lesson, “How tf do we use this utility module”. Let’s check that out.


How to Import/Use your LWC Utility Module

Alright my guys (and gals), let’s check out the code to import that adorable little utility class we made up there into one of our normal LWC’s .

import { LightningElement } from 'lwc';

//Importing in our javascript utility module. The import variable names (OPEN_STATUS, //showError, util_class)
//are the names of the exported variable, method and class in our util_module component
import { OPEN_STATUS, showError, util_class} from 'c/util_module';

export default class Demo_component extends LightningElement 
{
    openStatus;
    returnedError;
    newStatus;

    //The connectedCallback method runs on component load
    connectedCallback()
    {
        //assigning our imported OPEN_STATUS value to our local openStatus variable
        this.openStatus = OPEN_STATUS;

        //assigning our imported showError methods return value to our local returnedError 
        //variable 
        this.returnedError = showError('Tacos had an error');

        //assigning our imported class's newStatus variable to our local newStatus variable
        this.newStatus = new util_class().newStatus;

        //Calling our imported class's showConsoleLog method
        new util_class().showConsoleLog();
    }
}

You’re thinking one of two things right now. It’s either, “Whoa my guy, it’s really that easy?” or, “Idk wtf that mess means”. For the group in latter, let me help you get into the former group with a little bit of an explanation.

Near the top of our LWC you’ll notice this line:

import { OPEN_STATUS, showError, util_class} from 'c/util_module';

This statement is importing the this various things we marked with the “export” keyword in the util_module LWC we created above. You will notice that the OPEN_STATUS, showError and util_class all are the exact names of the things with the “export” statement next to them in the util_module LWC.

These OPEN_STATUS, showError and util_class imports now become accessible in your class via those keywords. So for instance when we do this assignment:

this.openStatus = OPEN_STATUS;

We are literally assigning the OPEN_STATUS variable value from our util_module LWC to our local openStatus variable. Pretty cool right? Hopefully this makes things a little clearer… maybe… If I’m lucky anyway.

And that’s really it everyone! If you have any questions feel free to ask. I typically respond pretty quick.


Get Coding With The Force Merch!!

We now have a redbubble store setup so you can buy cool Coding With The Force merchandise! Please check it out! Every purchase goes to supporting the blog and YouTube channel.

Get Shirts Here!
Get Cups, Artwork, Coffee Cups, Bags, Masks and more here!


Check Out More Coding With The Force Stuff!

If you liked this post make sure to follow us on all our social media outlets to stay as up to date as possible with everything!

Youtube
Patreon
Github
Facebook
Twitter
Instagram


Salesforce Development Books I Recommend

Advanced Apex Programming
Salesforce Lightning Platform Enterprise Architecture
Mastering Salesforce DevOps

Good Non-SF Specific Development Books:

Clean Code
Clean Architecture

Salesforce Development Tutorial: How to Setup Visual Studio Code for Salesforce Development

Why use an IDE?

First things first… after you use an IDE you will never ask this question again. IT MAKES YOUR LIFE SO MUCH EASIER! Please take the time to leverage an IDE when doing development. Your work will take a fraction of the time it would take otherwise.

Ever wish your code editor would auto-complete method names, field names, object names, etc for you? Well an IDE will do that along with tons of other things that will simply development.

As for why you would pick Visual Studio Code specifically for Salesforce Development, you would do that because it’s an excellent IDE and it’s the only IDE with plugins that Salesforce itself maintains. That’s right, THE ONLY ONE! There are two other big contenders, the Illuminated Cloud 2 for IntelliJ and The Welkins Suite, but the Salesforce Extension pack for VSCode is the only one upkept directly by Salesforce. As such, it has a large team of developers constantly working to keep it up to date and as useful as possible for your work as a developer on the platform.

How do we setup Visual Studio Code for Salesforce Development?

It’s not super complicated, but can be confusing your first handful of times setting things up. Before I get started, if you’d rather read my GitHub wiki on the subject you can find it here.

You first need to install a handful of things if you haven’t already:

1) Install VSCode
2) Install the Salesforce CLI
3) Optionally install Node.js and npm (there are a lot of great packages in existence you can leverage, but we’re not gonna over those here, just know it can come in handy down the line)

After you have installed VSCode and the Salesforce CLI, you then need to open VSCode, click on the extensions icon and search for the Salesforce Extension Pack. After you find the extension pack, install it.

How to Setup a Project (Using the org based development model)

Before I get into this, if you’re not sure what an org based development model is, it basically means your source of truth for your codebase is still your production org instead of a repository. In a later tutorial I will go over how to actually leverage SFDX and a repo based model, but I want to ease people into this and I know from being involved in twenty three different orgs now, the majority of clients are still stuck in the org based model… so we’re gonna start here.

There is one VERY IMPORTANT HOT KEY YOU NEED TO REMEMBER IN VSCODE and that hotkey is the one that brings up the command palette Ctrl+Shift+P. Remember it, love it, appreciate it, don’t forget it (or do and just come back to this article to remember it).

Alright, now that those things are out of the way, let’s go through the steps to setup our project:

1) Bring up the command palette and run the SFDX: Create Project with Manifest command (technically creating it with a manifest is optional these days, but you’ll see why it’s still beneficial later).

2) When prompted, choose the standard template for your manifest file (unless you would prefer an empty or analytics based template). The standard template creates an xml file that would pull all your code from the org.

3) After your SFDX project has been created it’s in your best interest to find the sfdx-project.json file, open it and update the sfdcLoginUrl to have the login URL for your org. Some orgs have MyDomains they have to login through. It’s super useful for those scenarios.

4) After you update the sfdx-project.json, pull up the command palette again and enter the command SFDX: Authorize an Org. This command will ask you what URL you would like to use to connect to your SF org, ask you to enter an alias for your org (this can be anything) and eventually bring up a browser window and allow you to authenticate/login to your org you want to connect to.

5) That’s it, your project is setup! But now how to do we pull in the metadata from our org into our local project? Still super simple, but the next section covers it.

How to retrieve metadata from your org

There are actually two ways to do this, one leverages the manifest file we created earlier when setting up our project and the other uses the org browser. Let’s check out both methods.

Retrieving Metadata from the Org Browser

To the left of your Visual Studio Code workspace, after successfully setting up your project and connecting to your org, you should see a cloud icon. If you click that cloud icon you will bring up the org browser. This allows you to bring up all the metadata in your org. If you hover over a metadata item, to the right of it you will see an icon shaped like a cloud with an arrow. Clicking this icon will allow you to pull the metadata into your local project.

Retrieving Metadata using the manifest package.xml file

Before we get into this, there is an extension called “Salesforce Package.xml Generator” that will make setting up these package.xml files way easier.

This method is very useful if you intend to pull a ton of specific data from your org into your projects consistently. It’s also quite a bit faster than the org browser is in those situations.

To use this method to pull in metadata, do the following:

1) You should see a “manifest” folder in your project. Inside that folder there should be a file called “package.xml”. You can either leave it alone or update the package.xml file to include more metadata types to pull from your org. When you retrieve data in the next step, you will only retrieve data types declared in your package.xml file. For more information please check out the supplementary links section of this wiki article

2) In the command palette run the SFDX: Retrieve Source in Manifest from Org command. This should pull in all the metadata from your org that you outlined in your package.xml file.

Other Useful Things To Setup

The above stuff is the only stuff that’s required to get up and running, but the stuff I outline below will make your life suck way less.

How to get auto-complete to work for object fields

1) In the command palette run the SFDX: Refresh SObject Definitions command so that you can get autocompletion on your object fields.

If you want your SObject definitions to automatically refresh every time you open your VSCode project, do the following:

In the extension settings under “Salesforce Apex Configuration” there is a checkbox for “Enable-sobject-refresh-on-startup”. This automatically refreshes your sobjects from your org when your project is loaded.

How to Auto-Deploy to your org on save

If you didn’t know, by default you won’t auto-deploy to your org when you save your code. You have to right click on your file in the project and select the option that deploys the code to your org. If you want auto-deploy to be setup, follow these steps:

1) In VSCode go to File -> Preferences -> Settings.
2) Click the Extensions drop down
3) Click the Salesforce Feature Previews extension
4) Check the box next to “Push-or-deploy-on-save”
5) It’s also in your best interest to enable the “Detect Conflicts At Sync” feature preview in settings if you use the auto-deploy on save feature. By enabling this you will be informed if your save has any conflicts with other developers code before you actually deploy it to your org.

Still want more info?

In the GitHub wiki article I have even more useful stuff and I update it frequently. Check it out!


Get Coding With The Force Merch!!

We now have a redbubble store setup so you can buy cool Coding With The Force merchandise! Please check it out! Every purchase goes to supporting the blog and YouTube channel.

Get Shirts Here!
Get Cups, Artwork, Coffee Cups, Bags, Masks and more here!


Check Out More Coding With The Force Stuff!

If you liked this post make sure to follow us on all our social media outlets to stay as up to date as possible with everything!

Youtube
Patreon
Github
Facebook
Twitter
Instagram


Salesforce Development Books I Recommend

Advanced Apex Programming
Salesforce Lightning Platform Enterprise Architecture
Mastering Salesforce DevOps