I have been working on the force.com platform for nearly three years now, and the only problem which drives me nuts is when i have to deal with UI (User Interface) issues.

I have to admit that it really looks beautiful when you can have your own custom CSS for your visualforce pages with wonderful styles. But, when it comes to fixing UI issues i actually spend a lot of time to find the bug. Hence, in this article i have put together the methodologies i use to overcome them. This saves lot of your time (GUARANTEED).

The " !important " keyword:

!important - meaning - DONT take what is in the CSS. take what i tell here.

Let's jump straight. Let's say that you have a "div" with the name "styleme" and the defenition is as follows

.styleme
{
  margin:o;
}

This implies that there should be no space between the margin of your browser (actually the parent div) and the contents in this div.
And, let's say that you have a visualforce page like this

<apex:page>
<style>
.styleme
{
  margin:o;
}
</style>
     <div class="styleme">
             Hi!!! I am styled!!!
     </div>
</apex:page>

Just assume that this works fine in FireFox and when you view the same page in Internet Explorer there is a huge gap from the margin. Adding a simple keyword makes it to work across all browsers. Your visualforce page would now be like

<apex:page>
<style>
.styleme
{
  margin:o !important;
}
</style>
     <div class="styleme">
             Hi!!! I am styled!!!
     </div>
</apex:page>

This is just an example of how to use this keyword. Real scenarios may arise when you use your own CSS in conjunction with the Standard CSS of Salesforce. In such cases this keyword helps a lot.

Other uses of this keyword:

One other, major use of this keyword is when you want to override the Standard Styles of Salesforce.Say for example that want to override the color of the Page Block Header (this is transparent by default). The following code gives a red color to the header.

<apex:page>
<style>
.pbHeader
{
  background-color: RED !important;
}
</style>
     <apex:pageblock>
         <apex:sectionheader title="My custom Header"/>
     </apex:pageblock> 
</apex:page>

FIREBUG

Firebug is a great plugin for Firefox which comes in handy for debugging your pages. It helps you identify the associated style classes very easily.
You can download it from here .. Click here
It is using this plugin that i found that the styleclass for the pageblock header was 'pbHeader'.


How to use this???

When you open any normal salesforce page, click on the "bug" icon at the rightmost bottom of the page.

Then click on the select tool, like this


And then select the Element of which you want to know the styleclass.
Page Block Header in our case.



When you use this for Visualforce pages and have the "development mode" on your user page turned "on", make sure to remove the page editor by replacing your url with

htttp://cs1.salesforce.com/apex/samplevfpage?core.apexpages.devmode.url=1

This parameter removes the Page Editor and you get the clean CSS and HTML to analyze using FireBug.

Comments and Questions welcome!!!

A year back, this same day i started this blog. I was not serious at blogging, to be frank. But, i was really surprised by the support and encouragement that every visitor to this blog has given me. Your encouragement keeps me going and drives me to write more articles...

Thank you all !!!!!

Keep visiting!!!

Here is a simple example of a HTTP callout... I guess it does not need much explanation

Do write to me in case you need further clarification....

public class UploadFile_DifferentOrg {

    public UploadFile_DifferentOrg(ApexPages.StandardController controller)
    {

    }
    String ErrorMessage;

    public void Login()
    {
        
        ErrorMessage='';
        final string baseUrl = 'https://login.salesforce.com/'; 
        final string username = 'test@test.com'; 
        final string password = 'test@123';
        Http h = new Http();
        HttpRequest req = new HttpRequest();
        req.setMethod('GET');
        req.setEndpoint(baseUrl + '?loginType=&un='+username+'&pw='+password);
        HttpResponse res = h.send(req);
        
          
           req.setEndpoint(baseUrl + 'apex/UploadFile_DifferentOrg');
           
           res = h.send(req);
           if (res.getBody().indexOf('success=true')>-1)
           {
              system.debug('Success');
           }  
        }
    

    }

Here is a small example of how to pass values from your popup window to your parent window...........
This example uses javascript....

Parent Page: (popupparent)
Name this visualforce page as "popupparent"

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

   <form method="post" name="f1">
    <table> <tr>
            <td ><font face="Verdana">Your Name</font>
            
            <input type="text" name="p_name"> 
            
            
            <a href="javascript:void(0);" NAME="My Window Name" title=" My title here " onClick=window.open("/apex/popupchild?core.apexpages.devmode.url=1","Ratting","width=550,height=170,left=150,top=200,toolbar=1,status=1,"); >Click here to open the child window</a>
            
 
    </td></tr>
    
    </table>
    
  </form>  
 
</apex:page>

Child(Pop-up) Window:
Name this visualforce page as "popupchild"

<apex:page showheader="false" >
  <html>
<head>
 
<script langauge="javascript">
function post_value(){
opener.document.f1.p_name.value = document.frm.c_name.value;
self.close();
}
</script>
 
<title>(Type a title for your page here)</title>
</head>
 

<body bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#800080" alink="#ff0000">
 
<form name="frm">
<table >
 

<tr><td align="center"> Your name<input type="text" name="c_name" size="12" value="test"> <input type="button" value="Submit" onclick="post_value();">
</td></tr>
</table></form>
</apex:page>

I recently had to do an analysis about chatter as my customer wanted it to be enabled and i thought it would be worth sharing it here.

What is Chatter?

Before we start to analyze the advantages and disadvantages of chatter let me give you a sense of what chatter is.

Chatter is like a social networking website (twittter, orkut, facebook etc) with the only difference that the users of Chatter are the people within a company (ie Salesforce.com users). Chatter is an application which allows you to connect and share information with your colleagues in real time. Chatter when used efficiently could lead to excellent Service and Sales within your company.

As an example, let's say that you are using the "Call Center" application of Salesforce. A customer of yours has raised a case and it is being taken care of by your customer service representative. If the representative does not know a solution, he can simply write a post in chatter asking for help. His colleagues could help him quickly by replying to the post. This would lead to quicker customer service.

More Information about Chatter:

You can find more information, code recipes, and an excellent custom application called "Chatter Bubbles". click here.

What you can't find in the above link is obviously the disadvantages. So, let's see it here.

Features not available as of now :

• Chatter could be enabled for the entire organization only. So, if you say that you want only a had full of users to use Chatter then that's not possible.
• The profile page (Profile tab) of every user is not customizable. When you login to Salesforce, at the right topmost corner you will see your Name next to the Setup link. When you click on this link you will be shown your profile page, which displays the people you follow, the people who follow you etc. This page is not customizable.
• Chatter email notifications are predefined. You cannot customize them.
• Anybody can follow anybody. NO RESTRICTIONS.
• You can see the Show/Hide Chatter button on the home page as well as on the detail page of any record (the associated object should be enabled for chatter). You cannot remove it from the home page as well as from the detail page of records. The Chatter gadget is not associated with page layout and hence cannot be removed.

I hope that these will be addressed soon by salesforce.

Some Quick Tips:

Get registered for a free developer preview - Click here

Chatter Email Settings:









Chatter custom feeds:

You can write triggers to create custom feeds. All objects related to chatter are exposed through the API and hence you can play around with them. Here is a small example

trigger customfeeds on Opportunity (after update) 
{
     for ( Opportunity newopp: Trigger.new) 
     {
             Opportunity oldopp = Trigger.oldMap.get(newopp.id);
             if (newopp.Probability != oldopp.Probability)
             {
                 FeedPost fpost = new FeedPost();
                 fpost.ParentId = newopp.Id; 
                 fpost.Body = ' - Probability has changed from '+oldopp.Probability +'%'+ ' to '+newopp.Probability +'%';
                 insert fpost;
             }
     }           

    
}