Utilisation des Formules pour gérer nos images

Il est souvent utile d’insérer une image dans une fiche d’un objet ou dans une page Visualforce personnalisée.

Avec les formules de Salesforce et la fonction IMAGE ceci devient très simple. De plus les formules permettent de rendre les images dynamiques, par exemple en fonction d’un statut en particulier ou pour avoir une représentation graphique de l’avancement d’un projet.

Comment ça marche ?

Il faut utiliser la fonction IMAGE. 

IMAGE(image_url, alternate_text, IMAGE_HEIGHT, IMAGE_WIDTH)

Celle-ci va nous permettre d’insérer le code Html juste en précisant l’url et la taille de l’image.

Par exemple :

IMAGE("/img/samples/flag_green.gif", "Vert", 120, 120)

Ceci va nous générer le code HTML suivant :

<img src="/img/samples/flag_green.gif" alt="vert" height="120px" width="120px” border="0" />

Quelques conseils

• Les paramètres IMAGE_HEIGHT et IMAGE_WIDTH permet de spécifier la taille d’affichage de notre image en pixels. Si l’on souhaite afficher l’image à sa taille réelle, il suffit d’omettre ces deux paramètres. Par exemple :

IMAGE("/img/samples/color_green.gif", "Carré vert de1px")
IMAGE("/img/samples/color_green.gif", "Carré vert de 50px*50px", 50, 50)

• Si vous le souhaitez, vous pouvez utiliser les images que vous avez stockées dans l’onglet Documents de SalesForce en utilisant la fonction comme ceci :   
  
  IMAGE("servlet/servlet.FileDownload?File="id de l’image") 

"id de l’image" est l’identifiant unique du document, par exemple 015x00000000f7e, vous pouvez retrouver votre identifiant dans l’url du navigateur lorsque vous ouvrez la fiche detail d’un document.

Le type de champ Formule 

Dans un objet Salesforce, nous pouvons utiliser un champ de type formule. En fait, c’est un champ en lecture seule, dont la valeur provient d'une formule. Cette formule peut faire référence à un autre champ de l’objet et sera donc mis à jour dès que celui-ci sera modifié. Utile pour créer des images dynamiques !

Voici quelques exemples d’images dynamiques

• Les drapeaux de différente couleur : Pour indiquer la priorité d’une tache.

IMAGE(
    CASE( {!priority},
        "Low", "/img/samples/flag_green.gif",
        "Medium", "/img/samples/flag_yellow.gif",
        "High", "/img/samples/flag_red.gif",
        "/s.gif"
    ),
    "priorityflag"
)

• Les feux de circulation vert/jaune/rouge : Pour indiquer le statut d'un projet.

IMAGE(
    CASE( {!Project_Status__c},
        "Green", "/img/samples/light_green.gif",
        "Yellow", "/img/samples/light_yellow.gif",
        "Red", "/img/samples/light_red.gif",
        "/s.gif"
    ),
    "status color"
)

• Note de 1 à 5 étoiles : Pour indiquer une note ou un score.

IMAGE( CASE( {!Rating__c},
        1, "/img/samples/stars_100.gif",
        2, "/img/samples/stars_200.gif",
        3, "/img/samples/stars_300.gif",
        4, "/img/samples/stars_400.gif",
        5, "/img/samples/stars_500.gif",
        "/img/samples/stars_000.gif"
    ),
    "rating"
)

• Barre de progression : Ici, la taille des images est calculée en fonction du pourcentage du temps réalisé sur le temps planifié d’une tache.

                    

/* Si > 100% */
IF( {!Temps_Realise__c} / {!Temps_Planifie__c} >= 1 ,
   /* On affiche la partie de 0 à 100 % en vert */
   IMAGE(
      "/img/samples/color_green.gif",
      "Done",
      15,
      ROUND(
         /* La partie verte ne peut pas etre superieur a 100% */
         MIN(100, ( {!Temps_Realise__c} / {!Temps_Planifie__c} ) * 100) / ( {!Temps_Realise__c} / {!Temps_Planifie__c} ),
         0
      )
   )
   /* On affiche la partie de 100 à 125 % en jaune */
   & IMAGE(
      "/img/samples/color_yellow.gif",
      "Passed",
      15,
      ROUND(
         /* Le partie jaune doit etre positive et ne doit pas depasser 25% */
         MIN(25, MAX(0, (( {!Temps_Realise__c} / {!Temps_Planifie__c} ) * 100) - 100)) / ( {!Temps_Realise__c} / {!Temps_Planifie__c} ),
         0
      )
   )  
   /* Et au dessus de 125 % en rouge*/
   & IMAGE(
      "/img/samples/color_red.gif",
      "Passed",
      15,
      ROUND(
         /* La partie rouge doit etre positive */
         MAX(0, (( {!Temps_Realise__c} / {!Temps_Planifie__c} )*100) - 125) / ( {!Temps_Realise__c} / {!Temps_Planifie__c} ),
         0
      )
   )
    /* On affiche le pourcentage sous forme de texte apres les bandes de couleurs */
   & " " & TEXT( ROUND(( {!Temps_Realise__c} / {!Temps_Planifie__c}  )*100, 0) ) & "%",
/* Sinon */
    /* On affiche que la partie en vert de 0 à 100 % */
    IMAGE(
      "/img/samples/color_green.gif",
      "Done",
      15,
      ROUND(
         ( {!Temps_Realise__c} / {!Temps_Planifie__c} ) * 100,
         0
      )
   )
    /* On affiche le pourcentage sous forme de texte apres les bandes vertes */
    & " " & TEXT( ROUND(( {!Temps_Realise__c} / {!Temps_Planifie__c} ) * 100, 0) ) & "%"
)

Toutes ces formules utilisent des champs de l’objet dans un case afin d’afficher la bonne image en fonction de la valeur du champ.

A vos formules ;)


source : Image Formula Fields Customization Guide