20
Agenda Covered Topic- JavaScript Remoting for Apex Controllers In Cloud Computing Prabhat Gangwar Software Developer

Visualforce: Using JavaScript Remoting for Apex Controllers

Embed Size (px)

Citation preview

Page 1: Visualforce: Using JavaScript Remoting for Apex Controllers

Agenda

Covered Topic-

JavaScript Remoting for Apex Controllers In Cloud Computing

Prabhat GangwarSoftware Developer

Page 2: Visualforce: Using JavaScript Remoting for Apex Controllers

What is JavaScript Remoting for Apex Controllers?

JavaScript Remoting for Apex Controllers

AJAX request from an apex page to a controller.

Invoke Controller method

Synchronous request to the controller with an asynchronous response to the page .

A way to separate the page from the controller.

without the need to perform a form submission.

This way to implement light weight visualforce page with faster responce from database instead using action function.

Page 3: Visualforce: Using JavaScript Remoting for Apex Controllers

What are the benefits?

JavaScript Remoting for Apex Controllers

Decouples the page from the controller.

No Need reloading the entire page.

avoid View-State issue when you use JS remoting because you will just give request and back the data to the user but not keep it on the server.

Page 4: Visualforce: Using JavaScript Remoting for Apex Controllers

JavaScript Remoting for Apex Controllers

What are the disadvantages?

Decouples the page from the controller.

A basic understanding of javascript is required.

Slightly higher barrier to entry.

Page 5: Visualforce: Using JavaScript Remoting for Apex Controllers

JavaScript Remoting for Apex Controllers

How to use JavaScript Remoting for Apex Controllers?

add the request as a JavaScript invocation with the following form: Syntax –

[namespace.]controller.method( [parameters...,]callbackFunction, [configuration]);

namespace is the namespace of the controller class.controller is the name of your Apex controller. method is the name of the Apex method you’re calling.parameters is the comma-separated list of parameters that your method takes.callbackFunction is the name of the JavaScript function that will handle the response from the controller . You can also declare an anonymous function inline.configuration configures the handling of the remote call and response. Use this to change the behavior of a remoting call .

Page 6: Visualforce: Using JavaScript Remoting for Apex Controllers

JavaScript Remoting for Apex Controllers

.

Example 1 - Before any Event

Button will Invoke Controller Method

Page 7: Visualforce: Using JavaScript Remoting for Apex Controllers

JavaScript Remoting for Apex Controllers

.

After Event

Result

Page 8: Visualforce: Using JavaScript Remoting for Apex Controllers

JavaScript Remoting for Apex Controllers <apex:page controller="JSRemotingBasicsController" id="page">

