VisualForce offers the ability to customize the look and feel of your VisualForce Pages. This guide is intended to cover the methodologies to be followed, and some best practices while implementing your own look and feel.

Getting Started:


<apex:page>is the topmost tag in any VisualForce Page. This tag determines the styles to be used in your VisualForce pages. Let us start by creating a simple page with some basic styles.

<apex:page showheader="false" sidebar="false">
<apex:form>
<h1> This is my first VisualForce Page! </h1>
</apex:form>
</apex:page>

Let’s walk through the code line by line


<apex:page showheader="false" sidebar="false">

When you set showheader=”false” the sidebar is also removed by default, however when you set sidebar=”false” header will still display (obviously J )


The point to note here is when the header is removed Salesforce default stylesheets is no longer applied. Hence if you paste ordinary HTML code it will work perfectly.


One step further…..


Let’s modify the code and add a button..

<apex:page showheader="false" sidebar="false">
<apex:form>
<h1> This is my first VisualForce Page! </h1>
<apex:commandButton value="Done"></apex:commandButton>
</apex:form>
</apex:page>

What did you notice? You’re right, the size of the text has reduced when you have not done anything to it. Why is this so?


It is because we have used <apex:commandbutton> tag. This causes salesforce Standard stylesheets to be used. Not only this tag, but there are many others which cause a conflict. Hey!!, don’t worry there’s a way out there.

<apex:page showheader="false" sidebar="false" standardstylesheets=”false”>

This will remove the salesforce standard stylesheets and you can now use your own styles without any worries. But, of course there are many more problems to be faced…

Now lets add some color and effects…

<apex:page showheader="false" sidebar="false">
<apex:form>
<h1 style="text-align:center;color:blue;">
This is my first VisualForce Page! </h1>
</apex:form>
</apex:page>

This is called INLINE STYLING, it is called so because we have used style=” “ attribute inside the <h1> tag.


When not to use INLINE STYLING????


Suppose if you have ten <h1> tags in your page and you want all the text displayed in BLUE. Ideally you would have to add INLINE styles in all your ten <h1> tags.


To overcome this, we use <style> tag. We will modify our previous example using <style> tag.

<apex:page showheader="false" sidebar="false">
<style>
h1
{
text-align:center;
color:blue;
}
</style>
<apex:form>
<marquee> <h1>
This is my first VisualForce Page! </h1>
</marquee>
<h1> This text is displayed without INLINE styles </h1>   
</apex:form>
</apex:page>

USING STYLECLASS


How about a more complicated page with styleclass, adding many styles into a single holder is called a styleclass. You can then use the styleclass anywhere in your page

<apex:page showheader="false" sidebar="false">
<apex:page showheader="false" sidebar="false" standardcontroller="Account" standardstylesheets="false">
<style>
.red
{
background-color:red;
}
.green
{
background-color:green;
}
.blue
{
background-color:blue;
}
</style> 
<apex:form >
<h1 style="text-align:center;color:blue;">  This is my first VisualForce Page! </h1>
<apex:datatable value="{!Account.Contacts}" var="con" border="1" cellspacing="5" cellpadding="5" columnClasses="red,green,blue">
<apex:column headervalue="Contact FirstName"> <apex:outputfield value="{!con.FirstName}"/> </apex:column>
<apex:column headervalue="Contact LastName"> <apex:outputfield value="{!con.LastName}"/> </apex:column>
<apex:column headervalue="Contact Name"> <apex:outputfield value="{!con.Title}"/> </apex:column>
</apex:datatable>    
</apex:form>
</apex:page>

Here when you say columnclasses="red,green,blue" in <apex:datatable> itag it means that the styleclass "red" would be applied for the first column, "green" would be applied for the second column and "blue" would be applied for the third column. When you have a fourth column "red" styleclass would be applied again, because it works in a repetitive fashion. You can use as many classses as you need for any number of columns.


That’s it for you to get started..


The next step is using CSS in your visualforce pages. Here it is!! Click here!!

Many a times we come across situations in which we want data to be added to a picklist dynamically.

By saying dynamic i mean that you do not want an Administrator to go to the field level setup and add values to the picklist...

Here is a detailed description of a scenario from one of my friends...


Scenario..

Problem explanation with Example: A picklist field "City" with values:Delhi,Mumbai,Chennai,Kolkata(4 picklist values) and a textbox nearby to enter any other city. Supposing if Bangalore has to be entered, the user has to use the textbox. Now next time when a record is created, the "City" field should show "Bangalore" as 5th value.

Screenshots:
As you can see below, there are only three values available for selection.


I am selecting 'Other' from the dropdown, this action displays a text box for the new value and a button called "Add".



I am entering a new value called "Bangalore" and i am clicking on "Add"


Done!! Now you can see that the new value "Bangalore" is also added to the dropdown..



We will achieve this functionality using visualforce. You can then extend the code provided here to as many Visualforce pages as you want.


Step 1:

First of all, we will have to create an object to hold all the picklist values. So, go ahead and create the following..

Object name : DynamicPicklist
Field Names:
Name (Datatype : Autonumber)
PicklistValue (Datatype: text)

Step 2:

Add picklist values to the object created.. (ie) Add records to the newly created object...

For example..

Record 1: PicklistValue= 'Delhi'
Record 2: PicklistValue = 'Mumbai'

and so on...........

Now also add a value called '--Other--'. This value will be used for the user to enter a new value.

Step 3:

Creation of the Visualforce page and the Apex Class.

Apex Code.. Save this first

