 Hello everyone. In this module, you will learn how to create dynamic component in lightning or a component. So normally what we do, we create all the elements with the help of tags in the view of the component. But now with the help of JavaScript, we will be creating those components or maybe you can say elements. So let's say in this demonstration, I will be creating a button. So I am calling button as a component, right? So we are creating lightning component and inside that lightning component, that button is also known as a small component. So I will be creating that button through JavaScript code, not through particular lightning or a tag. So creating new lightning component, naming it as dynamic component, clicking on submit. So now this is the view file of the component. So here basically if we write any tag so that component like button, text field, whatever we want to create that will be available on the UI. So now you will get to know how we can create those things dynamically. So here I am creating one attribute, naming it as masses and type string. Then I am creating one handler, naming it as init value equals to this action equals to c.do init. So this is handler, init handler, it executes automatically whenever component loaded or renders. So it automatically calls the method which is mentioned here. So I am using a name as doing it. So in the JavaScript controller, I need to define doing it so that particular operation can be performed. Now here I am writing dynamically created button. Then br, hr for separation. Now here I am going to use v.body. So this is important. So this is basically default attribute that is available internally. So body is the attribute that you don't need to create and whatever you assign in the body, so that will be rendered at this place on the UI. Right. And after this, again, I'm copying and pasting it. And then button click result equals to v.message. Right. So whatever value will be available in this message that will be rendered on the UI. So this is a UI file where you can see I have not created or used any tab to create button, but through JavaScript code, we will be creating that button. So now I am saving this code and jumping into controller. So name of function should be doing it. Now here I need to create that component dynamically. So I need to use dollar a dot create component. Now here inside double quotes, you can write lightning button. So this is the tag of that component like button if you want to create button so you need to use lightning button. And then after comma, you need to provide its properties. So our ID, findable or ID, then label click me. So generally, these attributes we provide in the UI here. Whenever you use any time, but here we are creating this dynamically. So we are setting these values in the JavaScript controller. Now one more attribute is on click. So on click will be component dot get reference. C dot handle click. So whenever you will be clicking on that button, so this method will be executed. So we need to define this method as well. Now after this comma and then function new button status error message, then if status triple equals to success. So here I am creating one variable as body and component dot get V dot body. So if you remember, we have this body attribute here. So I'm getting it. And here body dot push new button. So the button which we are going to create its information will be available in this new button from this component dot getty. Sorry, from this component dot get all the information related to this body attribute will be available in this body variable that is in JavaScript. And through body dot push, we are pushing this new button. So whatever information or properties we set for this button, those will be pushed into this body variable. And it is having information or maybe you can say reference of this body. Now, what we can do component dot set V dot body and body. Right. So this way, you can set information of button into this body and when your component will get rendered. So in place of this V dot body that button will be rendered automatically. Right. So now, if this condition is false, so you can apply one more if here you can write status triple equals to incomplete. So here we can write console dot log. No response from server or client is offline kind of message. And one more status is there. That is error. So there is any error. So you can again use console dot log. So I will be will be available in this error message so that we are using here status of this variable we are using here and new button be used here. Right. And this is complete this function is complete. This bracket is complete. So here I need to put semicolon. So this is for this. And this is also closed. Now I am putting comma and here I need to define one more function that is handle clip because here we are using this. So I am copying it. So whenever you will be clicking on the button so handle click function will be executed. So you need to define that. So here I am writing component dot set V dot masses button click. There's some error field to save. So that error is basically coming because of this semicolon right so in this line number eight. So here it is showing unexpected tokens so we need to remove the semicolon. I mistakenly mentioned that so if you remove that it will be saved successfully. Now if you want to execute this so you need to use this component somewhere in the application. So I'm using dynamic component and saving this and clicking on preview and later on if you want to place this component on the record page or any lighting page so you can do that as well. That I already demoed in my previous modules. So here you can see this button is available its label is click me right if I click on this button so here you can see this message and displayed. So everything is working fine. So buttons created through JavaScript controller and also the method which will run when we click on the button is also available in JavaScript controller. So basis on this as per the requirement dynamically you can create any component and you can set that component in the body attribute of this or a component. This is all about how you can create dynamic components and or thank you.