De use case die ik in dit artikel ga behandelen betreft het volgende. Bezoekers kunnen zich via Salesforce registreren voor een bepaalt evenement. Zij komen in een custom object te staan “Evenement_bezoeker__c” en krijgen een bevestigingsmail. Vervolgens zit er in deze mail een mogelijkheid tot annuleren. Als bezoekers daarop klikken moeten ze op een pagina terecht komen waar ze de reden tot annuleren op kunnen geven en dit vervolgens kunnen bevestigen. Daarna wordt er nog een mail gestuurd omtrent deze annulering.
APEX Controller maken
Een Visualforce-pagina en de bijbehorende Apex-controller werken nauw samen om dynamische en interactieve webapplicaties binnen Salesforce te creëren. Met de Visualforce-pagina kun je de gebruikersinterface bouwen met behulp van HTML-achtige tags en speciale Visualforce-componenten. De Apex-controller, geschreven in de Apex-taal, beheert de logica en interacties achter deze interface. De controller bevat methoden die worden aangeroepen door de Visualforce-pagina om gegevens op te halen, te verwerken en eventueel terug te geven. Als je dit model vertaalt naar een Model-View-Controller (MVC) model, dan is de Visualforce-pagina de View, de Controller is, jawel de controller en het model kan bestaan uit de Salesforce-objecten. Laten we beginnen om de controller te ontleden:
public class CancelEventController {
public String bezoekerId { get; set; }
public String cancellationReason { get; set; }
public Evenement_bezoeker__c bezoeker { get; set; }
public CancelEventController() {
bezoekerId = ApexPages.currentPage().getParameters().get('bezoekerId');
if (String.isNotBlank(bezoekerId)) {
bezoeker = [SELECT Id, Voornaam__c, Event_Naam__c, Reden_No_show__c FROM Evenement_bezoeker__c WHERE Id = :bezoekerId LIMIT 1];
}
}
public PageReference submit() {
if (String.isNotBlank(bezoekerId)) {
if (bezoeker == null) {
ApexPages.addMessage(new ApexPages.Message(ApexPages.Severity.ERROR, 'Evenement bezoeker record niet gevonden. Neem contact op met de systeembeheerder.'));
return null;
}
// Het record bestaat, dus het bijwerken
bezoeker.Reden_No_show__c = cancellationReason;
update bezoeker;
// Start de flow om de deelnemer op geannuleerd te zetten
Map<String, Object> params = new Map<String, Object>{
'bezoekerId' => bezoekerId
};
Flow.Interview.Evenement_Bezoeker_Annuleert flow = new Flow.Interview.Evenement_Bezoeker_Annuleert(params);
flow.start();
// Terugkeren naar een bevestigingspagina of een bericht tonen
ApexPages.addMessage(new ApexPages.Message(ApexPages.Severity.INFO, 'Uw annuleringsreden is opgeslagen.'));
return null;
} else {
ApexPages.addMessage(new ApexPages.Message(ApexPages.Severity.ERROR, 'Ongeldige bezoeker ID. Neem contact op met de systeembeheerder.'));
return null;
}
}
}
APEX Controller uitgelegd
Laten we bovenaan beginnen met de class zelf"public class CancelEventController". Deze is public, omdat Controllers die worden gebruikt door Visualforce-pagina’s openbaar (public) moeten zijn. Daarna worden de variabelen gedefinieerd:
public String bezoekerId { get; set; }
public String cancellationReason { get; set; }
public Evenement_bezoeker__c bezoeker { get; set; }
- bezoekerId: Houdt het ID van de evenementbezoeker bij die mogelijk geannuleerd wordt. Deze wordt meegestuurd in de url, bijvoorbeeld:
https://curio--evenement--c.sandbox.vf.force.com/apex/Curio_Evenement_Cancel?bezoekerId=a55AW000007UhoVYAS - cancellationReason: Houdt de reden voor de annulering bij, ingevuld door de gebruiker. Deze wordt ingevuld op de Visualforce-pagina.
- bezoeker: Houdt het
Evenement_bezoeker__crecord bij van de bezoeker en gebruiken we om de Visualforce-pagina te personaliseren.
get en set accessors maken het mogelijk om waarden van variabelen te lezen (get) en te schrijven (set) op een gecontroleerde manier.
public CancelEventController() {
bezoekerId = ApexPages.currentPage().getParameters().get('bezoekerId');
if (String.isNotBlank(bezoekerId)) {
bezoeker = [SELECT Id, Voornaam__c, Event_Naam__c, Reden_No_show__c FROM Evenement_bezoeker__c WHERE Id = :bezoekerId LIMIT 1];
}
}
Wordt uitgevoerd bij het maken van een instantie van de controller.
- Haalt het
bezoekerIdop uit de URL-parameter. - Als
bezoekerIdniet leeg is, wordt het overeenkomstigeEvenement_bezoeker__crecord opgehaald en aan debezoekervariabele toegewezen. Hiervoor wordt SOQL gebruikt.
public PageReference submit() {
if (String.isNotBlank(bezoekerId)) {
if (bezoeker == null) {
ApexPages.addMessage(new ApexPages.Message(ApexPages.Severity.ERROR, 'Evenement bezoeker record niet gevonden. Neem contact op met de systeembeheerder.'));
return null;
}
// Het record bestaat, dus het bijwerken
bezoeker.Reden_No_show__c = cancellationReason;
update bezoeker;
// Start de flow om de deelnemer op geannuleerd te zetten
Map<String, Object> params = new Map<String, Object>{
'bezoekerId' => bezoekerId
};
Flow.Interview.Evenement_Bezoeker_Annuleert flow = new Flow.Interview.Evenement_Bezoeker_Annuleert(params);
flow.start();
// Terugkeren naar een bevestigingspagina of een bericht tonen
ApexPages.addMessage(new ApexPages.Message(ApexPages.Severity.INFO, 'Uw annuleringsreden is opgeslagen.'));
return null;
} else {
ApexPages.addMessage(new ApexPages.Message(ApexPages.Severity.ERROR, 'Ongeldige bezoeker ID. Neem contact op met de systeembeheerder.'));
return null;
}
}
Dan krijgen we het grootste deel van de code, namelijk de actie, zodra iemand in de Visualforce-pagina op “Verzenden” drukt.
- Allereerst controleert hij of
bezoekerIdniet leeg is. - Als
bezoekerniet gevonden wordt, wordt een foutmelding toegevoegd en stopt de methode. - Als
bezoekerwel gevonden wordt:- De
Reden_No_show__cwordt ingesteld op de waarde vancancellationReason. Dit is het id van het veld op de Visualforce-pagina. - Het
bezoekerrecord wordt geüpdatet in de database. - Een flow (
Evenement_Bezoeker_Annuleert) wordt gestart metbezoekerIdals parameter om verdere verwerkingen te doen. Dit Id kan vervolgens door de flow opgepakt worden om de juiste mail te versturen. De flow zullen we deze keer niet meenemen. - Een informatieve melding wordt toegevoegd om de gebruiker te laten weten dat de annuleringsreden is opgeslagen.
- De
- Als
bezoekerIdongeldig is, wordt een foutmelding toegevoegd.
De Visualforce pagina
Dan gaan we verder met de Visualforce pagina te ontleden. Deze pagina is wat makkelijker (voor mij), aangezien dit veel standaard HTML en CSS is. Deze zal ik ook niet verder uitleggen. Laten we eens kijken naar de overige code op deze pagina.
<apex:page controller="CancelEventController" standardStylesheets="false" showHeader="false" applyHtmlTag="true" docType="html-5.0">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
.custom-page-block {
margin: 20px;
}
.custom-page-block textarea {
resize: none;
}
.logo {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
}
/* Custom button style */
.btn-custom {
background-color: #78034B;
border-color: #78034B;
color: white;
}
.btn-custom:hover {
background-color: #5c0239;
border-color: #5c0239;
color: white;
}
</style>
<script>
function validateForm() {
var reason = document.getElementById('{!$Component.form.cancellationReason}').value;
if (reason.trim() === '') {
alert('Graag een reden opgeven');
return false;
}
return true;
}
</script>
</head>
<body>
<script>
// Gebruik console.log om de waarden te debuggen
console.log("Voornaam: {!bezoeker.Voornaam__c}");
console.log("Reden No Show: {!bezoeker.Reden_No_show__c}");
</script>
<div class="container">
<img decoding="async" width="150" src="/annuleerevenement/resource/1718116213000/Curio_logo_pink?" alt="Logo" class="logo" />
<apex:form id="form" onsubmit="return validateForm();">
<apex:pageMessages />
<apex:inputHidden value="{!bezoekerId}" />
<div class="card custom-page-block">
<div class="card-header">
Annuleer Evenement
</div>
<div class="card-body">
<p>Beste {!bezoeker.Voornaam__c},</p>
<p>Weet je zeker dat u het evenement <b>{!bezoeker.Event_Naam__c}</b> wilt annuleren? Vul alstublieft de reden voor annulering in onderstaande veld in:</p>
<div class="form-group">
<label for="cancellationReason">Reden voor Annulering</label>
<apex:inputTextarea id="cancellationReason" value="{!cancellationReason}" styleClass="form-control" />
</div>
<apex:commandButton value="Verzenden" action="{!submit}" styleClass="btn btn-custom"/>
</div>
</div>
</apex:form>
</div>
</body>
</apex:page>
De eerste regel:
<apex:page controller="CancelEventController" standardStylesheets="false" showHeader="false" applyHtmlTag="true" docType="html-5.0">
De <apex:page> tag definieert een Visualforce-pagina. Vervolgens zie je dat er bij controller="CancelEventController" de zojuist gebouwde APEX Controllerklasse gespecificeerd staat. Hierdoor komt er dus een koppeling tussen beiden scripts (view / controller).
Het standardStylesheets="false" attribuut heb ik gebruikt, zodra je een Salesforce Site gaat maken. Standaard komt er dan een lay-out van Salesforce op de pagina. Als je deze branding niet op de pagina wilt, kun je de standardStylesheets="false" en showHeader="false" gebruiken.
De applyHtmlTag="true" geeft aan of de Visualforce-pagina een <html>-tag moet genereren. Wanneer ingesteld op true, zorgt Salesforce ervoor dat de HTML die wordt gegenereerd door de Visualforce-pagina een geldige HTML-structuur bevat, inclusief de <html>-tag. De overige code van de pagina is standaard HTML en CSS, behalve dit stuk:
<apex:form id="form" onsubmit="return validateForm();">
<apex:pageMessages />
<apex:inputHidden value="{!bezoekerId}" />
<div class="card custom-page-block">
<div class="card-header">
Annuleer Evenement
</div>
<div class="card-body">
<p>Beste {!bezoeker.Voornaam__c},</p>
<p>Weet je zeker dat u het evenement <b>{!bezoeker.Event_Naam__c}</b> wilt annuleren? Vul alstublieft de reden voor annulering in onderstaande veld in:</p>
<div class="form-group">
<label for="cancellationReason">Reden voor Annulering</label>
<apex:inputTextarea id="cancellationReason" value="{!cancellationReason}" styleClass="form-control" />
</div>
<apex:commandButton value="Verzenden" action="{!submit}" styleClass="btn btn-custom"/>
</div>
</div>
</apex:form>
Deze code genereert een formulier, waarbij de code<apex:form> de Visualforce-tag is die een HTML-formulier (<form>) op de pagina genereert. In Visualforce worden formulieren gebruikt om gegevens naar de server te sturen, en deze tag zorgt ervoor dat de juiste Apex-logica en Visualforce-componenten worden gebruikt.
De <apex:pageMessages /> heb ik enkel gebruikt voor het debuggen. Deze code geeft meldingen op de pagina, waaronder foutmeldingen.
De regel <apex:inputHidden value="{!bezoekerId}" /> creëert een verborgen invoerveld dat de waarde van de bezoekerId uit de controller bevat. Dit is handig om deze ID naar de server te sturen bij het indienen van het formulier, zonder dat de gebruiker dit ziet of aanpast.
Verder in de code wordt er wat persoonlijke data op de pagina getoond via {!bezoeker.Voornaam__c} en {!bezoeker.Event_Naam__c}. Deze zijn via de Controller (via SOQL) binnengehaald.
De {!cancellationReason} wordt ingevuld in de inputTextarea van het formulier en vervolgens verzonden via een apex:commandButton met de action={!submit}. Vervolgens wordt de call in de APEX controller opgevangen via de methode public PageReference submit() en treden de vervolgstappen in werking.
Pagina publiek toegankelijk maken via Salesforce Sites
De pagina werkt nu als je ingelogd bent, maar aangezien bezoekers geen inlog van Salesforce hebben, moeten we de pagina nog publiekelijk toegankelijk maken. Dit doen we door een Site aan te maken en vervolgens de Visualforce-pagina toe te voegen.
Bij Sites (dus niet de digital experience Site, maar een Force.com site) kun je een nieuwe site aanmaken en even het label, de naam en de andere velden invullen. Als de site gemaakt is kun je bij “Site Visualforce Pages” de zojuist gemaakte pagina toevoegen. Let op, de url is wel verandert als je de pagina wilt oproepen via Sites. In mijn geval was het:
https://domein–c.sandbox.vf.force.com/apex/Curio_Evenement_Cancel?bezoekerId=a55AW000007UhoVYAS
En nu:
https://domein.sandbox.my.salesforce-sites.com/annuleerevenement?bezoekerId=a55AW000007UhoVYAS
