Table of Contents
- Westmont Styling (WST)
- Lightning Shadow
This page is dedicated to the work that I did for CATLab during the 2020 fall semester while at the Westmont in San Francisco program.
Westmont Styling (WST)
During the summer there was need for a CSS stylesheet that implemented Westmont's main brand for our login flow. WST was created out of that need and is a SCSS stylesheet that gave developers everything they need to create Westmont branded experiences on the Salesforce platform.
Since its creation, we have been slowly outgrowing the base SLDS framework while increasing our WST usage. In the first version we did not provide a grid, so we still relied on SLDS for that functionality.
I started by creating a grid based off of the flexbox layout model. This gave us the ability to have layouts that work seamlessly on mobile, tablet, and desktop. Once the grid was added to WST, I was able to create full pages with WST without relying on any SLDS classes.
This semester I was tasked to make a reusable calendar for Westmont. Events would be created in Salesforce by the events team, then the calendar should display them. It should have hover, URL, and picture support.
I've embedded the staging Westmont Calendar component on this page. Feel free to interact with it! If you are having issues, you may also view the production calendar on Westmont's website.
As shown above, this calendar can be placed in any website. This may concern the security concious, but rest assured - the Salesforce site that this is hosted on only has guest permissions. It can only read college events that have been posted to the public calendar. Guests are unable to access and create new events.
Lightning Shadow was the codename for this project. The name is a play on words by mixing together Salesforce's Lightning Web Components and the Shadow DOM standard. The main focus of this project was to refactor the main student prospective portal to use modern web standards.
There are three main reasons why we decided to refactor the portal base:
- The portal was static and we could not base new portals off of it
- It could not be viewed or modified in the community builder
- It did not support Debug Mode
The first point is the most important as Westmont needed a way to have multiple concurent student applications running without resorting to copying and pasting the components. That would only make the issue worse.
Additionally, the portal's components were monolithic and made use of the infamous
querySelector. This meant the portal components were editing the raw elements on the page, instead of going through the reactive framework Salesforce generously offers. This meant code could get out of sync as one might update the page, but not the record. A by-product of this also meant code was duplicated between components, so when requirements would change we would have to edit every single component that had that copied logic.
Community Builder Video Demo
This video demonstrates the modularity of Lightning Shadow based portals. In this example, the sidebar and main portal are separate. This means a developer does not have to create a sidebar every single time they want to make a new portal.
By using this approach, we can have code separation and reuse.
Trailhead Video Demo
Trailhead needed an application so students could apply for the program. We saw this as the perfect opportunity to base it off of the new Lightning Shadow base.
Above is the application that students will use to apply to the Trailhead program.