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)

This Post Has 44 Comments

  1. Avatar

    Hi,
    How can join the able to session.

    please provide me details.
    Your contact number also.

  2. Avatar

    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!

  3. Avatar

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

    1. Avatar

      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.

  4. Avatar

    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

    1. Avatar

      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.

  5. Avatar

    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?

    1. Avatar

      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

  6. Avatar

    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?

    1. Avatar

      Hi Darrell,

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

  7. Avatar

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

    1. Avatar

      Hi Isha,

      PPTs are cannot be shared due to certain reasons. However feel free to make your own notes from the slides presented in videos. Thanks!!

  8. Avatar

    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.

    1. Avatar

      Hi Mohan, you may have to post your complete code as I do not get much idea from above error.

      1. Avatar

        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

  9. Avatar

    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.

    1. Avatar

      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.

  10. Avatar

    Please provide rent car source code to learning lightning component..

    Thanks

  11. Avatar

    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.

  12. Avatar

    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

    1. Avatar

      Hi Sameer,

      Can you please share complete markup and controller for event, child component and parent component?

      1. Avatar

        Even I’m getting the same Name of the selected Options instead of the ID of the selected carTypes.

  13. Avatar

    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}

    1. Avatar

      Hi Isha,

      Please use {!v.body} instead of {!v.value} in your base component. Thanks!!

      1. Avatar

        Still getting the error. What could be the possible reason ?

  14. Avatar

    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”
    });
    }
    },
    })

    1. Avatar

      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.

      1. Avatar

        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 :

  15. Avatar

    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();
    },

  16. Avatar

    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’);
    }
    });

    },
    })

    1. Avatar

      Where did you enqueue your action?

      You need to enqueue your action like this $A.enqueueAction(action);

  17. Avatar

    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.

    1. Avatar

      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.

  18. Avatar

    Can I get records to display on this application?

  19. Avatar

    Thanks! !Your course is brilliant..It helped me to understand all the basics about lightning components

  20. Avatar

    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}

    1. Avatar

      Please paste the code of your component…!!!

  21. Avatar

    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

  22. Avatar

    Hi Manish in the 7th vedio i am not getting the picture__c datatype which you used, and you are using the static resource,i dont know where you used the static resourced for the list of cars available in the lab excersise.

    Can you please let me know this.

    your vedios are very good and i am trying to complete all the vedios but struk in th 7 due to picture field which i want to use.

  23. Avatar

    Hi Manish

    My app is not able to display the images of the cars. Can you please help me where it is wrong.

    Regards
    Tanmai

    1. Avatar

      Have you uploaded the static resource? Can you see the image by directly pasting the car image url on browser?

Leave a Reply

Close Menu