Salesforce World - By Chamil

What if I want to make a summary pop-up window when a user hovers over a link in a visualforce page. This Feature is easy in standard salesforce pages, mostly because it happens automatically. But not in visualforce pages. I have seen most of example for pop-up in salesforce were created using the output panels with some embedded styles.   Here I'm posting a pop-up example which show the details of a partuclar record on a mouseover using the Hover links similar to those used in standard Salesforce links.  /*visualforce page*/ <apex:page controller="PopupTest"> <apex:form > <apex:repeat value="{!accounts}" var="acc"> <br/> <a href="/{!acc.Id}" id="{!acc.Id}" onblur="LookupHoverDetail.getHover('{!acc.Id}').hide();" onfocus="LookupHoverDetail.getHover('{!acc.Id}', '/{!acc.Id}/m?retURL=%2F{!acc.Id}&isAjaxRequest=1').show(...

In visualforce, there is a method for passing parameters from visualforce page to controller using javascript and actionFunction. Here is the example; /*JavaScript*/ <script type="text/javascript"> function doSave(date) { paraFunction(document.getElementById(date).value); } </script> /*Action Function*/ <apex:actionFunction name="paraFunction" action="{!saveInterviewDate}" rerender="view"> <apex:param id="aname" name="interviewDate" value="" /> </apex:actionFunction> /*Call the javaScript from here*/ <apex:commandLink onclick="doSave('{!$Component.interviewDate}');"> <apex:commandButton value="Save"/> </apex:commandLink> /*get the parameter in controller*/ String interviewdate=Apexpages.currentPage().getParameters().get('interviewDate');

Javascript is one of key browser technology on Visualforce pages. Javascript provides the framework for communication between other Javascript objects, HTML elements and visualforce controller. This example will explain how can we use javascripts in visualforce pages. <apex:page> <script> function changeFont(input, textid) { if(input.checked) document.getElementById(textid).style.fontWeight = "bold"; else document.getElementById(textid).style.fontWeight = "normal"; } </script> <apex:outputPanel layout="block"> <label for="checkbox">Click this box to change text font: </label> <input id="checkbox" type="checkbox" onclick="changeFont(this,'{!$Component.thePanel}');"/> </apex:outputPanel> <apex:outputPanel id="thePanel" layout="block">Change me! </apex:outputPanel> </apex:page> '{!$Component.idName}' : This is the way...

Inline editing in Visualforce was introduced with the Spring'11. It has the ability to turn on inline editing within Visualforce, a handy bit of user friendliness which has been availability in the standard application interfaces for some time. Enabling inline editing is simple. My example is related with the Contact Standard object. But this feature will work with custom objects as well. <apex:page standardController="Contact"> <apex:form > <apex:pageBlock mode="inlineEdit"> <apex:pageBlockButtons > <apex:commandButton action="{!edit}" id="editButton" value="Edit"/> <apex:commandButton action="{!save}" id="saveButton" value="Save"/> <apex:commandButton onclick="resetInlineEdit()" id="cancelButton" value="Cancel"/> </apex:pageBlockButtons> <apex:pageBlockSection > <apex:outputField value="{!cont...