De manière générale, l’Ajax est utilisé afin de rafraîchir des données sans avoir à rafraîchir la page elle-même. Dans Salesforce, cette technique est utilisée en standard dans l’édition en ligne des enregistrements.
Ajax rend également possible la création de listes de sélection dépendantes, dont les valeurs sont alimentées par des enregistrements d’objets, par exemple, les constructeurs et les modèles de voiture.
Autre exemple, la mise à jour automatique d’un tableau de bord d’indicateurs sans rafraîchissement de la page courante.
Dans cet article, je vous expliquerais comment appeler une méthode Apex via de l’Ajax dans Salesforce avec comme exemple, l’ajout d’un enregistrement en base de données sans rechargement de page et vous vous apercevrez, que ce n’est vraiment pas insurmontable.

Avant d’aller plus loin, une petite piqûre de rappel à propos des termes clés qui se retrouveront tout au long de ce tutoriel :

  • L’Ajax (Asynchronous JavaScript and XML) est un procédé permettant de faire une requête en direction du serveur web pour que celui-ci exécute des calculs et renvoie le résultat sous forme de page web, cela permet de rafraîchir les données d’une page web sans avoir besoin de la rafraîchir elle-même.

  • L’Apex est un langage de programmation côté serveur permettant de modifier la logique métier et le traitement des données

  • Salesforce est un CRM (Customer Relationship Manager) orienté SAAS (Software As a Service) et PAAS (Plateforme As a Service) permettant la gestion des relations clients d’une entreprise.

Je vous propose une illustration pour une meilleur compréhension du principe de ce qui est présenté :illustration_tutoriel

Lorsque nous sommes sur notre page Visualforce et que nous désirons rafraîchir nos informations ou d’exécuter des calculs, cela a pour effet de :

  • Envoyer une requête Ajax vers les serveurs de Salesforce
  • Traiter des données et mise en page
  • Renvoyer des données traitées vers la page Visualforce

 

Éléments nécessaires :

Salesforce permet d’exécuter cette fonctionnalité assez simplement puisqu’il est seulement nécessaire de créer une classe WSDL (Web Services Description Language) ainsi que la page Visualforce à partir de laquelle, la méthode Apex sera appelée.

 

Présentation du déroulement :

Pour ce faire et comme précisé dans la partie précédente, nous aurons seulement besoin d’une classe WSDL, que nous nommerons “Voiture_Ajax” et d’une page Visualforce.

L’enregistrement que nous allons ajouté proviendra d’un objet “Voiture” comportant les champs suivant :

    • Nom (Text)
    • Référence (Text)
    • Couleur (Picklist)
    • Prix (Currency)

Notre exemple se déroule en 3 étapes :

1. L’utilisateur saisit les informations concernant l’enregistrement et valide le formulaire

A noter qu’aucune vérification de la conformité des données n’est effectuée ici.

1

 

2. Une fois celui-ci validé, du Javascript appelle une classe WSDL qui créé l’enregistrement dans Salesforce et le retourne.

2

 

3. Les données du formulaires sont réinitialisées et une méthode jQuery affiche les données de l’enregistrement renvoyées par la requête Ajax.

3

 

Code

Maintenant, place au code qui a servit à réaliser cette démonstration (un fichier .zip est disponible plus bas en téléchargement):

Classe WSDL :

global class Voiture_Ajax {

	webService static Voiture__c saveVoiture(String nom, String reference, String couleur, String prix) { 
        Voiture__c voiture = new Voiture__c(
        	Nom__c = nom,
        	Reference__c = reference,
        	Couleur__c = couleur,
        	Prix__c = Decimal.valueOf(prix)
        );
        
        insert voiture;
        
        return voiture;
    }
}

Vous l’aurez sûrement remarqué, ici, nous n’utilisons pas une classe Apex classique mais une classe globale et nous avons également une méthode Web Service (WebService Methods) afin de permettre à ce qu’une application externe puisse interagir avec celle-ci.

 

Page Visualforce :

<apex:page standardController="Voiture__c">

	<apex:includeScriptvalue="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"/>
	<apex:includeScriptvalue="/soap/ajax/15.0/connection.js"/>
	<apex:includeScriptvalue="/soap/ajax/15.0/apex.js"/>
	
	<script type="text/javascript">
		$jquery = jQuery.noConflict();
		
		function init(){
			sforce.connection.sessionId = '{!$Api.Session_ID}';
		}
		
		function submitForm(){
			var voiture = sforce.apex.execute("Voiture_Ajax","saveVoiture",{
               nom : $jquery('[id$=nom]').val(),                              
               reference : $jquery('[id$=reference]').val(),
               couleur : $jquery('[id$=couleur]').val(),
               prix : $jquery('[id$=prix]').val(),
            });   
           alert("Completed !");
           resetForm(); 
           populateVoiture(voiture[0]);     
		}
		
		function resetForm(){
			$jquery('[id$=nom]').val('');                          
            $jquery('[id$=reference]').val('');
            $jquery('[id$=couleur]').val('');
            $jquery('[id$=prix]').val('');
		}
		
		function populateVoiture(voiture){
			$jquery('#nom_ajax').html(voiture.Nom__c);                          
            $jquery('#reference_ajax').html(voiture.Reference__c);
            $jquery('#couleur_ajax').html(voiture.Couleur__c);
            $jquery('#prix_ajax').html(voiture.Prix__c);
		} 
	</script>
	
	<style type="text/css">
		#fieldset_form{
			width:400px;
		}
	</style>
	
	<apex:form>
		<fieldsetid="fieldset_form">
			<legend>Création d'une voiture en Ajax</legend>
			<div>
				<table>
					<tr>
						<th>Nom : </th>
						<td><apex:inputFieldid="nom"value="{!Voiture__c.Nom__c}"/></td>
					</tr>
					<tr>
						<th>Référence : </th>
						<td><apex:inputFieldid="reference"value="{!Voiture__c.Reference__c}"/></td>
					</tr>
					<tr>
						<th>Couleur : </th>
						<td>
							<apex:inputFieldid="couleur"value="{!Voiture__c.Couleur__c}"/>
						</td>
					</tr>
					<tr>
						<th>Prix : </th>
						<td><apex:inputFieldid="prix"value="{!Voiture__c.Prix__c}"/></td>
					</tr>
				</table>
			</div>
			<ahref="javascript:void(0)"onCLick="submitForm();return false;">Valider le formulaire</a>
		</fieldset>
	</apex:form>
	
	<fieldsetid="fieldset_form">
		<legend>La voiture créée en Ajax</legend>
		<div>
			<table>
				<tr>
					<th>Nom : </th>
					<td><spanid="nom_ajax"></span></td>
				</tr>
				<tr>
					<th>Référence : </th>
					<td><spanid="reference_ajax"></span></td>
				</tr>
				<tr>
					<th>Couleur : </th>
					<td><spanid="couleur_ajax"></span></td>
				</tr>
				<tr>
					<th>Prix : </th>
					<td><spanid="prix_ajax"></span></td>
				</tr>
			</table>
		</div>
	</fieldset>
	
	<apex:outputLinkvalue="/apex/test_ajax">Rafraîchir la page</apex:outputLink>

	<script type="text/javascript">
		$jquery(function() {
			init();
		});
	</script>

</apex:page>

Il est important d’inclure ces 3 scripts (la librairie jQuery ainsi que les fichiers connection.js et apex.js) sans quoi, l’appel à la méthode Apex en Ajax ne pourra fonctionner. Ces fichiers existent par défaut dans les instances de Salesforce. Peu importe la version de Jquery utilisée.

La ligne qu’il est intéressant d’étudier est celle-ci :

var voiture = sforce.apex.execute("Voiture_Ajax","saveVoiture",{
   nom : $jquery('[id$=nom]').val(),                              
   reference : $jquery('[id$=reference]').val(),
   couleur : $jquery('[id$=couleur]').val(),
   prix : $jquery('[id$=prix]').val(),
});

Elle signifie qu’elle fait appel à la méthode execute(), qui prend en premier paramètre, le nom de notre classe WSDL suivi du nom de la méthode Apex et enfin, un tableau contenant les valeurs à lui transmettre. La valeur de retour de cette fonction est l’enregistrement lui-même.

Vous l’aurez compris, utilisez de l’Ajax peut grandement vous simplifier la vie dans certains cas mais surtout apporter plus de confort à l’utilisateur.

Pour clôturer ce tutoriel, je vous propose de télécharger ces 2 fichiers compressés dans une archive au format .zip ici.

Source de ce tutoriel : salesforce.com