Monday, May 30, 2016

Difference between Salesforce Lightning Design System(SLDS) and Lightning Components Framework

Difference between Salesforce Lightning Design System(SLDS)  and Lightning Components Framework 

Salesforce Lightning Design System 

It is a css framework which is used for creating dynamic web apps.   By Using SLDS  We can make our apps responsive and can also provide  Look and feel  similar to the Lightning Experience.

Steps to install the SLDS Unmanaged Packaged:

For using SLDS in our Salesforce org. First We need to install the Latest Salesforce Lightning Design System unmanaged packaged as a static resource zip file.


Unmanaged package :


Log into your Developer Org. Open the Salesforce Lightning Design System in a Separate window.

Go to the Download Section. Click on the latest unmanaged package Now click on Install it. After completing the above steps the package will get installed into your org.   


Benefits of using Salesforce Lightning Design System:



  • By using SLDS it’s easier to build apps which are responsive and also have the look and feel similar to Lightning Experience.
  • It is compatible with multiple browsers like  Google Chrome, Latest Mozilla Firefox,   Latest  Safari Latest Internet Explorer 11 and above .
  • It provides a robust grid system because of which It is easier to build responsive layouts that works elegantly across different screen sizes.
  • The CSS is fully namespaced with the slds- prefix to avoid CSS conflicts.


 Getting started:


Lightning Components Framework

It is built using Open Source Aura Framework. By Using Aura Framework We can build apps completely independent of the Data present in our Salesforce org.

Benefits Of Lightning Components Framework :
  • It provides an out-of-the-box set of components for building apps
  • When we use Lightning Components  Framework We do not need to worry about the optimization of our apps for different devices as  Components take care of that by themselves.
  • It uses the stateful client and stateless server architecture which uses Javascript on client side for managing UI component metadata and Application data.
  • It uses event Driven architecture which  enhances the decoupling  Between components.
  • It supports the latest  browser technology such as HTML5,CSS3.

Use Of Developer Console: The Developer Console provide us the tools which are Used for developing Components and applications. By Using Developer Console We can perform the following functions
  • We need to use File option for either creating or opening the following Lightning Resources:
  • Application
  • ComponentInterface
  • Event
  • We need to use sidebar to create or open client side resource.
  • Component
  • Controller
  • Helper
  • Style
  • Documentation
  • Render
Major difference between two systems.

 Lightning Design System(SLDS)
Lightning Component Framework 
        First of all Salesforce Lightning Design System is a CSS based framework. Used for creating dynamic apps while on the other hand Lightning Components  Framework 

uses aura components for creating the dynamic apps.
While in case of Salesforce Lightning Design System we need to write only one controller which will be a server side controller.
In case of Lightning Components Framework We need to write two Controllers    one for client side and the other one for server side.

Note:The client side Controller that we will write for Lightning Components Framework would be written using java script while the server side controller will be written using apex.      

Salesforce Lightning Design System(SLDS) do need some salesforce data which can be accessed using Javascript Remote Objects. 
By using Lightning Components Framework we can build an app which will be completely independent of salesforce data

Salesforce Lightning Design System are server-side centric
Lightning Components Framework are client-side centric

Equipped for creating dynamic web apps then Salesforce Lightning Design    System.
Because Lightning Components are client side centric therefore they are better.

As mentioned above Lightning Components are client side centric therefore they are more mobile friendly as compared to the Salesforce Lightning Design System(SLDS).
In Salesforce Designing System there is no such concept of Event Driven Programming.
In Lightning Component Framework Event Driven programming such as Javascript and java swing is used for writing helpers which responds to Interface events as they occur
Easy to Develop.
In the Lightning Component Framework we need to create two controllers and also it uses  event driven programming language such as  Javascript therefore it is much for complex as compared to the Salesforce Lightning Design System(SLDS)








Wednesday, May 25, 2016

Shortcut to List Views in Salesforce

Shortcut to List Views in Salesforce


It is a kind of hack in salesorce. if you want to create/view the list views of standard or custom object you can do this with out going object tab.

