Happy Birthday Lightning Component – My Birthday Post

Reading Time: 2 minutes

Screenshot 2018-12-09 at 10.11.23 AM

What would be the best thing that I can do on my Birthday?
Yes, I can write a blog to share the happiness with the Salesforce Ohana.

What will you learn?
A Basic lightning component
Getting data from Apex to lightning component
Using static resource in a lightning component

About the Birthday Wishes Lightning Component:
This component will show the birthday wishes to the Salesforce user on the home page. You can add this lightning component to anywhere as it is the best thing about the lightning component. Write once and use many times.

How does it work?
I have created a Date of Birth field in the User object. This component is checking the day and month with the current date. If it found the condition true then it shows the birthday wishes to the user.

A small lightning component that can bring the smile on your user/employee/customer face. Isn’t lightning great? Yes, It is.

Code Time:
A. Create a Date of Birth field in the user object.
1. Click on the Setting (Gear Icon) on the Right Top. Then click on Setup.
2. Search for Object Manager in the sidebar and click on it.
3. Select the User object. Then go to the Field & Relationship tab.
4. Click on New. Select Date type here then give the field name as “Date of Birth“. Complete the wizard by clicking next.

B. Upload the Static Resource.
1. Go back to the setup menu.
2. Search for Static Resource and click on in it.
3. Click on the new button. Give the name as “BirthDayWishes”.
4. Upload the CSS file here. (Download the file from Here.)

C. Create the Apex class with the below code.

D. Create the Lightning Component & JS Controller.

E. Add Lightning Component to Home tab.
1. Click on the Setting (Gear Icon) on the Right Top. Then click on Edit Page.
2. Here drag BirthDayWishes component to the page in any place.
3. Click on the Save and Activate button. Follow the step to activate it.

Now Go back to and refresh the page. You may not see the balloons as you have not populated the Date of Birth field yet. So go to the user and populate the field. To test this give the today’s date and month and year can be anything here.

Now go to the home page and you will see the Birthday Wishes.

Happy Birthday to Ohana!!!

Happy Birthday CSS from CodePen.

Leave a Reply