Category Archives: JavaScript

Generic Loading Component For Visualforce Pages

Visualforce Page Component:

<apex:component>
    <apex:actionStatus onstart="startLoading();" onstop="stopLoading();" id="loadStatus" />
    <style>
        .overlay {
            display: none;
            height: 100%;
            left: 0;
            position: fixed;
            top: 0;
            opacity: 0.3;
            -moz-opacity: 0.3;
            width: 100%;
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
            filter: alpha(opacity=30);
            background: #000;
            -khtml-opacity: 0.3;
            z-index: 1000;
        }

        .loader {
            background: url('/img/loading32.gif') scroll no-repeat 0 0;
            width: 32px;
            height: 32px;
            position: absolute;
            left: 50%;
        }
    </style>

    <div id="load_scrl" class="loadingBox loader" style="display:none"> </div>
    <div class="loadingBox overlay"> </div>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">

        function startLoading() {
            $('#load_scrl').css('top', $(document).scrollTop() + 200);
            $('.loadingBox').show();
        }

        function stopLoading() {
            $('.loadingBox').hide();
        }
    </script>
</apex:component>

Now add this component in your Visualforce Page:

<c:LoadingIcon/>

Use the “Status” attribute with the value “loadStatus” on the command button as follows:

<apex:commandButton action="{!save}" value="Save" status="loadStatus" rerender="myForm"/>

Use in Javascript:

startLoading(); //Start Loading
stopLoading() ; //Stop Loading

Javascript Function For Validation on Number,Letters and Currency Input Fields

<script type="text/javascript">
    // This function is being used for providing different validation on your text box as per your need
    function ValidatedField(e, allow) {

        var AllowableCharacters = '';

        if (allow == 'Letters') {
            AllowableCharacters = ' ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
        }
        if (allow == 'Numbers') {
            AllowableCharacters = '1234567890';
        }
        if (allow == 'NameCharacters') {
            AllowableCharacters = ' ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz-.\'';
        }
        if (allow == 'NameCharactersAndNumbers') {
            AllowableCharacters = '1234567890 ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz-\'';
        }
        if (allow == 'Currency') {
            AllowableCharacters = '1234567890.';
        }

        var k = document.all ? parseInt(e.keyCode) : parseInt(e.which);

        if (k != 13 && k != 8 && k != 0) {
            if ((e.ctrlKey == false) && (e.altKey == false)) {
                return (AllowableCharacters.indexOf(String.fromCharCode(k)) != -1);
            } else {
                return true;
            }
        } else {
            return true;
        }
    }
</script>

Custom Label in Salesforce

Custom labels enable developers to create multilingual applications by automatically presenting information (for example, help text or error messages) in a user’s native language. Custom labels are custom text values that can be accessed from Apex classes, Visualforce pages, or Lightning components. The values can be translated into any language Salesforce supports.

We can create up to 5,000 custom labels for your organization, and they can be up to 1,000 characters in length.

Setup | App Setup | Custom Labels | Click ‘New Custom Label’ Button

Fill in the details and Click ‘Save’ button.

 

Custom Label in Visualforce page:
$Label.CustomLabel for Visualforce page.

<apex:page standardController="Account">
	
<h1>Example for Custom labels</h1>

	<apex:outputLabel value="{!$Label.Message}"/>
</apex:page>

 

Custom Label in Apex Class:
System.Label.Label_name for apex class

String msg = System.Label.Message; 

 

Custom Label in Lightning Component:
$Label.c.labelName for the default namespace.
$Label.namespace.labelName if your org has a namespace, or to access a label in a managed package.

<aura:component implements="flexipage:availableForAllPageTypes">
    
<div onclick="{!c.clickLabel}">
        <ui:outputText value="{!$Label.c.Message}" />
    </div>

</aura:component>

 

Custom Label in Javascript:
$A.get(“$Label.c.labelName”) for the default namespace.
$A.get(“$Label.namespace.labelName”) if your org has a namespace, or to access a label in a managed package.

({
    clickLabel : function(component, event, helper) {
        var label = $A.get("$Label.c.Message");
        alert(label);
    }
})

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>

Custom Label in JavaScript File

We use {!$Label.CustomLabelName}, when we call custom label in Visualforce page JavaScript function. But if we need to access custom labels in JavaScript file in static resource, then here is the way to get the custom label value.

Load the custom label in Visualforce Page before loading the static resource JavaScript file.

<script>
    window.$Label = window.$Label || {};
    $Label.MyCustomLable1 = '{!JSENCODE($Label.MyCustomLable1)}';
    $Label.MyCustomLable2 = '{!JSENCODE($Label.MyCustomLable2)}';
</script>

Use in JavaScript file.

console.log($Label.MyCustomLable1);
alert($Label.MyCustomLable1);