“Go to a list view of records by shortening the Salesforce ID in the URL to just the first 3 letters of the Salesforce ID.

To get to a list of Opportunity, for example, shorten https://ap2.salesforce.com/00628000007rG73 to https://ap2.salesforce.com/006
here ap2 is my instance name.You can put your instance name there.
This should work with most standard and custom objects.”

Friday, April 15, 2016

Adding custom styles to dependent picklist fields in Visualforce pages.

Hi,

In this article i am trying to give small example of applying custom styles for dependent pick-list. Usually for dependent pick-list custom styles will not apply, So you have to do it forcefully.In this i am using bootstrap to apply the style for input elements.


You have to add the below script items in the vf page with the id's
 

Ex: 

<!-- https://salesforcedevil.wordpress.com/2015/07/16/me/ -->
<apex:page standardController="Account" standardStylesheets="false"  showHeader="false">
<apex:includeScript value="https://code.jquery.com/jquery-1.9.1.js"/>
     <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"/>
     <apex:includeScript value="https://ajax.microsoft.com/ajax/jquery.validate/1.6/jquery.validate.min.js"/>   
    <apex:includeScript value="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"/>   
    <apex:stylesheet value="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
   
   <apex:form >
    
            
 <apex:inputfield value="{!Account.Country__c}" styleClass="form-control"  />
  <div id="dependentlst1">  
 <apex:inputfield value="{!account.State__c}" styleClass="form-control" />
 
 </div>
 <div id="dependentlst2">
 <apex:inputfield value="{!account.City__c}" styleClass="form-control"/>
 </div>
 <script>
// MutationObserver detect changes in the document
var MutationObserver = window.WebKitMutationObserver || window.MutationObserver || window.MozMutationObserver;
var observer = new MutationObserver(function(mutations) {
// If the form-control was removed from the list – re-assign it
if(!$('#dependentlst1 select').first().hasClass('form-control')){
$('#dependentlst1 select').first().addClass('form-control');
}
if(!$('#dependentlst2 select').first().hasClass('form-control')){
$('#dependentlst2 select').first().addClass('form-control');
}
});

var dependentlst1 = document.querySelector('#dependentlst1');
var dependentlst2 = document.querySelector('#dependentlst2');
observer.observe(dependentlst1, {
childList: true,
subtree: true,
attributes: true
});
observer.observe(dependentlst2, {
childList: true,
subtree: true,
attributes: true
});
</script> 

   </apex:form>

</apex:page>





Sources :

Thanks for giving the help .
https://salesforcedevil.wordpress.com/2015/07/16/me/


Sunday, April 3, 2016

JQuery Validator in visualforce pages.

JQuery Validator in visualforce pages.


JQuery Validator :


<apex:page standardController="Bootstrap_Object__c" docType="html-5.0" standardStylesheets="false" sidebar="false" showHeader="false">

<apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" />
     
