main banner

Development

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:

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

and as you can see in the screenshot below the new Account record was created on Sales Force.


Account record n SalesForce

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

Alfonso R.

Alfonso has 8 years of experience in the field, specializing in Web Applications, Sharepoint, C# and Javascript. He has a BS in Computer Science and comes from Monclova, Coahuila. He likes mechanics, TV series such as Dr Who and video games. He’s insights on the technologies he masters are pretty useful.



Articles