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:
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
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.
and as you can see in the screenshot below the new Account record was created on Sales Force.
The full code for the visualforce page can be found here: angular force page