<apex:includeScript value="https://ajax.microsoft.com/ajax/jquery.validate/1.6/jquery.validate.min.js"/>
     
    <head>
        <title> Jquery Form Validation1</title>
        <style>
         .container{
            margin:0px auto;
            background:#eee;
            width:50%;
            }
           .form-area{
             padding:1%;
             border:1px solid #003;
           
            }
            .form-element{
             margin-bottom:10px;
             padding:10px;
            }
            .form-element input{
             padding:10px;
             width:90%;
            }
            .submit{
             padding:10px;
             background:#900;
             color:#fff;
             border-width:opx;
             margin-left:40%;
            }
            .error{
              font-weight:bold;
              color:#900;
            
            }
            td.a {
            width: 30%;           
             padding: 15px;
            text-align: left;
           //  border: 1px solid black;
            }
            
            td.b {
            width: 50%;
             padding: 5px;
            text-align: left;
          //   border: 1px solid black;
            }
            table {
            width: 80%;
            
            }

            
       
        </style>
        
    </head>
    <body>
        <div class="container">
            <div class="form-area">
                   <apex:form id="CustomerForm">
                    <div class="form-element">
                     <table>
                      <tr>
                       <td class="a"> Customer Name </td>
                       <td class="b" > <apex:inputField value="{!Bootstrap_Object__c.name}"  html-placeHolder="Customer Name" id="customerName" /></td>
                      </tr>
                     
                      <tr>
                       <td class="a"> Age </td>
                       <td class="b" > <apex:inputField value="{!Bootstrap_Object__c.Age__c}"  html-placeHolder="Customer Age" id="Age__c"  label="Age"/></td>
                      </tr>
                      
                      <tr>
                       <td class="a"> Email </td>
                       <td class="b" > <apex:inputField value="{!Bootstrap_Object__c.Contact_Emai__c}"  html-placeHolder="Customer Email" id="Contact_Emai__c" /></td>
                      </tr>
                      
                       <tr>
                       <td class="a"> Phone Number</td>
                       <td class="b" > <apex:inputField value="{!Bootstrap_Object__c.Phone_Number__c}"  html-placeHolder="Phone Number" id="Phone_Number__c" /></td>
                      </tr>
                      
                     
                     </table>      
                           
                   
                    
                 <!--   <label for="Contact_Emai__c" class="error" id="Contact_Emai_error"></label> -->
                    </div>
                    <apex:commandButton action="{!save}" value="Save Form" id="submit" styleClass="submit" />
                    
                    </apex:form>
            </div>
           
            
        </div>
    <script type="text/javascript"> 
       
           
         $('[id$=CustomerForm]').validate();             
              errorclass: "myerrorclass";
              
               $('[id$=customerName]').rules("add",{
                required: true,
                minlength: 5,
                maxlength: 50,               
                messages:{
                  required:"<br/>Required Customer Name",
                  minlength: jQuery.validator.format("<br/>Please etner at least 5 characters are necessary"),
               }                           
            }); 
            
           
            $('[id$=Age__c]').rules("add",{
                required: true,
                minlength: 2,
                maxlength: 2,  
               range: [18, 99],             
                messages:{
                  required:"<br/>Required input",
                  minlength: jQuery.validator.format("<br/>Please, at least 2 characters are necessary"),
               }                           
            }); 
            
              $('[id$=Contact_Emai__c]').rules("add",{
                required: true,
               email:true,              
                messages:{
                  required:"<br/>Required Email",
                  email: jQuery.validator.format("<br/>Please enter valid email id"),
               }                           
            }); 
            
            $('[id$=Phone_Number__c]').rules("add",{
               required: true,                           
                messages:{
                  required:"<br/>Required Phone",                 
               }                           
            }); 
      
    </script>
    </body>
</apex:page>




Example 2:

Validation with error message.


<apex:page standardController="Contact">
  <apex:includescript value="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" />
  <apex:includescript value="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js" />

  <apex:form id="createform">
    <apex:sectionHeader title="Contact Create" />
    <apex:pageBlock title="Detail" id="pblock">
      <apex:pageBlockButtons >
        <apex:commandButton value="Save" action="{!save}" /> 
        <apex:commandButton value="Cancel" action="{!cancel}" immediate="true" />
      </apex:pageBlockButtons>
      <apex:pageBlockSection columns="1" id="pbsection">
        <apex:inputField value="{!Contact.Salutation}" />
        <apex:inputField value="{!Contact.FirstName}" />
        <apex:inputField value="{!Contact.LastName}" />
        <apex:inputField id="contactemail" value="{!Contact.Email}" />
        <apex:inputField id="contactphone" value="{!Contact.Phone}" />
      </apex:pageBlockSection>
    </apex:pageBlock>
  </apex:form>
  <script>
  $ = jQuery.noConflict();

    $(document).ready(function(){
    /* configure the validator  - set the email element to required if the phone is empty and vice versa */
        var validator = $('[id="{!$Component.createform}"]').validate({
                    debug: true,
                    rules: {
                        '{!$Component.createform.pblock.pbsection.contactemail}': {
                                required: function() {
                                    return $('[id="{!$Component.createform.pblock.pbsection.contactphone}"]').val()=='';
                                }
                        },  // email
                        '{!$Component.createform.pblock.pbsection.contactphone}': {
                                required: function() {
                                    return $('[id="{!$Component.createform.pblock.pbsection.contactemail}"]').val()=='';
                                }
                        },  // phone
                    },  // rules
                    messages: {
                        '{!$Component.createform.pblock.pbsection.contactemail}':"One of Email or Phone must be provided",
                        '{!$Component.createform.pblock.pbsection.contactphone}':"One of Phone or Email must be provided",
                    } // messages
            }
    )});
  </script>
