Expand and collapse link for an Div in vf page using Jquery.

Hi Friends,

This is a small but useful post to maintain UI of your Visualforce page,

to add show more link(for expand) and show less link(for collapse) on div (or any other HTML tag) when div height is more then expected size.

Look at the screen shot below:-

So to solve this issue you can use the following java script and jquery:-

	<apex:page standardController="Account" sidebar="false">
	<apex:form>
	<apex:pageBlock>
	<apex:pageBlockSection>
	<apex:outputField value="{!Account.Name}"/>
	<apex:pageBlockSectionItem>
	<apex:outputLabel value="Description"/>
	<apex:outputPanel>
	<div class="showmorefirm">
	<div class="moreblockfirm" id="Des" >
	<apex:outputField value="{!Account.Description}"/>
	</div>
	</div>
	</apex:outputPanel>
	</apex:pageBlockSectionItem>
	<apex:outputField value="{!Account.Phone}"/>
	<apex:outputField value="{!Account.Active__c}"/>
	</apex:pageBlockSection>
	</apex:pageBlock>
	</apex:form>
	<apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" />
	<script>
	function showMoreSetup()
	{
	// The height of the content block when it's not expanded
	var adjustheight = 30;
	var moreText = "Show More";
	var lessText = "Show Less";
	$(".showmorefirm > .moreblockfirm").each(function(){
	if ($(this).height() > adjustheight)
	{
	$(this).css('height', adjustheight).css('overflow', 'hidden');
	$(this).parent(".showmorefirm").append('<a href="javascript:void(o);" class="adjustFirm"></a>');
	$(this).parent(".showmorefirm").find("a.adjustFirm").text(moreText);
	$(this).parent(".showmorefirm").find(".adjustFirm").toggle(function() {
	$(this).parents("div:first").find(".moreblockfirm").css('height', 'auto').css('overflow-y', 'hidden');
	$(this).text(lessText);
	}, function() {
	$(this).parents("div:first").prepend($(this).parents("div:first").find(".moreblockfirm"));
	$(this).parents("div:first").find(".moreblockfirm").css('height', adjustheight).css('overflow', 'hidden');
	$(this).text(moreText);
	});
	}
	});
	}
	showMoreSetup();
	</script>
	</apex:page>

view raw showMoreLink hosted with ❤ by GitHub

Screen Shots:-

Hope this helps..

Thanks
Anurag Jain

PageBlockSections with different colors at each section.

Hi friends,

Few days ago, one of my client come up with this requirement,

He wants to see all sections on the detail page in different color so that he can easily differentiate (or group) fields of the custom object according to color code like red section fields blue section fields,

Generally each section on the detail page has the same color as their tab,

so for this requirement i have created a vf page and put that page in the detail page layout,

I am using FieldSet here so that we can easily add and remove fields from vf page later without touching code of vf page.

Note:-
Before using this code must create FieldSet, for creating FieldSet go to your custom object and select new FieldSet.(for more detail see this link).

Here i am using three FieldSets name as

1. FieldSet1
2. FieldSet2
3. FieldSet3

Here the code of that vf page:-

	<apex:page standardController="Position__c" id="Page">
	<script>
	var Sec_Colors = ["#56DEF0", "#ED55D6", "#ACE3BC"]; // put hash code of color here according to number of section.
	window.onload = function(){
	var Sections = document.getElementsByClassName('pbSubheader brandTertiaryBgr tertiaryPalette');
	for(var i = 0; i < Sections.length; i++){
	Sections[i].style.backgroundColor = Sec_Colors[i];
	}
	};
	</script>
	<apex:pageBlock id="PB">
	<!-- First Section -->
	<apex:pageBlockSection title="Production Website Information (LIVE)">
	<apex:repeat value="{!$ObjectType.Position__c.FieldSets.FieldSet1}" var="f">
	<apex:outputField value="{!Position__c[f]}"/>
	</apex:repeat>
	</apex:pageBlockSection>
	<!-- Second Section -->
	<apex:pageBlockSection title="Staging Website Information">
	<apex:repeat value="{!$ObjectType.Position__c.FieldSets.FieldSet2}" var="f">
	<apex:outputField value="{!Position__c[f]}"/>
	</apex:repeat>
	</apex:pageBlockSection>
	<!-- Third Section -->
	<apex:pageBlockSection title="Development Website Information">
	<apex:repeat value="{!$ObjectType.Position__c.FieldSets.FieldSet3}" var="f">
	<apex:outputField value="{!Position__c[f]}"/>
	</apex:repeat>
	</apex:pageBlockSection>
	</apex:pageBlock>
	</apex:page>

view raw PositionFieldSetEx hosted with ❤ by GitHub

