Simple Loader image for Visualforce Page.

Hello guys,

I am gonna show you simple way to pop up loader image i.e status image for loading purpose using CSS and javascript function.

Using simple html div and Javascript you can create your status loader.

Below i am gonna show you simple html tag for it. you can call javascript function on onclick method to show loader and hide it on oncomplete.

ADD BELOW STYLE TO YOUR VF PAGE

#filter{ 
      display:none;
      background-image: url({!URLFOR($Resource.Static_Resource_Main,'Static_Resource_Main/loading32.gif')});
      z-index:10000;
      position:fixed;
      top:0%;left:0%;
      width:100%;
      height:100%;
      background-repeat:no-repeat;
      background-position:center;
      background-color: #ffffff;
      opacity:0.6;
      filter:alpha(opacity=50);
} 

Call startProces method when you call action( Controller function or any function after which you want to show loading image).

 

function startProcess()
{
      $('#filter').show();
}

function endProcess ()
{
      $('#filter').hide();
}   

Add below Div tag at the start of body tag or form.

<center>
    <div id="filter"></div>
</center>                        

startProcess will add display: block css to div.
endProcess  will hide the div.

Its just awsomeness of css.

Hope you will like it.
Enjoy coding....

Custom Picklist lookup using javascript in Visual page

In this post I'm gonna show you how to create simple custom picklist lookup in Visual page using javascript.

We will use window eventlistner to get data from child window open by parent window.

Here is snippet of my simple vf page.

  
<apex:page >
    <script>
        function open_pop_up(idx, field, sObj){
            var child = window.open('/apex/picklistLookup?idx='+idx+'&field='+field+
'&sObj='+sObj+'', '_blank', 
'toolbar=yes,scrollbars=yes,resizable=yes,top=500,left=500,width=400,height=400')
            console.log('==> Child: ' + child);
        }
        
        var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
        var eventer = window[eventMethod];
        var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
    
        //Listen to message from child window
        eventer(messageEvent,function(e) {
            console.log('parent received message!: ',e.data);
            var dataArr = e.data.split(':'); 
            var elmtId = e.data.substring(0, e.data.lastIndexOf(':'));
            var datavalue = e.data.substring(e.data.lastIndexOf(':') + 1,e.data.length);
            document.getElementById(elmtId).value = datavalue;
        },false);  
        
    </script>
    
    <input id="testId" value="" onclick="open_pop_up('testId','CustomerPriority__c',
'Account');"/>
</apex:page>

Let me explain the code.

when we click on input it will open popup lookup window.
Here i have use my custom picklist field CustomerPriority__c of Account Object for test data.

Now new vf page for lookup popup window.

  
<apex:page controller="PicklistLookupCon" showHeader="false">

    <apex:variable value="{!0}" var="rowNum"/>
    
    <table>
        <tr>  
            <td></td>  
            <td>
                <input type="button" value="Insert Selected" onclick="InsertSelected()" class="btn"/>

            </td>
        </tr>
        <apex:repeat value="{!picklistValues}" var="plv">
            <tr>
                <td>
                    <input type="checkbox" onclick="selectValue('{!rowNum}', this.checked, '{!plv}')"/>
                </td>
                <td>{!plv}</td>
            </tr>
            <apex:variable value="{!rowNum+1}" var="rowNum"/>             
        </apex:repeat>            
    </table>
    
    <script type="text/javascript">
        var arrValue  = new Array();
               
        function selectValue(id, isChecked, value){

            if(isChecked == true){
                arrValue[arrValue.length] = value;
            }else{
                var index = arrValue.indexOf(value);
                arrValue.splice(index,1);
           }  
        }
           
        function InsertSelected(){
            console.log(window.parent.opener);
            var win = window.parent.opener;
            var dataStr= '';
            
            for(var k=0;k<arrValue.length;k++){
                if(k==0) dataStr = arrValue[k];
                else dataStr +=','+arrValue[k];
            }
            win.postMessage('{!$CurrentPage.parameters.idx}:'+dataStr, window.parent.opener.location.href); 
            window.parent.close();
        }
  </script> 
</apex:page>

controller:

public without sharing class PicklistLookupCon {

    string sObj = Apexpages.currentpage().getParameters().get('sObj');
    string field = Apexpages.currentpage().getParameters().get('field');

    public picklistLookupCon(){
    
    }
        
    public List picklistValues{
      get{
          if(picklistValues!=null)
              return picklistValues;
          else{
              picklistValues = new List();
              
              Map gd = Schema.getGlobalDescribe(); 
              Schema.SObjectType ctype = gd.get(sObj);
              Map fmap = ctype.getDescribe().fields.getMap();
              Schema.DescribeFieldResult fieldResult = fmap.get(field).getDescribe();
              List ple = fieldResult.getPicklistValues();   
              
              for( Schema.PicklistEntry f : ple){
                  picklistValues.add(f.getValue());
             }
          }
          return picklistValues;
      }
      set;
    }
    
 }

That's it.

Yepppieee you done it.

Simple Status Loader with simple Html salesforce

A simple status loader image can be easily done using simple html div tag.

Here is code snippet for it.

<div id="loading" style="display:none;">
  <div style="width: 100%; height:100%; background:#000; opacity: 0.4; top:0px; left:0px; 

      position: fixed; z-index:1000000;"></div>

     <div class="dv_load" style="position:fixed;top:40%;left:50%;z-index:1000000">
        <img src="/img/loading24.gif" style="vertical-align:middle;" />
        <span>Loading...</span>
      </div>
</div>

you can load is just by changing its display property that is display:none to block.

function startProcess() {
   document.getElementById("loading").style.display = 'block';
}
    
function endProcess() {
    document.getElementById("loading").style.display = 'none';
}

function startprocess for loading image and stopprocess for stop i.e to hide.

If have any questions, you can as in comment.

Thanks.
Have happy coding.

Resize an image before upload using JQuery.

function handlePhoto(evt)

{

 var file = evt.target.files[0];

 var FR = new FileReader();           

 var img = new Image();

 var can = document.createElement("canvas");

 var ctx = can.getContext('2d');

 

 FR.onload = function(e) {

  img.src = = e.target.result;

  img.onload = function() {      

   var ctx = can.getContext('2d');

   //Set canvas 

   var max_size = 750,// pull max size from a site config

   width = this.width,

   height = this.height;

   

   if (width > height) {

    if (width > max_size) {

     height *= max_size / width;

     width = max_size;

    }

   } else {

    if (height > max_size) {

     width *= max_size / height;

     height = max_size;

    }

   }

   can.width = width;

   can.height = height;

   ctx.drawImage(this, 0, 0,width,height);




   var dataURI = can.toDataURL(); 

   dataURI = dataURI.replace(/^data:image\/(png|jpg);base64,/, "");

          console.log('New Image source: ' + dataURI);                         

  }

 };       

 FR.readAsDataURL( this.files[0] );

}

                       

Master Check Box To select all records in Table VisualForce Page.

Provide a master checkbox before all record rows means if user selects that all records will be selected.

- Create VisualForce Component for master check Box.

Component >>

<apex:component >

<script>
function cvCheckAllOrNone(allOrNoneCheckbox) {

    // Find parent table
    var container = allOrNoneCheckbox;
    while (container.tagName != "TABLE") {
        container = container.parentNode;
    }

    // Switch all checkboxes
    var inputs = container.getElementsByTagName("input");
    var checked = allOrNoneCheckbox.checked;
    for (var i = 0; i < inputs.length; i++) { 
        var input = inputs.item(i);
        if (input.type == "checkbox") {
            if (input != allOrNoneCheckbox) {
                input.checked = checked;
            }
        }
    }
}
</script>

<apex:inputCheckbox onclick="cvCheckAllOrNone(this)" title="Toggle All Rows"/>

</apex:component>

You can add a checkbox to the header row of your checkbox column that uses it to check all or none of the checkboxes:

In visualforce page add the component.

<apex:column >
    <apex:facet name="header">
        <c:CheckAllOrNone />
    </apex:facet>
    <apex:inputCheckbox value="YOUrCheckBoxValue"/>
</apex:column>


As this runs at the client side it is nice and quick.