</apex:page>





Example 3 :

<apex:page standardcontroller="Account" showHeader="false" standardStylesheets="false">
    <apex:stylesheet value="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
    <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" />
  
    <apex:includeScript value="https://ajax.microsoft.com/ajax/jquery.validate/1.6/jquery.validate.min.js"/>
    <apex:includeScript value="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"/>
      <script type="text/javascript"> 
        $ = jQuery.noConflict();
        $(document).ready(function() {
        $('[id$=commentForm]').validate();             
              
            $('[id$=name]').rules("add",{
                required: true,
                minlength: 5
            });     
             
            $('[id$=email]').rules("add",{
                required: true,
                email: true
            });      
             
            $('[id$=url]').rules("add",{
                url: true
            });
             
            $('[id$=comment]').rules("add",{
                required: true
            });
             
            $('[id$=pwd]').rules("add",{
                required: true,
                minlength: 5
            });
              
            $('[id$=cpwd]').rules("add",{
                required: true,
                minlength: 5,
                equalTo: '[id$=pwd]'
            });   
             
            /* Customised the messages */
           jQuery.validator.messages.required = "<label style='color:red'>This field is required</label>"; 
           jQuery.validator.messages.equalTo = "<label style='color:red'>No silly, you're supposed to type the same set of characters AGAIN.</label>";
                                                          
        });
         
    </script> 
     
   
        <apex:define name="title">
            <a href="http://thesilverlining-developer-edition.na7.force.com/jqueryvalidatedemo/">jQuery Forms Validation Demo</a>
        </apex:define>
         
        <apex:define name="blurb">
            <p>
                Fiddle with the form entering combinations of correct and incorrect values to see the validation rules in action. Hitting the sumbit button will also trigger form checking.
            </p>
        </apex:define>


        <apex:define name="content">    
            <apex:outputPanel layout="block" style="text-align:center; font-size:12px;padding: 4px">
                <apex:form id="commentForm" > 

                        <apex:outputlabel for="name">Name <span class="star">*</span></apex:outputlabel> 
                        <apex:inputtext id="name" value="{!account.name}" required="true"/>
                        <br/>
                        <apex:outputlabel for="email">E-Mail <span class="star">*</span></apex:outputlabel> 
                        <apex:inputtext id="email"  value="{!account.name}" required="true"/> 
                        <br/>
                        <apex:outputlabel for="url">URL (optional)</apex:outputlabel> 
                        <apex:inputtext id="url"  value="{!account.name}" required="true" /> 
                        <br/>
                        <apex:outputlabel for="comment">Your comment <span class="star">*</span></apex:outputlabel> 
                        <apex:inputtextarea id="comment" value="{!account.name}"  style="width: 30%" required="true"/>
                        <br/>
                        <apex:outputLabel for="pwd">Password <span class="star">*</span></apex:outputLabel>
                        <apex:inputSecret id="pwd" value="{!account.name}" required="true"/>
                        <br/>
                        <apex:outputLabel for="cpwd">Confirm Password <span class="star">*</span></apex:outputLabel>
                        <apex:inputSecret id="cpwd" value="{!account.name}" required="true"/>                        
                        <br/>
                        <apex:commandButton value="Save" action="{!save}" />
                        <!--
                        <input type="submit" />
                          
                         -->
                </apex:form>
             
            </apex:outputPanel>
             
        </apex:define>
  
</apex:page>





Thanks for reading...












Bootstrap examples in visualforce page.



Hi ,

In this post i am using Bootstrap to get good look and feel.

Example 1:

In this example i am using CDN links instead of keeping them in static resources, If you want you can put them in static resources.


In this example i did not implement the save functionality. just for look and feel simply putting the HTML stuff in VF page tag.


