 Hello, everyone. I am Sanjay Gupta. I welcome you on Sanjay Gupta Tech School. In this video, I'm going to discuss interview question answers related to lightning or a component. So first is what is lightning experience? So lightning means you can create a user experience that improves productivity, makes job easier and more intuitive. It is fast, beautiful and unique to each sales and service user. It is a simpler user experience designed to help sales team sale faster with personalized alerts and an interactive assistant to keep sales reps focused on what's important. Helps service reps support customers faster and provide problem solving environment. Next is what is lightning component framework? So if you are using lightning experience, so you have to implement lightning components and for that you need to use lightning component framework. So the lightning component framework is a UI framework for developing web apps for mobile and desktop devices. It is used for building single page applications with dynamic responsive user interfaces for lightning platform apps. It uses JavaScript on the client side and Apex on the server side. So next is what is lightning component? So a lightning component is a bundle that includes a definition resource written in markup and may include additional resources like a controller, helper, renderer, style, etc. What is Aura? Aura is an open source UI framework used for developing dynamic web apps for mobile and desktop devices. To build lightning components in Salesforce lightning experience, we use the lightning component framework. Lightning components are built on top of Aura and if you want to learn like how we implement lightning components and different scenarios, so you can just visit studiesalesforce.com and there you can find detailed videos related to lightning Aura components. Difference between VF and lightning component, so in like lightning component basically uses client side UI generation whereas in visual force it is server side. Lightning is API centric model and visual force is page centric model. Lightning uses component-based framework whereas visual force uses MVC framework. Lightning uses JavaScript framework whereas visual force doesn't have JavaScript framework. It uses tag-based language. Lightning is designed for both lightning experience and mobile application whereas visual force is designed for Salesforce classic. Lightning component bundle includes, so here you can see total eight resources are available in lightning component bundle which is components, CSS style controller design, helper documentation, renderer and SVG. So component basically, so here you can see the uses are also available. The only required resources in a bundle contains markup for the component or app. Each bundle contains only one component or app resource. So if you create any lightning or a component, so basically this component file you need to implement so that you can see some output on the UI. CSS style file will be for styles for the document, so here you can write the CSS related code. Then controller is for client side controller methods to handle events in the component. Design is required for components used in the lightning app builder or lightning pages. Helper JavaScript functions that can be followed by from any JavaScript code in the component bundle. So basically if you implement lots of code in controller, so we can just shift that code to helper so that controller will be easy to maintain and in helper whatever code we implement so that code is basically available to reuse. So that is why first we implement controller and then helper. Documentation, so a description, sample code and one or multiple references to example components. Renderer, client side renderer to override default rendering for a component and SVG for custom icon resource for components used in the lightning app builder. And if you create any component, so let's suppose you created it with sample name, so it's all files will be created automatically. You just need to provide the name in the beginning. Other files are created automatically following with the particular naming convention, which interfaces are used in lightning components. So we have these interfaces. So if you use force colon app hostable, so it is available for lightning tabs. If you use flaxi paste colon available for all paste types, so component will be available for all types of lightning pages. Flaxi paste colon available for record home, so it will be available for lightning record page. Force colon has record ID if you use it, so your lightning record page can pass the ID of the record to your lightning component and you can store it further into record ID attribute. Force community colon available for all paste types. If you use this interface, so your component will be available for experience builder site page. And force colon lightning protection is for lightning protection. So you can launch your component through protection. So these interfaces you can have like while you create any lightning component. So at the time of creation, you have some checkboxes if you check those checkboxes. So these interfaces will be included automatically. If you don't check those checkboxes and later you recognize like you need to use any interface. So you just need to type this lightning design system. So the Salesforce lightning design system includes the resources to create user interfaces consistent with the Salesforce lightning principles, design language and past practices. Rather than focusing on pixels, developers can focus on application logic while designers can focus on user experience, interactions and flows. So it is very popular. Like you can use whatever resources are available with lightning design system so that you don't need to build them from the scratch and it matches with the lightning principles as well. What are the benefits of helper? So in lightning or a component, we have a file known as helper. So it can reuse functions defined in helper. So if you use helper and function is defined in your component, like in helper or controller, you can use that function. Use helper for defining data processing task and queuing server side actions. Helper functions are local to a component. Move the code from controller to helper whenever possible so that your controller will be manageable and too much code you can shift to helper. Helper functions can be called from any JavaScript code in a components bundle, such as client side controller or Xanderer. Even helper functions can be called within helper itself by another function. Helper functions are similar to client side controller functions in shape. What is the difference between controller and helper? So use controllers to listen to user events and other events like component and application events, but delegate business logic to helper. Do similar delegation in all renderer functions like renderer, sorry, render, renderer and so on. Whenever you need to call one controller function from another controller function, move that code to helper because we cannot call the function which is defined in controller in controller itself. So you need to shift that code in helper and then you can call it. Can we include a component in another? So answer will be yes, we can build parent child hierarchy while building components. What is message passing between components? So we have two ways to pass messages. One is parent component to child and another is child component to parent. So if you want to pass message from parent component to child, so you can use attributes and or methods for that purpose. And if you want to pass message from child component to parent component, so we have component event and or a dot action. And if you want to learn these in detail, so particular videos are available on study salesforce.com. So you can watch them from there. How to perform conditional rendering in aura component. So you just need to use aura column if, so it is markup and then is true, is attribute and here we are using V dot flag. So flag we need to declare in the component. If it is true, then this true block will be evaluated. Then we have aura column set. It is for false like else part. So if flag is false, then automatically this else block will be executed. How to implement iteration. So if you have a collection or list, so you can iterate it using aura column iteration. So items is the attribute and then we need to use the name of your list. One by one items will be available in this variable. So variable name can be anything. So right now we are using item as a variable name. So one by one the values will be available in this item variable from this list. And then inside this or iteration, you can write the block of what is attribute. So attributes are similar to variables created in components view. We can get and set values into attribute in javascript controller. So for example, if you want to create any attributes, you need to write aura column attribute name equals to first name and type equals to string. How to write expression in component. So if you created any attribute like attribute name equals to first name type equals to string and default value is Sanjay. So if you want to display or render this attribute on the UI, so this way you need to write curly basis and then exclamation then V dot first name. So this way anywhere in your markup or view file, you can use your attributes with the help of expression. What is the use of init handler? So through init handler, we can execute the code on load of the component. So if you want to run specific code whenever your component is loaded on the browser, so that code you can initiate with the help of init handler. How to call controller function in component. So in previous question, we talked about init handler. So this is the way we can write init handler. So you need to name it as init value equals to this. So it means its method is defined in this in the same component and action equals to C dot my action. So this is the function name and this function we need to define in the controller. So below is the code. So this way you define function in the controller. So whenever you load your component, so this my action function will be executed automatically. If you have any other resource like you place any button and on click off button, you want to call any function that is defined in the controller. So same way you can do that. But the markups will be different and the way of writing and their syntax will be different. But defining the precise procedure of the function and calling procedure will be same. What is the use of at the rate or I enabled annotation? So or I enabled annotation enables lightning component to access apex methods and properties. So whenever you use any resources, those are available in your apex class, then you just need to put at the rate or I enabled annotation in that apex class. How can we call a picks method in component? So we can call apex class method through JavaScript controller. Also remember to use the name of apex class in the components view file. Can we include a lightning component in a VF page? Yes, we can. Can we include a VF page in lightning component? Yes, we can do. And how you can do so you can find detail video on study salesforce.com. Can we include external JS or CSS libraries in component? So answer will be yes. We can use multiple libraries in our lightning component like jQuery bootstrap, custom CSS and custom JavaScript libraries using static resources. How to pass data from parent to child component? So there are two types of expressions. One is unbounded and one is bounded. So here this we can consider as a parent component where one attribute is declared like parent attribute. And then we are calling child component like c colon child and we are passing this parent attribute to the attribute which is declared in child component named as child attribute. Now here you will see the difference like in unbounded expression we are using hash and in bounded expression we are using exclamation. Rest of the code is same. So what is the difference if you use hash so it will become unbounded expression. It means one time parent attribute's value will pass to child attribute. Now later on anytime if you change the value of parent attribute so it won't reflect in child attribute and if you change the value of child attribute so it won't reflect in parent attribute. But in case of bounded expression if you use this exclamation sign so first time parent attribute value will go to child attribute in the child component then whether you update parent attribute or you update child attribute they will update other attribute automatically. So if you are updating parent attribute so child will be updated automatically if you update child attribute so parent attribute will be updated automatically. So that is why it is known as bounded expression and above one is known as unbounded expression where we can place lightning components so there are various places. So you can place it on lightning experience, mobile app, lightning tab, lightning page, lightning decod page, lightning quick action, experience builder site page, visual force page and flow screens. Difference between Aura method and Aura.action so Aura method basically is defined in child component. Aura methods attribute receives data from the parent component whereas Aura.action method is defined in parent component and parent components method receives data from the child component. What is event? So event-driven programming is used in many languages and frameworks such as javascript and javaswing enlightening a component registers that it may fire an event in its mock up. Events are fired from javascript controller actions that are typically triggered by a user interacting with the user interface. So basically suppose you have a button if you click on that button so basically on click of that button an event is fired or event is generated that you can handle with the help of code. So this is basically known as event handling or you can say events. Then we have these types of events so browser event, system event and custom event. So browser events are like on change, on click, on blur. So for these you need to use your markups where you can set these. Then we have system event so in it render location change so it behaves on the basis on the browser. Then custom events so they are two component and application event. So example of system event is like Aura handler name is init. So init is a system event so whenever your component loads on the browser so it fires automatically that you can handle in your component. So here do action function is linked with this action attribute and in your javascript controller you need to define this function. Then browser event so this is the example of browser event. So for example if you have used lightning select then you can provide name and label and this is the event like on change. So if you change the value of that lightning select lightning select is basically a pick list. So if you change the value of that pick list so this do something function will be called automatically that you can define in the javascript controller. So these are known as browser events. So if you do some activity on particular element then only it fires. What is component event? So a component event is fired from an instance of a component. A component event can be handled by the component that fire the event or by a component in the containment hierarchy that receives the event. So there are four steps. So you need to create custom component event. So basically component events are custom. These are not standard. So you need to create custom component event then you need to register component event then you need to fire it and then you need to handle it in another component. So important about component event so here child component will pass parameters to event components attribute. Then parent component will fetch those attributes from event components attribute. Component event works in a parent child hierarchy only. So if your components are in parent child hierarchy then only you can use component event. So basically you will be having three things. One is child component, one is parent component and one is your event component file. And if you want to learn like how this basically works so you can find a detailed video on study salesforce.com under lightning order component section. So you can learn it from there. What is application event? So an application event is fired from an instance of a component. All components that provide a handler for the event are notified. It goes to application first and then application broadcast it to each component in the application and can handle that event in any component. So basically in case of custom sorry in case of component event it is like available in parent child hierarchy. So if child component is firing any event so it goes to parent and then it's parent. So this way it works in parent child hierarchy only. But in case of application event if you fire any event so it goes to the application route and then application broadcast it so that any component who wants to handle that event they can do irrespective of the component hierarchy. So the steps are first you need to create custom application event then you need to register it then you need to fire it and then you need to handle it. What is event propagation? So the framework supports capture and bubble phases for the propagation of component and application events. These phases provide an opportunity for interested component to interact with an event and potentially control the behavior for subsequent handlers. The component that fires an event is known as the source of the component. The framework allows you to handle the event in different phases. These phases give you flexibility for how to best process the event for your application. So here we saw two phases capture and bubble. So what is bubble phase? So the component that fired the event can handle it. The event then bubbles up from the source component to the application route. The event can be handled by a component in the containment hierarchy that receives the bubbled event. So it means like if child component fired an event so it will go to its parent then that parent parent. So this way it will bubbled up. Then event handlers are invoked in order from the source component that fired the event up to the application route. So if child component fired an event and parent is handling that event so it means child is bubbling up that to parent so parent will be handling that. So it is basically known as bubble phase. Then capture phase so the event is captured and tickles down from the application route to the source component. So once your event is fired so it will go to the application's route and then it will go down. So it is basically known as capture phase. So the event can be handled by a component in the containment hierarchy that receives the captured event. Event handlers are invoked in order from the application route down to the source component that fired the event. So in case of bubble phase it goes from bottom to up. In case of capture it goes from top to bottom. What is lightning data service? So lightning data service helps to load, create, add it or delete a record and component without requiring apex code. So LDS handles sharing rule and FLS. So we have these components that we can use in Aura. So force call and record data, force call and record edit, force call and record view. So basically force call and record data can do record creation, record edit. It can edit the record and view the record. Whereas force call and record edit can create and edit the record and force call and record view can view the record. Then lightning record form can do view, edit, create. Lightning record edit form can do create and edit and lightning record view form can view the record and all these you can use without writing a single line of epics. How to get current record ID in Lightning Component? So you need to implement force Poland has a record ID interface, then create an attribute named as record ID, which will fast the current record ID automatically if your component is placed on the record page. How can we deploy lightning components? So lightning components can be deployed like any other component using chainset and migration tool, gear set, Copado or other migration tools. Difference between V dot and C dot. So these are known as value providers for a component. So V stands for view helps to access component attributes value in markup and C stands for controller helps to link with event handlers and actions for the component. So this is all about lightning or a component interview question answers. So I hope these question answers will help you to prepare for interview. If you're a fresher or any intermediate developer, so in both the cases, it will help you out. And if you want to watch detailed videos, so you can find those videos on studysalesforce.com. Thank you.