What is Remote Action in Salesforce?

In this blog, we will learn how to use Remote Actions in Visualforce Page.

But what is a Remote Action? 

Remote Action is a way to access Apex method using Javascript in your Visualforce page.
It allows you to create pages with complex, dynamic behavior that isn’t possible with the standard Visualforce AJAX components.

Remote action method should always have the @RemoteAction annotation and it should be Static.

Let's take an example where we need to retrieve the first five Cases with Status to New.



Output:

Point to remember:

• @RemoteAction annotation is mandatory
• Remote Action methods should always be static
• If you are using the Visualforce Page inline in a Page Layout, then the method should be declared as global instead of public

Detect if visualforce is inline on a page layout from its apex controller

This tutorial will explain to you on how to detect if a visualforce page is embedded inside of a detail page layout.

To be able to detect if a VF is being on a page layout in an inline section from a custom apex controller. The following code needs to be implemented. You can tweak around the code to mean your requirement.


Moreover you can use the very same Visualforce to override buttons like "New" and "Edit" so that you can have only one Visualforce page to for different operation like creation of a new record or editing the record.

public class CheckState {
    public String vfMode {get; set;}
    private Map<String, String> urlparams = new Map<String, String>();
    public CheckState(ApexPages.StandardController std){
        urlparams = ApexPages.currentPage().getParameters();
        if (urlparams.get('id') == null){
            vfMode = 'New';
        } else if (urlparams.get('id') != null & urlparams.get('retURL') != null) {
            vfMode = 'Edit';
        } else if (urlparams.get('id') != null & urlparams.get('retURL') == null){
            vfMode = 'View';
        }
    }
}

Using Salesforce standard modal in a Detail page button - Part 1

Tired of having to use window.open in a detail page button to display a popup? Or using JavaScript libraries to display a modal?
Well, there is a more simple way to display a popup and this without embedding any JavaScript library in the code.

This can be achieved by using Salesforce standard modal and by tweaking the code, many things can be achieved.

To get started, Create a Custom button on the object you want the modal to be used.
Set the properties to:
Display Type: Detail Page Button
Behavior: Execute JavaScript
Content Source: OnClick JavaScript

In the JavaScript code editor, add the following code and change the variables inside it accordingly to your specification.

Here is the final result:

Check out part 2. We shall discuss how to integrate Visualforce pages inside the modal.

Cheers! :)

(function() { var width = 700; var height = 200; var title = "Dialog title here"; var box = new SimpleDialog("salesforce" + Math.random(), true); box.setTitle(title); box.displayX = true; box.isMovable = false; box.createDialog(); box.setWidth(width); // set your html content here box.setContentInnerHTML( "<h2>Your html content here</h2>" ); //set the height of the modal box.dialog.children[1].style.height = height + 'px'; box.show(); //if displayX is set to true, then override standard close event by this code box.dialog.getElementsByClassName('dialogClose')[0].onclick = function() { box.hide(); // you can add code to reload the page or redirect to another page }; //optional : add this to close the modal onclick of the overlay background box.background.addEventListener('click', function() { box.hide(); }); })();

Using Salesforce standard modal in a Detail page button - Part 2

As illustrated in Part 1, we looked at opening the modal which come with Salesforce and changing its content.

But most of the time, you want the content in the JavaScript detail button to be dynamic. So instead of writing a lot of JavaScript code and encoding the HTML content into a string to then pass it to the setContentInnerHTML function, we could display a Visualforce page.

You just need to modify it as below and change the source (src attribute).

box.setContentInnerHTML(
  '<iframe src="/apex/modaldemo" style="border:none;" width="100%" height="'+ (height - 30)+'px" />'
);

We have now added a Visualforce page, which is kind of awesome. But what if we want to some processing and at the end close the modal from within the Visualforce page?

Well, this is not possible since you don't have access to the modal instance in the Visualforce page.
Fortunately we do have an alternative way which is the use of postMessage.

How does it work? 
First we need to the Visualforce page to send the message once the action is done. Which can be a click on button, a progress bar reaching 100%, an action function which has completed or many other scenarios. 

You just need to execute the following JavaScript code:

window.parent.postMessage('close', '*');

Now we need to capture this message from the JavaScript on the button and then close the modal. Here is how we do it. 

window.addEventListener('message', function(event){
  if (event.data === 'close'){
    box.hide();
  }
});

Below is the full implementation: 


Hope you like it. :)