Black Lab Roastery

Posted by

A couple of years ago I was at a client building Salesforce Communities. I didn’t have a great amount of exposure to Lightning Components and front end development in general. I had always been a backend guy. Moving through the months of work, I started to fall in love with it. Taking immersive JavaScript and web development classes became a hobby and it all took off from there. As my knowledge for JavaScript grew coupled with my love for teaching, I wanted to create a lecture series at my company to share my knowledge. Unfortunately at the time, I couldn’t figure out an elegant way to make it relevant to Salesforce development and beneficial to my Salesforce colleagues. That was until the release of Lightning Web Components. Suddenly, I had an avenue to share everything that I had been learning over the past few years and tie it back to something directly translatable.

I made an announcement, designed the curriculum, and in May 2019 held the first meeting of my new JavaScript Mini-Series. The purpose of this lecture series is to teach design principles as they relate to JavaScript and what that means for Lightning Web Component patterns and development. For privacy reasons, I will not be releasing the slides we covered, however since it was important to apply the principles we discussed, I created a business case and am hosting my code on a GitHub repository for all to access and learn from.

Black Lab Roastery

Cindy has an up and coming start up selling coffee beans called Black Lab Roastery. Cindy owns a roastery for the coffee beans she buys from all over the world and has also just hired a packaging company. Now, she needs to keep track of the shops she sells to and the performance of her beans. Cindy has recently purchased a Sales Cloud license and would eventually like to track current and projected revenue, cost of packaging and shipping per item, and submitting orders for internal tracking. For now, she would just like to see a proof of concept to ensure she’s comfortable with the approach. She consults with a Salesforce Developer (you) about how she can achieve the following:

  • Tool to view all of the coffee shops she sells to
  • From the view all tool, ability to navigate to an individual shop
  • Ability to search for her shops as her business grows by Name or the Description of the shop
  • She’s given you a logo that she would like to see on the view all tool
  • A map of the Denver area showing all of her coffee shops. Its a ‘nice to have’ if the map filters down with the search

Since you just learned about a cool and new technology that would offer a great solution to the above ACs, you recommend a Lightning Web Component and get to work on the proof of concept! As a developer, you know that it’s important to offer the most scalable solution possible and so you decide to package and source control your work so that the next developer or admin can quickly get up to speed.

After you read through the business case, follow the Setup Instructions in the README file on the repository to get started. Important things I want to share about the setup instructions:

  • I created an unlocked package for my project to allow anyone to install it into their environments and get started quickly. Just enter in the key and you are good to go!
  • I wrote a data JSON file with a sfdx command to insert the Coffee Shop data into any environment and immediately have data to work with.
  • The permission set assignment sfdx command will assign the permission set I created to your user and give you access to everything you need.
  • Once you do install the package, I would recommend a quick glance at all of the package components to familiarize yourself with them.

As my lecture series continues, I will be adding to the existing ACs and the requirements will slowly become more complex over time. Creating material like this is the entire point of my blog and I love teaching so I will be happy to take a look with you and answer any questions. Happy coding!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s