Lightning Web Components Archives

Calling Apex methods in Salesforce Lightning web components

[Originally published as ¿Cómo Llamar Apex en Lightning Web Component?]

One of the features that Salesforce gives us is the ability to call Apex methods in Lightning web components. This can be done by importing the method and calling it with the decorator wire service or imperatively.

How to import an Apex method in a Lightning web component?

We can import methods from Apex classes into a component using the import form in ES6 (ECMAScript v6). This way:

apexMethodName: Symbol to identify the Apex method.
apexMethodReference: Name of the Apex method that we are going to import.
Classname: Name of the Apex class in Salesforce.
Namespace: If the Apex class is in the same namespace as the component, do not specify a Namespace. If the class is in a managed package, specify the namespace of the managed package.

How to expose an Apex method in Lightning web components?

To expose a method of an Apex class in a component, the method must be static and global or public. Also, we need to add the @AuraEnabled annotation to it.

In the following example, we expose a method called getContactList in the component, which returns a list of contacts.

How to call an Apex method with React Wire?

To read data from Salesforce, the Lightning web component can use the Reactive Wire service. The wire decorator is used to call an Apex method.

In the following example, we call an Apex method using the wire decorator.

How to call an Apex method imperatively?

In the next example, we call an Apex method, which returns a list of contacts, imperatively. The imported function returns a promise.

If you are looking for Salesforce technical content in Spanish written by experts, we recommend visiting Snake on Code, where you will find more information regarding Lightning web components, Apex, and more.

If you enjoyed this article, here are some more that you might enjoy:

Developing Salesforce Lightning Web Components

In mid-2020 we started a project to build small Salesforce components that could be added to any application or even a registration page. That project has grown to include twelve components currently in production and many more on the way. We publish the components on the AppExchange for free so any Salesforce administrator can install them into their org to try them out. Our team builds components that are utilities that can help us on a daily basis, or complement our other work in some way.

Lightning Web Components

There are a few approaches we could take to build components like these, but we wanted to take advantage of the newer Lightning web component architecture. It uses JavaScript, HTML, CSS, and the Lightning Design System. When we need to access custom and standard object definitions or build and call REST APIs, we use the Salesforce Apex programming language.

Lightning web components are a powerful tool because they present data to the client in a dynamic and reactive way. Most components are designed to directly support the Salesforce users who will be interacting with them. This approach allows our team to build for desktop and mobile with very few differences in the code structure. And the Lightning Design System is crucial for designing and developing a UI that is consistent with the rest of the Salesforce experience and is easy for the end-user to understand.

Even though all the components are “components”, some of them could be classified as “sub-components”, meaning that one could be nested and work inside another. This allows the team to distribute tasks better and work more efficiently. It also allows the components to be scalable and to add more features to a single component. It also has the advantage of making the work neater: the code is more organized as each component has its own functionality.

Customer-centered Logic

When creating a component that runs in a complex environment like Salesforce, we want to be sure to minimize the number of interactions with the server. Customer-centered logic helps us reduce response time and to create elements that interact with the client faster. This approach lets the server delegate many of its responsibilities to the browser. Since it acts as a controller, all the user’s logic is handled by the browser.

Developing in this way requires a disposable cache that stores data locally, reducing the response time. The approach is called a “View-Controller-Controller-Model” because it has both a server-side and a client-side controller. Other frameworks such as Visualforce do not interact as quickly with the customer because they continuously consult the backend and request information and/or approvals. They depend 100% on the server. The server has to handle all the user’s requests and analyze what the user needs, then access the database, answer the question, and then render the page for the user. Not very efficient.

Component Ideas

The process of building a Lightning Web Component starts with a brainstorming session. Once all the ideas have been discussed, the team does a reality-check and chooses the most Lightning web component-friendly options. Then a team is designated to research available APIs on the market and determine which libraries they need. It’s only at that stage that we determine if it is feasible to develop that new component. If it is, a designer then creates a sketch with the layout, titles, logo, and color palette, and the development team starts building the components and Apex classes.

We currently have three Lightning web components published on the AppExchange, including Oktana Calendar and Oktana Youtube, with more components already in the security review process. It takes time for the Salesforce security team to complete their review and approve any app or component, and that review process has become even more rigorous recently. We’re excited to share with you our new components as they’re approved and published on the AppExchange. Keep an eye on this blog or check our Salesforce AppExchange listings page.

Oktana YouTube: Embed & Share Videos in Salesforce

If a picture is worth a thousand words, a video is worth a million. That’s why we are proud to announce Oktana YouTube, our newest Lightning Web Component for Salesforce.

Videos can be a strategic ally when it comes to communicating complex and important messages. Think about training the team on that new app you just purchased to increase sales productivity or that anniversary message from the CEO that cheers everyone up. Both are messages that need to be understood clearly and that have a greater impact when they feel more personal. Oktana YouTube makes your life easier by creating a place in your Salesforce org to embed and share YouTube videos to communicate with your team.

No code needed: Oktana YouTube is all about simplicity

Oktana Youtube is based on the Lightning Web Component technology. It is easy for Salesforce admins to install it from the AppExchange and to enable it on any Salesforce page. Drag and drop the component and you will be all set.
Alexis Mamani – Developer @Oktana Peru

Simplicity is at the core of Lightning Web Components and Oktana YouTube is no exception. Installing it from the AppExchange takes three (3!) clicks. Once the component is installed, you just enable it on the Salesforce page of your preference. The Lightning App Builder makes this easy for you. Drag the component and drop it wherever you prefer. As you can see, no coding skills are required to add Oktana YouTube to your org.

Admins have full control

As an admin, you get to decide whether to embed a corporate video for all of your users, or let them decide what to watch according to their needs. That’s up to you. If you need them to watch a specific video (let’s say a tutorial, a demo, or a message from the team lead), paste the YouTube ID in and you are all set. If you prefer them to be able to search, just leave the YouTube ID blank.

Oktana YouTube means flexible layout

As you create a new page in Salesforce, you also decide where to place your components. We recommend the upper right corner as the best spot, but you can move it according to your needs. Oktana YouTube also allows you to adjust the title and the height to fit your expectations. Good enough? You get the same flexibility in desktop and mobile. It doesn’t matter where you are, you can always watch your embedded videos.

Search videos

As Salesforce admin, you can allow your users to search YouTube videos from within your org. How does this work? Exactly as YouTube does. Enter keywords and the Lightning Web Component will retrieve related videos. Every user has their own viewing history stored, making it easier to locate previously watched videos. And you can always clear your search history with a simple click.

Oktana YouTube is useful for everyone because it provides YouTube functionality in an intuitive way. If the admin allows it, users can visualize, share, and search any video they need. Anyone can use Oktana YouTube with other components in the same panel/screen. This way, users can access important videos without leaving Salesforce.
Juan Chacón – QA Analyst @ Oktana Peru

All of this functionality makes Oktana YouTube a useful component you should definitely try. We leverage the YouTube API to embed and share tutorials, demos, or any other important message to your team right in your org.

Install Oktana YouTube and give yourself another channel for your internal communication strategy. At Oktana, we care about your efficiency and experience in Salesforce, so if you think this is a good match for your company, install the Oktana YouTube Lightning Web Component for free from the AppExchange.

We create Salesforce products, check them out.