Category Archives: JavaScript

Insert Records in Salesforce by using JavaScript

In this article I’ll demonstrate how to insert record in Salesforce object by using javascript, in VF page without any standard or custom controller or by apex class.

By using AJAX Toolkit we can do this task easily. There are two types of AJAX Toolkit one is synchronous and another one is asynchronous call.

Here is a simple example of data insert using Javascript in Visualforce page. In below example I’m using synchronous call.
These are the steps to insert data using Javascript:

  1. Connecting to the AJAX Toolkit(By using login methods or getting Session_ID).
  2. Embedding the API methods in JavaScript.
  3. Processing the results.

Sample Code:

<apex:page id="pg">
    <script src="/soap/ajax/20.0/connection.js" type="text/javascript"></script>
	<script>
		function insertAcc(){

			// Getting Session ID.
			sforce.connection.sessionId = "{!$Api.Session_ID}";

			//Creating New Account Record.
			var account = new sforce.SObject("Account");

			//Getting Account Name from inputText.
			account.Name = document.getElementById("pg:frm:pb:pbs:pbsi:txtName").value;

			//Create method 
			var result = sforce.connection.create([account]);

			//Getting result 
			if (result[0].getBoolean("success")) {
				alert("New Account is created with id " + result[0].id);
			}
			else {
				alert("failed to create new Account " + result[0]);
			}
		}
	</script>
	<apex:form id="frm">
		<apex:pageBlock title="Insert Account" tabStyle="Account" id="pb">
			<apex:pageBlockSection title="Account Name" columns="1" id="pbs">
				<apex:pageBlockSectionItem id="pbsi">
					<apex:outputLabel value="Name" />
					<apex:inputText title="Name" id="txtName" />
				</apex:pageBlockSectionItem>
			</apex:pageBlockSection> 
			<apex:pageBlockButtons>
				<apex:commandButton onclick="return insertAcc();" value="Save"/>
			</apex:pageBlockButtons>
		</apex:pageBlock>
	</apex:form>
</apex:page>

Select All Checkbox Using Javascript in Visualforce Page

Controller:

public with sharing class Sample { 

    public List<AccountWrapper> accountWrapperList {get; set;}
    
    public Sample (){
        if(accountWrapperList == null) {
            accountWrapperList = new List<AccountWrapper>();
            for(Account a: [SELECT Id, Name From Account Limit 10]) {
                accountWrapperList.add(new AccountWrapper(a));
            }
        }
    }
     
    public class AccountWrapper {
        public Account acc {get; set;}
        public Boolean isSelected{get; set;}
 
        public AccountWrapper(Account a) {
            acc = a;
            isSelected = false;
        }
    }  
    
}

Visualforce Page:

<apex:page controller="Sample" sidebar="false" showHeader="false">
    <script type="text/javascript">
        function selectAllCheckboxes(obj,InputID){
            var inputCheckBox = document.getElementsByTagName("input");    
            for(var i=0; i<inputCheckBox.length; i++){          
                if(inputCheckBox[i].id.indexOf(InputID)!=-1){                                     
                    inputCheckBox[i].checked = obj.checked;
                }
            }
        }
    </script>
    <apex:form >
        <apex:pageBlock >
            <apex:pageBlockTable value="{!accountWrapperList}" var="a" id="table" title="All Accounts">
                <apex:column >
                    <apex:facet name="header">
                        <apex:inputCheckbox onclick="selectAllCheckboxes(this,'inputId')"/>
                    </apex:facet>
                    <apex:inputCheckbox value="{!a.isSelected}" id="inputId"/>
                </apex:column>
                <apex:column value="{!a.acc.Name}" />
            </apex:pageBlockTable>
        </apex:pageBlock>
    </apex:form>
</apex:page>

Output:

Custom Clone Button in Salesforce

Salesforce provides Clone functionality for some standard objects(Standard Clone button), However some standard objects do not have this button. For this purpose of cloning we will need to create custom button that will perform the functionality of cloning.

This cloning functionality can be achieved by writing a javascript for this custom button.

As an example lets create a custom button “Clone” on Account object that will clone the record.

Simply override your custom button “Clone” with the following javascript and you will have your custom Clone button that functions exactly like standard clone button

{!REQUIRESCRIPT("/soap/ajax/22.0/connection.js")} 
window.parent.location.href="/{!Account.Id}/e?&clone=1&retURL=/{!Account.Id}";

Note: retUrl specifies the location where you want to be on press of back button.

Calling Visualforce Page From Javascript

Visualforce page that calls another Visualforce page upon confirming from javascript.

Visualforce Page:

<apex:page standardController="Account">
    <apex:form>
        <apex:pageBlock>
            <apex:commandButton value="Open VF Page" onclick="OpenVFPage()"/>
        </apex:pageBlock>
    
    <script>
      function OpenVFPage(){
        var isConfirm = confirm('Do you want to open a new Visualforce Page?');
        if(isConfirm)
           window.open('/apex/YourVisualForcePage');
      }
     </script>
    </apex:form>
</apex:page>

Similarly, if you want to open a visualforce page from a custom button using javascript then use following piece of code.

{!REQUIRESCRIPT("/soap/ajax/22.0/connection.js")} 
var isConfirm = confirm('Do you want to open new Visualforce Page?');
if(isConfirm){
	window.parent.location.href="/apex/YourVisualforcePage";
}

Passing Variables from Apex to JavaScript

Sometimes we need to pass variables from apex to javascript. Here is an example to pass variables from apex to javascript. In below example I’m invoking one apex method using action function. In the apex method I’m defining the apex variable value. On complete of action function I’m invoking one javascript method and using the apex variable in the javascript method.

Visualforce Page:

<apex:page controller="SampleController">  
    <apex:form>
        <apex:outputPanel id="jspanel"> 
            <script>  
            function onCompleteMethod() {
                alert('{!message}')
            }
            </script>
        </apex:outputPanel>
        <apex:actionFunction name="afHelloWorld" action="{!HelloWorld}" rerender="jspanel"/>
        <apex:commandButton onclick="afHelloWorld();" oncomplete="onCompleteMethod()" value="Click me"/>
    </apex:form>
</apex:page>

Apex Class:

public class SampleController {
    
    public String message {get;set;}
    
    public pageReference HelloWorld() {
        message = 'Hello World!!';
        return null;
    }   
}