Screen Shots:-

Happy coding..:)
Thanks,
Anurag Jain

Required field using custom controller on VF page.

Hi friends,

Recently i was working on a complex visual-force page, where page has lot of render and reRender.
My requirement is to make some fields mandatory on vf page but page as some javascript and reRender on save button which creates problem while i am making field mandatory using required attribute of <apex:inputfield> tag.

So to solve this problem i have maked field required by using custom controller and field having same look and feel as standard required attribute because i am using same standard CSS which standard inputfield is used on required field attribute.

Here the VF page and controller:-

	<apex:page Controller="RequiredFieldController" tabStyle="Account">
	<apex:form>
	<apex:pageblock title="Required Example">
	<apex:pageblocksection>
	<!-- Standard required attribute of inputfield -->
	<apex:inputField value="{!acc.Name}" required="true"/>
	<!-- Required field using controller -->
	<apex:pageBlockSectionItem >
	<apex:outputLabel value="Website"/>
	<apex:outputPanel layout="block" styleClass="requiredInput">
	<apex:outputpanel layout="block" styleClass="requiredBlock"></apex:outputpanel>
	<apex:inputField value="{!acc.Website}" />
	</apex:outputPanel>
	</apex:pageBlockSectionItem>
	<apex:inputfield value="{!acc.Phone}"/>
	<apex:inputfield value="{!acc.Fax}"/>
	</apex:pageblocksection>
	<apex:pageBlockButtons location="bottom">
	<apex:commandButton value="Save" action="{!SaveAccount}"/>
	</apex:pageBlockButtons>
	</apex:pageblock>
	</apex:form>
	</apex:page>

view raw RequiredField hosted with ❤ by GitHub

	public class RequiredFieldController{
	public Account acc{get;set;}
	public RequiredFieldController(){
	acc = new Account();
	}
	public PageReference SaveAccount(){
	// validation for required fields.
	if(acc.Website == null){
	acc.Website.addError('Please Enter Account Website.');
	return null;
	}
	insert acc;
	return new PageReference('/' + acc.Id);
	}
	}

view raw RequiredFieldController hosted with ❤ by GitHub

Screen Shoots:-

Cheers!!!
Anurag Jain

Read XML easily in salesforce.

Hi Guys,

Few days back i was working on an integration of Salesforce with Zoho,

in that integration i am calling web services of Zoho from Salesforce by using REST API's,

i am getting response in form of XML from ZOHO and it takes my couples of hours only for

parsing(reading) that XML.

So in this post i am showing you how can we read an XML easily and take-out our

required data from XML, it will save your lot of time and effort... :)

here i am uploading an XML from VF page using <apex:inputfile>tag
and showing the result on same VF page in <apex:pageblocktable>.

 

Here the Code:-

	<apex:page controller="ReadXMLController">
	<apex:form>
	<apex:pageblock title="Read XML" id="PB">
	<!-- inputFile for uploading XML -->
	<apex:pageblocksection >
	<apex:pageblocksectionitem>
	<apex:outputLabel value="Please Select XML File:"/>
	<apex:inputFile value="{!XMLBody}"> </apex:inputFile>
	</apex:pageblocksectionitem>
	</apex:pageblocksection>
	<!-- Table to show the XML Result -->
	<apex:pageblocksection title="Result of XML" columns="1" rendered="{!contactList.size != null}">
	<apex:pageblocktable value="{!contactList}" var="con">
	<apex:column value="{!con.fName}" headerValue="First Name"/>
	<apex:column value="{!con.LName}" headerValue="Last Name"/>
	<apex:column value="{!con.Position}" headerValue="Position"/>
	<apex:column value="{!con.Manager}" headerValue="Manager"/>
	</apex:pageblocktable>
	</apex:pageblocksection>
	<!-- Button for calling method of controller -->
	<center>
	<apex:commandButton value="Read" action="{!readXML}"/>
	</center>
	</apex:pageblock>
	</apex:form>
	</apex:page>

