Analytics integreren in workflows: een Salesforce LWC bouwen

Blog

Door de juiste inzichten en acties naast elkaar te plaatsen binnen workflows, is de sleutel tot het stimuleren van de acceptatie en productiviteit van analytics. Het maakt het leven van u en uw collega’s ook veel eenvoudiger. Als u of uw team / bedrijf Salesforce gebruikt, kan een bliksemwebcomponent (LWC) een geweldige manier zijn om waardevolle inzichten toegankelijk te maken terwijl u in Salesforce werkt, waardoor u niet meer in een apart dashboard hoeft te springen.

Onderzoeken hoe een eenvoudige LWC kan worden ontwikkeld en geïmplementeerd, kan een ontmoedigend vooruitzicht lijken wanneer u zich verdiept in de documentatie en probeert om dingen op uw manier te laten werken. Zoals elke nieuwe ontwikkelomgeving, daar is een leercurve, dus het is een goed idee om te beginnen met eenvoudige projecten en later door te gaan naar grotere en geavanceerdere projecten.

In deze zelfstudie integreren we een BI.nl-dashboard als een bliksemsnelle webforce-component in een Salesforce-objectpagina (account, verkoopkans, enz.). Het BI.nl-dashboard leeft in een iFrame en wordt aangeroepen via een URL. We zullen ook zien hoe we de object-ID dynamisch kunnen doorgeven aan het dashboard als een parameter, om alleen statistieken weer te geven voor het specifieke object dat wordt bekeken.

Inzichten in Salesforce brengen: aan de slag

Salesforce geeft gebruikers de mogelijkheid om nieuwe componenten te maken en deze toe te voegen aan onze implementatie, zodat verkopers ze openen op Salesforce-pagina’s in plaats van een apart programma te openen. Deze LWC-componenten kunnen gemakkelijk uit de hand lopen; we houden deze simpel, zodat we kunnen leren en leveren!

Door BI.nl in uw Salesforce-recordscherm in te bedden, kunt u de juiste inzichten op de juiste plaats aanbrengen zonder uw workflow te verlaten. (Hier is een snelle video er wat meer over uit te leggen.) Het zal er als volgt uitzien:

Voordat u kunt beginnen met bouwen, moet u de volgende acties ondernemen om de basis te leggen:

1. Meld je aan voor Salesforce Trailhead – Trailhead is een leeromgeving van Salesforce voor ontwikkelaars; je vindt er tal van handige trainingsoefeningen en voorbeelden
2. Start een Trailhead Playground zoals dit – een Playground is een Salesforce-instantie waarop u uw nieuwe code gratis en gemakkelijk kunt implementeren
3. Download en installeer de Salesforce CLI vanaf hier
4. Download en installeer Visual Studio Code vanaf hier
5. Installeer het Salesforce VSCode-extensiepakket door te zoeken naar “Salesforce Extension Pack” in het extensies pagina. Download het PACK en niet de individuele componenten!

Nadat we deze stappen hebben doorlopen, zouden we een nieuw project moeten kunnen maken door deze stappen te volgen:

1. Open in Visual Studio Code het opdrachtpalet door op Ctrl + Shift + P (Windows) of Cmd + Shift + P (macOS) te drukken.
2. Typ SFDX.
3. Selecteer SFDX: Lightning-webcomponent maken. Gebruik SFDX niet: maak een Lightning-component. (Dit creëert een Aura-component.)
4. Geef uw nieuwe component een naam.
5. Bewaar het in het standaardpad wanneer het wordt gemaakt.

Meta.xml gebruiken om componentinstellingen toe te voegen

In uw meta.xml-bestand moet u de instellingen voor de component toevoegen, inclusief enkele namen en doelen. Doelen bepalen de pagina’s en gebieden van Salesforce waar deze component beschikbaar zal zijn:

<targets>         <target>lightning__AppPage</target>         <target>lightning__RecordPage</target>         <target>lightning__HomePage</target> </targets> 

Als u bijvoorbeeld doelen toevoegt van “App-pagina”, “Recordpagina” en “Homepagina”, kunnen gebruikers met bewerkingsrechten tot de lay-out en componenten van deze pagina’s deze nieuwe component aan hen toevoegen.

Doelconfiguratie gebruiken om URL’s en andere instellingen op te geven

Door een doelconfiguratie toe te voegen, kunt u het rechterzijpaneel van het element bewerken, de configuratie die voor de gebruiker toegankelijk is. Hier specificeren we welke URL we moeten gebruiken en enkele andere instellingen, zoals het al dan niet in aanmerking nemen van de “recordId”, enz.

Hier is een kort voorbeeld:

<targetConfigs>         <targetConfig targets="lightning__AppPage, lightning__HomePage">             <property name="DashboardURL" type="String" required="true" label="Dashboard URL" description="Automatically bind the DashboardURL to the component variable" default="" />             <property name="componentHeight" type="Integer" label="Component Height" description="The component height" default="500" />             <property name="isShowFiltersBar" type="Boolean" label="Show BI.nl's Filters Bar" description="Display BI.nl's native filter bar" default="false" />         </targetConfig>         <targetConfig targets="lightning__RecordPage">             <property name="DashboardURL" type="String" required="true" label="Dashboard URL" description="Automatically bind the DashboardURL to the component variable" default="" />             <property name="componentHeight" type="Integer" label="Component Height" description="The component height" default="500" />             <property name="isShowFiltersBar" type="Boolean" label="Show BI.nl's Filters Bar" description="Display BI.nl's native filter bar" default="false" />             <property name="isFilterOnRecordID" type="Boolean" label="Filter BI.nl on current Salesforce Record ID" description="Automatically Apply Salesforce record ID to Sisnese's dashboard" default="false" />         </targetConfig>     </targetConfigs> 

