Building Custom User Interfaces using Lightning Web Components (Part 1)

User Experience is an essential element of any application and Salesforce is no exception to this. In this episode, we will explore the programmatic capability of the platform to build responsive applications which comply with the general web development standards. Join us as you embark on this wonderful journey to become a champion Salesforce developer.


  • Introduction to Lightning Web Components
  • Aura vs LWC
  • Anatomy of a Lightning Web Component
  • Lightning Playground
  • Create your first Lightning web components
  • Properties in LWC
  • Invoking Apex from LwC
  • Q & A

Most importantly don’t break a leg if you are overwhelmed with the pace of the live sessions. All Apex Hours for Student sessions will be recorded and will be available on our YouTube channel. Please Subscribe our YouTube Channel.

Here is KeyNote of session

Introduction to Lightning web components

Introduction to Lightning web components
Introduction to Lightning web components


2014 Web Stack

Lack of
1 – Rendering Optimization
2 – Can not create custom elements
3 – lack of module, decorators, promises, class, etc at client side.
4 – Hard to find & ramp-up developers

To bridge the GAP
1) React ( framework )
2) Angular ( framework )
3) Aura ( framework )
4) AMD ( lib )
5) CommonJS ( lib )

The 2019 Web Stack

The LWC Stack


Software Installation

Setup your VsCode

YouTube video

Properties in LWC

Properties in LWC
Properties in LWC

Call Apex From LWC

Further Learning

Build Lightning Web Components

Introduction to Lightning Web Component

Introduction to Lightning Web Component

Apex Hours Session

Please check below post on Lightning Web Components:-

  1. Lightning Web Components ( LWC ) in Salesforce with Non-Scratch Org
  2. Invoke Apex Controller from Lightning Web Component | Lightning Web Component inside Another LWC
  3. Design attributes in Lightning Web Components | CSS and SVG Files | Lightning Web Components | targetConfigs
  4. How to get current user id in lightning web component | Access logged in user ID in LWC 
  5. Toast Notification in Lightning Web Components | ShowToastEvent |  (LWC)  
  6. Lightning Web Components Best practices 
  7. Events in Lightning web components (LWC) | Communicate with Events
  8. Lightning datatable In Lightning Web Components | lightning datatable inline edit
  9. Lightning Message Service (LMS) | MessageChannel

Recording of session

YouTube video


Complete below assignment to win $1000 Salesforce Voucher. Click here for rule.

AccountList Component – Create a Lightning Web Component which includes the below component –
1.A lightning button
2.When click on the button call a method of Apex Class getAccounts() and display the Account in Web Component. Hint – Use template for:each to display a single record.
3.ApexClass name must be “AccountController” & inside the class method name must be getAccounts().
4.getAccounts method will return list of 25 records

Don’t forget to register for our next session on Advance topic of LWC. Check this post for all other session detail.

Please note that we have limit of 500 attendees that can join the online sessions. However, recording will be posted on our YouTube channel. Make sure to subscribe our YouTube channel to get notification for video upload.

So, learn at your pace and free will and ace your journey to Salesforce!

Jigar Shah
Jigar Shah
Articles: 15


  1. Code for Assignment Day 12

    Client-Side Code

    Industry :
    Rating :
    Website :
    AnnualRevenue($) :

    import { LightningElement } from ‘lwc’;
    import getAccounts from ‘@salesforce/apex/AccountController.getAccounts’;

    export default class AccountList extends LightningElement {


    console.log(‘Button Click Event:’);
    .then(result => {
    this.accountList = result;
    this.errors= undefined;
    .catch(error => {
    this.errors = error;
    this.accountList = undefined;



    Sever-Side Code

    public class AccountController {

    public static List getAccounts(){
    return [select Id,Name,Industry, Rating,Website,AnnualRevenue from Account order by createdDate desc limit 25];
    public static List getContactsRelatedToAccount(String accountId) {
    return [select Id,Name,Birthdate, Email,Phone from Contact where AccountId=:accountId order by createdDate desc limit 10];

  2. Solution:
    1. Client side Code : Javascript File as follows
    import { LightningElement, wire} from ‘lwc’;
    import getAccounts from ‘@salesforce/apex/AccountController.getAccounts’;

    export default class AccountList extends LightningElement {


    handleClick( event ) {

    .then(result =>{
    this.result = result;
    this.error = undefined;
    this.error = error;
    this.result = undefined;


    2.Server Side Code :

    public with sharing class AccountController {
    public AccountController() {

    @AuraEnabled(Cacheable = true)
    public static List getAccounts(){
    return [Select Id, Name, Industry, Rating, Website, AnnualRevenue From Account Limit 25];


Leave a Reply

Your email address will not be published. Required fields are marked *