Portal Events Widget

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 within a single page. 

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 automatically recreate a landing page as a portal. However, if a landing page is complex or needs extensive updates, creating a new portal would be the best route.

Automatically Generate from Landing Page

To automatically generate a portal from an existing landing page, follow these steps: 

  1. Go to Database > Event Landing Pages.
  2. Click on the desired landing page.
  3. Click the Generate button next to "Convert to portal."

    Generate button on landing page popup

  4. You will be automatically redirected to the view of the new portal. The previous folder configurations will be part of the events widget.

    View of new portal

  5. 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."
  6. Feel free to make any additional adjustments as needed, using the documentation below as a guide. 
  7. Test the portal.
  8. To replace the existing landing page with the portal, update the landing page 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:

  1. 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".
  2. Build out the portal using the documentation below.  
  3. Test the portal.
  4. To replace the existing landing page with the portal, update the landing page 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."
  5. 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.

Portal Edit Details

Important!

Default view will be blank when the portal is created, so be sure to return to this main edit popup to select the view that 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.

Portal Widgets

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 that has additional widgets and functionality.

  • Name: Descriptive name of the widget
  • Status: Active
  • CSS Class Name: Optional

    Event Widget Details Tab

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 have display on the portal.
    • The following filters are added by default:
      • Folder
      • Type
    • Make the desired selections and/or add additional filters.

Event Selection Tab

  Tip

While the Type filter defaults to "Event", this filter can be edited to include Interviews or to just 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" was 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 there are more results than the limit selected.
  • Text to display when there are no matching events: By default, the portal will display "There are no upcoming events to display." Users can type in a customized message if desired.

Event Format Tab

  Tip

The {{event.title}} merge field by default links to the registration form. In the source code, the link is {{event._event_link}}. This merge field is always available and does not needed 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.

Display Tab List

Public Facing View of 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 - By default, the legend will 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 - By default, the legend will 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 - By default, the legend will 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, be sure to 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).

Display Tab Calendar

Public Facing View of Calendar

Event Display Tab: Map

A display type of map will display event markers on either a United States or 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 world map.
  • Map Color Marker: Select a custom color for event map markers, if desired.
  • 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 recommended 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.

Display Tab Map

Public Facing View of Map

Updating the Portal Default View

After creating the portal view, the default view will need to be set at the top level. 

Select Default View for Portal

  What about methods and queries?

To build a standard events portal with just the events widget and no other customization outside the widget, methods and queries are not needed. There may, however, be many use cases where you are adding an events widget to portals that also include other functionality, and in those cases, methods and queries would be necessary.

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.

Event Widget on Enrolling Students Portal

Display multiple event widgets simultaneously

 

Public Facing Portal with Two Event Widgets

Display # of Spaces Remaining in an event Listing:

To add the number of spaces remaining in an event listing in an event portal: 

  1. Add a subquery export to the Event Selection tab of the events widget.
  2. 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:

  3. To add the Limit export, search for "Limit" in the standard exports within this subquery.
  4. To add the total number of registrations as an export, this 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 what to sum, and add another subquery export​ called "registrants."
    • Within the registrants 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 within the formula of @guests + 1​:

  5. Save all of these layers to have 2 exports to subtract within the top layer formula export:

  6. 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 spaceleft value. For example, this could look like:

Was this article helpful?
10 out of 10 found this helpful