Lightning Component Development Session Videos

I welcome all of you in Lightning Component Development Sessions. This is my initiative to help Salesforce Community in learning Lightning which I believe is the future of Salesforce.

Please subscribe to my youtube channel  – https://www.youtube.com/SFDCFacts to get the latest updates as all the videos are not available here on my blog!!

Day 1 -Basic of Lightning Framework, Component Bundle, App Builder

Day 2 -Applying Stylesheet, Create Basic Lightning Component

 

Day 3 -Lightning App, Attributes, Looping, Conditional Markup, Handling Events

 

Day 4 – Access Attributes In Controller, System Events, Debugging Components, SOQL

Day 5 – Server Side Controller, Apex, Inheritance In Lightning

Day 6 – Firing and Handling Component Events, Comments in Markup and Controller, CarTile Component

Day 7 – Aura Method, Understanding Layout, Calling Child Component Action, CarSearchResult Component

Day 8 -Lightning Data Service, Lightning App Builder, Lightning Interfaces

Day 9 – Application Event, Lightning Data Service Create Or Save Record

Day 10 – SLDS, Loading External JavaScript, LeafLet Library

Day 11 – Lightning Quick Action, Dynamic Record Type Selector

Day 12 – Lightning Tab, Vertical Navigation, Aura Method, Component Event

Day 13 – Lightning Data Table, Data Table Actions, Component Event

Day 14 – Lightning Accordion, Aura Method

Day 15 – Lightning Forms, lightning:recordForm, lightning:recordEditForm, lightning:recordViewForm

 

Bonus Video – #JDF18 Live Session – Benchmarking Your Lightning Component Code (Jaipur Dev Fest Live)

