Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
IPL T20 Dashboard Using Salesforce LWC
Highest Rated
Rating: 4.7 out of 5(13 ratings)
139 students

IPL T20 Dashboard Using Salesforce LWC

Unlocking Dashboard Mastery: Building an IPL T20 Dashboard with Salesforce Lightning Web Components and Integration Tech
Created bySalesforce troop
Last updated 6/2024
English
English [Auto],

What you'll learn

  • Building Components with LWC
  • Fetching Data Using Apex
  • Styling and Designing Layout
  • Component Communication
  • Real-World Application
  • Best Practices and debugging
  • Calling Rest API using apex

Course content

1 section • 20 lectures • 3h 43m total length

  • Introduction2:16
  • Setting Up an Org2:06

    Set up a Salesforce org by signing up at developer.salesforce.com, verifying your email, and configuring a unique username and password to log in and begin project development.

  • Salesforce Application Setup1:58
  • Creating an App Home Page3:01
  • Project Setup4:00

    Set up the IPL T20 dashboard project in Visual Studio Code using the sfdc cli, create with manifest template, and authorize a Salesforce org for seamless Visual Studio Code access.

  • First Component Creation and Layout Design11:35

    Create the IPL banner, the first lightning web component, and deploy it to the homepage using VS Code. Design a 12-column grid and style with host CSS.

  • Static Resources3:03

    Discover how to use static resources in Salesforce LWC by uploading images and zip files, making them public, and understanding direct files versus zip contents.

  • Adding Background Image3:40

    Apply a css class to the banner and set a background image from the static resource using a /resource path, then use background-repeat: no-repeat and background-size: cover to fit.

  • Calling a REST API with Apex15:37

    Call a REST API with apex to fetch external cricket data for an IPL dashboard via the GitHub API using a dataset hosted on GitHub and a base url.

  • Building a Carousel18:21

    The standard lightning-carousel has a limitation of taking only 5-6 images at most. To fix this issue, I have added a video at the end of the course demonstrating how to build a custom carousel.

  • Building Stats Tiles17:56

    Build stacked stats tiles for the ipl 2024 dashboard by fetching and parsing api data, dividing stats into left and right halves, and rendering with a grid and gradient styling.

  • Adding Champions GIF3:37
  • Building Top Performances Component45:00

    Build the IPL 2024 top performances component in Salesforce LWC by wiring data fetch with caching, rendering player images and key stats in a responsive, styled grid.

  • Building All-Time Leaders Component29:32

    Build the all-time leaders component in a Salesforce LWC. Display player cards with photos, names, and KPI values fetched via a wire service from Apex and rendered using static resources.

  • Top 5 All-Time Leaders By Category Component3:17

    Build a top five all-time leaders by category component for the IPL T20 dashboard using Lightning Web Components, enabling runs, sixes, and wickets categories on the home page.

  • Communication via lightning-message-service13:42

    Learn to enable inter-component communication with lightning message service by publishing data from one independent component to another via a record_selected message channel, using publish, subscribe, and unsubscribe patterns.

  • Fetching Data By Category8:58
  • Layout Design and Data Mapping22:53

    Design a two-column card layout for the IPL T20 dashboard, map JSON data to center and right panels, load player images with a fallback, and auto-load the first category.

  • Final Output1:45

    Review the final IPL dashboard built with Salesforce LWC, including the home page, banner with gif, carousel, stats, top performances, and all-time leaders, with LMS-driven navigation.

  • Fixing Standard Carousel Limitation11:32

    Learn how to build a custom carousel in Salesforce LWC to overcome the standard five-image limit by designing a reusable IPL custom carousel with dynamic slide transitions and SLDS styling.

Requirements

  • A PC with Windows or Linux or Mac with stable internet
  • Basic knowledge of the Salesforce platform and LWC
  • Basic knowledge of HTML, CSS and JS
  • Willingness to learn & Grow

Description

Welcome to the ultimate guide for crafting your IPL T20 Dashboard with Salesforce Lightning Web Components (LWC)! In this immersive course, you'll embark on a journey from project setup to dashboard deployment, mastering each step along the way.

  • Project Setup and Component Creation: Learn to set up your project environment, create Lightning Web Components, and design the foundation of your dashboard.

  • REST API Integration: Dive into REST API calls within LWC, fetching real-time data from external sources and seamlessly integrating it into your dashboard.

  • Styling and Global Design: Explore techniques for global styling to ensure consistency and enhance the visual appeal of your dashboard.

  • Data Fetching and Manipulation: Discover how to fetch and manipulate data to tailor it to your dashboard's requirements, ensuring relevance and accuracy.

  • Layout Designing: Master the art of layout design, organizing components effectively to optimize user experience and usability.

  • Communication Using Lightning Messaging Service: Facilitate seamless communication between components using Lightning Messaging Service, enabling dynamic interaction and real-time updates.

  • Will provide some handy tools to generate gradient

By the end of this course, you'll not only have built an IPL T20 Dashboard but also gained valuable expertise in Salesforce LWC development. Join us and turn your vision into reality!

Who this course is for:

  • Looking for a job change in Salesforce
  • Salesforce Professionals
  • Salesforce Developers who wants to build cool projects in LWC

Report abuse