{"id":707,"date":"2019-06-12T14:14:18","date_gmt":"2019-06-12T13:14:18","guid":{"rendered":"http:\/\/wollef.org\/?p=707"},"modified":"2019-06-12T14:14:18","modified_gmt":"2019-06-12T13:14:18","slug":"a-la-decouverte-de-salesforce-developper-des-composants-visuels","status":"publish","type":"post","link":"https:\/\/wollef.org\/blog\/a-la-decouverte-de-salesforce-developper-des-composants-visuels\/","title":{"rendered":"A la d\u00e9couverte de salesforce (2\/3) &#8211; D\u00e9velopper des composants visuels"},"content":{"rendered":"<p>Dans Salesforce, une fois que l\u2019on a configur\u00e9 comme avant, on peut juste utiliser l\u2019outil que Salesforce nous propose pour saisir des objets ou les voir ou les chercher.<\/p>\n<p>Mais pour ce projet, je dois aller plus loin, et j\u2019ai besoin de programmer des \u00e9crans sp\u00e9ciaux ou des calculs. C\u2019est cette partie de programmation que j\u2019avais d\u00e9j\u00e0 faite dans mes travaux personnels pr\u00e9c\u00e9dents (\u00ab\u00a0Histoire des langages de programmation\u00a0\u00bb et \u00ab\u00a0D\u00e9velopper un jeu en Java\u00a0\u00bb).<\/p>\n<p>Dans cette partie du travail on va d\u00e9couvrir comment programmer dans Salesforce.<\/p>\n<h1>1<a name=\"_Toc6859832\"><\/a>.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Les outils<\/h1>\n<p>Pour pouvoir programmer dans Salesforce j\u2019ai d\u00fb installer deux outils sur mon ordinateur.<\/p>\n<h2>a)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 SFDX CLI (Command Line Interface)<\/h2>\n<p>Cet outil l\u00e0 nous sert \u00e0 envoyer les programmes et les configurations r\u00e9alis\u00e9s vers Salesforce et de r\u00e9ceptionner ceux d\u00e9j\u00e0 r\u00e9alis\u00e9s.<\/p>\n<p>Voici le guide pour l\u2019installer\u00a0:<\/p>\n<p><a href=\"https:\/\/developer.salesforce.com\/docs\/atlas.en-us.218.0.sfdx_setup.meta\/sfdx_setup\/sfdx_setup_install_cli.htm#sfdx_setup_install_cli\">https:\/\/developer.salesforce.com\/docs\/atlas.en-us.218.0.sfdx_setup.meta\/sfdx_setup\/sfdx_setup_install_cli.htm#sfdx_setup_install_cli<\/a><\/p>\n<h2>b)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Visual Studio<\/h2>\n<p>Pour travailler plus facilement j\u2019ai install\u00e9 un programme qui s\u2019appelle Visual Studio. Dans ce programme on peut programmer facilement. C\u2019est un outil comme Eclipse qu\u2019on avait utilis\u00e9 pour programmer en Java dans le Travail Personnel Pr\u00e9c\u00e9dent.<\/p>\n<p>Voici le guide qui explique comment l\u2019installer.<\/p>\n<p><a href=\"https:\/\/developer.salesforce.com\/docs\/component-library\/documentation\/lwc\/lwc.install_setup_develop\">https:\/\/developer.salesforce.com\/docs\/component-library\/documentation\/lwc\/lwc.install_setup_develop<\/a><\/p>\n<p>Comme indiqu\u00e9 dans le guide d\u2019installation, \u00e0 cet outil on doit ajouter un pack d\u2019extensions qui lui permet de savoir manipuler Salesforce et le CLI.\u00a0: le <a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=salesforce.salesforcedx-vscode\">Salesforce Extension Pack<\/a>\u00a0for Visual Studio Code.<\/p>\n<p>Voil\u00e0, nous sommes pr\u00eats pour d\u00e9velopper en Salesforce\u00a0!<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-710\" src=\"http:\/\/wollef.org\/wp-content\/uploads\/2019\/06\/dev1-300x213.png\" alt=\"\" width=\"468\" height=\"332\" \/><\/p>\n<h1>2<a name=\"_Toc6859833\"><\/a>.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Un premier test : Un panneau sur la voiture qui affiche sa couleur<\/h1>\n<p>Comme premier essai dans ce nouveau programme on va cr\u00e9er un petit panneau qui va afficher la couleur de la voiture.<\/p>\n<h2>a)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Cr\u00e9er un projet<\/h2>\n<p>Comme dans Eclipse il faut tout d\u2019abord cr\u00e9er un projet dans Visual Studio o\u00f9 on va placer notre code.<\/p>\n<p>Pour cr\u00e9er un projet, dans Visual Studio, on fait <strong>Ctrl shift P<\/strong>, on tape \u00ab\u00a0SFDX\u00a0:Create Project\u00a0\u00bb, on donne son nom \u00ab\u00a0Cars\u00a0\u00bb et l\u2019endroit o\u00f9 stocker le projet sur le PC.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-712\" src=\"http:\/\/wollef.org\/wp-content\/uploads\/2019\/06\/dev2-300x58.png\" alt=\"\" width=\"455\" height=\"88\" \/><\/p>\n<h2>b)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Cr\u00e9er le composant<\/h2>\n<p>Une fois que le projet est pr\u00eat, pour cr\u00e9er le composant que l\u2019on veut d\u00e9velopper, on fait un clic droit sur le r\u00e9pertoire lwc du projet Cars, et on s\u00e9lectionne \u00ab\u00a0create lightning web component\u00a0\u00bb. On lui donne son nom \u00ab\u00a0Car Info\u00a0\u00bb.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-713\" src=\"http:\/\/wollef.org\/wp-content\/uploads\/2019\/06\/dev3-300x168.png\" alt=\"\" width=\"470\" height=\"263\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>Visual studio a cr\u00e9\u00e9 du coup trois fichiers pour le composant\u00a0:<\/p>\n<ul>\n<li>CarInfos.html\u00a0: la page visible<\/li>\n<li>CarInfos.js\u00a0: le code du programme<\/li>\n<li>CarInfos.js-meta.xml\u00a0: des infos sur ce qu\u2019on peut faire avec le composant<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-714 aligncenter\" src=\"http:\/\/wollef.org\/wp-content\/uploads\/2019\/06\/dev4-300x185.png\" alt=\"\" width=\"379\" height=\"234\" \/><\/p>\n<p><em>Pour coder ces trois fichiers, j\u2019ai utilis\u00e9 les exemples d\u00e9crits dans le manuel du d\u00e9veloppeur Salesforce.<\/em><\/p>\n<h2>c)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 D\u00e9velopper le composant Car Info<\/h2>\n<p>On dit qu\u2019il est affichable dans la page d\u2019une voiture dans CarInfos.js-meta.xml<\/p>\n<pre><code>\n&lt;?xml version=\"1.0\" encoding=\"UTF-8\"?&gt;\n&lt;LightningComponentBundle xmlns=\"http:\/\/soap.sforce.com\/2006\/04\/metadata\" fqn=\"CarInfo\"&gt;\n&lt;apiVersion&gt;45.0&lt;\/apiVersion&gt;\n&lt;isExposed&gt;true&lt;\/isExposed&gt;\n&lt;targets&gt;\n&lt;target&gt;lightning__RecordPage&lt;\/target&gt;\n&lt;\/targets&gt;\n&lt;targetConfigs&gt;\n&lt;targetConfig targets=\"lightning__RecordPage\"&gt;\n&lt;objects&gt;\n&lt;object&gt;Car__c&lt;\/object&gt;\n&lt;\/objects&gt;\n&lt;\/targetConfig&gt;\n&lt;\/targetConfigs&gt;\n&lt;\/LightningComponentBundle&gt;\n<\/code><\/pre>\n<p>On code un contenu simple pour CarInfo.html\u00a0: afficher la variable CarColor.<\/p>\n<pre><code>\n&lt;template&gt;\n&lt;lightning-card title=\"Car Information\" icon-name=\"standard:people\"&gt;\n&lt;div class=\"slds-m-around_medium\"&gt;\n&lt;p&gt;the car is {carColor}!&lt;\/p&gt;\n&lt;\/div&gt;\n&lt;\/lightning-card&gt;\n&lt;\/template&gt;\n\n<\/code><\/pre>\n<p>On \u00e9crit le code javascript pour demander \u00e0 SF la couleur dans CarInfos.js\u00a0:<\/p>\n<ul>\n<li>Au d\u00e9but du code, les lignes<strong> import {}<\/strong> cela dit que l\u2019on utilise des possibilit\u00e9s de Salesforce<\/li>\n<li>La <strong>ligne <\/strong><strong>import CAR_COLOR_FIELD <\/strong>sert \u00e0 dire qu\u2019on va acc\u00e9der aux voitures de la base de donn\u00e9es SF<\/li>\n<li>La ligne <strong>@api recordId <\/strong>sert \u00e0 dire que le composant conna\u00eet la voiture qu\u2019il doit afficher (cela va \u00eatre pass\u00e9 par Salesforce au composant affich\u00e9).<\/li>\n<li>La ligne <strong>@wire\u2026<\/strong> sert \u00e0 charger les informations de la voiture en m\u00e9moire et sa couleur\u2026)<\/li>\n<li>La fonction <strong>getCarColor<\/strong> est celle appel\u00e9e par la page HTML pour obtenir la couleur.<\/li>\n<\/ul>\n<pre><code>\n\nimport { LightningElement, api, wire } from 'lwc';\nimport { getRecord, getFieldValue } from 'lightning\/uiRecordApi';\n\nimport CAR_COLOR_FIELD from '@salesforce\/schema\/Car__c.Car_Color__c';\n\nconst carFields = [CAR_COLOR_FIELD];\n\nexport default class CarInfo extends LightningElement {\n\n@api recordId; \/\/ Car Id\n\n@wire(getRecord, { recordId: '$recordId', fields: carFields })\ncar;\n\nget carColor() {\n    return getFieldValue(this.car.data, CAR_COLOR_FIELD);\n}\n\n}\n<\/code><\/pre>\n<h2>d)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Envoyer le composant dans Salesforce<\/h2>\n<p>Avant d\u2019envoyer le code vers Salesforce, on doit connecter le Visual Studio \u00e0 Salesforce\u00a0: Cela se fait dans le terminal du studio en tapant<\/p>\n<p>sfdx force:auth:web:login -d -a mydevorg<\/p>\n<p>Visual Studio ouvre une fen\u00eatre qui demande de se connecter \u00e0 Salesforce pour me connecter \u00e0 mon environnement de d\u00e9veloppement.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-715 aligncenter\" src=\"http:\/\/wollef.org\/wp-content\/uploads\/2019\/06\/dev5-300x249.png\" alt=\"\" width=\"300\" height=\"249\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>Mon environnement Salesforce est alors reli\u00e9 \u00e0 Visual Studio.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-716\" src=\"http:\/\/wollef.org\/wp-content\/uploads\/2019\/06\/dev6-300x168.png\" alt=\"\" width=\"514\" height=\"288\" \/><\/p>\n<p>Maintenant, je peux envoyer le code du composant vers Salesforce en tapant\u00a0:<\/p>\n<p>sfdx force:source:deploy -p force-app -u <a href=\"mailto:thibault.leblond@wollef.org\">thibault.leblond@wollef.org<\/a><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-717\" src=\"http:\/\/wollef.org\/wp-content\/uploads\/2019\/06\/dev7-300x168.png\" alt=\"\" width=\"473\" height=\"265\" \/><\/p>\n<h2>e)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Installer le composant dans Salesforce sur la page voiture<\/h2>\n<p>La derni\u00e8re \u00e9tape est dans Salesforce d\u2019\u00e9diter la page affichant la voiture pour ajouter le composant \u00e0 la page.<\/p>\n<p>On va sur une page qui affiche une voiture, en haut \u00e0 droite on va dans le menu \u00ab\u00a0Edit Page\u00a0\u00bb<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-718 aligncenter\" src=\"http:\/\/wollef.org\/wp-content\/uploads\/2019\/06\/dev8-300x207.png\" alt=\"\" width=\"300\" height=\"207\" \/><\/p>\n<p>On arrive dans l\u2019\u00e9diteur de page, le composant est disponible et peut \u00eatre plac\u00e9 o\u00f9 l\u2019on veut dans la page<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-719\" src=\"http:\/\/wollef.org\/wp-content\/uploads\/2019\/06\/dev9-300x168.png\" alt=\"\" width=\"493\" height=\"276\" \/><\/p>\n<h2>f)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Utiliser le composant sur la page voiture<\/h2>\n<p>Une fois que l\u2019on a sauv\u00e9 la page, le composant s\u2019affiche comme pr\u00e9vu\u00a0: on a maintenant notre composant visuel en haut \u00e0 droite\u00a0!<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-720\" src=\"http:\/\/wollef.org\/wp-content\/uploads\/2019\/06\/dev10-300x168.png\" alt=\"\" width=\"493\" height=\"276\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p><strong>\u00a0<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Dans Salesforce, une fois que l\u2019on a configur\u00e9 comme avant, on peut juste utiliser l\u2019outil que Salesforce nous propose pour saisir des objets ou les voir ou les chercher. Mais pour ce projet, je dois aller plus loin, et j\u2019ai besoin de programmer des \u00e9crans sp\u00e9ciaux ou des calculs. C\u2019est cette partie de programmation que <a class=\"read-more\" href=\"https:\/\/wollef.org\/blog\/a-la-decouverte-de-salesforce-developper-des-composants-visuels\/\">Continue Reading<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[30,3,48,18],"tags":[],"class_list":["post-707","post","type-post","status-publish","format-standard","hentry","category-cars-and-clouds","category-configuration","category-lightning-web-component","category-salesforce"],"_links":{"self":[{"href":"https:\/\/wollef.org\/blog\/wp-json\/wp\/v2\/posts\/707","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wollef.org\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wollef.org\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wollef.org\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wollef.org\/blog\/wp-json\/wp\/v2\/comments?post=707"}],"version-history":[{"count":0,"href":"https:\/\/wollef.org\/blog\/wp-json\/wp\/v2\/posts\/707\/revisions"}],"wp:attachment":[{"href":"https:\/\/wollef.org\/blog\/wp-json\/wp\/v2\/media?parent=707"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wollef.org\/blog\/wp-json\/wp\/v2\/categories?post=707"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wollef.org\/blog\/wp-json\/wp\/v2\/tags?post=707"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}