<apex:page >
<head>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" ></script>
        <style>
           .red{
            color:red;
            }
        .form-area
            {
            background-color: #FAFAFA;
            padding: 10px 40px 60px;
                margin: 10px 0px 60px;
            border: 1px solid GREY;
            }
        </style>
        
        <script>
       j$ = jQuery.noConflict();
        
         j$(document).ready(function(){ 
        alert("test");
     j$('#characterLeft').text('140 characters left');
     j$('#message').keydown(function () {
        var max = 140;
        var len =  j$(this).val().length;
        if (len >= max) {
             j$('#characterLeft').text('You have reached the limit');
            j$('#characterLeft').addClass('red');
            j$('#btnSubmit').addClass('disabled');            
        } 
        else {
            var ch = max - len;
            j$('#characterLeft').text(ch + ' characters left');
           j$('#btnSubmit').removeClass('disabled');
            j$('#characterLeft').removeClass('red');            
        }
    });    
});

        </script>
        
    </head>
     <apex:form >
    <div class="container">
<div class="col-md-5">
    <div class="form-area">  
       
        <br style="clear:both"/>
                    <h3 style="margin-bottom: 25px; text-align: center;">Contact Form</h3>
                    <div class="form-group">
                       <input type="text" class="form-control" id="name" name="name" placeholder="Name" required="true"/> 
                    </div>
                           
                    <div class="form-group">
                    <div class="input-group">
                      <span class="input-group-addon"><i class="glyphicon glyphicon-envelope" aria-hidden="true"></i></span>
                      <input id="email" name="email" class="form-control" placeholder="Inserici email@" required="" type="text"/>
                    </div>   
                       
                    </div>
                    
                             
        
                    <div class="form-group">
                       <div class="input-group">
              <span class="input-group-addon"><span class="glyphicon glyphicon-phone-alt" aria-hidden="true"></span></span>
              <input id="tel" name="tel" class="form-control" placeholder="Phone Number" required="" type="text"/>
            </div> 
                    </div> 
                    <div class="form-group">
                       <input type="text" class="form-control" id="subject" name="subject" placeholder="Subject" required="true"/> 
                    </div>
                    <div class="form-group">
                    <textarea class="form-control" type="textarea" id="message" placeholder="Message" maxlength="140" rows="7"></textarea>
                     <span class="help-block"><p id="characterLeft" class="help-block ">You have reached the limit</p></span>                   
                    </div>
            
                <center> <button type="button" id="submit" name="submit" class="btn btn-primary pull-right">Submit Form</button> </center>

    </div>
</div>
</div>
        </apex:form>
</apex:page>





Example 2 :

In this example i am using Bootstrap CDN reference's . this is similar to above example, but using 2 div's displaying label and text boxes.


<apex:page showHeader="false" sidebar="false" docType="html-5.0" standardStylesheets="false">
  
<html>
<head>
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=UTF-8"/>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" ></script>
        <style>
           .red{
            color:red;
            }
        .form-area
            {
            background-color: #FAFAFA;
            padding: 10px 40px 60px;
                margin: 10px 0px 60px;
            border: 1px solid GREY;
            }
        </style>
        
        <script>
       j$ = jQuery.noConflict();
        
         j$(document).ready(function(){ 
        alert("test");
     j$('#characterLeft').text('140 characters left');
     j$('#description').keydown(function () {
        var max = 140;
        var len =  j$(this).val().length;
        if (len >= max) {
             j$('#characterLeft').text('You have reached the limit');
            j$('#characterLeft').addClass('red');
            j$('#btnSubmit').addClass('disabled');            
        } 
        else {
            var ch = max - len;
            j$('#characterLeft').text(ch + ' characters left');
           j$('#btnSubmit').removeClass('disabled');
            j$('#characterLeft').removeClass('red');            
        }
    });    
});

        </script>
        
    </head>
  <form class="form-horizontal" method="POST" id="contact_form">
