Pages

Tuesday, December 23, 2008

URLFOR function finally explained!

While developing your Visualforce pages you may need to be able to obtain the URL of certain actions, s-controls or your static resources.

I found it personally a challenge since the documentation for "URLFOR" function is not included in "Visualforce Developer Guide" itself and instead included in the general help area of Salesforce.

Generally you can use the "URLFOR" function for three purposes:
  1. Obtain URL of a s-control
  2. Obtain URL of a static resource
  3. Obtain URL of an object's action
In this article I will demonstrate usages of the three above.

Generally, URLFOR function returns a relative URL for an action, s-control, or a file in a static resource archive in a Visualforce page. Following the syntax of the function:

{!URLFOR(target, id, [inputs], [no override])}

Parameters shown in brackets ([]) are optional.

  • target: You can replace target with a URL or action, s-control or static resource.
  • id: This is id of the object or resource name (string type) in support of the provided target.
  • inputs: Any additional URL parameters you need to pass you can use this parameter.
    you will to put the URL parameters in brackets and separate them with commas
    ex: [param1="value1", param2="value2"]
  • no override: A Boolean value which defaults to false, it applies to targets for standard Salesforce pages. Replace "no override" with "true" when you want to display a standard Salesforce page regardless of whether you have defined an override for it elsewhere.

Obtaining URL of a s-control:

<!-- Use $SControl global veriable to reference your s-control and pass it to the URLFOR function -->
<apex:outputLink value="{!URLFOR($SControl.MySControlName)}">Link to my S-Control</apex:outputLink>



Obtaining URL of a Static Resource

<!-- Use $Resource global veriable to reference your resource file -->
<apex:image url="{!URLFOR($Resource.LogoImg)}" width="50" height="50" />

<!-- If your file is in another ZIP file, then pass the path of the file as id to URLFOR -->
<apex:image url="{!URLFOR($Resource.CorpZip, 'images/logo.gif')}" width="50" height="50" />




Obtaining URLs of an Object's Actions:
In order to get URL of the an object's actions you need to know what actions that object supports. Below are some of the common actions most Objects support:
  • View: Shows the detail page of an object
  • Edit: Shows the object in Edit mode
  • Delete: URL for deleting an object
  • New: URL to create a new record of an object
  • Tab: URL to the home page of an object
However, each object may support additional actions for example Contact also supports "Clone" action and Case supports "CloseCase" action.

<!-- Use $Action global varialble to access the New action reference -->
<apex:outputLink value="{!URLFOR($Action.Account.New)}">New</apex:outputLink>
<br/>
<!-- View action requires the id parameter, a standard controller can be used to obtain the id -->
<apex:outputLink value="{!URLFOR($Action.Account.view, account.id)}">View</apex:outputLink>
<br/>
<!-- Edit action requires the id parameter, id is taken from standard controller in this example -->
<apex:outputLink value="{!URLFOR($Action.Account.Edit, account.id)}">Edit</apex:outputLink>
<br/>
<!-- Delete action requires the id parameter, also a confirm message is added to prevent deleting the record when clicked by mistake -->
<apex:outputLink value="{!URLFOR($Action.Account.delete, account.id)}" onclick="return window.confirm('Are you sure?');">Delete</apex:outputLink>
<br/>
<!-- From all custom buttons, links, s-controls and visualforce pages you can use the following to get the link of the object's homepage -->
<apex:outputLink value="{!URLFOR($Action.Account.Tab, $ObjectType.Account)}">Home</apex:outputLink>



Thursday, December 4, 2008

Modifying the Default Force.com Site Template to Build am Excellent Customer Portal

Force.com Sites were released on December 2, 2008 (just two days ago) and we are all so excited about this new feature.

Now you can potentially create Customer/Partner portals that are integrated with your CRM readily, this is big advantage plus that with ease of Visualforce's technology and shorter development life-cycles now you can deliver with a much faster pace.

In this article I will demonstrate how fast we can modify our sites' template to customize the looked and feel our customer, partner, etc portals.

With each new site that you create there are a few new Visualforce pages and components added to your box. some of those are:

User Management Pages:
  • SiteLogin
  • SiteRegister
  • SiteRegisterConfirm
  • ForgotPassword
  • ForgotPasswordConfirm
  • Unauthorized

Template:
  • SiteTemplate

Components:
  • SiteLogin
  • SiteHeader
  • SiteFooter
Also a few more pages for handling errors and such.

Now let's take a closer look at the SiteTemplate:



<!-- showHeader is turned off so we won't see any Salesforce standard tabs or sidebar -->
<apex:page showHeader="false" id="SiteTemplate" standardStylesheets="true">
<!-- A section is reserved for header of the site -->
<apex:insert name="header">
<c:SiteHeader />
<hr/>
</apex:insert>
<!-- This section is where you can include the content of each page of your site-->
<apex:insert name="body"/>
<!-- A section is reserved for footer of the site -->
<apex:insert name="footer">
<hr/>
<c:SiteFooter />
</apex:insert>
</apex:page>



Generally it's a good practice that you follow the same pattern in developing your sites.

Furthermore, it's best to include your logo, log in and out links, any headline that remains the same throughout your site and above all your site navigation menu to be included in the "SiteHeader" component.

The same way, you can modify the "SiteFooter" component to add your site's pages footer template. It's good practice to include your site's shortcuts links and your company copy right message in this section.

The shortcuts links in this section particularly is good for search engine purpose, in any case you may be using dynamic (javascript enabled) menus, so this part will compensate for that.

Now let's see how we can benefits from all this. At this point you can start adding pages into your site. For your new pages to be able to utilize your template you need to do the following:




<apex:page showHeader="false" standardStylesheets="true">
<apex:composition template="{!$Site.Template}">
<apex:define name="body">
<!-- Page's Content go here -->
</apex:define>
</apex:composition>
</apex:page>





The above code, the Composite component enables the page to use our site template.

Also if you need to overwrite the existing template's section (Insert Component), you will need to add a "apex:define" component with the same name attribute as the "insert" component in the template.

So in order to overwrite the "body" section of the template, you will need write this line:

<apex:define name="body">
... You page's body...
<apex:define>

And one more thing, in order to be able to use your Static Resources in your force.com Sites, you are required to set the Cache mode of those resources to public. By default all them are in private mode.

Click here to see a usage sample of such template in action:
http://zagrus-developer-edition.na5.force.com/Customer