<script type="text/javascript"> function getText() { var text = ""; JSRemotingBasicsController.doGetText( function(result, event) { if(event.type === 'exception') { console.log("exception"); console.log(event); } else if (event.status) { alert(result); // here will come ‘welcome to cccinfotech’ text = result; document.getElementById('{!$Component.page.textResponseApexOutputText}').innerHTML = text; } else { console.log(event.message); } }, { buffer: true, escape: true, timeout: 30000} ); }</script>

<h2>Simple Javascript Remoting Examples </h2> <br/> <br/> <button onclick="getText()">Get Static Text</button> <br/> <apex:outputText id="textResponseApexOutputText"></apex:outputText>

</apex:page>

Visual forcepage

Page 9: Visualforce: Using JavaScript Remoting for Apex Controllers

JavaScript Remoting for Apex Controllers

Controller -

global class JSRemotingBasicsController { public JSRemotingBasicsController() { } @RemoteAction public static String doGetText() { return 'Welcome to cccinfotech'; }}

The global access modifier declares that this class is known by all Apex code everywhere.

When javaScript Remoting method is called, It finds @RemoteAction methods in the controller.

Page 10: Visualforce: Using JavaScript Remoting for Apex Controllers

JavaScript Remoting for Apex Controllers

Before any EventExample 2 -

Page 11: Visualforce: Using JavaScript Remoting for Apex Controllers

JavaScript Remoting for Apex Controllers

After EventExample 2 -

Page 12: Visualforce: Using JavaScript Remoting for Apex Controllers

JavaScript Remoting for Apex Controllers

<apex:page controller="sample" wizard="true"> <script type="text/javascript"> function getAccountJS() { var accountNameJS = document.getElementById('accName').value; sample.getAccount( accountNameJS,function(result, event) { if (event.status) { // demonstrates how to get ID for HTML and Visualforce tags document.getElementById("{!$Component.theBlock.thePageBlockSection.theFirstItem.accId}").innerHTML = result.Id; document.getElementById("{!$Component.theBlock.thePageBlockSection.theSecondItem.accNam}").innerHTML = result.Name; } else if (event.type === 'exception') { document.getElementById("errors-js").innerHTML = event.message; } else { document.getElementById("errors-js").innerHTML = event.message; } }, ); } </script> Account Name :<input id="accName" type="text" /> <button onclick="getAccountJS()">Get Account</button> <div id="errors-js"> </div> <apex:pageBlock id="theBlock"> <apex:pageBlockSection id="thePageBlockSection" columns="2"> <apex:pageBlockSectionItem id="theFirstItem"> <apex:outputText id="accId"/> </apex:pageBlockSectionItem> <apex:pageBlockSectionItem id="theSecondItem" > <apex:outputText id="accNam" /> </apex:pageBlockSectionItem> </apex:pageBlockSection> </apex:pageBlock></apex:page>

Visualforce Page -

Page 13: Visualforce: Using JavaScript Remoting for Apex Controllers

JavaScript Remoting for Apex Controllers

Controller -

public class sample { public static Account account { get; set; } public sample() { } @RemoteAction public static Account getAccount(String accountName) { account = [select id, name, phone, type, numberofemployees from Account where name = :accountName ]; return account; }}

Page 14: Visualforce: Using JavaScript Remoting for Apex Controllers

JavaScript Remoting for Apex Controllers

Configure a remoting request by providing an object.default configuration parameters look like this: { buffer: true, escape: true, timeout: 30000 } Buffer : Boolean Type , The default is true. This buffering improve the efficiency of the overall request-and-response cycle.

Escape :Boolean Type , The default is true. Apex method’s response.

Timeout :-The timeout for the request, in milliseconds. default is 30000 ms (30 seconds). maximum is 120000 (120 seconds, or 2 minutes).

Configuring JavaScript Remoting Requests ?

Page 15: Visualforce: Using JavaScript Remoting for Apex Controllers

Maxretries :

Integer Type

retries for the request when connection errors occur.

The default is 0. The maximum is 3.

new parameter could be as follows ?

{ buffer: true, escape: true, timeout: 30000, maxretries: 2 }

JavaScript Remoting for Apex Controllers

Page 16: Visualforce: Using JavaScript Remoting for Apex Controllers

.

Important about Remote Action ?

JavaScript Remoting for Apex Controllers

Javascript remoting calls don't count against SOQL Governor limit.

Page 17: Visualforce: Using JavaScript Remoting for Apex Controllers

JavaScript Remoting for Apex Controllers

JavaScript Remoting Campare with Action Function ?

Action Funtion

Action Function posts the data. Must need of form .

View-State issue

need to ReRender

methods are instance

methods require bandwidth not less

@RemoteAction

communicate with VF page's controller's methods without posting your form.

avoid View-State issue

No need to ReRender

methods are static

methods require less bandwidth

Page 18: Visualforce: Using JavaScript Remoting for Apex Controllers

JavaScript Remoting for Apex Controllers

JavaScript Remoting Campare with Action Function ?

Action Funtion

has to transfer the page view state

cannot update the page's view state.

@RemoteAction

Less server processing time, because only the data you submit is visible and the view state is not transferred.

Controller methods can return data directly back to the calling JavaScript, cannot update the page's view state

Page 19: Visualforce: Using JavaScript Remoting for Apex Controllers
Page 20: Visualforce: Using JavaScript Remoting for Apex Controllers