<fieldset>
<div calss="row">
   

    <br/>
     <br/>
    <div class="col-md-8">
    
          
        <div class="form-group">
          <label class="col-md-4 control-label" for="textinput">Contact Name</label>  
          <div class="col-md-6">
          <input id="name" maxlength="80" name="name" placeholder="Contact Name" class="form-control input-md" required="true" type="text"/>
          </div>
        </div>
        
           
        <div class="form-group">
          <label class="col-md-4 control-label" for="textinput">Company Name</label>  
          <div class="col-md-6">
          <input id="company" maxlength="80" name="company" placeholder="Company Name" class="form-control input-md" required="true" type="text"/>
          </div>
        </div>
        
         
        <div class="form-group">
          <label class="col-md-4 control-label" for="prependedtext">Email</label>
          <div class="col-md-6">
            <div class="input-group">
              <span class="input-group-addon"><i class="glyphicon glyphicon-envelope" aria-hidden="true"></i></span>
              <input id="email" maxlength="80" name="email" class="form-control" placeholder="email@example.com" required="true" type="text"/>
            </div>    
          </div>
        </div>
        
        
        <div class="form-group">
          <label class="col-md-4 control-label" for="prependedtext">Phone</label>
          <div class="col-md-6">
            <div class="input-group">
              <span class="input-group-addon"><span class="glyphicon glyphicon-phone-alt" aria-hidden="true"></span></span>
              <input id="phone" maxlength="40" name="phone" class="form-control" placeholder="Contact Telephone Number" required="true" type="text"/>
            </div>
          </div>
        </div> 
        
        
        
        <div class="form-group">
          <label class="col-md-4 control-label" for="selectbasic">Priority</label>
          <div class="col-md-6">
            <select id="priority" name="priority" class="form-control" required="true">
              <option value="">--None--</option>
              <option value="High">High</option>
              <option value="Medium">Medium</option>
              <option value="Low">Low</option>
            </select>
          </div>
        </div>
        
        
           
        <div class="form-group">
          <label class="col-md-4 control-label" for="selectbasic" >Type</label>
          <div class="col-md-6">
            <select id="type" name="type" class="form-control" required="true">
              <option value="">--None--</option>
             <option value="Product Problem">Product Problem</option>
            <option value="Software Request">Software Request</option>
            <option value="Bug Request">Bug Request</option>

            </select>
          </div>
        </div>
        
              
        <div class="form-group">
          <label class="col-md-4 control-label" for="textinput">Subject</label>  
          <div class="col-md-6">
          <input id="subject" maxlength="80" name="subject" placeholder="Case Subject" class="form-control input-md" required="true" type="text"/>
          </div>
        </div>
        

         
        <div class="form-group">
          <label class="col-md-4 control-label" for="textinput">Description</label>  
          <div class="col-md-6">
         <textarea class="form-control" type="textarea" name="description" id="description" placeholder="Description of your case" maxlength="140" rows="5"></textarea>
          <span class="help-block"><p id="characterLeft" class="help-block ">You have reached the limit</p></span>
          </div>
        </div>
       
         
        <center>
        
        <button type="submit" name="submit" id="submit" class="btn btn-primary pull-ledt">Submit Form</button>
        </center>
        
    </div>
        
</div>

</fieldset>
</form>
</html>
</apex:page>






Example 3:

This is advance example using bootstrap displaying Account record information and related contacts with create new contact functionality similar like lightning approach.

for this you need to pass account id in the url parameter like 

https://c.ap2.visual.force.com/apex/BootstrapModal?id=0012800000LhxPy


Controller Class:

public class BootstrapModal_Controller {
    
    string accId;
    public List<Contact> contactList {get; set;}
    public Account acc {get; set;}
    public Contact singleCon {get; set;}
    public BootstrapModal_Controller(ApexPages.StandardController sc){
        acc = [SELECT Id, Name, OwnerId, Type, Website FROM Account WHERE Id =: sc.getId()];
        contactList = [SELECT Id, Email, FirstName, LastName, Phone FROM Contact WHERE AccountId =: acc.Id];
        singleCon = new Contact();
    }
    
    public void addContact(){
        singleCon.AccountId = acc.Id;
        insert singleCon;
        contactList.add(singleCon);        
        singleCon = new Contact();
    }
}