Zoals u kunt zien, kan elk doel zijn eigen configuratie hebben, wat betekent dat we enkele instellingen en configuraties op een bepaalde pagina (zoals een recordpagina) kunnen toestaan, maar niet dat ze universeel van kracht worden.

Met .html

Omdat we deze instructie eenvoudig houden, gaan we gewoon door en voegen we de component (in dit geval een iFrame) toe aan de sjabloon. Dit zou ingewikkelder zijn als we een meer dynamische pagina wilden maken door elementen toe te voegen en te verwijderen, enz. (Salesforce staat geen reguliere DOM-toegang toe; u kunt er meer over lezen hier.)

<template>         <iframe height={componentHeight} width="100%" frameborder="0" src={embedString}></iframe> </template> 

De componenthoogte en src worden overgenomen uit de gebruikersinstellingen die we hebben geconfigureerd op de xml-pagina. We zullen deze nu afhandelen met ons .js-bestand.

Logica creëren in .js

In het .js-bestand maken we de logica die we nodig hebben, maar eerst zullen we wat gegevens moeten verzamelen.

• Voeg API toe aan de LWC-import
• Roep alle objecten op die we nodig hebben
  • recordId
  • objectApiName
  • DashboardURL
  • componentHoogte
  • isShowFiltersBar
  • isFilterOnRecordID

(Opmerking: sommige van deze objecten zijn eigen aan Salesforce, zoals recordId en objectApiName.)

Met deze objecten kunnen we bepalen waar we ons bevinden in de app en de filters die we nodig hebben doorgeven aan het dashboard dat we gebruiken. De rest van de objecten die de API grijpt, zijn eigenlijk onze configuratieobjecten: gebruikersinstellingen met de streepjes-URL, enz. Elke keer dat er een wijziging is in deze configuratie, wordt de component vernieuwd en opnieuw weergegeven.

verbonden Terugbellen zal al onze logica opslaan. Met behulp van de dashboard-URL en instellingen zullen we bepalen hoe de insluitingsreeks moet worden gegenereerd om in het iFrame te gebruiken, waarbij we het filter genereren met de recordId en de object-API-naam.

import { LightningElement, api } from 'lwc'; export default class BI.nlInfused extends LightningElement {     @api recordId;     @api objectApiName;     @api DashboardURL;     @api componentHeight = 300;     @api isShowFiltersBar = false;     @api isFilterOnRecordID = false;     connectedCallback() {         let iframeStringToUse = this.DashboardURL + '?embed=true&r=" + this.isShowFiltersBar;         if (this.isFilterOnRecordID && this.objectApiName) {             let filter = {                 "dim": "[" + this.objectApiName + ".Id]",                 "merged": true,                 "filter": {                     "explicit": true,                     "multiSelection": true,                     "members": [                         this.recordId                     ] },                 "collapsed": true,                 "title": "Id",             }             // Filters need to be in an array             let filtersArray = [{                 jaql: filter             }];             // Serialize the filters array into a string             let filterString = JSON.stringify(filtersArray);             // Encode the string for use in a URI             let uriEncoded = encodeURIComponent(filterString);             iframeStringToUse += "&filter=" + uriEncoded;         }         this.embedString = iframeStringToUse;     } } 

Nadat u deze code aan uw bestanden hebt toegevoegd, kunt u de Salesforce CLI opnieuw gebruiken om u te authenticeren in uw playground-omgeving en de nieuwe component te implementeren. Wanneer u een bewerkingspagina start, zou u uw nieuwe component als volgt onder “Aangepast” moeten kunnen zien:

Inzichten in workflows brengen: een nieuwe grens

Dit zijn de basisprincipes voor het maken van een LWC! U kunt de uwe rechtstreeks in uw Salesforce-instantie implementeren om de juiste inzichten op de juiste plek te plaatsen, zodat u gemakkelijker betere, datagestuurde beslissingen kunt nemen. Of ga je gang en publiceer dit in de AppExchange-winkel (waarvoor je meer stappen moet ondernemen, zoals partner worden en een beveiligingsbeoordeling ondergaan, enz.) Zodat andere gebruikers het binnen hun eigen workflows kunnen implementeren. (Lees daar meer over hier.)

Dit is nog maar het begin van uw Salesforce LWC-reis! Het integreren van analyses in workflows is een snel groeiend veld, waardoor de manier waarop mensen werken verandert. Bouw gedurfd en kijk waar je de juiste inzichten nog meer kunt combineren met de juiste acties op de juiste plek.

Ben Richie Sadan is hoofdontwikkelaar, infusie-engineer bij BI.nl. Hij heeft bijna tien jaar ervaring in de software-industrie en heeft gewerkt voor de IDF en BI.nl.