Creating Model dialog using Visual force

Below is the example to add a model dialog in you visual force page. This dialog can be rendered conditionally. On displaying this dialog, the rest of the visual force page freezes and user cannot click anywhere else on the page. 

Step 1– Create a model component

<apex:component layout="block">
    <apex:attribute name="id" type="string" required="true" description="The id of the dialog"/>
    <apex:attribute name="visible" type="boolean" description="Whether the dialog is visible or not"/>
    <apex:attribute name="bgcolor" type="string" default="white" description="Background color of the dialog"/>
    <apex:attribute name="border" type="string" default="2" description="Width of the dialog border in px"/>
    <apex:attribute name="width" type="string" default="80%" description="Width of the dialog"/>
    <apex:attribute name="height" type="string" default="80%" description="Height of the dialog"/>
    <apex:attribute name="top" type="string" default="10%" description="Top of the dialog"/>
    <apex:attribute name="left" type="string" default="10%" description="Left of the dialog"/>
    <apex:attribute name="overflow" type="string" default="visible" description="Overflow behaviour i.e. scroll/auto/hidden"/>

    <apex:outputPanel >
        <apex:outputPanel styleClass="{!id}dialogBackground" layout="block" rendered="{!visible}" />
        <apex:outputPanel styleClass="{!id}dialogStyle" layout="block" rendered="{!visible}" >      
            <apex:componentBody />
        </apex:outputPanel>
    </apex:outputPanel>
   
    <style type="text/css">
        .{!id}dialogStyle
        {
            background-color: {!bgcolor};
            border-width: {!border}px;
            border-style: solid;
            z-index: 9999;
            padding:10px;
            position: fixed;
            overflow: {!overflow};
            width: {!width};
            height: {!height};
            left: {!left};
            top: {!top};
        }
        .{!id}dialogBackground
        {
            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:component> 

Step 2– Add this component in Visual force page where you want to add a model dialog.

<c:ModalDialog id="myModelDialog" visible="{!displayModelDialog}" border="5" width="80%" height="80%" overflow="auto" left="10%" top="10%">
         <!-- Here you can add body of the model dialog -->
         <h1> This is your model dialog <h1>

</c:ModalDialog>

Date Picker in Visual force

Below is the example to add to a Date Picker on <apex:inputText> for the Date/ String fields in visual force:

<apex:inputText label="Start Date" value="{!dateVariable}" onfocus="DatePicker.pickDate(false, this, false);"/>

Here 'dateVariable' is a variable being referred from controller.

Enhanced list views on a Visualforce page

Enhanced lists are used when you want to display a specific list view for a standard or custom object, rather than having all list views available for the user to select.

Step 1 – Create the list view
Go to the standard or custom object and click on the Create New View next to the Go button. Create the view and click on Save. When the page has reloaded, you will notice in the url a 15 digit id has been created for your view. Copy or make a note of the id.

 

 

 

 

 

 

 

 

 

 

Step 2 – Add code to your visualforce page
Add the following bit of code to your visualforce page, replacing the listid with your id:

<apex:enhancedlist type=”Lead” height=”730″ customizable=”false” rowsPerPage=”25″ Listid=”00B30000007wesH” />

Change customizable to equal true if you want your users to be able to edit the filters on the view. Once saved, you should find your visualforce page displays an enhanced list similar in appearance to the image below.

Courtesy - http://salesforcetutorials.wordpress.com/2012/02/01/enhanced-list-views-on-a-visualforce-page/