Visualforce Page:


<apex:page standardStylesheets="false" standardController="Account" extensions="BootstrapModal_Controller" title="Popup Example" applyBodyTag="false" sidebar="false" showHeader="false">
    
    <head>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" ></script>
        <style>
            .container-fluid {
            margin-top: 10px;
            }
        </style>
    </head>
    
    <body>
        <apex:form >
            <div class="container-fluid">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <div class="panel panel-success">
                            <div class="panel-heading">Account Information</div>
                            <div class="panel-body">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="aName">Account Name</label>
                                            <br />
                                            <apex:outputField value="{!acc.Name}" />
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="aOwner">Owner</label>
                                            <br />
                                            <apex:outputField value="{!acc.OwnerId}" />
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="Type">Account Type</label>
                                            <br />
                                            <apex:outputField value="{!acc.Type}" />
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="Website">Website</label>
                                            <br />
                                            <apex:outputField value="{!acc.Website}" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="panel panel-info">
                            <div class="panel-heading"><div>
                                Related Contacts
                                <button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal" style="float: right;">
                                    <span class="glyphicon glyphicon-plus-sign" /> New
                                </button>
                                </div>
                                <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                                    <div class="modal-dialog" role="document">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                                                </button>
                                                <h4 class="modal-title" id="myModalLabel">New Contact</h4>
                                            </div>
                                            <div class="modal-body">
                                                <div class="form-group">
                                                    <label>First Name</label><br />
                                                    <apex:inputField value="{!singleCon.FirstName}" html-placeholder="First Name" styleClass="form-control"/>
                                                </div>
                                                <div class="form-group">
                                                    <label>Last Name</label><br />
                                                    <apex:inputField value="{!singleCon.LastName}" html-placeholder="Last Name" styleClass="form-control"/>
                                                </div>
                                                <div class="form-group">
                                                    <label>Email</label><br />
                                                    <apex:inputField value="{!singleCon.Email}" html-placeholder="Email Address" styleClass="form-control"/>
                                                </div>
                                                <div class="form-group">
                                                    <label>Mobile</label><br />
                                                    <apex:inputField value="{!singleCon.Phone}" html-placeholder="Mobile Number" styleClass="form-control"/>
                                                </div> 
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>                                                
                                                <apex:commandButton styleclass="btn btn-primary" value="Save" action="{!addContact}" reRender="contactTable" onComplete="$('#myModal').modal('hide');$('body').removeClass('modal-open');$('.modal-backdrop').remove();"/>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="panel-body">
                                <apex:outputPanel id="contactTable">
                                    <table class="table table-condensed">
                                        <tr>
                                            <th>First Name</th>
                                            <th>Last name</th>
                                            <th>Email</th>
                                            <th>Mobile</th>
                                        </tr>
                                        <apex:repeat value="{!contactList}" var="con">
                                            <tr>
                                                <td>
                                                    <apex:outputField value="{!con.FirstName}" />
                                                </td>
                                                <td>
                                                    <apex:outputField value="{!con.LastName}" />
                                                </td>
                                                <td>
                                                    <apex:outputField value="{!con.Email}" />
                                                </td>
                                                <td>
                                                    <apex:outputField value="{!con.Phone}" />
                                                </td>
                                            </tr>
                                        </apex:repeat>
                                    </table>
                                </apex:outputPanel>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </apex:form>
    </body>
</apex:page>









Example 4:

<apex:page docType="html-5.0" showHeader="false" sidebar="false">

<html lang="en">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <meta name="description" content="Your description here"/>
    <meta name="author" content="Your Name"/>
    <title>Learning Boostrap</title>

<!-- Bootstrap CSS -->
    <apex:stylesheet value="{!URLFOR($Resource.BootStrapValidator, '/css/bootstrap.min.css')}"/>
    <apex:stylesheet value="{!URLFOR($Resource.BootStrapValidator, '/css/basic-template.css')}" />
<!-- 
    <link href="css/bootstrap.min.css" rel="stylesheet" />
    <link href="css/basic-template.css" rel="stylesheet" />
