Lundi matin, vous prenez votre café en vous branchant dans vos environnements. Soudainement, vient à vos oreilles une demande pour ajouter du graphisme plutôt qu’un champ à option dans un formulaire de votre application pilotée par modèle, avec la mention: « C’est une petite demande, ça devrait prendre 2 minutes ». Évidemment, il n’y a rien de bien compliqué dans cette demande, mais quand on agit sur un système low-code, un ajout de la sorte peut affecter rapidement le système, sans oublier qu’il s’agit de personnalisation qui devra être maintenu « hors de la boîte ». Ce qui est mineur pour certains peut être majeur pour d’autres…
Plusieurs se tournent vers le canvas imbriqués pour répondre à ce type de besoin. Le raisonnement est bon et légitime: on veut une personnalisation graphique dans un CRM, quoi de mieux que de prendre la technologie offerte dans la plateforme!
Par contre, après avoir développé votre petite application imbriquée dans votre CRM, on constate rapidement que la performance n’est vraiment pas au rendez-vous. Sans oublier que vous faites votre application dans un environnement de développement, donc tout va bien. Demain, vous devrez amener cette imbrication dans un nouvel environnement, potentiellement de production. Résultat, vous devez repartager l’application canvas, mais à qui ? À tous ? Ce serait une problématique de faire ainsi, il faut donc un groupe de sécurité… Maintenir le lien, maintenir le canvas, endurer le chargement de 2-3 secondes de l’image, etc.
Finalement, un simple fichier png qui remplace un champ à option peut vite devenir lourd malheureusement. Il doit bien y avoir une solution plus idéale ? Une ressource web!
Ressource web: HTML
Le canvas a ses forces et peut être la solution pour des traitements plus important. Cependant, pour une opération d’affichage comme dans notre exemple, on préfèrera un fonctionnement au niveau du navigateur directement. Dans la plateforme, nous pouvons ajouter une multitude d’éléments web sous forme de ressources web (images, HTML, Javascript, etc). Il ne suffit que d’intégrer ses composants dans notre formulaire pour personnaliser notre application pilotée par modèle et en faire un CRM unique, à notre image et beaucoup plus agréable pour les yeux.
Recette du bonheur
Contexte: On veut afficher un champ à option dans un formulaire, mais sous forme d’image facile et rapide à interpréter.
Rendons l’état plus accessible visuellement. Pour se faire, on doit avoir une correspondance en images pour chaque valeur du champ à option:
-Fonctionnel:
-Brisé:
-En réparation:
-Non disponible
On doit créer des composantes de type ‘Ressources web’ avec un format image pour pouvoir les utiliser ensuite dans notre application:
On y sélectionne le fichier image et on lui donne un nom. Notez le nom logique car c’est ce nom que vous utiliserez dans votre fichier HTML:
Ensuite, on crée une nouvelle ressource web, mais dans un format HTML cette fois-ci. Voici le code HTML intégré dans la ressource:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.statecolorctrl {
text-align: left;
font-family: 'Segoe UI', Arial, sans-serif;
font-size: 1.25em;
}
.statecolorctrl img {
display: inline-block;
vertical-align: middle;
width: 48px;
height: 48px;
margin-right: 10px;
margin-bottom: 0px;
margin-left: 10px;
margin-top: 0px;
max-width: 100%;
}
</style>
<script type="text/javascript">
document.onreadystatechange = function () {
if (document.readyState == "complete"){
getStateColor();
}
}
function getStateColor() {
var stateColorValue = parent.Xrm.Page.getAttribute("cedy_etat");
if (null != stateColorValue) {
switch (stateColorValue.getValue()) {
case 0:
document.getElementById("statecolorimg").src = "../../../../cedy_/icons/thumbsup";
document.getElementById("statecolorimg").alt = "Fonctionnel";
break;
case 1:
document.getElementById("statecolorimg").src = "../../../../cedy_/icons/damage";
document.getElementById("statecolorimg").alt = "Brisé";
break;
case 2:
document.getElementById("statecolorimg").src = "../../../../cedy_/icons/medical";
document.getElementById("statecolorimg").alt = "En réparation";
break;
case 3:
document.getElementById("statecolorimg").src = "../../../../cedy_/icons/outofstock";
document.getElementById("statecolorimg").alt = "Non disponible";
break;
}
document.getElementById("statecolortext").innerText = stateColorValue.getText();
}
}
</script>
</head>
<body>
<div class="statecolorctrl">
<img src="" alt="" id="statecolorimg">
<span id="statecolortext">...</span>
</div>
</body>
</html>Assurez-vous de publier le composant après avoir sauvegarder le tout. Notez « ../../../../ » que vous devrez probablement adapter dans votre environnement en enlevant des sauts de dossier ou en ajoutant. De plus, « cedy_etat » faisant référence au nom logique de mon champ à option.
Du côté du formulaire maintenant, voici l’état avant les changements:
Changements:
-On masque le champ ‘État’;
-On ajoute une composante ‘Ressource Web HTML’;
-Paramètrage du composant:
Maintenant, vous devriez avoir quelque chose du genre:
-On enregistre et publie;
-On retourne dans notre application;
-On s’assure de rafraîchir en supprimant la mémoire cache (ctrl+f5).
Voici ce à quoi le formulaire devrait ressembler après les changements:
L’exécution est rapide, le développement est concentré sur un fichier HTML et ne compromet aucunement le bon fonctionnement du formulaire si la valeur du champ est brisé.
Conclusion
Le but n’est pas de mépriser le canvas imbriqué, mais de lui attribuer une fonction plus précise plutôt que de l’utiliser à toutes les sauces. Il ne s’agit que d’une idée/proposition pour aider ou faire sauver du temps dans vos projets!
Cheers!