ForceTree.com: August 2009

Building a Blog Application(Website) using Visualforce and Force.com Sites

5:34 AM

REFERENCES:
The following references have been used in building this site..

In this article i would be explaining how i built my Force.com Site. The steps explained will help you build a similar such site, you can then customize the site as per your needs...

Create a object with the following information.
Object Name: Article

Field Label	Field Name	type
Article Title	Name	Text
Article Description	Article_Description	Text
Author	Author	Text
createdmonth	createdmonth	Formula -MONTH( DATEVALUE(CreatedDate))
Category	Category	Picklist (VisualForce,Apex Class,Apex Triggers,Set-up and Config,Other)

STEP1:
I browsed through the net for free web templates and found hundreds of them... I downloaded one such template from this link.. Click here.

This example uses the CSS file provided here. Click here to download. Upload the downloaded Zip file into Static Resource, name it SFUNEARTHEDCSS and make the cache control "PUBLIC"

STEP2:

Open the "index" HTML file provide along with the CSS and images folder... Open the file using a notepad or wordpad to view the HTML code...

You will have to modify this code ,insert visualorce tags whereever necessary and save them as visualforce pages.. This is how i did it..

STEP3:

Create a Visualforce Component to use as the Site Header. We are using components here to avoid repetition of code... In all pages the header would be the same, hence creating a component would enable reuse of code...

Setup --> Develop --> Components --> New

Create a new component with the name "SFUnearthedHeader" and paste the code below..

<apex:component >
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Salesforce Unearthed</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="{!URLFOR($Resource.SFUNEARTHEDCSS,'style.css')}" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>


<div id="header-wrapper">
<div id="logo">
<h1><a href="http://salesforceexperts.blogspot.com">Salesforce Unearthed</a></h1>
</div>
<hr />
<!-- end #logo -->
<div id="header">
<div id="menu">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="/apex/SFUnearthed_Articles">Articles</a></li>
        <li><a href="http://salesforceexperts.blogspot.com">Blog</a></li>
        <li><a href="/apex/SFUnearthed_Resources">Resources</a></li>
        <!--<li><a href="#">Time to Relax</a></li>-->
    </ul>
</div>
<!-- end #menu -->
</div>
<!-- end #header -->
</div>
<!-- end #header-wrapper -->
</apex:component>

I have modified the links and the link names... modify them as per your needs...

STEP 4: Creating Visualforce Pages..

I have a image stored as a Static resource named "createnewarticle"..

Save the above image to your desktop and upload as a static resource with name "createnewarticle" ....

Create a Visualforce page named "SFUnearthed_articles"

VF code is..

<apex:page showheader="false" controller="SFUnearthed" title="Salesforce Unearthed" action="{!pageload}">
<c:SFUnearthedHeader ></c:SFUnearthedHeader>
<apex:form >

<div id="page">
<div id="content">

<apex:outputpanel id="articlespace">
 <apex:repeat value="{!articles}" var="article">
 <div class="post">
     <h2 class="title">{!article.Name}</h2>
     <p class="date">{!article.Category__c}</p>
     <p class="meta"><em>Posted by <a href="#">{!article.Author__c}</a> {!article.CreatedDate}</em></p>
     <div class="entry">
         <apex:outputtext escape="false" value="{!article.Article_Description__c}"/>
     </div>
 </div>
 </apex:repeat>
</apex:outputpanel>
</div>
<!-- end #content -->
<div id="sidebar">
     <ul>
         <div style="position:relative;left:40px;">
         <apex:commandlink action="{!createnewarticle}"> <apex:image url="{!$Resource.createnewarticle}"/> </apex:commandlink>
         </div>
         <br/>
         <li>
         <h2>Categories</h2>
         <ul>
             <li><apex:commandlink value="Visualforce" action="{!Category}"><apex:actionsupport event="onclick" rerender="articlespace"/><apex:param name="category" value="visualforce"/></apex:commandlink></li>
             <li><apex:commandlink value="Apex Class" action="{!Category}"><apex:actionsupport event="onclick" rerender="articlespace"/><apex:param name="category" value="Apex Class"/></apex:commandlink> </li>
             <li><apex:commandlink value="Apex Triggers" action="{!Category}"><apex:actionsupport event="onclick" rerender="articlespace"/><apex:param name="category" value="Apex Triggers"/></apex:commandlink> </li>
             <li><apex:commandlink value="Set-up and Config" action="{!Category}"><apex:actionsupport event="onclick" rerender="articlespace"/><apex:param name="category" value="Set-up and Config"/></apex:commandlink> </li>
             <li><apex:commandlink value="Others" action="{!Category}"><apex:actionsupport event="onclick" rerender="articlespace"/><apex:param name="category" value="Other"/></apex:commandlink> </li>
         </ul>
     </li>
 </ul>
