Skip to content

Ett enklare sätt att skapa en offert med Lightning Web Components – en fallstudie av Heizungsmacher AG

Tillkännagivande av Salesforce Spring ’19 publicering var mycket spännande för alla i Salesforce utvecklargrupperna. Det introducerade Lightning Web Components (LWCs), en ny programmeringsmodell för Lightning-komponentutveckling, baserad på modern webbteknik.. Några månader har gått sedan lanseringen, men ändå har inte många användare haft möjlighet att arbeta med LWC. Vi har gjort det – och vi är stolta över resultaten!

Vi börjar med en liten bakgrundshistoria. För ett år sedan utvecklade vi en CPQ-liknande funktion i Salesforce för en av våra kunder: Heizungsmacher AG, ett företag som är specialiserat på planering och samordning av förnybara energianläggningar som värmepumpar eller soltak för sina kunder i Schweiz. Det viktigaste värdet som Heizungsmacher AG ger sina kunder är full öppenhet – de får ett tydligt och mycket detaljerat erbjudande. Sådana offerter är väldigt komplexa, och även om de skapas från fördefinierade buntar, varierar de sista erbjudandena från varandra och måste vara väldig husshålsspecifika.

Systemet som vi skapade var ganska komplicerat och behövde timmar av konfiguration: över 360 produkter, dussintals produktpaket, hundratals beroenden mellan produkter och regler baserat på varje hushålls egenskaper. Denna investering gjorde emellertid processen att skapa ett offert enkelt och roligt. Det fanns dock ett problem kvar: Quote Editor – en front-end-applikation för redigering av offertens detaljer, som stod ovanpå denna komplexa logik- och datamodell. Det var helt funktionellt, men tyvärr väldigt långsamt. Användare var inte särskilt angelägna om att använda den och hittade till och med ett nytt namn för Drag & drop-funktionaliteten för att ändra den till: ”Drag & wait”. Det här är vad användarna såg för det mesta när de använde Quote Editor:

Redan 2014 kom Salesforce med sin egen programmeringsmodell för att bygga Lightning komponenter som heter Aura, vilket under 2019 verkar vara lite föråldrat jämfört med standarder som har uppstått under tiden. Mycket har förändrats sedan dess i tekniklandskapet – JavaScript har blivit en kärnteknologi bakom internet. När vi byggde Quote Editor hade vi dock inget annat val än att använda Aura.

Därför var tillkännagivandet av LWC så stort. Det gjorde det möjligt för utvecklare att bygga vidare på Salesforce med den moderna JavaScript, med hjälp av grundläggande webbstandarder. Det betyder i princip att LWC är extremt snabba, lätta och ger exceptionell prestanda. “Lightning fast “äntligen betyder något!

Det betyder inte att Aura från och med nu kommer att ersättas av LWC: er – det kommer fortfarande att stödjas och båda komponenterna byggda på båda ramarna (Aura & LWCs) kan samexistera i samma applikation. Ändå bör man definitivt överväga att utforma LWC från och med nu om:

  • Du ska utveckla helt nya anpassade Lightning komponenter som inte har byggts tidigare,
  • Du behöver bättre prestanda för befintliga appar med tunga Aura-baserade komponenter – du kan överväga att skriva om dem helt eller gå till en hybridstrategi och bara skriva om dess underkomponenter.

LWC var definitivt något vi behövde för att förbättra app hastigheten och användbarheten. Vi skapade den helt nya Quote Editor 2.0 som inte bara var tvungen att arbeta snabbare utan också måste vara mycket mer komplex än den förra för att göra det möjligt för användare att skapa offert snabbare och mer flexibelt.

Vilka är fördelarna med att använda den här JavaScript-baserade komponenten?

  • Full inline redigering för alla quote rader i en vy
  • Omedelbart svar när du lägger till, tar bort och redigerar offertrader (med omedelbara prisberäkningar baserat på prislistan!)
  • Omedelbart funktion för: spara, avbryta, ångra och göra om alla ändringar.

Inget mer snurrhjul! Vi har skapat en flexibel komponent som kan (och kommer) också att användas i framtiden för att redigera projektinformation efter försäljning, på andra objekt än offert.

Vi uppmanar dig att följa oss på LinkedIn!

Lämna en kommentar

LinkedIn
Facebook