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

6 Comments

1. Completed Assignment for Day 12

2. Assignment done

3. Assignment Completed

4. Code for Assignment Day 12
   ——————————–

   Client-Side Code
   —————————-
   accountList.html
   ———————

   Industry :
   Rating :
   Website :
   AnnualRevenue($) :

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

   export default class AccountList extends LightningElement {

   accountList;
   errors;

   handleGetAccounts(){
   console.log(‘Button Click Event:’);
   getAccounts()
   .then(result => {
   this.accountList = result;
   this.errors= undefined;
   })
   .catch(error => {
   this.errors = error;
   this.accountList = undefined;
   });
   }
   }
   ———————————————————-
   accountList.js-meta.xml
   ——————————————————–

   47.0
   true

   lightning__RecordPage
   lightning__HomePage
   lightning__AppPage

   =================================================
   Sever-Side Code
   —————————————————-

   public class AccountController {

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

   • Hey can you please share your .html file i have to look how u have created the ui using slds grid..

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

   export default class AccountList extends LightningElement {

   result;
   result1;
   error;

   handleClick( event ) {

   getAccounts()
   .then(result =>{
   this.result = result;
   this.error = undefined;
   })
   .catch(error=>{
   this.error = error;
   this.result = undefined;
   });

   }
   }
   —————————————————————End——————————————————————

   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];

   }
   }