Come fare per usare JQuery con le pagine VisualForce Salesforce

 

Questo piccolo tutorial illustra quali sono i passi da seguire per poter utilizzare jquery, insieme con tutti i suoi plugin vari, sulla piattaforma Salesforce.

Il procedimento è abbastanza semplice, grazie alla possibilità di includere Risorse Statiche nelle org di Salesforce. Questa funzionalità infatti permette di caricare foglie di stile, librerie JavaScript e anche file jar (da eseguire dentro applets o Java Web Start) e accederle dentro le proprie pagine create in VisualForce, il linguaggio dinamico proprietario della piattaforma SF.

Ecco i passi da seguire:

1. Scaricare le librerie occorrenti. Come esempio supponiamo di voler installare jQuery e jQueryUI per usare queste librerie in una pagina VisualForce. Dal sito ufficiale jQuery, scarichiamo l'ultima versione di jQueryUI, scegliendo un tema che faccia al caso nostro. Il file zip conterrà al suo interno la libreria JavaScript di jQueryUI, il core jQuery, e i fogli di stile css necessari alla corretta visualizzazione dei componenti UI che vogliamo utilizzare. Nel mio esempio ho scaricato la versione 1.8 con tutti i componenti e il tema "lightness".
2. Carichiamo il file zip come Static Resource: Eseguito il login su Salesforce, "Setup > Develop > Static Resources > New" , selezionare il file zip scaricato, e assegnare un nome (nell'esempio "JQueryUI")
3. Creiamo la pagina VisualForce dove vogliamo usare jQuery. In questo esempio la pagina si chiamerà TestJquery. "Setup > Develop > Pages > New" e assegnare il nome ("TestJquery").
4. Nella pagina importiamo le librerie contenute nello script: 
1. Core di jQuery: <apex:includeScript value="{!URLFOR($Resource.JQueryUI, '/js/jquery-1.4.4.min.js')}" />
2. Estensioni di jQueryUI: <apex:includeScript value="{!URLFOR($Resource.JQueryUI, '/js/jquery-ui-1.8.10.custom.min.js')}" />
3. Fogli di stile di jQueryUI: <apex:stylesheet value="{!URLFOR($Resource.JQueryUI, '/css/ui-lightness/jquery-ui-1.8.10.custom.css')}" />
5. Definiamo una variabile per jquery in modo da evitare i possibili conflitti. Infatti Salesforce già utilizza il simbolo $ per alcune librerie proprie. Nel mio esempio ho usato le tre lettere jqr per rappresentarmi le funzioni jquery: var jqr = jQuery.noConflict();
6. Inseriamo il nostro codice all'interno della pagina VisualForce, per esempio aprendo un dialog: jqr("#dialog").dialog();
7. Testiamo il codice all'indirizzo /apex/TestJquery

Per comodità riporto l'intero codice della pagina VisualForce TestJquery:

<apex:page>

    <apex:includeScript value="{!URLFOR($Resource.JQueryUI, '/js/jquery-1.4.4.min.js')}" />

    <apex:includeScript value="{!URLFOR($Resource.JQueryUI, '/js/jquery-ui-1.8.10.custom.min.js')}" />

    <apex:stylesheet value="{!URLFOR($Resource.JQueryUI, '/css/ui-lightness/jquery-ui-1.8.10.custom.css')}" />

    <h1>Test di utilizzo di jqeury</h1>

    <p></p>

    <div id="dialog">Questa &egrave; una finestra di dialogo fatta con jQueryUI (tema lightness)</div>

    <script type="text/javascript" language="JavaScript">

        var jqr = jQuery.noConflict();

        jqr("#dialog").dialog();

    </script>

</apex:page>