Connecting Javascript with Apex Remote Actions for a Single Page Application

How to Connect UI to a Salesforce Backend

Working with a Visualforce page and its MVC pattern is very powerful when it comes to bind the data from the standard and custom Salesforce objects, but for creating a single page application that provides a better UX and kind of and app look and feel rather than doing a postback and refreshing the page with every user interaction, what can you do?

For that, we can use remote actions on an Apex class. When you do this, you will be able to access those methods asynchronously and refresh your data as you interact with the Visualforce page without the need of reloading the whole page.

First, let’s create our controller class as follow:

The @RemoteAction annotation will create a javascript file that will be attached to any Visualforce page that the AsyncApex class is a controller or extension of the page.

Now that our class is exposing the remote action we create a Visualforce page and assign our newly created class as the controller for that page.

For this example, we will be using angular 1 for the bindings but you could use any other front end framework, please make sure you include a reference to the angular library.

Now we add the elements we will input our data:

Revolutionize Your Business With Generative AI

From product design and software development to virtual agents, content creation, and reporting, GenAI is transforming business. Our AI experts help you unlock GenAI’s full potential and drive growth.

Let’s Get Started

Next, we will be connecting the front end HTML to the Apex backend using Angularjs, we will create 1 controller and 1 factory.

The Controller creates an empty object that will house the Account sObject, it’s important that any property we add to spc.account is a valid field on the correspondent object on salesforce, otherwise, there will be a server-side error.

We create a send function to pass the Account object to the service as the service returns a promise when this one is resolved we will pass the value into the account for the front end to update any new values that may come back like id.

For our factory, we create a method called upsertAccount that takes an array as parameter and returns a promise which when resolved will give back the newly created or updated Account sObject and it will have now and assigned id.

In the end the resultant form in the application will be something like this:

When we get the result back from Salesforce the Account now comes with an id field as it is now saved in the database, and angular binds the value to the form.

As you can see in the screenshot below the new Account record was created on Salesforce.

The full code for the visualforce page can be found here: angular force page.