SalesForce rest api on Standard page

In Visual Force, it is very straightforward to use server side logic (Apex Classes) using Controller. However, when working on standard page - e.g. custom button java script, we didn't have access to the controller. E.g. below we have access to object and JavaScript block. SalesForce executes this java script using JavaScript's eval function.

If we need data from server side, it is a lot easier to get that using SalesForce Rest API. We also don't need to worry about security as we can get OAUTH Bearer token using {!$Api.Session_ID}').

• Create Apex Class and expose as rest service as below

@RestResource(urlMapping='/MyRestService/*')
global with sharing class MyRestServiceImpl {

    @HttpGet
    global static String getIFrameURL() {
        String salesForceId = RestContext.request.params.get('salesForceId');
        return 'http://www.google.com?id='+salesForceId;
    }
}

• Test is out using workbench.developerforce.com using URL /services/apexrest/MyRestService?salesForceId=1234

• Below is Java Script code to call this service

First load the Jquery using java script as below, it loads jquery, jquery ui and jquery-ui.css

1:  lightBox_click();   
2:    
3:  function lightBox_click() {   
4:   xxLoadJQuery();   
5:  }   
6:    
7:  function xxLoadScript(url, callback) {   
8:   var head = document.getElementsByTagName('head')[0];   
9:   var script = document.createElement('script');   
10:   script.type = 'text/javascript';   
11:   script.src = url;   
12:   script.onreadystatechange = callback;   
13:   script.onload = callback;   
14:   head.appendChild(script);   
15:  }   
16:    
17:  function xxLoadJQuery() {   
18:   xxLoadScript("https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js", xxLoadJQueryUI);   
19:  }   
20:    
21:  function xxLoadJQueryUI() {   
22:   xxLoadScript("https://code.jquery.com/ui/1.11.3/jquery-ui.min.js", xxLoadJQueryCSS);   
23:  }   
24:    
25:  function xxLoadJQueryCSS() {   
26:   $("<link/>", { rel: "stylesheet", type: "text/css", href: "https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css"}).appendTo("head");   
27:   xxLightBox();   
28:  }   

Make a call to Rest Service using Jquery. Line number 11 passes the authorization token.

1:  function xxLightBox() {   
2:   var iFrameURL = xxGetIFramURL();   
3:   alert(' iFrameURL ' + iFrameURL );  
4:  }   
5:    
6:  function xxGetIFramURL() {   
7:   var iFrameURL = '';   
8:   $.ajax({   
9:    url: '/services/apexrest/MyRestService?salesForceId={!Account.Id}',   
10:    beforeSend: function(xhr) {   
11:     xhr.setRequestHeader('Authorization', 'Bearer {!$Api.Session_ID}');   
12:    },   
13:    success: function(result) {   
14:     iFrameURL = result;   
15:    },   
16:    async: false   
17:   });   
18:   return iFrameURL;   
19:  }  

• Test using putting this button on layout: