October 19, 2021 3 min to read

Event Registration

A tool for organizers to create and manage events in SharePoint Online.

Original Developers Michael Wilson & Josh Gardner

Solution Code

The solution is designed to be used as is or further customized. Click here to access the code repository. This solution builds on top of the Basic Dashboard walkthrough. To create your own the instance of the solution, follow the steps below.

1. Fork the solution and clone it to your machine
2. Install the libraries: npm i
3. Link TypeScript: npm link typescript
4. Build the Solution: npm run all

Installation and Deployment

Upload Assets

Right click and save the files for the next step.

• Go to Site content -> Site Assets where the app shall live
• Create a new folder and it must be named event-registration

• Click inside of the folder and upload the following:

Create WebPart Page

• Navigate to Site Pages

• Click New -> Web Part Page
• Type the name of the page before “.aspx” (era is recommended) and select “Full Page, Vertical” for layout template.

• Navigate to the Site Assets library and move the file to the event-registration folder

• Navigate to the page and click on it to view it
• Click on the Edit button

Configure Solution

• Click “Add a Web Part” and set Categories to “Media and Content” and Parts to “Content Editor”

• Click the dropdown arrow in the upper right corner and choose Edit Web Part

• Under “Content Link” copy-paste link to index.html file and under “Appearance” set “Chrome Type” to None

• Click Install on the Installation Required screen

• Click on the ‘x’ icon to close the dialog

• Click Stop editing icon

• The solution is now ready to go!

User Views

Administrators/Organizers View

Members/Attendees View

User’s Guide

Organizer

• Create an event with New Event button and view what security groups are managers and members with Manage Groups
• View an event’s details by clicking the View icon to the left of Title
• Upload a document by clicking the Upload icon under Documents. View and delete options will be present
• Edit, delete, and view an event’s roster by clicking the Manage Events icon. View Roster will have a print option
• Type title or date into Search to find a particular event
• To view coures that have already started or ended click the filters button next to Search and click Show inactive events

Change Members and Managers group

• Navaigate to the “Event-Registration” folder and edit the “eventreg-config.json”
• Enter the name of the new group for either the admin group or the members group

Attendee

• Type title or date into Search to find a particular event
• View an event’s details by clicking the View icon to the left of Title
• Register or unregister by clicking the Registration button
• If regitered for an event, use the Add event calendar button to add it to Outlook