Sunday, April 3, 2016

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 :


13 comments:

Unknown said...

This is the best blog till now I have seen, really appreciate your work. Keep posting such kind of solutions.

mind hunter said...

for Bootstrap validation u used the static resources.can u pls send whee u downloaded that

Unknown said...

this is really too useful and have more ideas from yours. keep sharing many techniques. eagerly waiting for your new blog and useful information. keep doing more.
salesforce training in chennai

Unknown said...

for example 3 it is throwing an error at soql
System.QueryException: List has no rows for assignment to SObject
Class.BootstrapModal_Controller.: line 8, column 1

Unknown said...

In example 2. I want to select multiple values in that dropdown only?
How to achieve this please share your code..

Anonymous said...

I really appreciate information shared above. It’s of great help. If someone want to learn Online (Virtual) instructor lead live training in Bootstrap, kindly contact us http://www.maxmunus.com/contact
MaxMunus Offer World Class Virtual Instructor led training on Bootstrap. We have industry expert trainer. We provide Training Material and Software Support. MaxMunus has successfully conducted 100000+ trainings in India, USA, UK, Australlia, Switzerland, Qatar, Saudi Arabia, Bangladesh, Bahrain and UAE etc.
For Demo Contact us.
Nitesh Kumar
MaxMunus
E-mail: nitesh@maxmunus.com
Skype id: nitesh_maxmunus
Ph:(+91) 8553912023
http://www.maxmunus.com/



Unknown said...

Hello Srini,

I'm getting the "Static Resource named BootStrapValidator does not exist. Check spelling."

Could you also please add BootStrapValidator static resource?

Unknown said...

"Great blog created by you. I read your blog, its best and useful information. You have done a great work. Super blogging and keep it up.php jobs in hyderabad.
"

Baji Sharief said...

Very useful information. Thanks a lot for sharing this awesome code. Only one issue is lookup fields are not working on Mobile.

trustno1 said...

css html list style examples for beginners
Li tag list-style-type none display inline

Amit Kumar Singh said...


i am a freelancer and work according to contract, for more details contact us with the information provided below.
play game and win snapdeal lucky draw coupon 2019. contact us, play and win snapdeal lucky draw winner prizes.
lucky draw snapdeal contact number 6289379055 call to get more information
Lucky Draw Snapdeal costomer care number
snapdeal lucky draw contact number
snapdeal lucky draw contest 2019
snapdeal lucky draw 2019 list
snapdeal lucky draw contact number
snapdeal lucky draw 2019

Best Regards
snapdeal lucky draw winners 2019

Ankita Kumari said...

Thank you for sharing this informative post on bootstrap. Looking forward to read more.
Responsive Web Design Services

Rajesh kumar said...

It gives error of example3 system.QueryException:List has no row for assigment to sobject

Class.BootstrapModal_Controllerline 9, column1
Please tell me any solution.

Post a Comment

 
| ,