Firing and Handling Component Events | Adding Comments - Day 6
ฝัง
- เผยแพร่เมื่อ 8 ต.ค. 2024
- 0Welcome everyone to the Day 6 of Lightning Component Development Sessions. This is my initiative to help the Salesforce Community in learning Lightning which I believe is the future of Salesforce. Allow me to take you through 15 sessions long Lightning journey, I hope you all learn something from this free training and help others as well.
Topics covered in the video:
00:24 recap of week 1
01:53 what will we learn today
03:22 rentACar application Components
05:48 how to comment your code / commenting your markup
06:00 !-- ... --
06:31 comment in JS file
07:04 CarTile component
(show car image along with owner name : multiple css classes with image rendering)
09:06 CarTile component Markup(new lightning Bundle)
09:26 flexipage:
10:38 5 variants of lightning component bundle
11:09 how to give bg image to lightning:button
12:13 how to ex.. the property of an aura attribute type object
13:35 .innertile class
15:42 custom lightning events
16:16 component events
16:34 application events
17:02 difference between CarTile and CarDetail
(component and application events)
18:08 custom lightning component events
19:04 aura:registerEvent??
20:03 CarSearch Component(parent component)
21:35 lab:01 raising and handling custom component event
22:08 why shouldn't you put images, properties in carsearch form/ why should we segreate functionalities to components?
24:15 doInit
24:41 creating a component event
26:08 aura:registerEvent | register event in your component
27:34 event.fire() | fire an event
31:07 aura:handler
34:32 lightning:card
35:32 how to handle this event
36:06 getting carTypeId from event?
Enrol in my full hands-on course on LWC Development - www.udemy.com/...
Day 7 Session: • Aura Methods in Lightn...
Day 5 Session: • Inheritance In Lightni...
All Sessions in this series
• Lightning Salesforce L...
About Me:
Manish is a highly experienced Software Developer who has worked in big tech companies like Google and Salesforce. Presently he is associated with Amazon as SDE 2.
He is on his journey to make everyone interview ready for the big 5 FAANG (Facebook, Amazon, Apple, Netflix, Google) companies. Check out his channel for comprehensive tutorials on various technologies and mock google/amazon interviews.
🎓 My courses on Udemy (discounted links below):
📹 The Complete Salesforce Development Course - www.udemy.com/...
📹 The Ultimate Hands-On Lightning Web Component - www.udemy.com/...
📹 The Practical Guide to SFDX and Salesforce CLI - www.udemy.com/...
Follow SFDCFacts Academy:
Website: sfdcfacts.com
Facebook: / sfdcfacts
Instagram: / sfdcfacts
LinkedIn: / sfdcfacts
Connect with Manish:
/ manish-choudhary
Twitter: / sfdcfacts
Become a patron and support my work here: / sfdcfacts
#salesforce #lightning #day6 #lwc #salesforcelightning #componentevent
![[Watch Party] RoV Pro League 2024 Winter | ( Bacon Time Vs FS )](http://i.ytimg.com/vi/lD6z1BugdZw/mqdefault.jpg)
Aweosme .this was needed .please bring much more sessions.Reqyest you to bring a session more on debugging tricks
There is one video about debugging in this playlist.
Thanks for the vedios and explanation Manish.
I Still have a problem in displaying the car images in the Tiles could some one help me ..?
Steps-
1.Add Class="Tile" in Style sheet
2.Create Local Folder with Name Car and Zip it
3.Go to SetUp -> Type Static Resource in Quick Search ->Create new Static Resource->upload Folder of Step2->Save.
4.Give Type="Car__c" instead of Type="Object"
Component Code
{!v.car.Name}
Style Sheet
.THIS.tile{
position:relative;
display:inline-block;
width:100%;
Height:220px;
padding: 1px;
}
.THIS .innertile{
background-size: cover;
background-position: Center;
background-repeat: no-repeat;
width: 100%;
Height:100%;
}
.THIS .lower-third{
position:absolute;
bottom:0;
left:0;
right:0;
color:#FFFFFF;
background-color:rgba(0,0,0,.4);
padding:6px 8px;
}
Hey I have done similarly but not getting car image displayed.
Need one explanation :
/resource/Picture/Cars/ford_mustard.jpg' ----- here, if ur folder is Car and ur static resource name is Car also then why do you have written /resource/Picture/Cars and why not only resource/Car/Car
On selecting a car type and clicking on the search button I am not getting the car type id in the console.log. This is what I am getting: Selected car type: [object Object].
What may be the issue?
Same here..got stuck here..any solution please
Hi Manish,
Need your help as I cannot move ahead with the videos because of a roadblock in displaying car image.
I have downloaded zip folder "cars" on my desktop and uploaded as static resource "cars".
and in the code I have written the line as follows:
When I am adding /resource/cars/luxury/ford_mustang.jpeg to my dev org URL the image is displaying but not on Lightning App.
This is not working as Car is not getting displayed and there is only a tiny grey box appearing due to the styling in css sheet.
Kindly reply so that I can continue with the video and learning.
Hi Manish , could you please elaborate how the image is take from static resource.
The complete code of RentACar is available now on my blog sfdcfacts.com
@@SFDCFacts I dint get it.please provide the complete link, thanks
Mai bhi bata sakta anju tuzko ye 😛😛
@@shephaliswarnkar3842 -----------------------------------------------
sfdcfacts.com/code-by-code/cbc-lightning-framework-chapter-final/
COMPLETE CODE OF RENT A CAR APPLICATION
To view complete code of Rent A Car application and install it in your org, follow below steps:
1. Install the package from
login.salesforce.com/packaging/installPackage.apexp?p0=04t7F000005Ioaz
2. The package is password protected. Use password ‘rentacar_01231’ to install it.
3. Once the package is installed, navigate to developer console to generate the data.
> Open developer console.
> Click on ‘Open Execute Anonymous Window’
> Insert ‘CreateData.createPackageData();’ and click on Execute.
@@MrSingh-cz6xv after Insert ‘CreateData.createPackageData();’ this steps is failing for me error : Line: 1, Column: 1
Variable does not exist: CreateData
can you please help me on this
Hi Manish , please elaborate how to access image as background from static resource. The code you provided isn't working with me.
Its working, Just check your css file .
I did up to this, but after inspecting the final page on clicking I am not getting the carTypeId. Please help me to out this.
Hi Manish can you please share how you access image on component
Hi Manish, Is there any way that i could connect you over the call so that I can fix my issue.
Hi Manish,
I have followed all the steps for event creation, registering the event and firing, Somehow my event fails to fire. I tried debugging but everything looks good and I am unable to find the reason for this. Can you please help.
The complete code of RentACar application is available now on my blog sfdcfacts.com
Very very useful videos
sir plz elaborate the code of uploading the image because i'm stuck at that particular
point
is it possible to fire a event from standard component? For example, I want to listen to field value change on record detail standard coponent for account or any stanard object.
HI Manish-
I am not able to see car image in the output.
This is what I have written for background image tag:
background-image: url("resource/ContentDocument/Verna.jpg"); - is this a correct way ?
Pls note that I have stored it in may static resources with the name verna. pls help!!
even am not able to see, can anyone help me please and u can call me @ 91 9032 453 043
hi Manish - need you help please I am getting error and it's not the code I believe, I have checked the code for last 2 days with your UTUBE but can't fine this error when I drag the CAR FORM on the car type detail window I get following.
Action failed: c:CarSearchFrom$controller$doInit [consol is not defined]
Can you please help
Hitesh Patel change spelling of “consol” to “console” in doInit method
Hi Hitesh,
I am also getting the same error.. Also verified the code but didn't find the exact solution for it...Please let me know how did you resolved your code......Thanks in Advance.
This page has an error. You might just need to refresh it.
Error in $A.getCallback() [Error Attempt to de-reference a null object]
Callback failed: apex://CarSearchController/ACTION$getCars
Failing descriptor: {markup://c:Base} . can you give help on this
manish
Hii Manish
Thank You for such valuable video.
Manish I Facing a problem in CarTile Component. I am unable to see the images. I kept a resource.zip file in static resource.If you share the code for CarTile component i think it will be better to solve this problem.
Hi Akshay, can you send the name of your static resource bundle and also the code where you are trying to access it?
Hii, There is one typing mistake in my code and because of that it not work properly. I resolve that and now the code work properly.
@@AkshayPatil-ny6hf Hi Akshay can you please help me on the same. i am unable to can the images from static resources. Its really urgent.
Image not rendering on CarTile component, please help.
Following is my CarTile component:
{!v.car.contact__r.Name}
hi , after developing component i am seeing id in console , but when when pasting in url, so it is not found?
The complete code of RentACar application is available now on my blog sfdcfacts.com
Hi Manish, I am not getting image displayed for CarTile component. I gave correct URL for saved image on local,
Hi Amiya, Can you please paste your code here?
.THIS .innertile {
background-size:contain;
background-position:centre;
background-repeat:no-repeat;
width:100%;
height:100%;
}
I had same problem, when i change background-size from cover to contain, it starts working.
SFDCFacts ...hi..I just figured it out from sfdc facts forum...thanks a lot....
What was problem?
Even for me image is not displaying
In car Title Component rather than giving type= "Object" , try giving type="Car__c". It will work
Like
Hi Manish,
first of all very thankful to you.
I started learning Salesforce lightning development with helpful your videos, its very helpful, i followed Rent a car application video's, i have written code as well. up to session 6.
writing code was taking more time since i was pausing video and was writing....since i thought of using your code.
i followed the steps you provide, and i deleted my previous component, now i am not able to access your code also.
1. Install the package from
login.salesforce.com/packaging/installPackage.apexp?p0=04t7F000005Ioaz
2. The package is password protected. Use password ‘rentacar_01231’ to install it.
3. Once the package is installed, navigate to developer console to generate the data.
> Open developer console.
> Click on ‘Open Execute Anonymous Window’
> Insert ‘CreateData.createPackageData();’ and click on Execute.
in last line i am facing below issue, can you please help me i am too much struggling
line no: Insert ‘CreateData.createPackageData();’ and click on Execute.
Error: Line: 1, Column: 1
Variable does not exist: CreateData
Please help me some one
Hi Manish, everytime whatever I select from Car Type option, my getting same car type id in my console. Any idea why?
Hi Nikita, this must code problem but to identify exact line, please paste your code as well so that I can take a look
can you please update the server as we are not able to retrieve the code from your blog..thank you
Working on it, thanks
Hi Manish,
I have been trying for many days to get image displayed in CarTile.cmp, When I inspect I couldn't get the static resource URL in background-image: url();. When I hardcode the resource url in inspect mode I could see it.
My carTile.cmp:
{!v.car.Contact__r.Name}
Please help to overcome this.
Hi Rajeevan,
Hope your issue has been resolved. I have faced the same issue earlier when I used some random car Images which I have downloaded.
Then I tried extracting the cars static resource from Manish's github folder and its working fine.
Here is the code in case if it helps you:
{!v.car.Contact__r.Name}
Hello, how and where you created this structure /resource/cars/luxury. I also downloaded the files provided by manish. Please let me know... thanks in advance
The code is working but somehow the image is not showing up in chrome. tried different browsers but in vain. Checked in the developers tool(F12) its not throwing any error. Please help someone.
To get the images, simply upload the car.zip file in static resource with the name 'Cars'. Use the createData class to populate data. Code works fine with that
@@nitishagrawal8668 I tried.. It simply doesnt come.
how to upload picture as static resource.Can u please explain?i downloaded the file.
static resources-->new -->filename-->img we should insert ?problem I am facing ?explain anybody?
After installing app, does not work.
Hi Manish thank you . I am not getting image in application . Can you please tell me how you uploaded images
Hi, The images should be part of your static resource. Have you uploaded your images in static resource?
Thank you so much for reply. I am following same steps really helpful. I need to upload images in folders like van,luxury, sports .... And in that car images right or any other way
Yeah, this is how i am doing it
@@SFDCFacts thank you Manish issue resolved. And successfully completed upto car detail component. Thanks a lot. Really aowsom .
Hi can you explain how to upload images in static resources
Hi Manish, I am finding it difficult to display the car image. I have uploaded the file in the static resource in my org, but unable to use it. I can access the image using the url neeraj03021982-dev-ed--c.ap5.visual.force.com/resource/1547021030000/Mustang. In the code i am trying to use it as '/resource/1547021030000/Mustang/ford_mustang.jpeg' but nothing works(404 not found error). Can you or anyone in this group help as i will not be able to proceed further and complete ur youtube servies.
The code is working but somehow the image is not showing up in chrome. tried different browsers but in vain. Checked in the developers tool(F12) its not throwing any error. Please help someone.
Hey instead of getting the each carTypeId i am getting the ouput as selected carTpyeId is [object Object] but the expected output is ouput as selected carTpyeId is with 15 digit Id.
help me to sort out this issue
onSearchclick : function(component, event, helper) {
var clickSubmitEvent = component.getEvent("clickSubmitEvent");
clickSubmitEvent.setParams({
"carTpyeId" : component.find("carselection").get("v.value")
});
clickSubmitEvent.fire();
}
CarSearch cmp:
({
doFormSubmit : function(component, event, helper) {
var carTpyeId = event.getParams('carTpyeId');
console.log('selected carTpyeId'+ carTpyeId);
}
})
Event
Apex
public class GetCarList {
@AuraEnabled
public static List getcartypes(){
return [Select Id,Name from Car_Type__c];
}
}
Anitha chavva where did you declare cartypes array attribute?
yes i declared in component
Hi