Comme avant, on doit faire un fichier de description pour dire o\u00f9 le composant s\u2019affiche<\/p>\n
<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n\n<LightningComponentBundle xmlns=\"http:\/\/soap.sforce.com\/2006\/04\/metadata\" fqn=\"CarInfo\">\n<apiVersion>45.0<\/apiVersion>\n\n<isExposed>true<\/isExposed>\n\n<targets>\n<target>lightning__RecordPage<\/target>\n<\/targets>\n\n<targetConfigs>\n<targetConfig targets=\"lightning__RecordPage\">\n<objects>\n<object>Car__c<\/object>\n<\/objects>\n<\/targetConfig>\n<\/targetConfigs>\n\n<\/LightningComponentBundle><\/code><\/pre>\nLe code HTML du composant est simple car il y a dans salesforce un composant tout pr\u00eat\u00a0: lightning-map, \u00e0 qui on donne une liste d\u2019objet \u00e0 placer sur la carte\u00a0: mapMarkers.<\/p>\n
<template>\n\n<article class=\"slds-card\">\n<lightning-map\nmap-markers={mapMarkers}\nzoom-level=\"11\"\nmarkers-title=\"Cars\">\n<\/lightning-map>\n<\/article>\n\n<\/template><\/code><\/pre>\nLe code javascript du composant va juste<\/p>\n
\n- charger les voitures depuis salesforce\u00a0en appelant un code Apex\u00a0: getAllCars<\/strong><\/li>\n
- transformer les voitures en marqueurs pour la carte\u00a0: data.map<\/strong><\/li>\n<\/ul>\n
import { LightningElement, track, wire } from 'lwc';\nimport getAllCars from '@salesforce\/apex\/CarController.getAllCars';\n\nexport default class CarMap extends LightningElement {\n\n@track mapMarkers = [];\n@track cars;\n\n@wire(getAllCars, {})\nloadCars(result) {\nif (result.data) {\nthis.cars = result.data;\nthis.mapMarkers = result.data.map(car => {\nconst Latitude = car.Last_Position__Latitude__s;\nconst Longitude = car.Last_Position__Longitude__s;\nreturn {\nlocation: { Latitude, Longitude },\ntitle: car.Name,\ndescription: 'Coords: ${Latitude}, ${Longitude}',\nicon: 'utility:animal_and_nature'\n};\n});\n}\n\n}}<\/code><\/pre>\nLe code APEX qui renvoie les voitures est juste une requ\u00eate SOQL vers la base Salesforce pour savoir la derni\u00e8re position des voitures.<\/p>\n
@AuraEnabled(Cacheable=true)\n\npublic static Car__c[] getAllCars() {\nreturn [SELECT Id, Name,\nLast_Position__longitude__s, Last_Position__latitude__s\nFROM Car__c\nWHERE Last_Position__longitude__s!= null\nAND Last_Position__latitude__s != null\nORDER BY Name LIMIT 50\n];\n}\n}<\/code><\/pre>\n<\/a>3.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Le r\u00e9sultat<\/h3>\nEt voici ce que donne ce composant une fois install\u00e9 dans une page Salesforce\u00a0:<\/p>\n
![\"\"](\"http:\/\/wollef.org\/wp-content\/uploads\/2019\/10\/jeu1-300x192.png\")
<\/p>\n
On sait o\u00f9 sont les voitures au fur et \u00e0 mesure que salesforce r\u00e9cup\u00e8re les informations depuis le serveur Cloud Mercedes !<\/p><\/blockquote>\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
Pour cette premi\u00e8re partie du jeu, on va cr\u00e9er un composant qui va afficher dans une page Salesforce toutes les voitures sur une carte. A chaque fois qu\u2019on regarde la carte, on voit si la voiture a boug\u00e9. Pour cela je me suis inspir\u00e9 du code de l\u2019application \u00ab\u00a0Ours\u00a0\u00bb du cours Salesforce qui affichait une 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,33,46,48,1,18,20],"tags":[],"class_list":["post-803","post","type-post","status-publish","format-standard","hentry","category-cars-and-clouds","category-apex","category-javascript","category-lightning-web-component","category-non-classe","category-salesforce","category-soql"],"_links":{"self":[{"href":"https:\/\/wollef.org\/blog\/wp-json\/wp\/v2\/posts\/803","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=803"}],"version-history":[{"count":0,"href":"https:\/\/wollef.org\/blog\/wp-json\/wp\/v2\/posts\/803\/revisions"}],"wp:attachment":[{"href":"https:\/\/wollef.org\/blog\/wp-json\/wp\/v2\/media?parent=803"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wollef.org\/blog\/wp-json\/wp\/v2\/categories?post=803"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wollef.org\/blog\/wp-json\/wp\/v2\/tags?post=803"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}