Follow and complete a Learn MOAR Winter ’22 trailmix for Admins or Developers by October 31 to earn a special community badge and get a chance to win one of five Salesforce Certification vouchers (up to $200USD value). Restrictions apply. Learn how to participate and review the Official Rules by visiting the Learn MOAR quests page.

A few years ago, the Sample Gallery on Trailhead launched with a couple of open-source apps to showcase the possibilities and best practices for building on the Salesforce Platform. Over the years, we’ve added more apps to it, and we keep them updated with every release. In this post, we’ll go over some of the recent updates to the Sample Gallery.

Sample apps have a new home

With the launch of the new developer website, all the apps from the Sample Gallery and all the other open-source apps that were scattered across different repos now have a new home — Code Samples and SDKs — which you can access from the “Build” tab of the website.
You now have easier access to over 200 open-source code samples and SDKs. The projects listed here aren’t just for the core Salesforce Platform; there are samples for many different products, including Service Cloud, Marketing Cloud, Commerce Cloud, Experience Cloud, MuleSoft, Quip, and even our latest addition — Slack. We’ve also included fun-to-use apps for your virtual events like gif booth, a Kahoot-styled multi-player quiz app, and more.

New code samples

As mentioned earlier in this post, most of the apps in the Code Samples and SDKs section aren’t new; they have just been pulled together from different repos. But there are two new sample apps: Functions Recipes and AZ Insurance.

Functions Recipes

Function Recipes is a collection of examples to help you get started with Salesforce Functions and get used to its main features. You can only deploy this app if you have an org with Salesforce Functions enabled. Functions are scheduled to become Generally Available shortly after the Winter ’22 release.

Functions can run using either Node.js or Java. In the recipes repo, the main branch has the code for functions created using Node.js, and if you switch the branch to java-functions, you will find the code for functions written using Java. Once you install the app, you can explore the functions in both languages using the Language drop-down as you can see in the image above.

We’ve created functions ranging from resource intensive operations using a local large data set to functions that show how you can access data from Salesforce. We’ve even included recipes to show how logging works, and how you can access environment variables from your functions. Finally, we’ve also included Apex classes and Lightning Web Components that invoke these functions.

AZ Insurance

Lightning Web Runtime (LWR) is our new runtime environment that compiles and serves Lightning Web Components to deliver unparalleled site performance and improve developer productivity. AZ Insurance is a sample app that shows how you can use the Build Your Own (LWR) template for Experience Cloud to build customer, partner, and marketing experiences. Every aspect of this experience, including layouts, navigation, and styling, is custom built using Lightning Web Components (LWC).
We’ve created a bunch of different reusable web components for each purpose, which you can copy and reuse in your projects. For example, the carousel component uses the lightning-carousel base component to show an image, and a button that you can see in the image above. These components expose public properties of type ContentReference to the Experience Builder, allowing admins to select the content to be shown in the component.

The other salient feature of this sample app is that it uses Salesforce CMS to store all the content to be displayed in the components. We created custom content types to store different types of content, like the content for the carousel component mentioned earlier. This way, an admin can update the content of the website without writing any code.

Our colleague René Winkelmeyer has made a video series hosted on our Salesforce Developers YouTube channel to help you learn more about this app and LWR Sites for Experience Cloud in greater detail.

Updates to existing apps

Here are a few updates that we’ve made to all the apps from the Sample Gallery.

Refactored Jest tests to follow wire reform

The Wire protocol in the LWC framework has internally gone through some refactoring. Once you switch to the latest version of @salesforce/sfdx-lwc-jest, you will need to change the way you mock @wire calls in your Jest tests.

You can use the new create*TestWireAdapter methods, which make register*TestWireAdapter unnecessary. Here is a quick look at the changes that you’ll need to make to your tests.
Check out this pull request to look at all the changes we’ve made to the tests for components that use a wire adapter.

All apps now use Volta

Volta installs the right version of the Node engine and package manager needed for a project. It saves the exact version of the engine to use for the project in the package.json file. Every time you run Node inside your project directory, Volta automatically switches to the version defined in package.json.

We’ve updated all our sample apps to use Volta. This ensures consistent behavior of all tools, libraries, and frameworks like Jest across collaborators, making it easy for development, debugging, and reproducing bugs.

First, make sure you install Volta. Then, you need to pull the latest version of package.json for the app you’re using and run npm install. Volta will take care of the rest.

Contributions, ho!

The true spirit of open source is that anyone can contribute to these apps. In fact, we’ve been really happy to see contributions coming in over the past few weeks, and most of these contributions are on the LWC Recipes app.

New quick actions
We’ve recently merged a contribution from a-srinivas that adds LWC quick actions to the recipes. These quick actions are added to the Contact detail page. There is a screen action that uses the current record’s context and allows you to update a field value, and there is a headless action that runs a script in the background and shows a toast message once completed.

Updated tests to subscribe to multiple channels
This contribution from BatemanVO updates the tests for Lightning Message Service recipes to support multi-channel subscriptions. This contribution changes the handlers to be an object, so that when subscribe is called, a new key/value pair is added for each unique channel, where the key is the channel and the value is the single expected handler for that channel.

Enhanced reduceErrors function
The LWC Recipes app has a reduceErrors function that converts different types of error objects into strings. A contribution from sgkmills fixes an issue where the function doesn’t currently convert fieldErrors from a DML operation using the lightning/uiRecordApi.

Summary

We want the best experience for developers (you!) when building apps on Salesforce, and our Code Samples and SDKs content is a great way for you to get inspired, explore reference code, and learn best practices. So, please check it out and give us your feedback.

If you have an idea for a feature to add to a sample app, or see a bug or potential improvement, we welcome your contributions to any app in our Code Samples and SDKs collection! Learn more about the process involved and the different ways in which you can contribute to making Code Samples and SDKs better.

About the author

Aditya Naag Topalli is a 13x Certified Lead Developer Advocate at Salesforce. He focuses on Lightning Web Components, Einstein Platform Services, and integrations. He writes technical content and speaks frequently at webinars and conferences around the world. Follow him on Twitter @adityanaag and check out his contributions on GitHub.