39 thoughts on “Lightning Component Development Session Videos

  1. Gus

    Your course is brilliant! So well thought out and organized, and well explained!! Sorry I missed registration but am following along and can’t wait for the next sessions. Thank you so much, so incredibly generous of you!

    Reply
  2. Divya

    Let me know one thing What is difference between lightning:button and ui:button? and when do we use lightning components and ui components?

    Reply
    1. Manish Choudhari Post author

      Hi Divya,

      Both belong to the different namespaces. If you find a similar component in both namespace like ui:button and lightning:button, please prefer lightning components as they will out of the box lightning look and feel and also specifically designed and optimized for Lightning Framework usage.

      ut if you do not see any component in Lightning namespace, you can use UI namespace component there.

      Hope this answers your question.

      Reply
  3. kamesh

    Hi Manish,
    How we can assign case object page layout based on the record type Id in lightning component need to case close page layout in edit mode.

    ——————————–
    ({
    closeRecord : function(component, event, helper) {
    var editRecordEvent = $A.get(“e.force:editRecord”);
    editRecordEvent.setParams({
    “recordId”: component.get(“v.recordId”)
    });
    editRecordEvent.fire();
    }
    })

    I wrote the code but corresponding case close page layout not coming.
    how we can achieve this one.
    could you please help on this.

    Thanks & Regards,
    Kamesh

    Reply
    1. Manish Choudhari Post author

      Hey Kamesh,

      You cannot do it based on recordId, but it will be mapped to recordTypeId of that particular record. You can change the page layout for the record type this record belongs to, that should do the trick.

      Reply
  4. Darrell

    This is a great video series. I like your patience explaining the uses of the specific topics. Do you have the code for the Rental Car application?

    Reply
    1. Manish Choudhari Post author

      Hi Darrell,

      I do have the code for RentACar application but not sharing that as the main purpose for these sessions is to make everyone aware about lightning and write lightning code, so they get the confidence. I hope you understand.
      Also, all the code is visible through my session, so you will definitely be able to have your own RentACar application by the end of session 10.

      If you want refer the functionality, download this managed package: https://appexchange.salesforce.com/appxListingDetail?listingId=a0N3A00000EtDyBUAV

      Reply
  5. Darrell Gallegos

    onSave : function(component, event, helper) {
    component.set(“v.carExperience.Car__c”, component.get(“v.car.Id”));
    component.find(“service”).saveRecord($A.getCallback(function(saveResult) {

    if(saveResult.state === “SUCCESS” || saveResult.state === “DRAFT”) {

    var resultsToast = $A.get(“e.force:showToast”);
    if(resultsToast)
    {
    resultsToast.setParams({
    “title” : “Saved”,
    “message” : “Car Experience Added”
    });
    resultsToast.fire();
    }
    else
    {
    alert(‘Car Experience Added’);
    }

    helper.onInit(component,event,helper);
    }
    }));
    },

    This code is not working to save the Review using LDS. Can you assist?

    Reply
    1. Manish Choudhari Post author

      Hi Darrell,

      Can you send me the error you are getting using this code, along with your component and controller code?

      Reply
  6. Isha

    Can we get the ppt downloads ..? Will be easy to revise topics better by looking through the ppt contents.

    Reply
  7. Mohan

    Hi ,
    Manish hatsoff and thanks for your first step in sharing knowledge on Lightning using blogs.
    In day4 tutorial after trying for onchange functionality for cartypes i’m getting error as:

    This page has an error. You might just need to refresh it.
    Error in $A.getCallback() [action.run is not a function]
    Failing descriptor: {lightning:select}

    function in controller as folows:
    valueSelected :function(component, event, helper) {
    var choosenOption=component.find(“carTypeList”).get(“v.value”);
    alert(‘option choosen is—>’+choosenOption);
    }

    can I know the issues… in this.

    Reply
      1. Tanmai

        Im Having the same error as mentioned by Mohan above but in case of video#5 in case of using base class to call the server side controller. Can you please help me with this

        Reply
  8. Ganesh Babu

    Hi Manish,

    Thanks for Sharing Knowledge…
    I am not able to see the map in the RentA car page. Code is same as in session 10 CarLocation Component.
    Created a static Resource too.

    any suggestion??
    I see only below for all car selection.

    Current Car Location
    Please Make a selection.

    Reply
    1. Manish Choudhari Post author

      Hey Ganesh,

      Have you completed the rederer.js file code as well. If yes, can you please post your complete code?
      You have to complete the rendere.js code as well in order to make the map visible.

      Reply
  9. Sameer

    Hi Manish,
    As you showed in session#6, i wrote the similar code in my org and added an alert in ‘CarSearch’ (parent component) controller to show the car type id. But for some reason it returns car type name. Below is the mark up and in the apex controller i wrote the query to written id & name. Any idea why i couldnt get the SF id of car type? Also “Submit” button is working in the Lightning App but not in the account record page (i added it record page through lightning builder), any thoughts?

    Thanks.

    Reply
  10. Sameer

    HI Manish,
    Submit button created in in session#6 (Component Events) is working fine in Lightning app but not in the record page, any thoughts? Also ‘CarTypeId’ is returning the name instead of id i am not sure what was wrong, below is my code please suggest.
    .cmp:

    .js:
    searchCar : function(cmp, event, helper) {
    var searchFormSubmit=cmp.getEvent(‘searchFormSubmit’);
    searchFormSubmit.setParams({
    “carTypeId”:cmp.find(‘selectType’).get(‘v.value’)
    });

    Thanks,
    Sameer

    Reply
  11. Isha

    I am trying to implement inheritance in session5 video and getting error while loading app post that. Please help.
    Error as belo. Which to me isn’t making much sense
    This page has an error. You might just need to refresh it.
    Access Check Failed! AttributeSet.get(): attribute ‘value’ of component ‘markup://c:base {4:0}’ is not visible to ‘markup://c:base {4:0}’.
    Failing descriptor: {c:base}

    Reply
  12. mithilesh

    Hello Manish,

    I wrote this code for carDetail component but the “Full Details” button is not showing in Lex and when i tried to debug the code i found that the value returned by $A.get(“e.force:navigateToSobject”) is always false. please let me know where am i going wrong.

    carDetail.cmp

    Car name:

    Type:

    Build Year:

    Per Day Rent:

    Milage:

    carDetailController.js

    ({
    doInit : function(component, event, helper) {
    var navEvt = $A.get(“e.force:navigateToSobject”);
    console.log(‘navEvt = ‘ + navEvt);
    if(navEvt){
    component.set(“v.showCardAction”, true);
    }else{
    console.log(‘There…..’);
    component.set(“v.showCardAction”,false);

    }
    },
    onFullDetails : function(component, event, helper) {
    var navEvt = $A.get(“e.force:navigateToSobject”);
    if(navEvt){
    navEvt.setParams({
    “recordId” : component.get(“v.car”).id,
    “slideDevName” : “detail”
    });
    navEvt.fire();
    }else{
    console.log(“‘e.force:navigateToSobject’ event is not supported in this context”);
    helper.showToast(component,{
    “title”:”Error”,
    “type”:”Error”,
    “message”:”Event not supported”
    });
    }
    },
    })

    Reply
    1. Manish Choudhari Post author

      It should show up. However you are doing a little mistake, instead of “e.force:navigateToSobject”, you should use “e.force:navigateToSObject”

      Notice that I have letter “O” in the capital of SObject.

      Reply
      1. mithilesh

        Thank you Manish for such a quick response. one more doubt i have in session 8 that tag is not working for me as i’m not able to get into the aura:if, attaching the code… kindly review it . Please provide me the explanation of as i’m trying to implement this

        CarDetails.cmp :

        Reply
  13. Rajeevan

    HI Manish,
    In Session Day6, ‘CarTypeId’ is returning the name instead of id in the Console.Log..I don’t know what was wrong, below is my code please suggest.

    MarkUp pArt:

    Controller.JS:
    onSearchClick : function(component, event, helper) {
    var searchFormSubmit = component.getEvent(“searchFormSubmit”);
    searchFormSubmit.setParams({
    //get selected carTypeID and pass it to Event attribute
    “carTypeId” : component.find(“carTypeList”).get(“v.value”) //Im using v.value

    });
    searchFormSubmit.fire();
    },

    Reply
  14. Ramya

    Hi Manish,

    I have listed Day 5 video session tutorial,
    I am getting the values from server side controller in the helper file.
    Kindly find the below helper code.

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

    },

    getCarType : function(component, helper){
    debugger;

    var action = component.get(“c.getCarTypes”);
    debugger;
    action.setCallback(this, function(data) {
    debugger;
    var state =data.getState();
    if(state==’SUCCESS’){
    component.set(“v.CarTypes”, data.getReturnValue());
    }
    else if (state == ‘Error’){
    alert(‘Unknown Error’);
    }
    });

    },
    })

    Reply
  15. Ragu

    Hi Manish
    I have just started the tutorial and built CarSearchForm. After building the component tried to preview the compoenent, it’s showing the content but the problem is drop down picklist elements are horizontally misaligned little bit with buttons. I don’t know why. Can someone please help me to sort out this issue.

    Reply
    1. Manish Choudhari Post author

      Hi Ragu,

      You need to adjust the alignment by using padding property. The code shown was written in Spring 18 release, Salesforce has added extra padding in lightning:select component from Summer 18 which is causing this misalignment.

      Reply
  16. Sudheer

    Hi Manish,
    I have done till session 5 and am getting the below error. I don’t know what was wrong, Please suggest.

    This page has an error. You might just need to refresh it.
    Access Check Failed! AttributeSet.get(): attribute ‘carTypes’ of component ‘markup://c:carSearchFormPrac1 {3:0}’ is not visible to ‘markup://c:carSearchFormPrac1 {3:0}’.
    Failing descriptor: {c:carSearchFormPrac1}

    Reply
  17. Sunil Pandey

    Hi Manish,
    Greetings, Based on your day 1 session i tried to follow the same steps.
    Step 1: Created TestComponentWithHTML.cmp
    Step 2: Created TestComponentWithHTMLTag Lightning Page
    Step 3: Selected option of Record Page and then Contact as object
    Step 4: Selected option of Header and Right Sidebar and dragged the items in respective section and activated the page
    Now when i go contact section i am still getting to see old layout. I even CTR+Shift+R still i get to see existing layout.
    What could be the root cause.
    Thanks,
    Sunil

    Reply

Leave a Reply

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