Building Custom User Interfaces using Aura

9 Comments

1. Completed Assignment for Day 11

2. Assignment 11 done

3. Completed Assignment for Day 11

4. Completed Assignment 11.

5. Assignment Completed

6. Code for Assignment Day 11
   ——————————–

   Client-Side Component
   —————————-

   ———————————————————
   Controller
   ——————————————————–
   ({
   doInit : function(cmp, evt, hlp) {
   cmp.set(‘v.columns’, [
   { label: ‘Name’, fieldName: ‘Name’, type: ‘text’},
   { label: ‘Email’, fieldName: ‘Email’, type: ’email’},
   { label: ‘Phone’, fieldName: ‘Phone’, type: ‘phone’}
   ]);
   hlp.doInitHelper(cmp,hlp);
   }
   })
   —————————————————————
   Helper
   —————————————————————
   ({
   doInitHelper : function(cmp,hlp) {
   var action = cmp.get(“c.getContactsRelatedToAccount”);
   action.setParams({accountId:cmp.get(“v.recordId”)});

   action.setCallback(this,function(response){
   var state = response.getState();
   if (state === “SUCCESS”) {
   cmp.set(“v.contactList”,response.getReturnValue());
   console.log(cmp.get(“v.contactList”));
   } else if(state == “ERROR”) {
   var errors = response.getError();
   if(errors) {
   console.log(“Errors:” + errors);
   if(errors[0] && errors[0].message) {
   console.log(“Errors[0]:” + errors[0].message);
   throw new Error(“Error ” + errors[0].message);
   } else {
   throw new Error(“Unknow Error”);
   }
   }
   }
   });
   $A.enqueueAction(action);
   }
   })
   ——————————————————————

   Server side Controller

   ———————————————————-
   public class AccountController {

   @AuraEnabled
   public static List getAccounts(){
   return [select Id,Name,Industry, Rating,Website,AnnualRevenue from Account 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];
   }
   }

7. Solution:

   1 . Client-side Aura Component —> Please call Controller’s action handler : myAction within Component’s handler tag as follow

   aura:handler name = “init” value = “{!this}” action = “{!c.myAction}”

   Please include above code within angular brackets.
   Any code written here within angular brackets got removed. So writing just simple instruction. To create component please follow recording.

   ——————————————-
   2. Client – side Controller as follow—–>

   ({
   myAction : function(component, event, helper) {

   component.set(“v.columnsToDisplay”, [
   { label: “Contact Name”, fieldName: “Name”, type: “text”},
   { label: “Created Date”, fieldName: “CreatedDate”, type: “date/Time”},

   ]);
   helper.fetchContactsHelper(component, helper);
   }
   })

   ———————————–
   3. Helper function

   ({
   fetchContactsHelper : function(component, helper) {

   var action = component.get(“c.getRelatedContacts”);
   action.setParams({

   accountId:component.get(“v.accountId”)

   });

   action.setCallback(this, function(response){
   var state = response.getState();
   if(state === “SUCCESS”){
   component.set(“v.lstContacts”, response.getReturnValue());
   }else{
   alert(“An error occured while fetching the data”);
   }
   });
   $A.enqueueAction(action);

   }
   })

   —————————————-
   4. Server Side Controller. ——->

   // I have included component on detail page of Account Object

   public with sharing class TopContactsListController {

   @AuraEnabled
   public static List getRelatedContacts(Id recordId){

   List contactList = new List();
   contactList = [SELECT Name,Phone, CreatedDate FROM Contact WHERE AccountId = : recordId ORDER BY CreatedDate DESC LIMIT 10];

   return contactList;
   }

   }

8. Hi Amit,

   It will be great if we can have a separate session on Events with Assignment.

   Thanks

9. I am getting 0 contact records when the account record is loaded. Can anyone pls help whats wrong with my code here. I didnt get any error message anywhere..
   ——————————————————-
   Component:

   ——————————————————————
   Controller:

   ({
   doinit : function(component, event, helper) {
   helper.fetchcontacts(component, event, helper)
   }
   })
   ————————————————————————
   Helper:

   ({
   fetchcontacts : function(component, event, helper) {

   component.set(‘v.fields’, [
   { label: ‘Name’, fieldName: ‘Name’, type: ‘text’},
   { label: ‘Email’, fieldName: ‘Email’, type: ’email’},
   { label: ‘Phone’, fieldName: ‘Phone’, type: ‘phone’}
   ]);

   var accid = component.get(“v.recordId”);

   var action = component.get(“c.fetchContactsApex”);

   action.setParams({acc:accid});

   action.setCallback(this, function(response){

   var state = response.getState();

   if (state == “SUCCESS”){
   component.set(“v.contactlist”, response.getReturnValue());
   }

   });
   $A.enqueueAction(action);

   }
   })
   ————————————————————
   Apex controller:

   public class contactClass {

   @AuraEnabled
   Public static List fetchContactsApex(String acc){

   return [Select id,Name,Email,Phone from Contact where AccountId = :acc LIMIT 10];
   }

   }