view raw ReadXML hosted with ❤ by GitHub

	public class ReadXMLController{
	public Blob XMLBody{get;set;}
	public List<contactName> contactList{get;set;}
	public class contactName{
	public String fName{get;set;}
	public String LName{get;set;}
	public String Manager{get;set;}
	public String Position{get;set;}
	}
	public void readXML(){
	// you can also use here your rest response like res.getBody()
	parseXMLResponse(XMLBody.toString());
	}
	void parseXMLResponse(String XMLResp){
	XmlStreamReader reader = new XmlStreamReader(XMLResp);
	contactList = new List<contactName>();
	integer i = 0;
	while(reader.hasNext()){
	if (reader.getEventType() == XmlTag.START_ELEMENT && reader.getLocalName() == 'row') {
	contactName con = new contactName();
	while(reader.hasNext()){
	if(reader.getEventType() == XmlTag.START_ELEMENT && reader.getAttributeValueAt(0) == 'First Name'){
	reader.next();
	con.FName = reader.getText();
	}
	if(reader.getEventType() == XmlTag.START_ELEMENT && reader.getAttributeValueAt(0) == 'Last Name'){
	reader.next();
	con.LName = reader.getText();
	}
	if(reader.getEventType() == XmlTag.START_ELEMENT && reader.getAttributeValueAt(0) == 'Reporting Manager'){
	reader.next();
	con.Manager = reader.getText();
	}
	if(reader.getEventType() == XmlTag.START_ELEMENT && reader.getAttributeValueAt(0) == 'Position'){
	reader.next();
	con.Position = reader.getText();
	}
	if(reader.getEventType() == XmlTag.END_ELEMENT && reader.getLocalName() == 'row'){
	contactList.add(con);
	break;
	}
	reader.next();
	}
	}
	reader.next();
	}
	}
	}

view raw ReadXMLController hosted with ❤ by GitHub

	<?xml version="1.0" encoding="UTF-8"?>
	<response uri="/crm/private/xml/Contacts/getSearchRecords">
	<result>
	<Contacts>
	<row no="1">
	<FL val="First Name"><![CDATA[anurag]]></FL>
	<FL val="Last Name"><![CDATA[jain]]></FL>
	<FL val="Position"><![CDATA[CEO]]></FL>
	<FL val="Reporting Manager"><![CDATA[KUNAL BAJAJ]]></FL>
	</row>
	<row no="2">
	<FL val="First Name"><![CDATA[KUNAL]]></FL>
	<FL val="Last Name"><![CDATA[BAJAJ]]></FL>
	<FL val="Position"><![CDATA[HEAD OF VAS]]></FL>
	<FL val="Reporting Manager"><![CDATA[lokesh mughal]]></FL>
	</row>
	<row no="3">
	<FL val="First Name"><![CDATA[sachin]]></FL>
	<FL val="Last Name"><![CDATA[asda]]></FL>
	<FL val="Position"><![CDATA[CMO]]></FL>
	<FL val="Reporting Manager"><![CDATA[KUNAL BAJAJ]]></FL>
	</row>
	<row no="4">
	<FL val="First Name"><![CDATA[lokesh]]></FL>
	<FL val="Last Name"><![CDATA[mughal]]></FL>
	<FL val="Position"><![CDATA[CEO]]></FL>
	<FL val="Reporting Manager"><![CDATA[KUNAL BAJAJ]]></FL>
	</row>
	<row no="5">
	<FL val="First Name"><![CDATA[ravi]]></FL>
	<FL val="Last Name"><![CDATA[kant]]></FL>
	<FL val="Position"><![CDATA[Specialist]]></FL>
	<FL val="Reporting Manager"><![CDATA[anurag jain]]></FL>
	</row>
	<row no="6">
	<FL val="First Name"><![CDATA[lashman]]></FL>
	<FL val="Last Name"><![CDATA[ghurum]]></FL>
	<FL val="Position"><![CDATA[CFO]]></FL>
	</row>
	<row no="7">
	<FL val="First Name"><![CDATA[anuj]]></FL>
	<FL val="Last Name"><![CDATA[kumar]]></FL>
	<FL val="Position"><![CDATA[Manager]]></FL>
	<FL val="Reporting Manager"><![CDATA[ravi kant]]></FL>
	</row>
	</Contacts>
	</result>
	</response>

view raw Sample XML File hosted with ❤ by GitHub

Screen Shots:- 

Happy Coding...:)

Thanks

Anurag Jain

Adding summary field as footer of pageblock table in vf page.

Hi All,

This post is simply showing how can we add the summary field or total amount or other information in footer of PageBlockTable or DataTable in vf page.

Here, in the following example I am showing sum of all the opportunity line items in footer of PageBlockTable,

i am using the <apex:facet name="footer"> tag to show the value in the footer.

Here the code:

	<apex:page standardController="Opportunity">
	<apex:pageBlock title="{!Opportunity.Name}">
	<apex:pageblocktable value="{!Opportunity.OpportunityLineItems}" var="oli">
	<apex:column value="{!oli.PricebookEntry.Name}"/>
	<apex:column value="{!oli.Quantity}"/>
	<apex:column value="{!oli.UnitPrice}">
	<apex:facet name="footer">
	<apex:outputText value="Total:" style="float: right;"/>
	</apex:facet>
	</apex:column>
	<apex:column value="{!oli.TotalPrice}">
	<apex:facet name="footer">
	${!Opportunity.Amount}
	</apex:facet>
	</apex:column>
	</apex:pageblocktable>
	</apex:pageBlock>
	</apex:page>

