April 2016 ~ Salesforce Tutorials

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:


<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/

Read more »

Sunday, April 3, 2016

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>



</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}" />

</apex:form>

</apex:outputPanel>

</apex:define>

</apex:page>

Thanks for reading...

Read more »

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>

<style>

.red{

color:red;

}

.form-area

{

background-color: #FAFAFA;

padding: 10px 40px 60px;

margin: 10px 0px 60px;

border: 1px solid GREY;

}

</style>

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 >

<h3 style="margin-bottom: 25px; text-align: center;">Contact Form</h3>

</div>

</div>

</div>

</div>

<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>

</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>

<style>

.red{

color:red;

}

.form-area

{

background-color: #FAFAFA;

padding: 10px 40px 60px;

margin: 10px 0px 60px;

border: 1px solid GREY;

}

</style>

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>

<br/>

<label class="col-md-4 control-label" for="textinput">Contact Name</label>

</div>

<label class="col-md-4 control-label" for="textinput">Company Name</label>

</div>

<label class="col-md-4 control-label" for="prependedtext">Email</label>

</div>

<label class="col-md-4 control-label" for="prependedtext">Phone</label>

</div>

<label class="col-md-4 control-label" for="selectbasic">Priority</label>

<option value="Medium">Medium</option>

</select>

</div>

<option value="Product Problem">Product Problem</option>

<option value="Software Request">Software Request</option>

<option value="Bug Request">Bug Request</option>

</select>

</div>

<label class="col-md-4 control-label" for="textinput">Subject</label>

</div>

<label class="col-md-4 control-label" for="textinput">Description</label>

<span class="help-block"><p id="characterLeft" class="help-block ">You have reached the limit</p></span>

</div>

<button type="submit" name="submit" id="submit" class="btn btn-primary pull-ledt">Submit Form</button>

</center>

</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>

<style>

.container-fluid {

margin-top: 10px;

}

</style>

</head>

<body>

<apex:form >

<div class="panel-heading">Account Information</div>

<label for="aName">Account Name</label>

<br />

<apex:outputField value="{!acc.Name}" />

</div>

<label for="aOwner">Owner</label>

<br />

<apex:outputField value="{!acc.OwnerId}" />

</div>

<label for="Type">Account Type</label>

<br />

<apex:outputField value="{!acc.Type}" />

</div>

<label for="Website">Website</label>

<br />

<apex:outputField value="{!acc.Website}" />

</div>

Related Contacts

<span class="glyphicon glyphicon-plus-sign" /> New

</button>

</div>

</button>

<h4 class="modal-title" id="myModalLabel">New Contact</h4>

</div>

<label>First Name</label><br />

<apex:inputField value="{!singleCon.FirstName}" html-placeholder="First Name" styleClass="form-control"/>

</div>

<apex:inputField value="{!singleCon.LastName}" html-placeholder="Last Name" styleClass="form-control"/>

</div>

<label>Email</label><br />

<apex:inputField value="{!singleCon.Email}" html-placeholder="Email Address" styleClass="form-control"/>

</div>

<label>Mobile</label><br />

<apex:inputField value="{!singleCon.Phone}" html-placeholder="Mobile Number" styleClass="form-control"/>

</div>

<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>

<apex:outputPanel id="contactTable">

<tr>

<th>First 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>

</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>


<apex:stylesheet value="{!URLFOR($Resource.BootStrapValidator, '/css/bootstrap.min.css')}"/>
<apex:stylesheet value="{!URLFOR($Resource.BootStrapValidator, '/css/basic-template.css')}" />


<apex:stylesheet value="{!URLFOR($Resource.BootStrapValidator, '/css/bootstrapValidator.min.css')}" />



<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')}"/>





<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>