Toggle Side Panel
Close search

Activity › Forums › Salesforce® Discussions › Define Javascript Remoting for Salesforce Apex Controllers.

Tagged: , , , , , , ,

  • chanchal kumar

    Member
    September 19, 2018 at 1:28 PM

    Hi,

    Use javascript remoting in visualforce to call methods in apex controllers from javascript.
    Javascript remoting has 3 parts.
    1. The remote method invocation you add to the visualforce page, written in javascript.
    2. The remote method definition in your Apex controller class.
    3. This method definition is written in apex, but there are  few differences from normal action methods.
    4. The response handles callback function you add to or include in your vf page, written in javascript.

  • Parul

    Member
    September 19, 2018 at 1:29 PM

    Hi

    JavaScript remoting is a tool that front-end developers can use to make an AJAX request from a Visualforce page directly to an Apex controller. JavaScript remoting allows you to run asynchronous actions by decoupling the page from the controller and to perform tasks on the page without having to reload the entire page.

    JavaScript code can be written in a Visualforce page and can be included in a Visualforce page by using a static resource within the script.

    Example: Code snippet

    <script type=”text/javascript”>
    function getRemoteAccount() {
    var accountName = document.getElementById(‘acctSearch’).value;
    Visualforce.remoting.Manager.invokeAction(
    ‘{!$RemoteAction.MyController.getAccount}’,
    accountName,
    function(result, event){
    if (event.status) {
    // Code for callback handling
    }
    }, {escape: true}
    );
    }
    </script>

     

    Controller:

    @RemoteAction
    global static String getItemId(String objectName) { … }

    Thanks

  • Anurag algoworks

    Member
    September 19, 2018 at 2:01 PM

    Hi Prachi,

    Here’s a basic sample demonstrating how to use JavaScript remoting in your Visualforce pages

    First, create an Apex controller called AccountRemoter:

    global with sharing class AccountRemoter {

    public String accountName { get; set; }
    public static Account account { get; set; }
    public AccountRemoter() { } // empty constructor

    @RemoteAction
    global static Account getAccount(String accountName) {
    account = [SELECT Id, Name, Phone, Type, NumberOfEmployees
    FROM Account WHERE Name = :accountName];
    return account;
    }
    }

    Other than the @RemoteAction annotation, this looks like any other controller definition.
    To make use of this remote method, create a Visualforce page that looks like this:

    <apex:page controller="AccountRemoter">
    <script type="text/javascript">
    function getRemoteAccount() {
    var accountName = document.getElementById('acctSearch').value;

    Visualforce.remoting.Manager.invokeAction(
    '{!$RemoteAction.AccountRemoter.getAccount}',
    accountName,
    function(result, event){
    if (event.status) {
    // Get DOM IDs for HTML and Visualforce elements like this
    document.getElementById('remoteAcctId').innerHTML = result.Id
    document.getElementById(
    "{!$Component.block.blockSection.secondItem.acctNumEmployees}"
    ).innerHTML = result.NumberOfEmployees;
    } else if (event.type === 'exception') {
    document.getElementById("responseErrors").innerHTML =
    event.message + "<br/>\n<pre>" + event.where + "</pre>";
    } else {
    document.getElementById("responseErrors").innerHTML = event.message;
    }
    },
    {escape: true}
    );
    }
    </script>

    <input id="acctSearch" type="text"/>
    <button onclick="getRemoteAccount()">Get Account</button>
    <div id="responseErrors"></div>

    <apex:pageBlock id="block">
    <apex:pageBlockSection id="blockSection" columns="2">
    <apex:pageBlockSectionItem id="firstItem">
    <span id="remoteAcctId"/>
    </apex:pageBlockSectionItem>
    <apex:pageBlockSectionItem id="secondItem">
    <apex:outputText id="acctNumEmployees"/>
    </apex:pageBlockSectionItem>
    </apex:pageBlockSection>
    </apex:pageBlock>
    </apex:page>

     

  • Aman

    Member
    September 29, 2018 at 4:46 PM

    JavaScript remoting is optimized for use on mobile pages and on pages that use third-party JavaScript libraries. It enables dynamic, interactive pages that feel more responsive than traditional Visualforce pages.

    JavaScript remoting is an alternative to standard Visualforce AJAX components and Visualforce Remote Objects. It provides a more idiomatic way of interacting with the Lightning platform from JavaScript. JavaScript remoting allows you to use familiar JavaScript practices and structures and makes leveraging other JavaScript frameworks and tool kits easier for front-end developers. Remoting creates a more responsive experience that’s ideal for mobile pages or any other page where your use case requires maximum efficiency and performance. Because it’s asynchronous, you can load only the initial page and the data that you need to display the page, and then lazily load additional data that might not be used on the page immediately. You can even use this method to pre-load data for pages or views that the user hasn’t accessed.

    Although JavaScript remoting can provide an efficient, responsive, and optimized user experience, it’s not without limitations. It can take extra time to develop pages that use it, and you need to change how you develop and think about the flow of the page. Because you aren’t using forms and there’s no view state associated with the request, you have to manage the state of the page yourself, on the client side. On the other hand, there’s nothing that prevents you from combining JavaScript remoting with the standard Visualforce MVC design paradigm. As always, keep the problem that you’re trying to solve foremost when determining your design. JavaScript remoting is one of many tools available to you.

    Thanks.

Log In to reply.

Popular Salesforce Blogs