view raw FooterExample hosted with ❤ by GitHub

Screen shot:

Thanks
Anurag Jain

Insert Records in SF by using JavaScript without Apex classes or controller.

Hi guys,

In this post i am showing how can we use the power of javascript in VF page and inserting record in salesforce without any standard/custom controller or Apex.

By using AJAX Toolkit we can do this task easily.

AJAX Toolkit divides in two type synchronous and asynchronous call.

It works in three simple steps:

1. Connecting to the AJAX Toolkit(By using login methods or getting Session_ID)
2. Embedding the API methods in JavaScript.
3. Processing the results.

in following example i am using synchronous call :-

	<apex:page id="Page" sidebar="false">
	<script src="/soap/ajax/20.0/connection.js" type="text/javascript"></script>
	<script>
	function insertAccount(){
	// Getting Session ID.
	sforce.connection.sessionId = "{!$Api.Session_ID}";
	//Creating New Account Record.
	var account = new sforce.SObject("Account");
	//Getting Account Name from inputText.
	account.Name = document.getElementById("Page:Form:PB:PBS:PBSI:Name").value;
	// This is the line where magic happens, calling Create() method.
	var result = sforce.connection.create([account]);
	if (result[0].getBoolean("success")) {
	alert("New Account is created with id " + result[0].id);
	} else {
	alert("failed to create new Account " + result[0]);
	}
	}
	</script>
	<apex:form id="Form">
	<apex:pageBlock title="Insert Account" tabStyle="Account" id="PB">
	<apex:pageBlockSection title="Account Name" columns="1" id="PBS">
	<apex:pageBlockSectionItem id="PBSI">
	<apex:outputLabel value="Name" />
	<apex:inputText title="Name" id="Name" />
	</apex:pageBlockSectionItem>
	</apex:pageBlockSection>
	<apex:pageBlockButtons>
	<apex:commandButton onclick="return insertAccount();" value="Save"/>
	</apex:pageBlockButtons>
	</apex:pageBlock>
	</apex:form>
	</apex:page>

view raw InsertRecordByJSwithoutController hosted with ❤ by GitHub

Screen Shoots:-

 After inserting of record you are having ID of record :-

Happy Coding...:)

Thanks
Anurag Jain

hierarchy chart on vf page by using google chart.

Hi Guys,

I am writing this post to show how we can create a beautiful chart showing hierarchy level for Account on detail page, 

all Contacts shows according to their reporting managers for an Account.

here I am using Google chart in VF page and apex class,

for this requirement i am creating a string "ContactData" and using it on VF page that's it.

following is code for extension class and vf page:-

	<apex:page StandardController="Account" extensions="AccountHierarchyChartController" sidebar="false" showHeader="false">
	<script type='text/javascript' src='https://www.google.com/jsapi'></script>
	<script type='text/javascript'>
	google.load('visualization', '1', {packages:['orgchart']});
	google.setOnLoadCallback(drawChart);
	function drawChart() {
	var data = new google.visualization.DataTable();
	data.addColumn('string', 'Name');
	data.addColumn('string', 'Manager');
	data.addColumn('string', 'ToolTip');
	data.addRows([
	{!ContactData}
	]);
	var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
	chart.draw(data, {allowHtml:true});
	}
	</script>
	<div id='chart_div' style="font-size:18px;"></div>
	</apex:page>

view raw AccountHierarchyChart hosted with ❤ by GitHub

	public class AccountHierarchyChartController{
	// Variable to create a string and pass it to google charts.
	public String ContactData{get;set;}
	public AccountHierarchyChartController.AccountHierarchyChartController(ApexPages.StandardController controller){
	ContactData = '';
	for(Contact con :[Select Name,Title,ReportsTo.Name from Contact where AccountId =: controller.getId()]){
	ContactData = ContactData + '[{v:\'';
	ContactData += con.Name;
	ContactData += '\',';
	ContactData += ' f:\''+ con.Name +'<div style="color:red; font-style:italic">'+ con.Title +'</div>\'}';
	ContactData += ',\'';
	ContactData += con.ReportsTo.Name != null ? con.ReportsTo.Name : '';
	ContactData += '\',\'' + con.Title + '\'],';
	}
	}
	}

view raw AccountHierarchyChartController hosted with ❤ by GitHub

Screen shoot:-

Note:- chart is shows only if you fill the "Reports To" field at contact level.
Happy coding...
Thanks
Anurag Jain.