-->
    <!-- BootstrapValidator CSS -->
       <apex:stylesheet value="{!URLFOR($Resource.BootStrapValidator, '/css/bootstrapValidator.min.css')}" />
  <!-- 
    <link href="css/bootstrapValidator.min.css" rel="stylesheet"/> 
    -->
    
    <!-- jQuery and Bootstrap JS -->
     <apex:includeScript value="{!URLFOR($Resource.BootStrapValidator, '/js/jquery.min.js')}"/>
      <apex:includeScript value="{!URLFOR($Resource.BootStrapValidator, '/js/bootstrap.min.js')}"/>
       <apex:includeScript value="{!URLFOR($Resource.BootStrapValidator, '/js/bootstrapValidator.min.js')}"/>
      <!-- 
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script src="js/bootstrap.min.js" type="text/javascript"></script>
     -->   
    <!-- BootstrapValidator -->
    <!-- 
    <script src="js/bootstrapValidator.min.js" type="text/javascript"></script>
       --> 
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
    .myEmail{}
    </style>
</head>
<body>
    <div class="container">
        <div class="panel panel-default">
            <div class="panel-heading">Registration</div>
            <div class="panel-body">
                <form id="registration-form"  class="form-horizontal" >
                    <div class="form-group">
                        <label class="col-md-2 control-label" for="email">Email Address</label>
                        <div class="col-md-4">
                            <input type="text" class="form-control" id="email" name="email" placeholder="Your email address" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-2 control-label" for="password">Password</label>
                        <div class="col-md-4">
                            <input type="password" class="form-control" id="password" name="password" placeholder="Password" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-2 control-label" for="confirmpassword">Confirm Password</label>
                        <div class="col-md-4">
                            <input type="password" class="form-control" id="confirmpassword" name="confirmpassword" placeholder="Confirm password" />   
                        </div>
                    </div>                  
                    <div class="form-group">
                        <label class="col-md-2 control-label" for="membership">Membership</label>
                        <div class="col-md-4">
                            <select class="form-control" id="membership" name="membership">
                                <option value="0">Choose One</option>
                                <option value="1">Basic (Free)</option>
                                <option value="2">Premium (Paid)</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-6 col-md-offset-2">
                            <button type="submit" class="btn btn-success">Submit</button>
                        </div>
                    </div>
                </form>
                <div id="confirmation" class="alert alert-success hidden">
                    <span class="glyphicon glyphicon-star"></span> Thank you for registering
                </div>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript">
    $(document).ready(function () {
        var validator = $("#registration-form").bootstrapValidator({
            feedbackIcons: {
                valid: "glyphicon glyphicon-ok",
                invalid: "glyphicon glyphicon-remove", 
                validating: "glyphicon glyphicon-refresh"
            }, 
            fields : {
                email :{
                    message : "Email address is required",
                    validators : {
                        notEmpty : {
                            message : "Please provide an email address"
                        }, 
                        stringLength: {
                            min : 6, 
                            max: 35,
                            message: "Email address must be between 6 and 35 characters long"
                        },
                        emailAddress: {
                            message: "Email address was invalid"
                        }
                    }
                }, 
                password : {
                    validators: {
                        notEmpty : {
                            message : "Password is required"
                        },
                        stringLength : {
                            min: 8,
                            message: "Password must be 8 characters long"
                        }, 
                        different : {
                            field : "email", 
                            message: "Email address and password can not match"
                        }
                    }
                }, 
                confirmpassword : {
                    validators: {
                        notEmpty : {
                            message: "Confirm password field is required"
                        }, 
                        identical : {
                            field: "password", 
                            message : "Password and confirmation must match"
                        }
                    }
                }, 
                membership : {
                    validators : {
                        greaterThan : {
                            value: 1,
                            message: "Membership is required"
                        }
                    }
                }
            }
        });
    
        validator.on("success.form.bv", function (e) {
            e.preventDefault();
            $("#registration-form").addClass("hidden");
            $("#confirmation").removeClass("hidden");
        });
        
    });
</script>
</html>
</apex:page>






Resources :


 
| ,