Add Some Fun to Your Salesforce Pages with a Confetti Generator LWC

Confetti is a fun and playful way to celebrate special occasions, events, or simply add a touch of excitement to any project. In this blog post, we’ll walk through the process of creating a Confetti Generator component in Salesforce Lightning Web Components (LWC).

Introduction

Lightning Web Components (LWC) is a new programming model for building Lightning components in Salesforce. It’s designed to be fast and lightweight, with an emphasis on modern web development practices.

In this tutorial, we’ll create a Confetti Generator component that can be used to celebrate special moments in a Salesforce application. The component will generate 100 confetti elements that fall from the top of the screen, with each confetti element having a unique size and color.

Setting Up the Project

Before we start coding, let’s create a new project in your favorite code editor. You can use the Salesforce CLI to create a new project with the following command:

sfdx force:project:create -n ConfettiGenerator

Next, let’s create a new Lightning Web Component in the project. You can use the following command:

sfdx force:lightning:component:create -n ConfettiGenerator -d force-app/main/default/lwc

The Template

The template for the Confetti Generator component will define the HTML structure for the component. In this case, we’ll have a single container element that holds all the confetti elements.

Here’s the template for the Confetti Generator component:

	<template>
	<div class={containerClass} onmousemove={handleMouseMove}>
	<template for:each={confettiArray} for:item="confetti">
	<div key={confetti.id} class="confetti" style={confetti.style}></div>
	</template>
	</div>
	</template>

view raw confetti.html hosted with ❤ by GitHub

In this template, we have a container element with the class confetti-container. This element will have a onmousemove event handler that will trigger the handleMouseMove method when the mouse is moved over the container.

We also have a template element that iterates over the confettiArray and generates a div element for each confetti. The div element has a confetti class and its styles are determined by the style property. The key property is used to give each div element a unique identifier.

The Script

The script for the Confetti Generator component will define the behavior for the component. This is where we’ll generate the confetti elements and update their styles to simulate the falling motion of the confetti.

Here’s the script for the Confetti Generator component:

	import { LightningElement ,track} from 'lwc';

	export default class Confetti extends LightningElement {
	@track confettiArray = [];
	containerClass = 'confetti-container';

	// Generates the confetti on component load
	connectedCallback() {
	this.generateConfetti();
	}

	// Generates the confetti and updates their styles
	generateConfetti() {
	for (let i = 0; i < 100; i++) {
	this.confettiArray.push({
	id: i,
	style: this.generateConfettiStyle()
	});
	}

	// Updates the confetti styles every 50 milliseconds
	setInterval(() => {
	this.confettiArray = this.confettiArray.map(confetti => {
	return {
	...confetti,
	style: this.updateConfettiStyle(confetti.style)
	};
	});
	}, 50);
	}

	// Generates the initial styles for the confetti
	generateConfettiStyle() {
	const x = Math.floor(Math.random() * window.innerWidth);
	const y = Math.floor(Math.random() * -window.innerHeight);
	const size = Math.floor(Math.random() * 5 + 5);
	const color = this.generateRandomColor();

	return `left: ${x}px; top: ${y}px; width: ${size}px; height: ${size}px; background-color: ${color};`;
	}

	// Updates the styles for the confetti
	updateConfettiStyle(style) {
	const currentTop = parseInt(style.split(';')[1].split(':')[1]);
	const updatedTop = currentTop + 10;

	return style.replace(`top: ${currentTop}px`, `top: ${updatedTop}px`);
	}

	// Generates a random color for the confetti
	generateRandomColor() {
	const colorArray = ['red', 'green', 'blue', 'purple', 'orange'];
	const randomIndex = Math.floor(Math.random() * colorArray.length);

	return colorArray[randomIndex];
	}
	}

view raw confetti.js hosted with ❤ by GitHub

In this script, we have a `confettiArray` property that holds all the confetti elements. The `generateConfetti` method is called on component load to generate the confetti and update their styles. The `generateConfettiStyle` method generates a unique style for each confetti based on its size, left position, animation duration, and background color. The `generateRandomColor` method generates a random color for each confetti. The `updateConfetti` method updates the styles of the confetti by translating their `y` position by a random amount. This method is called repeatedly using `setTimeout` to create the falling motion of the confetti. Finally, the `handleMouseMove` method changes the `containerClass` property when the mouse is moved over the container to add an active class and highlight the confetti. ## The Styles The styles for the Confetti Generator component will define the look and feel of the confetti.

Here’s the styles for the Confetti Generator component:


	.confetti-container {
	position: relative;
	width: 100%;
	height: 100%;

	}

	.confetti {
	position: absolute;
	width: 50px;
	height: 50px;
	background-color: blue;
	border-radius: 25px;
	z-index: 999;
	animation: confetti-fall 1s linear infinite;
	}

view raw confetti.css hosted with ❤ by GitHub

The Configuration File

The configuration file defines the metadata for the Confetti Generator component.

Here’s the configuration file for the Confetti Generator component:

	<?xml version="1.0" encoding="UTF-8"?>
	<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
	<apiVersion>50.0</apiVersion>
	<isExposed>true</isExposed>
	<targets>
	<target>lightning__AppPage</target>
	<target>lightning__RecordPage</target>
	<target>lightning__HomePage</target>
	</targets>
	</LightningComponentBundle>

view raw confetti.js-meta.xml hosted with ❤ by GitHub

In this configuration file, we have defined the API version as 50.0 and set the isExposed property to true to make the component available for use in Lightning Pages and App Builder. The targets property is used to specify the pages where the component can be used, including the lightning__AppPage, lightning__RecordPage, and lightning__HomePage.

The Business Use Cases

A business use case for a confetti generator component in Salesforce could be to increase user engagement and add a fun and celebratory touch to your Salesforce pages. This component can be used in a variety of situations such as:

Acknowledging a milestone or achievement, such as reaching a sales quota or closing a large deal
Adding a festive touch to your pages during holidays or special events
Celebrating a user’s birthday or anniversary with your company
Recognizing and rewarding users for their contributions to the company
Creating a fun and interactive user experience on your Salesforce pages

In each of these scenarios, the confetti generator component can add a visual and interactive element that can help increase user engagement and provide a positive user experience. Additionally, it can help create a fun and lighthearted atmosphere in your Salesforce pages, which can help improve employee morale and satisfaction.

Conclusion

That’s it! You now have a working Confetti Generator

About the blog

SFDCLessons is a blog where you can find various Salesforce tutorials and tips that we have written to help beginners and experienced developers alike. we also share my experience and knowledge on Salesforce best practices, troubleshooting, and optimization. Don’t forget to follow us on:

Newsletter

Subscribe to our email newsletter to be notified when a new post is published.