Category Archives: VisualForce

Disabling standard style sheets – Salesforce

Everywhere we have lightning and Salesforce is in process to provide all classic features in lightning. In this process there would be some features which would not be available in lightning. So sometimes we need to use the best of both worlds classic and lightning. Here is similar problem and its solution.

Problem : Custom click to dial functionality can be used in visualforce pages with the below code

<apex:page standardController="Account" showHeader="true">
    <support:clickToDial         number="415-555-1234"         entityId="001XB000000HFUM"         params="myparam1,myparam2"     />


As of now this only works with the visualforce page where showHeader is enabled. Now if we enable showHeader then visualforce includes standard style sheets but then such standard style sheets  could get mixed up with LDS in visualforce page and creates css conflict issues.

Solution : Lets consider what we want here-

  1. ShowHeader = true, on page level showheader has to be enabled other wise click to dial functionality from visualforce page would not work.
  2. Don’t want any impact on lightning design system css

Here solution is to dynamically remove the standard style sheets which gets loaded because of showheader set to true. The problem with that approach is that whenever any section of page is reRendered then standard style sheets are loaded back which again distorts the LDS css. There is one way to solve this is instead of removing standard stylesheets disabling it by below code:

 function disableStandardStylesheets(){ 
          if(this.href.indexOf('/sprites/')!=-1 &amp;&amp; this.href.indexOf('/CTI.css') == -1){ 
               $(this).attr("disabled", "disabled");

Advantage of disabling standard style sheets instead of removing is that after every reRender it will not get loaded back. This solution will other places in Salesforce where you want to disable effect of any standard stylesheets gets loaded by Salesforce.


Visualforce page with LDS and Standard Style Sheets


Visualforce page with LDS and disabled Standard Style Sheets


Guidelines for developing components in VisualForce

Lately I have been developing many visual force components so that they could be reused again and again. While developing components you will face many issues which comes when you integrate them in VisualForce pages. So here are some guidelines for newbies which can save your time later fixing bugs when component is in use.

1. Identify all the required parameters which will be required for the functionality of the component.

This is important because when component is in use then its very hard to add a required attribute for the component which can break the pages where this component has been used. So its a good think to spend a bit amount of time thinking for the required values.

2. Consider the fact that parameters will not be available in constructor of the components controller.

There is a normal issue which every newbie will face that parameters passed to the component will not be available to the constructor of the components controller. This is because sf server first creates instance of components constructor and later assign passed variables to the components variables. To solve this put every logic which expects parameters passed to component in a method and call this method when the component loads.

3. Identify if support for multiple component is required in a single page.

If you are developing a component which will be used multiple times in a page then special care needs to be taken. E.g. If you define some javascript variables then the inclusion of every component will override the values and you will find it very difficult to debug it. So if it is the case I would suggest find something which is unique which will be passed to the component and use it as prefix to every javascript variable that you create in component.

4. Don’t include js/css libraries inside a component.

It’s a good thing to develop component which can be used in a page without need to add any external libraries in page. So in that process if you are including jQuery in a component then it can cause problem when component is used in a page where already a other version of jQuery is used. So its a good thing to keep this dependency and document about the libraries required.

5. Always give default value to the non required parameters.

Its a good practice if you give default value to the parameters so that you will know what will be coming in parameters if value is not passed. This approach leads to less null and blank string checks and makes code more clear and gives predictable behavior.

6. Use  JavaScript variable based namespacing.

It’s said JavaScript is easy to learn and very easy to miss use it. Create only one variable for component and add every thing to that variable. It means your all variables will be scoped to a particular namespace which makes sure that your code will not break because of others JavaScript code. If you are using multiple components in same page then you will need to follow some convention which makes sure that every component has different JavaScript variable name.

7. Handle the reRendering functionality.

This is important. If you are developing component then you should have an assumption that the developer using our component may reRender the component. In that case if you have some JavaScript directly in the script tag then it might get executed again which might have some side effects. So its better to keep in mind that the component can get reRendered by the client while designing the component.

8. Don’t use assignTo when it is not required.

<apex:attribute name=”myValue” description=”This is the value for the component.” type=”String” required=”true”/>

There is an extra attribute assignTo where you can mention the variable name from components controller to which value gets assigned. But if
you are using that variable only on the page then there is no need to use assignTo. You can directly use that variable anywhere in the page like {!myValue}.

Custom Picklist

Hi all, In Picklist you can not have more than 1k entries. But I ran into a scenario where I wanted to show State, City and Pincodes as Picklist which were more than 1K. So the option was to create City a dependent picklist of State and a Pincode which is dependent of City. States were very less, but the cities count exceeded the limit of 1k entries and Pincodes were way higher. So went with the decision of making Custom Objects for state, city and pincode and manage dependencies with lookups. City will have lookup to State and Pincode will have lookup to City. But then came the problems of writting much code on the side of controller and as well as page to populate State,City and Pincode options in controller and then managing action support so that when state changes City needs to be also changed. So I thought why not to create a component which takes care of all issues. I have created a Picklist component which can show any lookup as picklists and also manages dependencies.


1: You can use with fieldset and every lookup can be changed to picklist.

2: Picklist(sobject) dependencies can be maintained. In demo page only those contacts are shown which are under selected account.

3. Fast response because Js Remoting is used.

4. No need to write any extra apex code to populate options and action supports to manage picklist dependencies.

5. View state less.


Here is the code for Custom Picklist Component


Here is the code for Custom Piklist Controller

Demo Page Code