LWC- Event Spotlight

Event Spotlight

The Event Spotlight Lightning Web Component (LWC) enables the associations to advertise/spotlight crucial events for associations on any Lightning Page. It makes it easier for associations to reach their target audience and maximize attendance.

This component supports device responsiveness that can be accessed through Tablet and Mobile devices.

Configuration

Learn more about Experience Builder here.

From the components list on the left panel, select the Event Spotlight component and drag it onto the site page.

On the page, click within the Event Spotlight component to bring up the Property editor.

Figure 1. Event Spotlight LWC with configuration properties

Property	Details
Event	Enter the Salesforce Record ID of the specific Event to display on the Event Spotlight LWC. When this configuration throws an error message that says no record found then please verify the ID corresponds to an Event record. Make sure that the event record has: Self-Service Enabled is checked, Hidden is unchecked, and Status is Active. Show Me An Image Figure 2. A screenshot shows an error message on Event Spotlight Lightning Web Component
Image Fit	The "Image fit" property relates to the resizing of an image to fit within a specified area. This property offers to user several drop-down options, such as "Contain," "Cover," "Fill," "None," and "Scale-down," that can be used to adjust an image to fit within a specific location or space. Image properties Contain: Scales the image while preserving its aspect ratio to fit within the designated area without cropping. Cover: Scales and crops the image to fill the designated area entirely. Fill: Stretches or shrinks the image to fill the designated area entirely, which may result in the image being distorted. None: Displays the image at its original size without scaling or cropping, which may result in the image being cut off if it is too large for the designated area. Scale-down: Scales the image down proportionally to fit within the designated area if it is too large but does not scale it up if it is too small.
Show Register Button	If checked, the Register button will be displayed on the Event Spotlight Component.
Call To Register Action Label	This is a text input field that lets the app builder specify what they want the call-to-action button’s label to be displayed. Example: If you mention Register, the button on the component will be displayed with a label as Register.
Register Page	It determines the destination/location of the registration page where the user will be directed after clicking on the Register button. For the OOB registration process enter "/communityhub/NC__experienceregistration" against this property field.
Show View Event	If checked, the View Event button will be displayed on the Event Spotlight Component.
Call To View Event Action Label	This is a text input field that lets the app builder specify what they want the call-to-action button’s label to be displayed. Example: If you mention View Event, the button on the component will be displayed with a label as View Event.
Event Detail Page	It determines the destination/location of the registration page where the user will be directed after clicking on the View Event button. For the OOB registration process enter the API name of the Event Details Experience Builder page against this property field. You must already have the Event Details Experience Cloud Lightning Page created so derive the API name of the page to enter on this property field.

Example

Figure 2. Event Spotlight page

Use other LWCs from the Component list to create impactful page for your constituents. For e.g. use the ‘Rich Content Editor’ to add supporting information about the Event Spotlight. For detailed steps on how to access and use Experience Builder, visit Experience Builder Overview (salesforce.com)

Event Spotlight

Configuration

Example

See Also