Join Sara Morgan for an in-depth discussion in this video Using Visualforce remoting, part of Visualforce: Improving Performance.
Now, this page is quite different from the actionFunction Page and so we're going to go through it a little more carefully. But the first thing I want you to notice is that the controller is different in this case. And it is called AccountSearchRemoting because it's very different than the original one. And now we're going to look at that controller and you'll see that the substantial difference here is that we're using the RemoteAction method right at the top with the @ symbol and that's on line 10.
And then if you look below it, we're returning a static list of accounts and we're also passing in a parameter called accountName but other than that, the search is essentially the same in that we're only using the wild card towards the end and then we're returning the same SOQL that we were earlier. So, everything else is the same except for the fact that it's RemoteAction and it's returning a list of accounts and passing in that parameter.
Now, if we go back to the page itself, another thing you'll notice is that there are some styling that I've added at the very top and this is just so we can style the HTML below to make it look a little better. And that's not as important, but I want you to look at the script. The script that we have is much more substantial than in the actionFunction page. First of all, the handleButtonClick function has expanded. It is still taking in that search term and that's from that searchField value and then it's calling using that RemoteAction method instead of the actionFunction name.
And it's calling the InvokeAction of the Visualforce.remoting.Manager class and it's passing in the RemoteAction to searchAccounts and I'll scroll a little over here to the right so you can see the rest of it. And this is invokign an action to perform that searchAccounts and then also pass in the searchTerm and then it will have a call back for the handleResult. And the handleResult function is the thing that you are responsible for adding.
This is something that would normally be handled by the actionFunction component but this what you are going to have to code yourself if you use Visualforce Remoting. And looking at the code here, we'll see that we're checking to see that the event had a true status and that there weren't any exceptions and if there are any exceptions then we are going to go ahead and put those exception message into an ID that I have on the page below called responseErrors and that's just a div tag that I'm referencing below.
Everything else is pretty much the same, the input HTML is still coming from a field called searchField, and we're still using an HTML button to reference the fucntion called handleButtonClick when the user click Search Accounts. What has changed significantly is that we're having to actually create the script and that callback function to render out the results as raw HTML and it's not being handled internally by the apex function anymore.
So, let's see how this works by going back to our Developer Org and going to our new page for AccountSearchWithRemoteAction and I'll go ahead and do a search for all accounts that start with the letter B. And rendered pretty quick that time if you saw that. And let's go ahead and try it one more time again, this time with an A, and you see how quick that resulted. And the big thing I want you to notice is here in the View State. Notice that my View State now has gone from… roughly, I think before, it was somewhere around 23 kilobytes on the original count search page and then on our accountFunction search page it was 23.17.
But on this new page that's just rendering the HTML, we've gone all the way down to just a little over one kilobyte. That's a significant difference. And another thing I want to point out is the fact that with Account Search Remoting, because of the fact that we are doing everything on the client side and handling it ourselves, and not using any of those built-in action component, we really don't need this apex:form tag anymore. In fact, if I go ahead and just remove this tag entirely, both the beginning and the start and the ending tag, and then I save this page, and then do a search again, it still functions exactly the same, but notice what happened.
My View State tab went away because I no longer have any View State. The View State is not needed at all with these types of pages. For me, this is one of the best reasons to consider Visualforce remoting since it allows you to take advantage of all the great things that AJAX processing offers while also still taking performance into great consideration.
- Reducing and eliminating view states
- Evaluating SOQL for efficiency
- Using Workbench and the Query Plan tool to evaluate queries
- Reducing use of action tags through Visualforce remoting
- Working with the StandardSetController class
- Using static resources