The book name is GETTING STARTED WITH SOQL which explains everything we need to know about SOQL.
To know more, get the book now and become the master in SOQL.
Trivia : I am one of the reviewers for the book :-)
<div id="OrgChart">
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load('visualization', '1', {packages:['orgchart']});
google.setOnLoadCallback(drawChart);
var chart;
var options;
function drawChart() {
options ={
allowHtml:true,
allowCollapse:true,
animation: {
duration: 1000,
easing: 'in'
},
};
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('string', 'Manager');
data.addColumn('string', 'ToolTip');
var response = [{!userdata}];
data.addRows(response);
chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
chart.draw(data, options);
google.visualization.events.addListener(chart, 'onmouseover', barMouseOver);
google.visualization.events.addListener(chart, 'onmouseout', barMouseOut);
}
function barMouseOver(e) {
chart.setSelection([e]);
}
function barMouseOut(e) {
chart.setSelection([{'row': null, 'column': null}]);
}
/*Zooming*/
$(document).ready(function(){
var disablebuttons = false;
var currZoom = 1;
$("#chart_div").draggable(
{
containment: 'parent',
drag: function() {
console.log('the mouse is being moved in chart');
disablebuttons = true;
$('#resetdiv').css("opacity","1");
$('#zoomindiv').css("opacity","0.4");
$('#zoomoutdiv').css("opacity","0.4");
$('#moveupdiv').css("opacity","0.4");
$('#movedowndiv').css("opacity","0.4");
$('#moverightdiv').css("opacity","0.4");
$('#moveleftdiv').css("opacity","0.4");
}
});
$("#_zi_icon").click(function(){
if(disablebuttons != true)
{
currZoom+=0.1;
$('#chart_div').css(
{
'zoom' : currZoom
});
$('#zoomoutdiv').css("opacity","0.7");
$('#zoomindiv').css("opacity","1");
}
});
$("#_zo_icon").click(function(){
if(disablebuttons != true)
{
currZoom-=0.1;
$('#chart_div').css(
{
'zoom' : currZoom
});
$('#zoomoutdiv').css("opacity","1");
$('#zoomindiv').css("opacity","0.7");
}
});
var Margin = 0;
$("#_ml_icon").click(function(){
if(disablebuttons != true)
{
Margin +=100;
$('#chart_div').animate({
'right' : Margin+'px'
},'slow');
$('#moveleftdiv').css("opacity","1");
$('#moverightdiv').css("opacity","0.7");
}
});
$("#_mr_icon").click(function(){
if(disablebuttons != true)
{
Margin -=100;
if(Margin >=0)
{
$('#chart_div').animate({
'right' : Margin+'px'
},'slow');
}else{
Margin = 100;
}
$('#moverightdiv').css("opacity","1");
$('#moveleftdiv').css("opacity","0.7");
}
});
var topmargin =0;
$("#_md_icon").click(function(){
if(disablebuttons != true)
{
topmargin +=100
$('#chart_div').animate({
'top' : topmargin+'px'
},'slow');
$('#movedowndiv').css("opacity","1");
$('#moveupdiv').css("opacity","0.7");
}
});
$("#_mu_icon").click(function(){
if(disablebuttons != true)
{
topmargin -=100
$('#chart_div').animate({
'top' : topmargin+'px'
},'slow');
$('#moveupdiv').css("opacity","1");
$('#movedowndiv').css("opacity","0.7");
}
});
$("#_rs_icon").click(function(){
currZoom=1;
topmargin =0;
Margin=0;
window.location = "http://strickerforce-developer-edition.ap1.force.com/CloudStrikerDemos?show_div=5";
});
$("#zoomindiv").hover(function(){
if(disablebuttons != true)
{
$('#_zinorm').css("display","none");
$('#_ziover').css("display","block");
}
}, function() {
$('#_zinorm').css("display","block");
$('#_ziover').css("display","none");
}
);
$("#zoomoutdiv").hover(function(){
if(disablebuttons != true)
{
$('#_zonorm').css("display","none");
$('#_zoover').css("display","block");
}
}, function() {
$('#_zonorm').css("display","block");
$('#_zoover').css("display","none");
});
$("#moverightdiv").hover(function(){
if(disablebuttons != true)
{
$('#_mrnorm').css("display","none");
$('#_mrover').css("display","block");
}
}, function() {
$('#_mrnorm').css("display","block");
$('#_mrover').css("display","none");
});
$("#moveleftdiv").hover(function(){
if(disablebuttons != true)
{
$('#_mlnorm').css("display","none");
$('#_mlover').css("display","block");
}
}, function() {
$('#_mlnorm').css("display","block");
$('#_mlover').css("display","none");
});
$("#moveupdiv").hover(function(){
if(disablebuttons != true)
{
$('#_munorm').css("display","none");
$('#_muover').css("display","block");
}
}, function() {
$('#_munorm').css("display","block");
$('#_muover').css("display","none");
});
$("#movedowndiv").hover(function(){
if(disablebuttons != true)
{
$('#_mdnorm').css("display","none");
$('#_mdover').css("display","block");
}
},function() {
$('#_mdnorm').css("display","block");
$('#_mdover').css("display","none");
});
$("#resetdiv").hover(function(){
if(disablebuttons != true)
{
$('#_rsnorm').css("display","none");
$('#_rsover').css("display","block");
}
}, function() {
if(disablebuttons != true)
{
$('#_rsnorm').css("display","block");
$('#_rsover').css("display","none");
}
});
var datalength = [{!userdata}];
if(datalength.length>0)
{
$("#navdiv").css("display","block");
}else{
$("#navdiv").css("display","none");
}
});
</script>
<style>
.hoverClass{
opacity:1;
}
</style>
<!-- Adding Zoom Panel -->
<div id="navdiv" style="position: absolute; right:10px; bottom: 10px; width: 97px; height: 64px; z-index: 20;" class="noSel;">
<div class="noSel controlsBg" style="position: relative; width: 100%; height: 100%; z-index: 1; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; background-color: rgb(0, 0, 0); opacity: 0.55;">
</div>
<div id="zoomindiv" style="position: absolute; display: block; left: 4px; top: 11px; width: 20px; height: 20px; z-index: 1;opacity: 0.7; filter: alpha(opacity=70);" class="noSel">
<div id="_zinorm" style="position: absolute; left: 1px; top: 1px; width: 18px; height: 18px; background-color: rgb(255, 255, 255); border-top-left-radius: 2px; border-top-right-radius: 2px; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; display: block; background-position: initial initial; background-repeat: initial initial;">
</div>
<div id="_ziover" style="position: absolute; left: 0px; top: 0px; width: 20px; height: 20px; background-color: rgb(255, 255, 255); border-top-left-radius: 2px; border-top-right-radius: 2px; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; display: none; background-position: initial initial; background-repeat: initial initial;">
</div>
<div id="_zi_icon" style="position: absolute; left: 1px; top: 1px; width: 18px; height: 18px; background: transparent url({!URLFOR($Resource.GoogleApiResource, 'GAResources/icons.png')}) -16px -16px no-repeat;">
</div>
</div>
<div id="zoomoutdiv" style="position: absolute; display: block; left: 4px; top: 33px; width: 20px; height: 20px; z-index: 2; opacity: 0.4;filter: alpha(opacity=70);" class="noSel">
<div id="_zonorm" style="position: absolute; left: 1px; top: 1px; width: 18px; height: 18px; background-color: rgb(255, 255, 255); border-top-left-radius: 2px; border-top-right-radius: 2px; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; display: block; background-position: initial initial; background-repeat: initial initial;">
</div>
<div id="_zoover" style="position: absolute; left: 0px; top: 0px; width: 20px; height: 20px; background-color: rgb(255, 255, 255); border-top-left-radius: 2px; border-top-right-radius: 2px; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; display: none; background-position: initial initial; background-repeat: initial initial;">
</div>
<div id="_zo_icon" style="position: absolute; left: 1px; top: 1px; width: 18px; height: 18px; background: transparent url({!URLFOR($Resource.GoogleApiResource, 'GAResources/icons.png')}) -66px -16px no-repeat;">
</div>
</div>
<div id="moverightdiv" style="position: absolute; display: block; left: 37px; top: 23px; width: 18px; height: 18px; z-index: 3; opacity: 0.4;filter: alpha(opacity=70);" class="noSel">
<div id="_mrnorm" style="position: absolute; left: 1px; top: 1px; width: 16px; height: 16px; background-color: rgb(255, 255, 255); border-top-left-radius: 2px; border-top-right-radius: 2px; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; display: block; background-position: initial initial; background-repeat: initial initial;">
</div>
<div id="_mrover" style="position: absolute; left: 0px; top: 0px; width: 18px; height: 18px; background-color: rgb(255, 255, 255); border-top-left-radius: 2px; border-top-right-radius: 2px; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; display: none; background-position: initial initial; background-repeat: initial initial;">
</div>
<div id="_mr_icon" style="position: absolute; left: 1px; top: 1px; width: 16px; height: 16px; background: transparent url({!URLFOR($Resource.GoogleApiResource, 'GAResources/icons.png')}) -117px -17px no-repeat;">
</div>
</div>
<div id="moveleftdiv" style="position: absolute; display: block; left: 75px; top: 23px; width: 18px; height: 18px; z-index: 4; opacity: 0.4;filter: alpha(opacity=70);" class="noSel">
<div id="_mlnorm" style="position: absolute; left: 1px; top: 1px; width: 16px; height: 16px; background-color: rgb(255, 255, 255); border-top-left-radius: 2px; border-top-right-radius: 2px; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; display: block; background-position: initial initial; background-repeat: initial initial;">
</div>
<div id="_mlover" style="position: absolute; left: 0px; top: 0px; width: 18px; height: 18px; background-color: rgb(255, 255, 255); border-top-left-radius: 2px; border-top-right-radius: 2px; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; display: none; background-position: initial initial; background-repeat: initial initial;">
</div>
<div id="_ml_icon" style="position: absolute; left: 1px; top: 1px; width: 16px; height: 16px; background: transparent url({!URLFOR($Resource.GoogleApiResource, 'GAResources/icons.png')}) -167px -17px no-repeat;">
</div>
</div>
<div id="moveupdiv" style="position: absolute; display: block; left: 56px; top: 42px; width: 18px; height: 18px; z-index: 5; opacity: 0.4;filter: alpha(opacity=70);" class="noSel">
<div id="_munorm" style="position: absolute; left: 1px; top: 1px; width: 16px; height: 16px; background-color: rgb(255, 255, 255); border-top-left-radius: 2px; border-top-right-radius: 2px; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; background-position: initial initial; background-repeat: initial initial;">
</div>
<div id="_muover" style="position: absolute; left: 0px; top: 0px; width: 18px; height: 18px; display: none; background-color: rgb(255, 255, 255); border-top-left-radius: 2px; border-top-right-radius: 2px; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; background-position: initial initial; background-repeat: initial initial;">
</div>
<div id="_mu_icon" style="position: absolute; left: 1px; top: 1px; width: 16px; height: 16px; background: transparent url({!URLFOR($Resource.GoogleApiResource, 'GAResources/icons.png')}) -217px -17px no-repeat;">
</div>
</div>
<div id="movedowndiv" style="position: absolute; display: block; left: 56px; top: 4px; width: 18px; height: 18px; z-index: 6; opacity: 0.4;filter: alpha(opacity=70);" class="noSel">
<div id="_mdnorm" style="position: absolute; left: 1px; top: 1px; width: 16px; height: 16px; background-color: rgb(255, 255, 255); border-top-left-radius: 2px; border-top-right-radius: 2px; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; background-position: initial initial; background-repeat: initial initial;">
</div>
<div id="_mdover" style="position: absolute; left: 0px; top: 0px; width: 18px; height: 18px; display: none; background-color: rgb(255, 255, 255); border-top-left-radius: 2px; border-top-right-radius: 2px; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; background-position: initial initial; background-repeat: initial initial;">
</div>
<div id="_md_icon" style="position: absolute; left: 1px; top: 1px; width: 16px; height: 16px; background: transparent url({!URLFOR($Resource.GoogleApiResource, 'GAResources/icons.png')}) -267px -17px no-repeat;">
</div>
</div>
<div id="resetdiv" style="position: absolute; display: block; left: 56px; top: 23px; width: 18px; height: 18px; z-index: 7; opacity: 0.4;filter: alpha(opacity=70);" class="noSel">
<div id="_rsnorm" style="position: absolute; left: 1px; top: 1px; width: 16px; height: 16px; background-color: rgb(255, 255, 255); border-top-left-radius: 2px; border-top-right-radius: 2px; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; display: block; background-position: initial initial; background-repeat: initial initial;">
</div>
<div id="_rsover" style="position: absolute; left: 0px; top: 0px; width: 18px; height: 18px; background-color: rgb(255, 255, 255); border-top-left-radius: 2px; border-top-right-radius: 2px; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; display: none; background-position: initial initial; background-repeat: initial initial;">
</div>
<div id="_rs_icon" style="position: absolute; left: 1px; top: 1px; width: 16px; height: 16px; background: transparent url({!URLFOR($Resource.GoogleApiResource, 'GAResources/icons.png')}) -317px -17px no-repeat;">
</div>
</div>
</div>
<!-- End of Zoom Panel-->
<br/>
<div id='chart_div' style="font-size:18px;padding:30px;background-color: white;">
</div>
</div>
Sometimes we need to embedd some files in visualforce pages(like invoice bills,etc). I got into same requirement to display a memo in visualforce page.
For that what I did is :
1) I let the users to add the memo to salesforce
2) I inserted the memo into attachments object
3) Then I quried the memo for the particular record.
4) Displayed the file by embedding inside visualforce page..
How to embed the attachment in visualforce page????
I tried this way,
By using the <OBJECT> and <EMBED> tags
<object data ="/servlet/servlet.Filedownload?file={!theattachmentid}" type="application/pdf" width="100%" height="500px">
<embed src ="/servlet/servlet.Filedownload?file={!theattachmentid}" width="100%" height="500px"/>
</object>
If you need to add content related list in you visualforce page try the following...
<apex:relatedlist list ='content__r'>
$(document).ready(function(){
$("#userdata tbody").html("");
var json = {!jsonString};
var tr;
for (var i = 0; i < json.length; i++) {
var tblRow =
"<tr>"
+"<td>"+json[i].Accountid+"</td>"
+"<td>"+json[i].AccountData+"</td>"
+"</tr>";
$(tblRow).appendTo("#userdata tbody");
}
});
<apex:pageBlock title="Table Using JSON" id="TableUsingJSon">
<apex:pageBlockSection columns="2">
<apex:outputPanel >
<center>
<table id="userdata" border="1">
<thead>
<th>Account id</th>
<th>Account Name</th>
</thead>
<tbody></tbody>
</table>
</center>
</apex:outputPanel>
<apex:pageBlockSectionItem >
<apex:outputPanel >
{!jsonString}
</apex:outputPanel>
</apex:pageBlockSectionItem>
</apex:pageBlockSection>
</apex:pageBlock>
$("[id$='AccountFilter']").change(function() {
var selval=$(this).val();
$("[id$='AccNameHeader']").each(function(){
var t= $(this).children('span').text();
if(selval != 'All'){
if(selval == t){
$(this).parent().css('display','');
}else{
$(this).parent().css('display','none');
}
}else{
$(this).parent().css('display','');
}
});
});
<apex:pageBlock title="JQuery Filter For PageblockTable" id="AccountNamewithFilter">
<apex:form >
<apex:selectList value="{!AccPick}" size="1" id="AccountFilter">
<apex:selectOptions value="{!AccNames}"/>
</apex:selectList>
</apex:form>
<apex:pageBlockTable value="{!AccountList}" var="a">
<apex:column headerValue="Account Name" id="AccNameHeader">
<apex:outputText styleClass="AccountNameClass" value="{!a.Name}" id="AccName"/> </apex:column>
<apex:column headerValue="Phone">
<apex:outputText styleClass="AccountNameClass" value="{!a.Phone}"/>
</apex:column>
</apex:pageBlockTable>
</apex:pageBlock>