Composant personnalisé de type picklist avec de l'apex dans Salesforce

Dans Salesforce, les champs de type lookup sont utilisés afin de relier deux objets entre eux.

Dans les formulaires, certains utilisateurs peuvent ne pas trouver cela ergonomique, voire désagréable, d'avoir une pop-up (une petite fenêtre) affichée à l'écran leur demandant de sélectionner un enregistrement qui sera ensuite relié à celui que nous nous apprêtons à créer.

Autre cas envisageable, si, dans un formulaire, nous devons sélectionner un enregistrement, il peut être intéressant d'afficher plus d'informations sur les enregistrements (un nom, un prix, une date…) plutôt que seulement le nom. Heureusement pour nous, il est tout à fait possible de pallier ceci grâce à un composant personnalisé de type picklist (menu déroulant en HTML), c'est ce que nous allons découvrir dans ce tutoriel.

Avant d'aller plus loin, je vous propose quelques rappels sur les termes qui vont être abordés tout au long de ce tutoriel :

SalesforceSalesforce est un CRM (Customer Relationship Manager) orienté SaaSSaaS (Software as a Service) et PaaSPaaS (Platform as a Service) permettant la gestion des relations clients d'une entreprise ;

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

Visualforce est un framework d'interface utilisateur utilisé par la plateforme Force.com. Il utilise un langage de balises au même titre que le HTML. Chacune des balises correspond à un composant de l'interface utilisateur comme une section, un champ d'un objet Salesforce ou encore une table de données.

Le scénario est assez simple, il va s'agir de créer une track (une chanson) et de la relier à un album.

Nous aurons pour cela une page Visualforce dans laquelle sera affiché un formulaire contenant les champs pour créer une track (le nom, le prix et l'album) excepté le champ lookup faisant référence à l'album qui lui, sera remplacé par un composant personnalisé de type picklist (sous forme de menu de sélection en HTML). Au niveau du code, cela peut sembler déroutant au début, mais à force de développer sur l'environnement Force.com (plateforme de développement de Salesforce), plus rien ne peut nous surprendre.

Le principe (côté technique) est de créer une instance du contrôleur de notre composant personnalisé dans le contrôleur de la page Visualforce, afin que lors de la validation du formulaire, il soit possible de récupérer la valeur sélectionnée dans la picklist pour ensuite, l'attribuer au champ 'Album'. Sans cette instance, il ne serait malheureusement pas possible (à ma connaissance) de faire la liaison avec le custom component et donc, de ce fait, impossible de récupérer la valeur sélectionnée puisque le custom component ne fait pas partie de l'objet Track.

Voici un schéma récapitulant le principe et qui, je l'espère, sera explicite :

Avant toute chose, vous devez disposer d'une instance Salesforce afin de pouvoir suivre ce tutoriel. Si ce n'est pas le cas, je vous invite à vous rendre à cette adresseadresse. Salesforce met à disposition plusieurs types d'instances qui proposent différentes fonctionnalités et donc, à différents prix (prix par licence utilisateur par mois). La seule instance que vous pourrez généreusement obtenir de la part de Salesforce est celle de développement (celle que je vous propose via le lien du dessus) qui, comme son nom l'indique, sert à tester et développer des services. Je vous laisse juger par vous-même la grille tarifairegrille tarifiare sur les diverses instances que propose le CRM.

Ensuite, vous aurez besoin de :

• Un objet personnalisé Track contenant les champs :

  • Name (par défaut),
  • Album (Master-Detail (Album)),
  • Price (Currency(5, 2)) ;

• Un objet personnalisé Album contenant les champs :

  • Name (par défaut),
  • Description (Long Text Area (255)),
  • Price (Roll-Up Summary (SUM Track)),
  • Released On (Date),
• (Optionnel) Le plugin Force.com IDE sur Eclipse, toujours plus agréable et avancé que celui proposé par Salesforce.

Votre modèle de données devrait ressembler à ceci :

Pour ne pas que vous ayez à vous embêter à tout recopier, je vous propose

à la fin de cet article, un fichier .zip contenant tout ce dont vous avez besoin.

Comme dit un peu plus haut, il faut que dans le contrôleur de la page Visualforce, nous ayons une référence du contrôleur de notre custom component et pour ce faire, nous devons donc instancier ce contrôleur et ensuite lui transmettre le nom des albums qu'il devra afficher au travers de la variable 'albums'.

Une fois le formulaire validé, nous récupérons notre valeur grâce à la variable value, je vous expliquerai plus bas en détail où elle se trouve précisément. Sans plus attendre, le code du contrôleur :

public with sharing class TrackExtension {

    public Track__c track{get; set;}
    public PicklistController picklistController{get; set;}

    public TrackExtension(){
        this.track = new Track__c();
        
        this.picklistController = new PicklistController();
        this.picklistController.albums = this.getAlbumsBDD();
    }
    
    public PageReference save(){
        this.track.Album__c = this.picklistController.value;
        insert track;
        
        return new PageReference('/'+track.Id);
    }
    
    public List<SelectOption> getAlbumsBDD(){
        List<SelectOption> options = new List<SelectOption>();
        
        List<Album__c> albums = [
            SELECT id, Name
            FROM Album__c
        ];     
        
        for(Album__c album : albums){
            options.add(new SelectOption(album.Id, album.Name));
        }
        
        return options;
    }
}

Comme expliqué plus haut, nous instancions notre contrôleur PicklistController et nous attribuons à la variable albums de celui-ci, la méthode getAlbumsBDD(), qui extrait la liste des enregistrements de l'objet Album pour lui transmettre et retourner le tout sous forme d'une liste d'objets de type SelectOption.

Une chose supplémentaire à observer est la méthode save(), elle ne sera appelée que lorsque l'utilisateur validera le formulaire. Nous pouvons remarquer que dans celle-ci, la valeur de l'attribut Album__c de notre objet track est celle sélectionnée par l'utilisateur via le formulaire. Nous enregistrons la musique avec les informations saisies dans le formulaire, qui sont directement renseignées dans l'objet track lui-même, puisque dans la page Visualforce, nous spécifions que les valeurs des champs de saisie correspondent aux attributs de l'objet track, puis nous terminons par rediriger l'utilisateur vers la page de l'enregistrement venant tout juste d'être créé.

Petite parenthèse, vous vous demandez peut-être à quoi correspondent les {get; set;} que vous apercevez dans la définition des attributs, ils servent à les rendre accessibles depuis la page Visualforce.

Nous voici dans la page Visualforce du formulaire qui va appeler le custom component et pour cela, nous allons donner à ce fameux composant l'instance de son contrôleur :

<apex:page controller="TrackExtension">
    <apex:form >
        <table>
            <tr>
                <th>Nom : </th>
                <td><apex:inputField value="{!track.Name}" /></td>
            </tr>
            <tr>
                <th>Prix : </th>
                <td><apex:inputField value="{!track.Price__c}" /></td>
            </tr>
            <tr>
                <th>Album : </th>
                <td><c:trackComponent instance="{!picklistController}" rendered="true"/></td>
            </tr>
            <tr>
                <td colspan="2"><apex:commandButton action="{!save}" value="Save" /></td>
            </tr>
        </table>
    </apex:form>
</apex:page>

Le custom component est appelé grâce à la balise c: suivie du nom du composant, pour notre cas, il s'agit donc de c:trackComponent. Il peut y avoir n'importe quel nom d'attribut (instance dans notre cas), mais il faut que celui-ci corresponde à un attribut du composant. Ce que nous faisons pour le paramètre instance, c'est de lui attribuer la valeur de l'attribut picklistController du contrôleur de notre page.

Le composant est donc appelé grâce à ceci :

<c:trackComponent instance="{!picklistController}" rendered="true"/>

Autre chose :

<apex:commandButton action="{!save}" value="Save" />

Indique que lors de la validation du formulaire, la méthode save() du contrôleur de notre page sera appelée, j'ai légèrement plus haut expliqué quel est son rôle, cette méthode sert entre autres à enregistrer la track, puis rediriger l'utilisateur vers la page de détails de celle-ci.

Je viens juste de vous dire au-dessus, qu'il fallait que le paramètre instance ait le même nom que celui d'un attribut utilisé dans le composant. Vous remarquez donc que c'est chose faite, car en plus d'assigner la valeur de ce paramètre à l'attribut picklistController situé dans le contrôleur du custom component, nous spécifions qu'il est requis (paramètre required) puisque sinon, cela n'a aucun intérêt (et ne fonctionnerait pas,) mais qu'il est surtout de type PicklistController au travers du paramètre type. De même que le paramètre description est obligatoire (sinon une erreur intervient et impossible de sauvegarder la page), alors que selon la documentation, ce n'est pas le cas, allez savoir pourquoi..

<apex:component controller="PicklistController">
    <apex:attribute name="instance" assignTo="{!picklistController}" required="true" type="PicklistController" description="" />
    <apex:selectList value="{!picklistController.value}" size="1">
        <apex:selectOptions value="{!picklistController.albums}"></apex:selectOptions>
    </apex:selectList>
</apex:component>

Les valeurs qui seront affichées dans la picklist sont celles placées dans la variable albums de l'instance du contrôleur (picklistController) et la valeur sélectionnée que nous récupérerons correspond à l'attribut value détenu dans le contrôleur du custom component et dans la balise apex:selectList.

Passons maintenant au contrôleur Apex du composant :

public class PicklistController{
    
    public String value{get; set;}
    public List<SelectOption> albums{get; set;}
    public PicklistController picklistController{get; set;}
       
    public PicklistController(){}
}

Il contient les albums qui seront proposés à l'utilisateur dans la picklist via l'attribut albums, ainsi que la valeur sélectionnée lors de la validation du formulaire au travers de value.

Vous remarquerez qu'il y a également un attribut de type PicklistController qui est utilisé pour faire la liaison entre le contrôleur de la page Visualforce qui appelle ce composant et lui-même afin de récupérer la valeur sélectionnée dans l'attribut value.

Maintenant que nous en avons fini avec le code, voilà à quoi ressemble notre formulaire :

Chouette non ?

C'est tout ce qu'il faut savoir afin de concevoir un custom component de type picklist dans Salesforce. Vous pouvez le généraliser en lui donnant des noms de variables plus généraux comme renommer l'attribut ‘albums' en ‘datas' par exemple pour pour que vous puissiez le réutiliser dès que vous en aurez besoin.

C'est ici que se termine ce tutoriel, je vous ai présenté ce qu'il faut savoir pour que vous puissiez créer votre propre composant personnalisé.

Il vous faut retenir que vous devez avoir créé votre composant dans Salesforce, de développer ensuite son contrôleur, puis sa page Visualforce et de terminer au niveau Apex par appeler votre composant en l'instanciant depuis le contrôleur de la page Visualforce d'où vous en avez besoin.

Comme je vous l'ai dit plus haut, je vous mets à disposition, pour ne pas que vous vous embêtiez à copier le code, une archive au format .zip contenant :

• la page Visualforce du formulaire ;
• le contrôleur Apex de cette page Visualforce ;
• le composant personnalisé ;
• le contrôleur du composant personnalisé ;
• les objets Track et Album ;
• …et puis c'est tout.

Vous trouverez également ce tutoriel sur mon site personnel.

Pour terminer, je tiens à remercier ceux qui m'ont permis de publier ce tutoriel :

• Phanloga
• vermine