Using Salesforce standard modal in a Detail page button

Javascript button to open an iframe using Salesforce standard modal.


Create a detail page button, set it to javascript and add the following code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

(function() { var box = new SimpleDialog("spoon" + Math.random(), true); box.setTitle("Dialog title"); box.displayX = true; box.isMovable = false; box.createDialog(); box.setWidth(750); box.setContentInnerHTML( "<iframe src='REPLACE WITH YOUR URL' frameborder='0' width='100%' height='380px' />" ); //set the height of the modal box.dialog.children[1].style.height = '400px'; box.show(); //if displayX is true, then override standard close event by this code box.dialog.getElementsByClassName('dialogClose')[0].onclick = function() { box.hide(); }; //optional : add this to close the modal onclick of the overlay background box.background.addEventListener('click', function() { box.hide(); }); })();

Output:

DataTables in Visualforce Part 1

Introduction

One day a client asked us to display the Opportunities of an Account. We thought a nice Visualforce PageBlockTable would do the job. Then the client added functionalities like:

• Pagination (as there would be around 100 records),
• Sorting of columns,
• Filtering of opportunities.

Instead of scratching our head thinking how to do this in Visualforce, we laughed out loud and told the client that the solution will be available in 5 minutes :)

DataTables our Saviour

DataTables is a jQuery plugin which we will use to make the dream of our client come true. DataTables focuses on enhancing the user-experience on standard HTML tables.

Code

Below is a small code used to generate our table of Opportunities. Notice how we import our scripts and css for DataTables; you should normally put them in a Static Resource. At line 15, we called the dataTable function to initialise our table.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

<apex:page standardController="Account"> <apex:includescript value="//code.jquery.com/jquery-1.11.1.min.js" / > <apex:includescript value="//cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js" /> <apex:stylesheet value="//cdn.datatables.net/1.10.4/css/jquery.dataTables.css" /> <apex:dataTable value="{!Account.Opportunities}" var="opp" styleClass="opp-table"> <apex:column value="{!opp.Name}" headerValue="Name"/> <apex:column value="{!opp.StageName}" headerValue="Stage"/> <apex:column value="{!opp.Amount}" headerValue="Amount"/> <apex:column value="{!opp.CloseDate}" headerValue="Close Date"/> </apex:dataTable> <script> $(function(){ $('table.opp-table').dataTable(); }); </script> </apex:page>

Result

1. Pagination controls
2. Pagination size controls
3. Sorting by clicking on column header. (currently sorted on Amount)
4. Instant filtering capability over whole table.

Final words

This is a basic example of using DataTables in Visualforce. Part 2 coming soon...

Cheers & Happy Coding !!

Gulshan.

Apex Map into JSON for use in Javascript / jQuery

Introduction

Ever wondered how to use your apex map into javascript / jQuery for your VisualForce development?
Please find below a way to do it.

Note: jQuery is required in this tutorial.

Apex Class (Visualforce Controller)

Suppose we populate a map with key Id and value as a list of Ids, say mapParentIdListChildrenId in our controller.
We then declare a getter to access this map as JSON in our VF page.

 public Map <Id, List <Id>> mapParentIdListChildrenId{get;set;}
 public String mapParentChildrenJSON {get{return JSON.serialize(mapParentIdListChildrenId);}}

Visualforce Page

The JSON String mapParentChildrenJSON is converted into javascript object as shown below:

 <script> 
  $(function() {
     var $mapParentChildren = jQuery.parseJSON('{!JSENCODE(mapParentChildrenJSON)}');
     console.log($mapParentChildren);
     // var value = $mapParentChildren[key]; // can be used to access values of the map
  }
 </script>

Use the Console of your browser to inspect the elements in your map ;)

Cheers & Happy Coding !!
Gulshan.

Padding Text in Salesforce / Visualforce

Introduction

Last time I got a request from a client to limit a number to 6 digits and if the number has less than 6 digits, prepend 0 in front of it.

Example: 7007 must become 007007

I had to do this in 

1. Javascript (for display in a disabled textbox) , 
2. Visualforce (for display in a PDF), and 
3. Apex (to send to a Web Service).

Javascript

For the Javascript version, I wrote a small function that would do the left padding of zeroes. This function is called when the page is loaded.

 function addZeroes(eId, size){  
      var elem = document.getElementById(eId)  
      while(elem.value.length < size)  
           elem.value = "0" + elem.value  
 }

The function takes the element Id and size as parameter to limit left padding. In my case the element was an input of type text:

 <input id="agent_number" type="text" value="{!$User.Agent__c}" disabled="true"/>  

The addZeroes() function was called as follows in a <script> tag after the form was loaded.

 <script>  
      addZeroes("agent_number", 6);  
 </script>  

Visualforce

The visualforce solution was hard to find but very simple to implement. I used the formula LPAD.

 {!LPAD($User.Agent_No__c,6,'0')}  

Apex

I could not find a solution that resembles the visualforce LPAD in Apex. I used two methods from the String Class to achieve the same result.

 String agentNum = '7007';  
 String agentNumber = agentNum.leftPad(6).replace(' ', '0');  
 system.debug('## agentNumber : ' + agentNumber);  

leftPad() method is used to pad spaces in front without exceeding the length parameter.
replace() method is used to replace all the spaces with 0.

Thnx & Cheers,
Gulshan.