LWC Practice Questions – Part 1

In this blog post, we’ll explore the development of various Lightning Web Components (LWC) in Salesforce. We’ll cover creating basic components, handling dynamic content, implementing data management, and facilitating parent-child communication. Each example will guide you through specific use cases, offering practical insights and code snippets to enhance your Salesforce development skills.

1. Create a basic LWC component helloWorld that displays a simple “Hello, World!” message on the screen.
2. Write an LWC component that displays a message, “Good Morning” if the current time is before 12 PM, “Good Afternoon” if it’s between 12 PM and 6 PM, and “Good Evening” if it’s after 6 PM.
3. Design an LWC component that displays Opportunity records in a table format. The table should include columns for Name, Stage, Close Date, and Amount. Implement inline editing for the Stage and Amount fields.
4. Create an LWC component that displays a list of Case records. Each case should be styled differently based on its Status (e.g., “New”, “Closed”, “In Progress”).
5. Build a form in LWC to capture user information, including First Name, Last Name, and Email. Upon submission, the form should validate the inputs and either displays a success message or show errors for invalid fields.
6. Create an LWC component with two input fields: the user’s first name and the last name. The component should display the full name (first name + last name) below the input fields.
7. Develop an LWC component that fetches and displays Opportunity records in a paginated format. Include “Next” and “Previous” buttons to navigate between results pages.
8. Create an LWC component with a form that captures a user’s email and phone number. Implement custom validation logic to ensure the email is in the correct format and the phone number contains only digits. The form should not be submitted unless both fields pass validation.
9. Create an LWC component that allows users to upload files (e.g., images, PDFs) to Salesforce and associate them with a specific Account record.
10. Create a parent component named taskList that holds a list of tasks. Create a child component named taskItem that displays individual tasks with a “Mark as Complete” button. When the button is clicked, the parent component should be notified, and the task should be marked as completed.
11. Create an LWC component named statusIndicator that displays a user’s status (e.g., “Active”, “Inactive”, “Pending”) with different background colors for each status. The status should be selected from a dropdown menu.
12. Create an LWC component named fileUploader that allows users to upload files and associate them with a specific Contact record.
13. Create a custom object named Course__c with fields Name, Course_Code__c, and Duration__c. Develop an LWC component named courseList that fetches and displays all Course__c records in a table. Include columns for Name, Course Code, and Duration.
14. Build an LWC component named newCourse that allows users to create a new Course__c record. The component should include a form with input fields for Name, Course_Code__c, and Duration__c, and a submit button to save the record to Salesforce.
15. Create two custom objects: Course__c and Student__c, where Student__c has a lookup field to Course__c. Develop an LWC component named courseStudentList that displays a list of students enrolled in a selected course on click of the Button Named is Enrolled Student.
16. Create an LWC component named importCourseData that allows users to upload a CSV file containing Course__c records.
17. Develop an LWC component named exportProjectData that allows users to export all Project__c records to a CSV file.
18. Create a parent component named courseDashboard and a child component named courseDetails. The parent component should pass a selected Course__c record to the child component, which will display the details of the course (e.g., Name, Course_Code__c, Duration__c).
19. Create a child component named orderItem that includes a button to remove an item. When the button is clicked, the child component should emit an event to the parent component (orderList) with the item’s ID as a parameter. The parent should handle the removal of the item from the list.
20. Create a child component named reviewForm that collects user reviews. When the review is submitted, the child component should emit an event with the review data to the parent component named reviewManager. The parent component should handle this data and update a review summary.