</div>
<!-- end #sidebar -->
<div style="clear: both;">&nbsp;</div>
</div>
<!-- end #page -->
<div style="text-align: center; font-size: 0.75em;">Design downloaded from <a href="http://www.freewebtemplates.com/">free website templates</a>.</div></body>
</html>
</apex:form>
</apex:page>

Apex Class(controller) code is:

public class SFUnearthed
{
Public List<Article__c> latestarticle =new List<Article__c>();
public void pageload()
{
 // Get the current month
 datetime currentdate=system.now();
 Integer currentmonth = currentdate.month();   
 latestarticle = [select Id,name,CreatedDate,Author__c,Category__c,Article_Description__c from Article__c where createdmonth__c=:currentmonth order by createddate limit 100];
}

Public Article__c newarticle;
public List<Article__c> getarticles()
{
 return latestarticle;
}
public void category()
{
 String parameter = System.currentPagereference().getParameters().get('category');
 latestarticle = [select Id,name,CreatedDate,Author__c,Category__c,Article_Description__c from Article__c where category__c=:parameter order by createddate limit 100];
}
public Article__c getarticle()
{
 newarticle = new Article__c();
 return newarticle;
}
public Pagereference SaveArticle()
{
 system.debug('Article description is'+newarticle.Article_Description__c);
 insert newarticle;
 Pagereference articlehome = new Pagereference('/apex/SFUnearthed_Articles');
 return articlehome;
}
Public Pagereference createnewarticle()
{
 Pagereference createarticle= new Pagereference('/apex/SFUnearthed_NewArticle');
 return createarticle;
}      
}

Create a Visualforce page named "SFUnearthed_NewArticle"...

I have a image stored as a Static resource named "SaveArticle"..

Save the above image to your desktop and upload as a static resource with name "SaveArticle" ....
VF code is..

<apex:page controller="SFUnearthed" showheader="false" >

<c:SFUnearthedHeader ></c:SFUnearthedHeader>

<div id="page">


  <apex:form >


    <!--- Copied code from blog edit --->
     <!-- Skin CSS file -->
         <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.3.0/build/assets/skins/sam/skin.css" ></link>

     <!-- Utility Dependencies -->
         <script src="http://yui.yahooapis.com/2.3.0/build/utilities/utilities.js"></script>

     <!-- Needed for Menus, Buttons and Overlays used in the Toolbar -->
         <script src="http://yui.yahooapis.com/2.3.0/build/container/container-min.js"></script>
         <script src="http://yui.yahooapis.com/2.3.0/build/menu/menu-min.js"></script>
         <script src="http://yui.yahooapis.com/2.3.0/build/button/button-beta-min.js"></script>
     <!-- Source file for Rich Text Editor-->
         <script src="http://yui.yahooapis.com/2.3.0/build/editor/editor-beta-min.js"></script>
         <div style="position:relative;left:100px;">
        <table cellspacing="7">
         <tr><td style="text-align:right;">Title</td> <td><apex:inputtext value="{!article.Name}"/></td>
         <td style="text-align:right;">Your Name</td><td><apex:inputtext value="{!article.Author__c}"/></td>
         <td> Category </td> <td> <apex:inputfield value="{!article.Category__c}"/></td></tr>
        </table>
         </div>
     <div class="yui-skin-sam" style="display:none" id="editor" align="center" >
         <pre>            
             <apex:commandlink style="position:absolute;left:425px;" action="{!SaveArticle}" onClick="beforeTextSave()"> <apex:image url="{!$Resource.SaveArticle}"/> </apex:commandlink>
             <br/>
             <apex:inputtextarea id="msgpost" cols="500" rows="50" value="{!article.Article_Description__c}"/>
         </pre>
     </div>

 <script type="text/javascript" >
     var myEditor;
     window.onload = function init()
     {
      myEditor = new YAHOO.widget.Editor('{!$Component.msgpost}', {
        height: '400px', width: '722px', dompath: true, animate: true });
      myEditor.render();
      document.getElementById('editor').style.display='';
     }
     function beforeTextSave()
     {
      document.getElementById('{!$Component.msgpost}').value = myEditor.getEditorHTML();
     }

 </script>

