Hello Friends, In this tutorial, I am going to present a working example that shows you, how you can pull a list of Account records in a popup window when the user checked the checkbox.
After completing this tutorial, you’ll able to:
- Show salesforce record list in a popup window.
- Show popup on checkbox checked event.
Step 1: Login to your Salesforce Org. and open developer console.
Step 2: Navigate to File | New | Apex Class and create an apex class called PopupInVFpageController and replace the following code.
PopupInVFpageController.apxc
public with sharing class PopupInVFpageController { public boolean checkBoxVal{get;set;} public boolean displayPopup{get;set;} public PageReference closePopup() { displayPopup = false; return null; } public pageReference method(){ if(checkBoxVal==true) displayPopup = true; return null; } }Step 3: Navigate to File | New | Visualforce Page and create a new Visualforce Page called PopUpWindowVFPage and replace the following markup.
PopUpWindowVFPage.vfp
<style> .custPopup{ background: #fff ; border-width: 2px; border-style:inset; z-index: 9999; left: 250px; padding:10px; position: absolute; width: 650px; top:50px; } .popupBackground{ background-color:black; opacity: 0.20; filter: alpha(opacity = 20); position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 9998; } </style> <apex:outputPanel id="tstpopup" > <apex:outputPanel styleClass="popupBackground" layout="block" rendered="{!displayPopup==true}"/> <apex:outputPanel styleClass="custPopup" layout="block" rendered="{!displayPopup==true}" > <apex:include pageName="popup"/> <apex:form > <apex:commandButton value="close" action="{!closePopup}"/> </apex:form> </apex:outputPanel> </apex:outputPanel> </apex:page>
Output:
See also:
- Print number in text format using Visualforce and Apex
- Search and delete accounts using AngularJS in Visualforce
- Delete checked value in Pagination in Visualforce Page
Conclusion:
Hope you like this tutorial, for any query or suggestions please feel free to comment.
Thank you.
0 Comments
Post a Comment