Portal Events Widget
- 07 Mar 2024
- 9 minute read
- Print
- DarkLight
- PDF
Portal Events Widget
- Updated 07 Mar 2024
- 9 minute read
- Print
- DarkLight
- PDF
Article Summary
Share feedback
Thanks for sharing your feedback!
The Portal Events Widget allows users to customize how events display on public-facing pages.
The Portal Events Widget maintains parity with existing event landing pages and adds additional customization regarding formatting, grouping, and combining multiple calendars, lists, or/maps in a single page. For some sample event portals that you can briefcase into your database and further customize, navigate to Custom Portals.
Important!
Each portal key must be unique. This is true across portals and event landing pages. For example, there cannot be an event landing page with the key of "visits" and a portal with the key of "visits."
Converting a Landing Page to a Portal
To assist with converting existing landing pages to portals, a Generate button has been added to the event landing page popup to recreate a landing page as a portal automatically. However, creating a new portal would be the best route if a landing page is complex or needs extensive updates.
Automatically Generate from Landing Page
To automatically generate a portal from an existing landing page, follow these steps:
Go to Database > Event Landing Pages.
Click on the desired landing page.
Click the Generate button next to "Convert to portal."
You will be automatically redirected to the view of the new portal. The previous folder configurations will be part of the events widget.
The new portal will have a key of old_portal_key_vNew. For example, if the existing landing page had a key of "visit," the new portal will have a key of "visit_vNew."
Feel free to make additional adjustments as needed, using the documentation below as a guide.
Test the portal.
To replace the existing landing page with the portal, update the key to something different, and then update the portal to have the original key of the landing page. For example, change the landing page key to "visit-old" and update the portal key from "visit_vNew" to "visit."
Important!
Be mindful of the 32-character limit on portal key lengths. If an Event Landing Page key has more than 27 characters, it will exceed the 32-character limit when "_vNew" is appended, and the portal won't be generated.
Start from Scratch
When rebuilding a landing page using a portal with the events widget, we recommend the following steps:
Make a portal with a similar (but different!) key. For example, if the landing page has a key of "visit", make a portal with a key of "visit-new".
Build out the portal using the documentation below.
Test the portal.
To replace the existing landing page with the portal, update the key to something different, and then update the portal to have the original key of the landing page. For example, change the landing page key to "visit-old" and update the portal key to "visit."
No changes will be needed on the public-facing side.
Creating the Portal
When creating a portal, use a unique key, a name, and a security setting. To replicate the behavior of existing event landing pages, select "Anonymous/Guest" as the security setting.
Important!
The default view will be blank when the portal is created, so be sure to return to this main edit popup to select the view you will build in the next steps.
Creating the Portal View
Click New View and enter the following configurations:
Status - Active
Name - Descriptive name of the view (Default is commonly used for the default view)
Layout - Select the desired layout
In the View, use widgets from the palette on the right to add content to the view. Static content widgets can be used to add text and other descriptions/instructions for the page.
Adding the Events Widget
Select the Events widget from the palette.
Details Tab
Be sure to give the widget a descriptive name on the Details tab. This will be extremely helpful when adding an events widget to a portal with additional widgets and functionality.
Name: Descriptive name of the widget
Status: Active
CSS Class Name: Optiona
Event Selection Tab
The Event Selection tab allows users to add exports to be used in the display and filters to determine which events should appear in the widget.
Event Selection and Merge Fields
The following exports are added by default:
title
location
start_date
end_date
id
description
Add any additional merge fields you would like to display on the portal.
The following filters are added by default:
Folder
Type
Make the desired selections and/or add additional filters.
Tip
While the Type filter defaults to "Event," this filter can be edited to include Interviews or just to have Interviews selected.
Event Format Tab
The Event Format tab is where users configure how event information should be displayed on the public-facing page.
Event Summary Display: By default, the event title, date, and then location (either online or physical location) will be displayed. Users can add/remove/rearrange any merge fields as desired.
Important!
Only exports added on the Event Selection tab will be available for merge fields. The merge field will be "event." followed by the exact export label.
Reset Event Summary Display to Default: To return to the default configuration after making adjustments, click this button.
Event Headers: Select the desired grouping and header for events. For example, if "Date" were selected, a header of the date would be automatically generated, and all events on that date would appear below the header.
Items listed per page: This setting has no limit by default. Changing this setting will create pagination if more results are selected than the limit.
Text to display when there are no matching events: The portal will default display "There are no upcoming events to display." Users can type in a customized message if desired. This is only available if the display type is a list.
.png?sv=2022-11-02&ss=b&srt=o&spr=https&st=2024-04-18T15%3A51%3A45Z&se=2024-04-18T16%3A01%3A45Z&sp=r&sig=nO2%2BWUMGeLCkVR2fTtmwMqw9OBBctxb8ZgRe1dNqRdc%3D "image(93).png")
Tip
By default, the {{event.title}} merge field links to the registration form. In the source code, the link is {{event._event_link}}. This merge field is always available and does not need to be added as an export. If a user has a personalized URL (e.g., a person ID or a UTM code), that value will be carried through to the event registration if you use the _event_link merge field.
Why do all of the default merge fields start with "event."?
The Event Summary Display leverages Liquid looping to generate a list of events based on the filter criteria. "Event" is the selected prefix for this loop. Any additional exports added would need to include this prefix. For example, if you added an export called "user," the syntax in the Event Summary Display would be {{event.user}}.
Event Display Tab: List
Selecting a Display Type of "List" will display the events in a list.
Event Display Tab: Calendar
Selecting a Display Type of "Calendar" will display a calendar where users will select a day to view events.
Display Target: Events for the selected day can appear either below the calendar or at the bottom of any specific Static Content portal view part. Select the desired location.
Calendar Start: Select the desired start, either the current month or the first month with events.
Calendar Legend Text
Days with available events - The legend will default display "Available." A custom label can be added if desired. The color picker on the right allows users to customize the default green color.
Days with unavailable/filled events - The legend will default display "Unavailable / Filled." A custom label can be added if desired. The color picker on the right allows users to customize the default grey color.
Days with no events - The legend will default display "Not Scheduled." A custom label can be added if desired. The color picker on the right allows users to customize the default white color.
Tips
When customizing colors, check with your web designer or institutional style guides to ensure the selected colors work well with your existing website color scheme—test how the colors display for all settings (available, unavailable, and no events).
Event Display Tab: Map
A display type of map will display event markers on either the United States or the world map.
Display Target: Events for the selected day can appear either below the map, at the bottom of a specific Static Content portal view part, or replace the map display with the list of events. Select the desired setting.
Display Map: Select either the United States map or the world map.
Map Color Marker: If desired, select custom colors for event map markers.
Show ZIP Code Search: Show or hide the ability to search via ZIP code. ZIP code search is available for events in the United States. If most or all events for the widget will be outside of the United States, we recommend hiding this option.
Include Online Events: Show or hide the ability to include/exclude online events.
Adjust Initial Zoom and Location: Drag the map and use the + and - icons to set the initial map location. Be sure to click Save Initial Zoom and Location when complete. If most of your events are in a certain region, you may wish to initially show the map zoomed in to that region.
Updating the Portal Default View
After creating the portal view, the default view will need to be set at the top level.
What about methods and queries?
Methods and queries are unnecessary to build a standard event portal with just the events widget and no other customization outside the widget. There may, however, be many use cases where you add an events widget to portals that also include other functionality. In those cases, methods and queries would be necessary.
Secure Link Access and Form Auto-fill
When using Secure Link to direct individuals to an event portal with an authentication method other than Anonymous/Guest access, the default Secure Link will authenticate the user but not pass through information from their record into event registration pages selected with the events widget.
With Secure Link, the query string parameter ?key={{Record-GUID}} is used to authenticate access permission using the record's GUID. The additional parameter &person={{Record-GUID}} is needed for auto-fill-in forms. When appended to a portal URL together, the full URL will be similar to this one:
https://slate-university.edu/portal/events?key={{Record-GUID}}&person={{Record-GUID}}Additional Examples
Display a list of admitted student events on an admitted students portal or a map of upcoming visits on an application status portal.
Display multiple event widgets simultaneously.
Add Number of Spaces Remaining
To add the number of spaces remaining in an event listing in an event portal:
Add a subquery export to the Event Selection tab of the events widget.
That subquery export should be set to the output of "Formula" and will use two exports to calculate the space left by subtracting the total number of registrants (including guests) from the limit.
To add the Limit export, search for "Limit" in the standard exports in this subquery.
Adding the total number of registrations as an export will require another subquery export. First, click the subquery export icon.
Next, select the output of "Aggregate" and "Sum." Join from the base of Form to Form Responses to sum the number of registrants, and their guests signed up for this event.
You will likely only want to count registered (or possibly registered and attended) form responses, so filter for that registration status after first joining to Form Responses.
Next, decide what to sum, and add another subquery export called "registrants."
In the registrant's subquery export, add the number of guests, plus 1, to represent each form response (that is, the registrant themselves). Use the Formula output type, export the Guests export from the Form table, and use it in the formula of @guests + 1.
Save all of these layers to have 2 exports to subtract in the top layer formula export. The coalesce SQL function can be utilized to account for NULL values.
Finally, now that the additional export is built (called "spaceleft"), we can use this in the Event Format tab to add it as an additional merge field. Note: we need to prefix the merge field name with "event" to properly loop through each event and insert the respective space left value. For example, this could look like this:
Was this article helpful?