public class dynamicpicklist
{
public String city{get; set;}

public List<SelectOption> getcitynames()
{
  List<SelectOption> options = new List<SelectOption>();
  List<DynamicPicklist__c> citylist = new List<DynamicPicklist__c>();
  citylist = [Select Id, PicklistValue__c FROM DynamicPicklist__c ];
  options.add(new SelectOption('--None--','--None--'));
  for (Integer j=0;j<citylist.size();j++)
  {
      options.add(new SelectOption(citylist[j].PicklistValue__c,citylist[j].PicklistValue__c));
  }
  return options;
}
public String newpicklistvalue{get; set;}

public void saverec()
{
  DynamicPicklist__c newrec = new DynamicPicklist__c(PicklistValue__c=newpicklistvalue);
  insert newrec;
  newpicklistvalue=NULL;
}

}

Visualforce code...

<apex:page controller="dynamicpicklist" sidebar="false" >
<apex:form >
<apex:sectionHeader title="Dynamic Picklist" subtitle="Reusable code"/>
<apex:pageblock >
<apex:pageBlockSection title="Dynamic picklist" columns="1">
      <apex:pageblocksectionItem >
          <apex:outputlabel value="City" for="values" />
          <apex:selectList value="{!city}" size="1" id="values">
              <apex:actionSupport event="onchange" reRender="newvalue" />
              <apex:selectOptions value="{!citynames}"/>
          </apex:selectList>
      </apex:pageblocksectionItem>                                        
          <apex:outputpanel id="newvalue">
             <apex:outputpanel rendered="{!city == '--Other--'}">
             <div style="position:relative;left:75px;">             
                  <apex:outputlabel value="New value" for="newval" />
                  <apex:inputText value="{!newpicklistvalue}" id="newval"/>
                  <apex:commandbutton action="{!saverec}" value="Add!"/>
             </div>
             </apex:outputpanel>
          </apex:outputpanel>             
  </apex:pageblocksection>
</apex:pageblock>
</apex:form>
</apex:page>

How to extend this code???

Are you wondering if you will have to create one object for one picklist and suppose you have ten picklists like these, then ten objects... That is really a mess...

So, why not create ten fields in the same object.. Field1 represents picklist1, field2 picklist2 and so on...

But, be clear on the way you retrieve values and insert values into this object... For ex: I have not performed the validation to check if the newly entered value already exists..

Comments and Queries most welcome!!!!

Have you been wondering how to check whether a record has been locked? I thought there might be a field which says that. But i was not able to find any such field. Instead i found that ProcessInstance table can be used to find if a record has been locked. But that looks very tedious and complex.

How about a very simple way. Here it is!!

Step1 : Create a field (say FLAG) of type Checkbox. Set the default value to UNCHECKED.

Step2: In your Approval Process in the INITIAL SUBMISSION Action , create a Field Update. Update the FLAG to TRUE.

Step3: In your FINAL APPROVAL and REJECTION Actions, create a Field Update. Update the FLAG back to FALSE.

Step4: And done!!!! You can now find whether a record has been locked simply by checking the FLAG value. Be it in your Apex Class or Visualforce Page.

Comments and queries welcome!!

Hello ppl,

Post your questions on Visualforce development and any other related topics on Salesforce that you need quick help with.

Expect the quickest of quick response!!!

Common, lets jump straight into the Visualforce sea!!

You want to create your first VisualForce page? . Before that see this

Setup --> My Personal Information --> Personal Information --> Development Mode . This should be checked,if not set it to true.

Once done, go to your URL bar ( see image ).



Modify the URL . Ex ( https://ap1.salesforce.com/home/home.jsp would be modified to https://ap1.salesforce.com/apex/welcomepage ) and hit ENTER.



When you see this screen, click on the "Create Page" link. And done, your page has been created and you will see an editor window at the bottom of your browser. You will see some code that has been generated by default. These are called tags.

<apex:page> is the very first tag you have to learn. You cannot create a page without this tag.

There are three main attributes for this tag.

• Standardcontroller
• Controller
• Extensions

Standardcontroller is used when you want to use the standard functionality of any object (custom or standard). By standard functionality i mean SAVE, VIEW, DELETE etc. You cannot override the SAVE functionality or anything else, you do not have any control in the backend processes. But you can very well control the UI (user interface), you can display marvellous content which is otherwise not possible with the standard PageLayout.

<apex:page standardcontroller="Account">
   <apex:inputfield value="{!Account.Name}"/>
   <apex:commandbutton value="Update" action="{!Save}"/>
</apex:page>

Type this code in the editor (I know you would copy & paste) and hit SAVE icon. You can see that your new page is now developed. But wait, there doesn't appear a Account Name to edit and Save.

https://xxx.salesforce.com/apex/welcomepage?id=00190000002GA5n . Id should be a valid Account Id.

Dont be afraid that you have to modify the URL all the time, there is lot more to explore.

Controller (often called Custom controller) is used when you want to perform something extraordinary when hitting the "SAVE" button.

Here is a simple example using Custom controller ... Click here!!!

Extensions is used when you want to perform a combination of both ( Standardcontroller and Cutom)

We will dive deep into the Controller and Extensions attributes in the coming posts. But for now expand the basic code provided, add as many tags as possible and post your queries.

Some tags which come to my thought:

<apex:pageblock>

<apex:pageblocksection>

<apex:outputfield>

<apex:outputlabel>

<apex:commandlink>

Note: Use the Component Reference link in the editor window for more information.

Hello All...

This blog is exclusively for Developers and beginners who want to try out their hand with Salesforce.com, and perform wonders.

So, do you think what's special in this blog when you can find all the information in PDF's released by Salesforce????

Well, the answer is this blog is for people who hate to read a 200+ page document (like me -:) ) which guides you in snail's pace. This blog is for the fast and the furious who love to dive deep into salesforce and explore the limits.

Great going ahead!!!!!!!!!

Cheers!!