Skip to main content

Technical

Connecting Javascript with Apex Remote Actions for a Single Page Application

A team of tech workers troubleshooting together.

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:

Apex controller class

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.

Visualforce 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.

reference to Angular

Now we add the elements we will input our data:

Apex data input

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

connect front end html to apex backend

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.

valid field correspondance

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.

send function

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.

upsert Account

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

application resultatnt

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.

Salesforce Account id

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

Account record n SalesForce

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

 

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Perficient Latin America

More from this Author

Categories
Follow Us
TwitterLinkedinFacebookYoutubeInstagram