Building a Blog Application(Website) using Visualforce and Force.com Sites
5:34 AMREFERENCES:
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;"> </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.
14 comments
Excellent tutorial! Thanks for posting!
ReplyDeleteI went through this in my developer org and have posted the site. Only a couple errors I am trying to work through. I can't get the Description or Author fields to show up on the site. I also can't get the Rich Text editor page to work.
Any thoughts?
Thanks for any help you can provide!
http://sfs-developer-edition.na7.force.com/
Thanks Jarrod!!
ReplyDeleteUr site looks great!!
The description and Author fields do not show up because you might not have granted access to these fields.. Have a look at this article http://www.forcetree.com/2009/08/forcecom-sites-sneak-peak.html
I will try to find out the problem with the Rich Text Editor..
Hope to see your fully developed site soon :-)
I have a problem with regard to step 2. How exactly will you do this, "You will have to modify this code ,insert visualorce tags wherever necessary and save them as visualforce pages.. This is how i did it.."? Pardon this question but this is actually my first time.
ReplyDelete-Mars
Hello Mars...
ReplyDeleteAfter you have downloaded the zip file from the free web templates link provided above, you will find a index.HTML file. Just open this file with notepad, copy the code and paste it into your visualforce page (i.e) within your apex:page tags... Now, you can see that the template as such has come into your visualforce page.. Modify what all you need, the headings adding text boxes or whatever.. As an example the site heading that comes at the top most corner would be "DEER PARK" by default.. I had to modify it to "SALESFORCE UNEARTHED". Hence, i modified the content within title tags from DEER PARK to SALESFORCE UNEARTHED.. Since this is your first time you may find it a bit difficult, but don't give up.. Write to me if you get stuck some where
Thanks for the help! It was the field security. The rich text editor is now showing. The only thing I can't get to show is the inputfield value for the Category field.
ReplyDeleteA couple more things, the Save button doesn't seem to be working when I want to post from the site. In addition the site doesn't keep any formatting I have done except merges all together. If I do the Rich Text box in SFDC it adds in all the break tags
ReplyDeleteUse Debug Logs to find out what is going wrong when you hit the SAVE button, i guess there is some exception thrown... Make sure that you have used apex:inputfield for CATEGORY and not apex:inputtext.. T
ReplyDeleteThanks for the tip! I figured it out (kind of boneheaded on my part) but it was not working because I wasn't allowing the creation of them on the site. :)
ReplyDeletei tried this Trick from atemplates i downloaded from http://www.freethemes4all.com and http://www.template4all.com/templates/ it's worked just perfect, thank you so much for this tip..
ReplyDeleteHey Edwin,
ReplyDeleteI tried adding the escape="false" attribute to apex:outputtext and it is still showing the HTML tags. Any suggestions?
Thanks!
https://sfs-developer-edition.na7.force.com/apex/SFLifeintheCloud_Home
Please give me the code for wrapper class. I want to search from two different objects.
ReplyDeleteplease tell me, How to fetch month from date time field in visualforce page
ReplyDeleteHey by any chance do you still have the css code so I can see the original stylesheet? That link is now dead.
ReplyDeleteHello, i have uploaded the CSS code and have updated the links. Good luck!!
Delete