<!-- End of copied code from blog edit -->


</apex:form>

</div>
<div style="text-align: center; font-size: 0.75em;">Design downloaded from <a href="http://www.freewebtemplates.com/">free website templates</a>.</div></body>

</apex:page>

Create a Visualforce page named "SFUnearthed_resources"

VF code is..

<apex:page showheader="false">
<apex:form >
<c:SFUnearthedHeader ></c:SFUnearthedHeader>
<div id="page">
 <div id="content">
 <div class="post" >
     <h2 class="title">Salesforce.com Resources and Guides</h2>
     <p class="date">All in one place</p>
     <p class="meta"><em>Last updated on 25 Aug 2009</em></p>
     <div class="entry" style="font-size:30px;">
      <p> Here you can find all resources related to Salesforce.com at one place. All resources are not hosted on this site but rather would be links to other sites.</p>
      <p> <strong> Visualforce </strong></p>
      <p> To get started with Visualforce you will have to download the Visualforce developer's guide from <a href="http://wiki.developerforce.com/index.php/Documentation" target="_blank" >here </a>
          .You can find all resources related to Salesforce.com on this page.</p>
          <p> Once you get started with visualforce,you will find it difficult to refer the PDF for syntax verifications. In such cases you can click on the "Component Reference" link on your page editor to view
           a complete list of all tags with the supported attributes </p>
           <p> It is obvious that you will get stuck at places when you develop applications using visualforce. In such cases post your problem
               on the community forums -<a href="http://community.salesforce.com" target="_blank"> Click Here </a>. Experts from around the world
               will help you find solutions. </p>
       
      </p>
     </div>
 </div>
<div style="text-align: center; font-size: 0.75em;">Design downloaded from <a href="http://www.freewebtemplates.com/">free website templates</a>.</div></body>
</div>
<!-- end #content -->
</apex:form>


</apex:page>

STEP5:

Its done!!!!... Now go to your site detail page and set the visualforce page "SFUnearthed_articles" as the site Home Page..

If you are not sure how to create a site then click here.

force.com sites

My Force.com Site

9:15 AM

email template

Visualforce Email Template

2:22 AM

Normally we create email templates by navigating to Setup--> Communication Templates --> Email Templates .. Merge fields are used in these templates to display data...

To enable users to create flexible email templates, Visualforce Email templates was introduced.. You can create templates with extensive HTML and Visualforce coding so as to develop some really appealing and effective templates.. But there are some limitations when you create a visualforce email template.. Before going into the limitations let us create a simple template now..

Create a Visualforce Email template by navigating to
Setup --> Communication Templates --> Email Templates --> New Template
Select "Visualforce" in the first step...

Give a tilte,name,Subject for your template. Next select the Receipent type and Related to (Related to denotes the object from which you would want data to be displayed in your Email).. Click "Save".... Remember to check "Available for use" to make your email template available for use in Workflow email alerts and whereever it may be useful....

You will now see the template detail Page... In the "Email template" section click on "Edit Template" button... This will take you to a Visualforce Page editor...

You can also click on "Attach file" button in "Standard Attachments" section to attach a file from your desktop to your email..

Below is a small piece of code... You will have to put this code in the editor that appears when you click on "Edit template" button
Note: I have used "htmlEmailBody" for including HTML tags in my template.. Also, since the "Relatedto" is "Account" i am displaying Account information in my template..

<messaging:emailTemplate subject="Testing Visualforce Email Template" recipientType="User" relatedToType="Account">
<messaging:HtmlEmailBody >
Account Name : {!Relatedto.Name} <br/>
Account Description : {!Relatedto.Description} <br/>
</messaging:htmlEmailBody>
</messaging:emailTemplate>

What you Can...

With Visualforce email templates you can display any data from the related object in any format you wish.. If Relatedtotype =Account you can display any field of the Account and you can also display the related lists of Account .. For ex you can create a datatable with the value="{!Relatedto.Contacts}"... Similarly you can display other related lists...

What you Cannot...

You cannot use the <apex:page> tag inside your Email template.. Having said this you cannot use pageblock, pageblocksection or any other tag which is a child of the <apex:page> tag.. You can use outputfield,outputtext,datatable etc.. Do not attempt too much of styling and formatting for your email templates unless it is extremely necessary because you would'nt know how your email would be rendered by different providers.. Always use simple and standard formatting so that your email displays uniformly across all providers...