Category Archive

jQuery UI for Salesforce provides a complete set of jQuery powered elements that can be used instead of the standard elements. This includes automatic client-side validation.

A page showing the jQuery elements compared with standard elements can be found here.

Usage

Complete specifications follow for each enhanced component:

Text:

<c:enhancedText pageController="{!this}" fieldName="Text__c"   />

You can also force there to be both a uppercase and lowercase letters by telling to to validate as a name:

<c:enhancedText pageController="{!this}" fieldName="Text__c"  validateAs="name" />

Email:

<c:enhancedText pageController="{!this}" fieldName="Email__c"  validateAs="email" />

Number (Double):

 <c:enhancedText pageController="{!this}" fieldName="Number__c" validateAs="number" />

Percent:

<c:enhancedText pageController="{!this}" fieldName="Percent__c" validateAs="percent" />

Checkbox (Boolean):

<c:enhancedCheckbox pageController="{!this}" fieldName="Checkbox__c"   />

Phone:

<c:enhancedText pageController="{!this}" fieldName="Phone__c"  validateAs="phone" />

Defaults to international phone, for US domestic phone use:

<c:enhancedText pageController="{!this}" fieldName="Phone__c"  validateAs="phoneus" />

Picklist:

<c:enhancedSelect fieldName="Picklist__c" pageController="{!this}" object="{!TestObject__c}" /

Multi-Picklist (Multiselect)

<c:enhancedMultiselect pageController="{!this}" fieldName="Picklist_Multi_Select__c" object="{!TestObject__c}"  /

Lookup (Reference) :

<c:enhancedLookup pageController="{!this}" fieldName="Test_Lookup_Object__c" objectToLookup="TestLookupObject__c" />

Lookup (Reference) :

<c:enhancedLookup pageController="{!this}" fieldName="Test_Lookup_Object__c" objectToLookup="TestLookupObject__c" />

Textarea :

<c:enhancedTextarea pageController="{!this}" fieldName="Text_Area__c" expandable="true" width="145" height="50" />

Controller:

(1) Install enhanced components via unmanaged package install link.

(2) Have your main controller (which can be a standard controller) extend PageControllerBase:

public with sharing class DemoPageController extends PageControllerBase

If you want to use a standard controller include this:

	  public DemoPageController(ApexPages.StandardController controller) {
	    	standardCon = controller;
	        this.myObject = controller.getRecord();
	  }

Then include this function:

	  // First we save the values from the Enhanced Component controllers, then whatever standard fields there are.
	  // If you are using standard fields in addition to enhanced components, whichever method is utilizing fields required by the API should always be in the first position

	 public PageReference save()
	 {
	  	ecSave();
	  	standardCon.save();

	  	return null;
	 }

Page:

Include your favorite jQuery UI theme easily:

    <apex:stylesheet value="{!URLFOR($Resource.JQueryUICup,'development-bundle/themes/cupertino/jquery.ui.all.css')}"/>

See how standard themes will look by choosing the switch theme option on this page. You can also easily create your own theme with Themeroller.

On your page you will also need to enable validation.

The easiest way is to assign a form styleClass element to your form declaration:

<apex:form styleClass="form" >

Then just before you close your form tag add an action function:

       <apex:actionFunction action="{!pageController.save}" name="saveMe"></apex:actionFunction>
  </apex:form>

Then add the automatically generated javascript:

    <apex:outputText escape="false" value="{!pageController.completeJavascript}"/>

This line will not only add hotlinks to the Google and Microsoft CDNs (for JQuery, JQueryUI and JQuery validation plugin), it will enable validation any form with a form class and add all of the necessary methods for validation.

If you don’t want to use the automagic client-side validation, hotlink the necessary CDNs manually:

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"/>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"/>

Here is a list of all of the Plugins currently included:

JQuery UI 1.8
JQuery Validation (Joern Zaefferer)
Autocomplete 1.1.1 (Joern Zaefferer)
Expandable 1.0 (Brandon Aaron)
Select Menu (Filament Group)
Multiselect 0.6 (Eric Hynds)

Github repo here.