Custom Event Handlers allow you to skip individual pages within the Salesforce Event Registration workflow and add your own custom pages. It also allows you to trade out sections of pages, populating those sections with your own custom controls, and perform custom actions between pages displayed. Through this mechanism, Fonteva gives you great flexibility in your system design.

For example, if a registrant is a return user, you can configure your registration workflow to skip to a payment screen under that condition.

Anytime you switch components, an action is fired. This functionality is present among all Fonteva Lightning pages. However, using Custom Event Handlers, you can provide your own custom components. When components are switched out, your custom component is provided dynamically to the user.

You have to create your own a global Lightning Component. This will be a hidden component. Once you do that, it must implement forceCommunityAvailableForAllPageTypes.

SkipToCheckout.cmp

<aura:component implements="forceCommunity:availableForAllPageTypes" access="global" controller="SkipToCheckoutController">
    
    <aura:attribute name="ticketTypes" type="List" access="global" default=""/>   
    
    <ltng:require scripts="{!$Resource.PagesApi__FontevaHelper + '/FontevaHelper.js'}" afterScriptsLoaded="{!c.doInit}"/>
    <aura:handler event="Framework:ShowComponentEvent" action="{!c.handleSwitchComponent}"/>
    <aura:registerEvent name="ShowComponentEvent" type="Framework:ShowComponentEvent"/>
    <aura:registerEvent name="RegistrationProcessChangeEvent" type="LTE:RegistrationProcessChangeEvent"/>
    
</aura:component>
XML

This component should have no body. It should only have aura attributes and a couple of event registration handlers. The new component will show up on the picker in Community Builder. Drag and drop it onto Lightning pages to add it. Because it is a hidden component, you can place it anywhere on your Lightning Event page.

Every time you change a component, Framework:showComponentEvent (line 6 above) is fired. This event indicates what the next page displayed is. You can configure your Event Handler to intercept this event dynamically.

({
    doInit : function(component, event, helper) {
        helper.checkIfSkipToCheckoutOnLoad(component, event);
    },
    
    handleSwitchComponent : function(component, event, helper) {
        var componentName = event.getParam('componentName');
        var componentParams = event.getParam('componentParams');
		var identifier = event.getParam('identifier');
    }
})
JS

Framework:ShowComponentEvent Configurable Attributes:

  • componentName - The component you want to render when the event fires. For example, if you want to transition from component A to component B, componentName will be component B.
  • componentParams - A map of all the parameters you want to send to the component you're about to render. 
  • identifier - The component you want to target. For example, if you have multiple components on a single page and you want to update only one piece of the page, you would use this attribute. Each component is listening for events, but only the targeted component will answer. When the correct target component is reached, the component displays.

You can receive the initial parameters that were sent and then add custom parameters to that list. For example, if you have a Terms and Conditions for your users to accept after selecting their tickets, you can have them redirected to a screen to review and accept it. Upon accepting, you can configure showComponentEvent to with the proper identifier and the page you want your users to see next is automatically displayed.

Fonteva doesn't just allow you to switch components on the registration flow. We allow you to do it everywhere. For example, if you just paid for something and you want to show your own custom receipt, you can use this same mechanism to perform that action.

Example: Custom Logic

Fonetva allows you to use your own custom logic to control your Event Registration flow. For example, if you provide your users with a Register Now button, you can replace portions of the registration page instead of the entire page.

To achieve this, use the EventRegistrationWrapper as the identifier. You can configure your Registration Flow to only replace the Registration portion of the page instead of the changing the page in its entirety. As a result, your custom component displays in the Registration window.

if ((componentParams.identifier === 'EventWrapper' || componentParams.identifier === 'EventRegistrationWrapper')
JS


Once you select the identifier you want, update the componentParams to include the secondaryCompName you've selected.

     componentParams.secondaryCompName = 'markup://LTE:'+'EventRegistrationForms';
JS


Your Registration Flow should then fire the ShowComponentEvent action again.

     var compEvent = $A.get('e.Framework:ShowComponentEvent');
JS


Since you just fired the same event, you want to prevent that event from looping. Add the event.stopPropagation() action to prevent the loop.

     event.stopPropagation();
JS