Step-by-Step: Build Salesforce Sticky Notes with LWC Guide

Sticky notes aren’t just for your desk anymore! In this tutorial, we’ll create a Lightning Web Component (LWC) in Salesforce that allows you to pin notes on your app page or record page. With a clean, interactive UI, these digital sticky notes ensure you never forget important tasks or details.

What Will You Learn?

By the end of this guide, you’ll understand how to:

Prerequisite

Let’s Create the Metadata first

Step 1: To create the Metadata, first click on the gear icon that is on the top right, and then click on setup.

Step 2: Now, in the Quick find, search for custom metadata and then click on it; then click on the “New Custom Metadata Types” button.

Step 3: For this example, you can set the Label as “Sticky Note Color Schema” and click on save.

Step 4: Create these fields once the metadata is created.

Now, we can move forward to the Apex class and Lightning Web Components.

Let’s Create the Apex Class

Step 1: To create an Apex Class, use the below line in the terminal.

sfdx force:apex:class:create -n stickyNoteHandler

Copy and paste the below code.

getNotes will fetch all the notes that can be shown on the record/app page.
saveNote will save the current note if all the parameters are found.
fetchNotesColor will get all the information from the custom metadata.
deleteSelectedNote will delete the selected note and close it.

Now that we have Metadata and an Apex class, we can create a Lightning Web Component.

Let’s Create the Lightning Web Component

Step 1: To create the LWC, you can put the below command in the terminal.

sfdx force:lightning:component:create –type lwc -n stickyNotePanel -d force-app/main/default/lwc
sfdx force:lightning:component:create –type lwc -n stickyNotes -d force-app/main/default/lwc

Step 2: You can change the component names according to your preference; for example, we are using the stickyNotePanel and stickyNotes.

You can copy and paste the code provided below.

stickyNotePanel

HTML

JavaScript

CSS

stickyNotes
HTML

JavaScript

CSS

That’s it for creating and displaying the notes on the page. Now, let us show you a glimpse of how it will look in your Salesforce org.

Watch Live Demo

Click Here

Here’s How the Moving of Sticky Notes Works

Mousedown

Think of mousedown as grabbing something. In this case, we make it so that we now tell the js that we are holding it.
isDragging = true – tells your component, “Okay, the user is moving me now.”
Offsets – figure out where inside the note you clicked, so the note moves smoothly without “jumping” to put the cursor at the corner.

Mousemove

This mentions what happens when the mouse is moving.
ClientX, ClientY – Tracks current mouse position.

By combining these two, you can obtain the current mouse position and, based on that, set the top and left CSS properties of the Sticky note.

Here you can see the live demo with the link below: Click Here

Share This Blog

What Will You Learn?
Prerequisite
Let’s Create the Metadata first
Step 1: To create the Metadata, first click on the gear icon that is on the top right, and then click on setup.
Step 2: Now, in the Quick find, search for custom metadata and then click on it; then click on the “New Custom Metadata Types” button.
Step 3: For this example, you can set the Label as “Sticky Note Color Schema” and click on save.
Step 4: Create these fields once the metadata is created.
Let’s Create the Apex Class
Step 1: To create an Apex Class, use the below line in the terminal.
Let’s Create the Lightning Web Component
Step 1: To create the LWC, you can put the below command in the terminal.
Step 2: You can change the component names according to your preference; for example, we are using the stickyNotePanel and stickyNotes.
Watch Live Demo
Here’s How the Moving of Sticky Notes Works
Mousedown
Mousemove

10x

360°

Step-by-Step Guide: Building Sticky Notes in Salesforce Using LWC