5 JavaScript tips for Visual force

JavaScript is a language which is easy to learn and implement. The best part is it has huge open source community to seek out help from, tons of projects libraries, frameworks hosted on GitHub.

JavaScript is the language of the web so you cannot live without it. It is everywhere.Developer feels and stays more productive as tool set that is required to get going with javascript is very lightweight and fast

You can easily use your javascript code inside visual force page. It’s not much difficult to include. I will be sharing some information which can be useful for you while developing such type of code.

See some tips……

1. Use Static Resources for Javascript

Salesforce says that its a best practice to include javascript inside static resource and then use it. 
<apex:page>
 <apex:includeScript value=”{!$Resource.jquery}”/>

</apex:page>

If you are including JavaScript in a page, you are introducing the possibility of cross-browser and maintenance issues that you do not have when using Visualforce. Before writing any JavaScript, you should be sure that there is not an existing Visualforce component that can solve your problem.

2. Use $Component to Reference Components from JavaScript

Use the $Component global variable to simplify referencing the DOM ID that is generated for a Visualforce component, and reduce some of the dependency on the overall page structure.
Every Visualforce tag has an id attribute. The id attribute for a tag can be used by another tag to bind the two tags together. For example, the <apex:outputLabel> tag’s for attribute can be used with the <apex:inputField> tag’s id attribute. The reRender and status attributes on <apex:actionFunction>, <apex:actionSupport>, and other action-oriented components also use the value of the id attribute from other components.

Example:
<apex:page id=”thePage”>

<script>
 
 function changeFont(input, textid) {
 
 if(input.checked) {
 
 document.getElementById(textid).style.fontWeight = “bold”;
 
 }
 
 else {

document.getElementById(textid).style.fontWeight = “normal”;
 }
 
 }
 
 </script>

<apex:outputPanel layout=”block”>
 
 <label for=”checkbox”>Click this box to change text font:</label>
 
 <input id=”checkbox” type=”checkbox”
 onclick=”changeFont(this,’{!$Component.thePanel}’);”/>
 
 </apex:outputPanel>

<apex:outputPanel id=”thePanel” layout=”block”>
 
 Change my font weight!
 
</apex:outputPanel>

</apex:page>

3. Use Visualforce Remote

JavaScript remoting is a popular, powerful, and efficient method for building Web apps with Visualforce, especially for creating pages for use in Salesforce1 or working with JavaScript libraries such as jQuery or AngularJS. Visualforce Remote Objects are proxy objects that enable basic DML operations on sObjects directly from JavaScript. Remote Objects remove some of the complexity from JavaScript remoting by reducing the need for @RemoteAction methods in an Apex controller or extension.

Example:

<apex:page>
 
 <apex:remoteObjects >
 <apex:remoteObjectModel name=”Warehouse__c” jsShorthand=”Warehouse” 
 fields=”Name,Id”>
 <apex:remoteObjectField name=”Phone__c” jsShorthand=”Phone”/>
 </apex:remoteObjectModel>
 </apex:remoteObjects>

<script>
 var fetchWarehouses = function(){
 var wh = new SObjectModel.Warehouse();
 
 wh.retrieve({ limit: 10 }, function(err, records, event){
 if(err) {
 alert(err.message);
 }
 else {
 var ul = document.getElementById(“warehousesList”);
 records.forEach(function(record) {
 var whText = record.get(“Name”);
 whText += “ — “;
 whText += record.get(“Phone”);

 var li = document.createElement(“li”);
 li.appendChild(document.createTextNode(whText));
 ul.appendChild(li);
 });
 }
 });
 };
 </script>

<h1>Retrieve Warehouses via Remote Objects</h1>

<p>Warehouses:</p>

<ul id=”warehousesList”>
 </ul>
 <button onclick=”fetchWarehouses()”>Retrieve Warehouses</button>

</apex:page>

4. Use Visualforce encoding

In Visualforce, the platform has three main encoding functions that developers can use to neutralize potential XSS threats: HTMLENCODE, JSENCODE, and JSINHTMLENCODE. To choose which encoding to use, consider how your browser is parsing the output.

If the value is going to be parsed by the JavaScript parser, use JSENCODE().
 If the value is going to be parsed by the HTML parser, use HTMLENCODE().
 If it’s a combination of both …
 * Use JSENCODE(HTMLENCODE())
 * Or JSINHTMLENCODE().

Example:
Java
var x = ‘{!myControllerVar}’; // BAD
var x = ‘{!JSINHTMLENCODE(myControllerVar)}’;

5. Try to avoid use of visualforce syntax in Javascript

Most of the time it happens when people try to include visualforce sysntax inside javascript. Try to avoid it.

Ex.
var name =’{!Account.Name}’;

Use JavaScript in it’s own Visualforce component. This keeps it nicely separate from the page markup, while still delivering it as part of the page to make debugging easier. Once you are happy that everything is working as expected.

These are some of the tips which you can follow.

Also you can check salesforce documentation which can help you a lot.

Best of Luck :)

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.