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}.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: