Why Aura Component Framework

Aura Component Framework helps you develop the front end of your Salesforce applications, so just now we have seen an example of a word shuffle game, where a lot of front end work is required. You need to develop those tiles and you need to hide some words behind those tiles. So, all this was possible because of Aura component framework. And in this section, we'll discuss everything about aura component framework, so that you get enough knowledge to work with aura components and develop the UI your Salesforce applications.

Now let's start with what aura component framework is, it's a component based framework developed by Salesforce back in 2014, and it's still evolving, and this framework allows you to develop UI components that you can deploy and use in your Salesforce Org and outside your Salesforce Org as well. So, if you have heard about react, then aura component framework is somewhat similar to react framework. It also allows you to develop your components that you can use within another components or you can directly use them somewhere on your UI. Before aura component framework, visual force pages were used to develop your Salesforce UI or the UI of Salesforce applications.

The basic idea behind developing such a framework was to develop single page applications. Everything that you want to see in your application will be visible on the same page. You will never be redirected to other pages. Having the single page applications improve your work productivity, and also, they are faster than multipage applications where there are multiple navigations in between. Aura components are supported in both Salesforce desktop version or in Salesforce mobiles as well. Now let's talk about why do we need aura component framework to develop our applications?

Why there was a need to develop such a framework? And this example I give in all my sessions. So, here in this video, you will see how a 57 storey building is developed within 19 days and it was fully functional on 20th day. Now, this was completely possible because these engineers, they had these building components and all they had to do was to install these components on top of each other. If they would have used the traditional approach to develop a building, then it would not have been possible, and that's the same thing with aura components as well. It allows you to develop your applications faster. So, once you develop a component, you can use it anywhere. So, let's say if multiple applications require similar feature, then you develop this component only once and you can use it anywhere in your Salesforce Org in as many applications as you want.

The maintenance of your code becomes easier because if change is required, you need to make it in that single component and that change will reflect everywhere where this component is used. It also comes with great flexibility. This means, you can use your components anywhere in your Salesforce Org, you can use them inside your lighting app builder pages. You can use them inside a lighting tab. You can use a component in another component as well, or you can use them in standalone lightning applications.

Not only that, you can even use your components outside your Salesforce environment as well. That means you can host a lightning component on your own server. And what makes it more exciting? The aura component framework comes with out of the box components. And right now, I guess there are 90 plus components that come with aura component framework. Just to give an example, let's say you need to show a table on the UI.

You can use the out-of-the-box lightning data table component to build your data table, and that's it. It will be like one single line of code and you will have your table ready. So, I guess these are enough reasons to start with aura component framework, and I'm sure you will love developing your aura components. In the next section, we will develop our very first aura component.

How to Retrieve DeveloperNames for Lightning Web Component Bundle Like AuraDefinitionBundleInfo

Once you create an aura component, on the right hand side, you will notice that there are eight files that make one single aura component. We have already seen the component file, which we also call the mark up file, where your UI markup will go like your html components or your out of the box aura components, they will all go in this file. Now, there is a controller file, which is a java script file that handles all the events generated from this mark up file. For example, let's say you have a button and on click of that button, you want something to happen. So, this will be your file where you will handle all those events. And only your controller file can handle the events generated from the mark up file, you cannot handle them in any other files that are present in an aura component.

Now, the third file is the helper file, which is again a java script file similar to controller, but a helper file is responsible for the reusable code. For example, let's say you have a function to sort the array, right? Now, this function can be reused by multiple other functions. So, you will write this sort array function inside the helper and then you can call it from your controller file as well and from your helper file as well. The other example is to show a notification on the UI and there can be multiple situations where you want to show this notification. Right? So, this particular piece of code will be reusable and it's better to write that inside the helper file. Now, the 4th file is the style file and this is a css file, css stands for the Cascading Style Sheet, which is used to stylize your markup. For example, let's say you have a button in your markup file, but now you want to change the look and feel of that button. So, you will use this css file to stylize your markup. The 5th file is the documentation file and this file is used to generate the documentation for your component.

Now the 6th file is the renderer file. Again, this is a JavaScript file similar to the controller file and the helper file, and this is used to handle the rendering mechanism of your component, like what piece of code should execute when your component is rendered or what piece of code should execute when your component re-renders. This was a very helpful file when aura component was new, that means back in 2014 or 2015, but later we have got some events and you can handle this rendering mechanism within the controller file itself. So, nowadays we don't use this renderer file as much as we used to do a few years back.

The 7th file is the design file and this file is very helpful when you want to give some flexibility to your Salesforce admins to configure your lightning component, like here I have this flow standard component and once you add it inside an app builder page, on the right hand side, you get some options like what do you want to name your flow, and the layout option. Right? So, you can give similar flexibility inside your custom component as well using this design file.

The last file is the SVG file, and this is responsible to have custom icons in your component, so you can have your own svg to create some icons and then you can use them inside your markup as well. So, this was all about all these 8 files that make one single aura component. So, all of these files talk to each other and they generate a single output. The most common used files are the component file, the controller file, the helper file and the style file.

Adding a Library Component to Salesforce Lightning Pages for Easy Folder Navigation

In this section, I'm going to introduce you to lightning component library, which is the best place to know about out of the box lightning components that you can use in your own custom components and also to find some documentation about the framework itself. So for that, let's go to Google and here search for lightning component library, click on the first link that you see from developer.Salesforce.com, and you will be landing on this page. Now, this page has some out of the box components listed here. For example, if you want to build an accordion, then you can use an out of the box component called lightning accordion.

Then there's accordion section as well. There is a component to show an Avatar as well. There is component for badges, there is component for buttons, button group and all sorts of components are listed here. So, now what you need to do, you just need to click on a component right here and you will be redirected to that particular component's documentation, like I have clicked on the card component and here I can see some nice examples of all the available options in lightning colon card component. Like I can see a basic card with a footer and an action button. There are other examples as well, like there's a narrow card and there's a custom card and so on.

Now, if you want to see the complete documentation about this component, you can click on this documentation tab, and here you can read why you should you use lightning cards and how it is useful, along with some examples and some customization that you can do with lightning card component. Then in the specification tab, you will find all the attributes that it supports. Either you can go to the home tab and click on a component here, or you can expand this aura section here and you can search for a particular component. I am interested in this card component because I want to use it inside my hello world component. So, what I need to do, I will simply copy this line of code, and I'll go back to my developer console, and instead of hello world, I'm going to paste my lightning colon card component. Now, if I want to use a footer, I can have an attribute called footer and define my footer. So, here I'll simply say hello world footer.

If you want to give the title, we can give it here. Let me change it to hello world. Then this is about the actions. So, here an action means this particular section here. So, here under this action's attribute, we have defined a lightning button. That's what we are seeing here. But you can change it to anything. Like if you do not want to see a button here, you can completely remove this action or you can actually use any other component here. And then we see a card body, which we see after this header or the title. So for now, let's save our code as is. Let's go back to our homepage and here let's reload our page. If you don't notice any change in your component here, then you can right click on this page and open the dev tools by clicking on this inspect menu here. And then let's go to application and here let's go to clear storage, make sure that you uncheck cookies section here and simply click on clear site data. And now let's reload our page. And now we see that our new component is being displayed here, where the title says, Hello World, and we see our hello world footer as well, another way to clear the cache of your lightning components or refresh your components is to switch on the debug mode. For that, you need to go to the set up, and here, search for debug, click on this debate mode under lightning components, select your user and click on Enable. So once you do it, if you refresh this page, you will notice two more buttons here. One would be in red color. Another will be in the green color. And this green color button will help you clear the cache. So once you do it, then you can refresh your page and you will see your latest code changes on the UI.

Now, I'm going to go back to my developer console, then I'm going to remove this actions from here and I'm going to change my card body, and I will say this is my first aura component, and let's save our component and let's go back to our homepage, click on this green button here, clear our storage and refresh our page. So, now we see that our action button has been removed and we see our new card body, so now I'm going to go back to my component library and I'm going to copy a button from here. So, if you click on this button under this aura section, you would see that out of the box lightning supports different type of button branding. For example, you can have a base button which does not have a border. Then there's a neutral branding, then there is brand branding, which comes in blue color. We have destructive branding as well, which comes in red color.

And there's a success branding as well, which comes in green color. So, now I'm going to copy any of these button, maybe like destructive button and I'll go back to my developer console and now I'm going to add a button right here in my card body. So, I'll simply enter a line and paste the code that I have copied from the component library. For now, I'll remove this onclick handler, as we do not have any handler or we do not have any JavaScript code yet, but we can leave the rest of the code as is and let's save it. Now, if you go back to our homepage, clear the cache and reload the page. You would see that now we have a button as well in our card body, so it's very simple to use. You can copy whatever you want from this component library.

So, use these out of the box components to create your own custom components, and I believe at the moment there are 90 plus out of the box components that come with aura framework. Some of them are very advanced, like there's a data table component that we are going to use in our game as well, where we will be displaying the results of our game. So, if you want to build a table like this, you simply need to use this line of code. So, that's all in this video. From the next section onwards, we are going to start building our word shuffle game.

Fixing Unescaped Attribute Value XSS Errors in Aura Components Detected by SonarQube

Aura components can have attributes, and these attributes make your component more reusable, and they are mostly used to store the client side data and by client side, I mean the browser here. We can say that an aura attribute is somewhat similar to the variable in an Apex class. You can store some values in these variables and you can access them wherever you want and you can change the value of these variables, and based on that, you can run your own computations.

The attributes are very helpful because when we talk about the front end, what we mean is the user interaction, and when the user interacts with your website or with your web application, he needs to supply some data and he needs to get some data back from your UI as well. So in those cases, your attributes will be the best place to store this user data or supply it back to the user. Now, similar to apex class variables, aura attributes also have some syntax. So, this is a syntax that you need to use in order to create an attribute inside your aura component.

First of all, you need to use the component called aura:attribute, and then it has some attributes itself. For example, you need to give your attribute a name using the name attribute here, I know I'm saying attribute a lot, but this is what it is. To create an attribute, you need to use attributes. So, in order to create an aura attribute, you need to define the name of the attribute, the type of the attribute which is very similar to the data type of your variable. For example, if you want to store the string or if you want to store a number or maybe a list, set or map, then you will define it inside the type attribute. Then the access, which is again very similar to the variables, here the access can be private, public or global. By default, this access is public, but if you want, you can change it to private or global.

If your attribute has the public access, then anyone or any component inside your Salesforce Org can access this attribute. If it is private, that only the component in which this attribute is defined will have access to this attribute. And if it is global, then this can be accessed outside your own Salesforce Org as well. This means, if you have some managed packages installed in your Salesforce Org, they can also access this attribute. Just remember that default access is public.

Now, you can also define a default value using the default attribute, and there's one more attribute called required which determines if your attribute is required or not. If you mark it true, then you will not be able to save your component or you will not be able to access your component without supplying the value in this attitude. Now, out of these five different properties of an attribute, the name and the type properties are the mandatory ones, the access, default and required are the optional ones.

So, if you want to create an attribute, at least you need to give it a name and you need to give it a type. Now, let's take a look at all the different types of data that we can store in an attribute. You can have a Boolean attribute, which means the type equals to Boolean. You can have a Date, Datetime, Decimal, Double, Integer, Long or String attribute as well. So, this means you can store all these types of values. Apart from this, you can have an attribute to store a JavaScript function as well, and the type of this attribute will be function. You can also store your JSON objects or any type of object in attributes using the object datatype.

You can also use your standard or custom objects as type as well. In this case, you will simply pass your standard or custom objects name as the attribute type. Not only that, you can also store the list, map or set in an aura attribute. So, this is very similar to the variables in your Apex class because we have seen these things before as well. We have seen these things when we were talking about the variables in Apex class.

So, just relate your attributes to the Apex class variables and this will make it easier to understand. Now we are going to go back to our VS code and we are going to make some changes to our board panel component. So, here we need to create a combo box with these three values called easy, medium and hard, and we need to create two buttons as well. So, I'm going to copy this code from my component library. Now, here I need a button with blue background, so I think I need this third button. So, I'm going to copy it and then I'm going to go back to my VS code and I'm going to paste it inside my lightning card. So, make sure that you paste it inside the lighting card, not outside it.

For now, I'm going to remove this onclick handler and let's change the label to, what is the label of our button, yeah, start new game. Let's change our title as well. And we are going to use the variant as brand only, so it's only about the variant which changes the look and feel of your button. So, if you change the variant to success, then you will see the green background. If you change it to destructive, then you will see the red background.

Now along with this button, we need one more button, which is called reshuffle. For now, you cannot see it, but you will be able to see it when we start playing the game like this. So, we need one more button and this time, we need neutral variant. So, I'm going to copy the second button from here, and I am going to paste it again, just beside my previous button. Now if you notice, we do not have a variant attribute here, and that's because the default variant of a lightning button is neutral only. So, it doesn't matter if you define neutral here or not because the default value is neutral.

And if you're wondering how do I know it, you need to go to the specification tab here and let's check the variant attribute, which should be right here. So, here you will see that this value defaults to neutral. So, it doesn't matter if you copy this and paste it here and change it to neutral. So, it will be same. So, if you remove it, it will still be neutral. And along with these two buttons, we also need a combo box. Right? So, now I'm going to search combo box here and I am going to copy this code. Now, here let's paste it just beside our lightning button.

Let's remove the on change handler. And let's remove these options as well, here let's change the placeholder to select game mode. Let's give it a label as maybe, game mode and that should be it. maybe change the name as well. Now, this label will be displayed on top of the combo box. This value here is the selected value inside the combo box, and this placeholder is something that displays when there's no value selected inside this combo box. So, that's it. We already have our board panel component and all we need to do now is to deploy this component to our Salesforce Org. So, here we see our combo box and we also see two of our buttons. But the look and feel is not how we want it, because we want our buttons and the combo box in the same line and they should be centrally aligned instead of taking all the space here. So, we are going to work on that in our next video.

For now, we are want to focus on adding some value inside our combo box, because if I click on it, nothing shows up. Right, but it my other Salesforce Org, I can see some values here, even in the component library, I can see these values here. So, how these values are coming? These values are coming from this aura attribute, which is of type list. So, here we have a list of different values which we are passing inside this combo box. So, we are going to use the similar pattern. I'm going to copy this aura attribute and I am going to paste it here. So, first we need to give our aura attribute a name, so I am going to name it as modes.

We are going to leave the type as list only, and then here we are going to change some values. So, this is the default value of this attribute. So, if we do not change this value, then the framework will pick up the values from this default attribute. So first, we are going to change the label to easy. Let's change the value to easy as well. Then we are going to have medium and hard as well. So, do you think this should be enough? Do you think now we'll be able to see these values inside our combo box? Let's try it out. First, let's deploy this to our Salesforce Org, and we will see if we can see these values inside our combo box or not. So, even though we have an aura attribute, we still do not see our values. What could be the reason? The reason is, we are not passing these values to our combo box and to pass these values to our combo box, we need to use the options attribute inside the combo box, which is going to pick the options from the attribute we are going to define here.

So, let's add that, we are going to add that in the next line. And now, if you want to supply some value to this options attribute, first of all, you need to use the double quotes and now within these double quotes, you need to start your curly braces, that is the syntax that we need to follow, and after that, you need to use an exclamatory mark. Then we dot the name of the attribute. Now, you must be wondering, what is this V here? The V is called the value provider, which supplies the value of an attribute to this particular combo box. Now, our combo box has three values like easy, medium and hard. Let's save our code, and let's deploy our component once again.

Let's clear the cache and reload the page. So, here if you click on this combo box now, you will see that all of our values are listed here and we can change any of these values. So, this is how you can use an aura attribute and access it within the markup using the value provider. Just remember the syntax that first you need to have the double quotes, then the curly braces, then this exclamatory mark, then the value provider, which is V, then Dot and then your attribute name. We can play more with the aura attributes inside our hello world component as well, so here in our hello world component, we have too much of plain text. So, now we are going to simplify it and we are going to use our aura attributes, and instead of using this text here, we are going to access the values of the aura attributes. So, we are going to create it just after our aura component tag, because your attributes should be the direct child of the aura component tag.

So, it will be like aura attribute, then remember, name is compulsory, so you need to give it a name. So, let's name it as maybe, greeting, and then you also need to give the type. So, the type would be string. and let's give it a default value, which should be hello world. Now, if you want to access the value of this greeting attribute, we need to follow the similar syntax. You need to remove this hello world from here and use curly braces, then your exclamation mark, then the value provider, which is V, dot the attribute name, which is greeting, and then we can give the same label to our button as well. So, this means we can use an attribute multiple times.

So, I am going to copy it from here, I'm going to paste it here. Let's paste it inside the body as well, so we'll see hello world everywhere. Let's save this code and let's refresh our page. So, just focus on the hello world component on the right hand side and all these hello worlds are coming from our aura attribute. If you want to have more attributes, we can totally do that. For example, let's have a number aura attribute. The type should be Integer, or if you want to store Double or Long, you can do that as well. Let's give it a default as 11 and we can access it right here.

So it will be like, hello world, space, then I'm going to access the value of my number test attribute using my value provider. V.numberTest. Now, you must be wondering, why I'm not having the double quotes here? The reason is, if you want to access the attribute value inside these properties or attributes, then you need to use the double quotes. But if you are using them inside the plain markup, that means if they are not within the attributes, then you do not need to use the double quotes, but you still need to use your curly braces, the exclamation mark, the value provider, the DOT and the attribute name.

Let's have one more attribute, and this time, we are going to have a Boolean attribute, and did I mention, aura framework is a case sensitive framework. So, you need to take care of the letters that you are typing because this numberTest is not the same as the numbertest here, because the T is capital in the first one. In the second one, it's in small. So, you need to make sure that you are taking care of these cases. And most of the issues that you are going to have in your aura components will be related to these spelling mistakes that you'll be doing. So, make sure that you check it carefully.

Now, let's name this attribute as Boolean test. The type should be equals to Boolean and default value should be equals to, maybe, false, and we are going to access this value as well, using our value provider, and let's save this code. And here, I think I have got my very first issue which says, no component named markup aura attribute found, so here I have a mistake, right? Instead of using attribute, I have typed aura attritube, which is completely wrong.

So, let's correct it. Let's save our code one more time, go back to our home page and refresh it. So, here we see hello world, then our number, which is 11, then our Boolean variable, which is false. So, this is how you can declare the variables inside your aura component, and this is how you can access them inside your markup. So, that's all in this video. In the next section, we are going to learn about the layouts in aura components.

Troubleshooting Aura Component Bundles & Apex Classes Affecting Page Layouts in Salesforce

We have our component up and running, we can see our combo box and two of the buttons there, but these buttons and the combo box is not arranged properly. We want them horizontally, centrally aligned, and they should be in the same line. So for that, we need to learn about the layouts. The aura framework, like any other modern framework out there, supports 12 grid layout.

This means, the framework divides your horizontal screen into 12 different grids. So, it doesn't matter if you are viewing this web page in a desktop browser or in a mobile browser, the complete horizontal space will be divided into 12 grids. Now it's up to you, how do you want to fill these grids. If you want to have three different sections horizontally and maybe two of them are equal in size and one is a bit bigger than the other ones, then you can use something like this.

You can have first grid as size three or whatever you want. The second grid as size six and the third grid as size three. So, if you sum up these numbers, it will be equals to 12. So, that's the whole point. It's up to you. How do you want to divide these 12 grids? The only thing is, you cannot use decimals here. You cannot have one grid as one point five and the other grid as ten point five. It should be whole number. So, now we're going to go to the lightning design system where we'll see more examples of lightning layout before we actually implement this in our board panel component.

So, I'm going to go to Google and here I'm going to search for lightning design system. This is another resource that you should bookmark, as from here, you'll get the idea of Salesforce lightning design system, which is the base css framework behind Salesforce lightning. So, if you have heard about bootstrap four, which is also a css framework, so very similar to that, Salesforce has these slds classes, which they call lightning design system.

So, once you search lighting design system on Google, just go to the very first link, which is lightning design systems dot com, and here you will find the best practices to implement your UI elements, so here if you will go to utilities and click on grid, you will find complete information about the layout structure of slds. So, if you scroll down a bit more, we will see all the possible layouts that we can build with slds layout structure.

So, you can see there are countless possibilities of building your UIs using this 12 grid system. So, now I'm going to go to the component library and here, I'm going to search for layout, and you will see two different components from aura framework, the first one is layout, which is the base component and the second one is layout item. So, if you want to build these grids, then you need to use layout item, but they should be nested within the lightning layout.

So, here if you take a look at this example, the parent component is lightning layout, that means the lighting layout comes first. Let me zoom it a bit and then we will see a lighting layout item, which is nested within the lightning layout, and if you click on the lighting layout item component, then you will see more examples of how you can divide your screen into different layout items, like in this first example, we are not defining any size of these layout items.

So, this means the width of these layout items will be flexible based on the contents they are having. But if you want to have the size attribute, then you can have that as well. Like in this example, which is I guess fourth one, they are having three different columns with size as four. So, this is how we define these sizes here. And if there are more layout items, then they will come in the next line. The aura framework supports the mobile first approach.

So, this means they allow you to control the width of each and every grid based on the screen width as well, for example, on the desktop browser, let's say you want to have three columns, but if you are seeing the same screen in a mobile browser, then maybe you want to have only one column in each row. So, in that case, you can mention device specific size as well.

So, here let's open this example and here you can mention device specific size, for example, how much width should this layout item cover if this is being viewed in a mobile size device? So, here we are giving it six. If it is an iPad or any tab, then we are giving it four. And if it is a desktop browser, then we are giving it three. So in that case, if I change my view to maybe mobile one, I will go to my dev tools and here I'll click on mobile. So, now you will see that all of these columns are taking the complete space and they are all coming in new rows.

But if I change it to maybe an iPad, now we are seeing three columns in a row, so this is all possible because of the device specific sizes that we are giving. So, I hope you understand my point here, you need to use a lot of lightning layout and layout items to actually construct your Web page. Now we have a job to do. We have to fix our word shuffle component here. We need to bring all these three components in one single line, so our combo box and two buttons should be in the single line. For that, we need to make some changes to our code.

So, let's go back to our VS code. And here, the first thing that I'm going to do is to have a lightning layout. So, this is the lightning layout component, here I'm having an attribute called multiple rows equals to true. Now, what this attribute does is, if the layout item size is more than the allowed space, which is like more than 12, then the next items will come in the new row.

So, we can have this, but for this example, we do not need multiple rows. If you leave it as is, then also it won't be a problem. Now, I'm going to have a lightning layout item within this, and in this layout item, for now, I'm going to give a size as maybe six and there is some padding that I want to give around it. Now I'm going to copy my combo box from here and I am going to paste it within this layout item, and I've made a mistake as well, this lightning card should be on the top, and I think I made a mistake as well. This lightning card should be the base component, so this should be on the top and this layout should be within the lightning card.

So, if I will show this to you now, first we have lightning card, within this lightning card, we have a lightning layout and this lightning layout is having a layout item with size six, and then I'm going to have one more layout item. Now, if you're wondering how am I getting this code completion, then I have a file called my own user preference, which you can set from here.

So, it's called user snippets. I'm sorry. And here I have defined these code completion blocks. I'm going to upload this file on my github repo and you will see a link on this screen, from there you can download this file and you need to create your own snippet file in the VS code like this. Just go to user snippets, you can create a new global snippet file and you can paste the content of this file there. Or you can paste this file directly inside the root directory of you VS code, whichever suits you.

Once you do it, then you will also get this code completion feature. So, we are having another layout item, and within this, I'm going to paste my lightning button, so let's cut it from here and paste it within the lightning layout item. Let's have one more layout item, and this one will have my second lightning button. So, that should be it. And here we just need to change the size. So, maybe I'll give this one a size as three and the third one as size three as well.

So if you notice, the total size is 12, so six plus three plus three. So, that means we are occupying complete space. Now, if I deploy this component and refresh my page. You will see that they all are coming in the same line. However, they are still not vertically aligned in the same line. The reason is, this combo box is having a label. So first of all, we need to hide this label and how we can do that? Let's go to our component library and search for combo box again. Let's go to specification of this combo box, and we are going to check out the variants that we have.

So, here we have a variant called label hidden, which hides the label of the combo box. So, that's what we want to do with our combo box as well. I'm going to have one more attribute here, which is called Variant, and this should be equals to label hidden. Make sure that you copy paste it so that you don't make any spelling mistake. As I said, aura framework is case sensitive and is very particular about all the spelling mistakes that you can do. So, your component will not render the way you want it if you are making the spelling mistakes, and this will be very hard to debug as well.

So, if you do not want to waste your time debugging your component, make sure that you copy paste most of the things. Now I'm going to deploy my code again, and now I see that all my components are in the same line, but it's still not what we want. What we want is something like this, where they all are centrally aligned. So, how we can do that, first of all, we need to remove this size that we are defining here because I want to auto size my component or my layout item based on the content it is having. So, I'm going to remove this size, and this way the framework itself will make a call like what size should be given to this particular layout item.

So, I'm going to remove this size from everywhere. And then the second thing that we need to do is to centrally align all our components within the lightning layout. So for that, let's go back to our component library and search for layout one more time, and here if you will go to specification, which should be the best place to know about all the attributes a component supports, you will see that there's an attribute called horizontal aligned, which supports options like center. So, we are going to use this attribute and we are going to centrally align all our layout items.

So, it's very simple to use it, just give a space in your lightning layout component, use horizontal align attribute and the value should be center. Let's save it and deploy it one more time. And if you refresh our page now, we should be able to see what we want, so all our components are centrally aligned and they are vertically in the same line as well, and this is exactly what we wanted. I would suggest you guys to practice more in your hello world component, or you can create your own sample components and you can practice the lightning layouts there as well, try creating all the different types of unique layouts, and this is the only way to get the deep understanding of the aura framework or whatever the technology that you want to learn.

Handling iOS Push Notification Issue: AppsFlyer OneLink Redirection to Browser Instead of App

So far, we have only been focusing on the makeup of our component, that means we were only building the UI of our component, but now we need to focus on running our own logic on the browser. So, what I mean is, let's say if I click on this button, I want something to happen, right? So, this would be my custom logic that I want to write. As we discussed in the previous video of this section, we have few JavaScript files inside a component bundle.

So, we have a controller file and we have a helper file and we have a renderer file as well. So, we are going to use those JS file or JavaScript files to write our logic, and this is not complex at all. What we need to do? We simply need to have an event behind this button that will be fired as soon as you click on it, and we need to handle or we need to write the logic for that event Inside our js file. So, if you want to take a look at all the different types of events that an html element can fire, you can search for JavaScript events here on Google. Let's check out this first link from W3 schools, and here you will learn about all the types of events that can get fired from an html element, like some of them are onchange, onclick, which we are going to use in this video.

There are other mouse events as well, like mouseover, mouseout. So, this simply means like when you take your mouse over a component, then this event is fired. The onclick is fired when you click on a component. The onchange is fired when you change the value of a component and so on. So, there are so many different types of events that get fired from an html element. The best way to learn about it is to actually write the code. So, first I'm going to go back to my VS code and here I have my button, which is called start new game, and I'm going to define an onclick event here.

For that, we need to write onclick Here, which is the event name, then we need to use our equals to symbol, and we need to follow a particular syntax now. So, if you remember the syntax of accessing the attribute value, which is like having double quotes, if you are defining them within an attribute, then curly braces, then an exclamatory mark, then V and then DOT. And for the event handlers, this will be pretty similar. The only thing is, we simply need to change this V to C, so it will be like we need to have our curly braces, then exclamatory mark, then C dot the method name that we want to access.

Here C represents the controller file. So, let's say, on click of this button, I want to call my JavaScript method with the name start game, so I can simply use C dot start game. Now this JavaScript method we need to define in our controller file. So, let's open the controller file, which should be board panel controller, and here we need to have a method with this name, so I'm going to remove this my action and I'm going to use start game here. So, when you click on this button, this start game method will be called. And here, let's write a simple debug statement.

So, in order to write the debug statement inside Javascript, you need to use console dot log, and here we are going to write the start new game button is clicked, and that's it. Now let's deploy our component. And here, let's click on start new game, so nothing is happening, right? We do not see our debug log as well. You will see it, for that you need to open the dev tools. So, right click on this browser window and click on inspect. Here, go to console and you will see that there are some debug logs that are getting printed. I am going to clear it one more time and then let's click on this start new game.

So, it says, the start new game is clicked, so this is how you can call a JavaScript method from your markup file using the event handlers. So, what I want to do now, as soon as I click on this start game, I want to capture the value of this combo box. So, I want to know which of the game mode is selected here. And we are going to learn about that in our next video. For now, let's create one more onclick handler for the reshuffle button as well.

So, here inside our reshuffle button, let's have onclick handler, and here, let's name it as reshuffle board. Let's copy this method, save it, and now we need to create one more method in our controller file. So, we need to give a comma first and then the method name and then you can copy the rest of the thing like this. So, you need to follow the exact same syntax, and these functions are very similar to the function that we have seen in our Apex classes, and these three things that we are seeing here are the function variables, the aura framework supplies, these three variables by default, and you can use these variables to access some of your components properties, we are going to talk about them in detail in the later part of this course. But for now, just let them as is, and here in our reshuffle board method, I'm going to change the content to reshuffle board is called. And that's it, you can deploy your component one more time and you can see the changes.

Setting ID in Aura Attribute from Lightning Select for Contact Options

OK, so now we need to capture the value of this combo box on click of this button, because we want to know when we are starting a new game, in which mode should we start it? So, let's go back to our VS code and I will show you how you can access the value of this combo box inside the onclick handler of this start new game button.

So first of all, we need to make some changes to our markup file. We need to give our combo box a unique id, so that we can identify it from the rest of the markup and then we can access its value. So, let's give a unique id to it, and for that you need to use aura:id attribute and let's give it a unique id as, maybe, game mode.

So, this aura id is used to give a unique id to your component and you can use it with any of the elements in your markup. For example, if you want to give a unique id to your button as well, you can have an aura id attribute here as well, and you can call it, start new game button. And similarly, you can use it wherever you want inside this markup file, and then I need to go back to my JS file and here inside this start game method, I need to access the value of this aura id, which is game mode.

So for that, we need to use the find method which comes from this component variable. So, here this component variable represents the markup of your component, and if you need to access any of the elements from this markup, you always need to access it through this component variable, so you can call it the instance of your markup.

So, if you want to find this combo box, you need to use component dot find, and here in this find method, you need to pass the aura id, our aura id is game mode. So, we need to pass it. And now we've got this combo box component, so I can store it inside a variable. So, the variables in javaScripts are similar to the Apex. The only difference is, here you do not need to use the data type of the variable, like you do not need to declare string or integer or list, set or map. You simply need to use a keyword called var, or you can also use two more keywords which are like, let or const. Here in this course, we are not going to learn JavaScript in detail as this is out of scope of this course, but I'll give you some idea about the different keywords that you can use.

So, the first one is var, the second one is let, the third one is const and all these three keywords are used to define a variable inside a JavaScript. Nowadays, no one uses the var keyword, so, let's not talk about it because we are not going to use it anywhere in our course. So, I'm going to remove it. Now, let's talk about let and const. Here, let is a variable that you can change later on as well. So, if you declare a variable with let keyword, then you can change the variable value anytime in your code. But if you use const keyword, then it means you are creating the constant variable. So, this const keyword is very similar to the final keyword of your Apex classes.

So, that's the only difference between let and const. If you're confused between let and const, then go for let. So, most of the time we are going to use let in our course. So, here I'm going to declare a variable with let keyword and I am going to name it game mode combo box. Let me remove these two lines from here. So, what I've done here is, I have found this combo box uniquely using this aura id and this find method, and now this game mode combo box variable holds this lightning combo box in it. So first, let's add a comment here, access combo box. The next thing that we need to do is, access the value of this combo box.

So, it will be like, access the value of combo box, now here to access the value of this combo box, you need to, first of all, use the combo box variable, then you need to use a method called GET and then you need to use the attribute name. The attribute that we want to access is this value attribute of the combo box. So, you simply need to pass that attribute name. But remember, we are inside the aura framework, so you always need to use V as in the value provider whenever we are talking about the attributes. So, it will be like V dot value, and this is going to give us the selected value of the combo box, so you can store it inside another variable and let's call it selected value and then we can print the selected value inside our console log as well. So, it will be like, the start new game button is clicked, the game mode is, and let's add our selected value variable.

So, this is somewhat similar to how we used to work in Apex, the only thing is the syntax is a bit different. We can also show a browser alert as well using this alert method and we can pass the same text there. Let's deploy our code, and now you will see that whenever we click on the start new button, we will see the value of combo box being displayed as well. So, here if you click on this start new game, we see this alert box and it says, the start new game button is clicked, the game mode is in progress, from where are we getting this value? So, if you go to your markup, the value of this value attribute is in progress, and so far, we haven't changed the game mode.

So, if you change it to something else, then we will see a different value. So, this time it says, the game mode is medium, if we change it to hard, then we see hard here, and the same thing should be printed inside our console log as well. This is how you can access a component uniquely using the aura ID and find method. In the next video, we are going to talk about how we can access these attribute values inside our JS file and how we can set these attribute values inside our JS file.

Troubleshooting Access to apex:inputText attribute in JavaScript on Visualforce Pages

OK, so now we need to capture the value of this combo box on click of this button, because we want to know when we are starting a new game, in which mode should we start it? So, let's go back to our VS code and I will show you how you can access the value of this combo box inside the onclick handler of this start new game button. So first of all, we need to make some changes to our markup file. We need to give our combo box a unique id, so that we can identify it from the rest of the markup and then we can access its value. So, let's give a unique id to it, and for that you need to use aura:id attribute and let's give it a unique id as, maybe, game mode.

So, this aura id is used to give a unique id to your component and you can use it with any of the elements in your markup. For example, if you want to give a unique id to your button as well, you can have an aura id attribute here as well, and you can call it, start new game button. And similarly, you can use it wherever you want inside this markup file, and then I need to go back to my JS file and here inside this start game method, I need to access the value of this aura id, which is game mode. So for that, we need to use the find method which comes from this component variable.

So, here this component variable represents the markup of your component, and if you need to access any of the elements from this markup, you always need to access it through this component variable, so you can call it the instance of your markup. So, if you want to find this combo box, you need to use component dot find, and here in this find method, you need to pass the aura id, our aura id is game mode. So, we need to pass it. And now we've got this combo box component, so I can store it inside a variable.

So, the variables in javaScripts are similar to the Apex. The only difference is, here you do not need to use the data type of the variable, like you do not need to declare string or integer or list, set or map. You simply need to use a keyword called var, or you can also use two more keywords which are like, let or const. Here in this course, we are not going to learn JavaScript in detail as this is out of scope of this course, but I'll give you some idea about the different keywords that you can use. So, the first one is var, the second one is let, the third one is const and all these three keywords are used to define a variable inside a JavaScript.

Nowadays, no one uses the var keyword, so, let's not talk about it because we are not going to use it anywhere in our course. So, I'm going to remove it. Now, let's talk about let and const. Here, let is a variable that you can change later on as well. So, if you declare a variable with let keyword, then you can change the variable value anytime in your code. But if you use const keyword, then it means you are creating the constant variable. So, this const keyword is very similar to the final keyword of your Apex classes. So, that's the only difference between let and const. If you're confused between let and const, then go for let. So, most of the time we are going to use let in our course. So, here I'm going to declare a variable with let keyword and I am going to name it game mode combo box. Let me remove these two lines from here.

So, what I've done here is, I have found this combo box uniquely using this aura id and this find method, and now this game mode combo box variable holds this lightning combo box in it. So first, let's add a comment here, access combo box. The next thing that we need to do is, access the value of this combo box. So, it will be like, access the value of combo box, now here to access the value of this combo box, you need to, first of all, use the combo box variable, then you need to use a method called GET and then you need to use the attribute name. The attribute that we want to access is this value attribute of the combo box. So, you simply need to pass that attribute name. But remember, we are inside the aura framework, so you always need to use V as in the value provider whenever we are talking about the attributes.

So, it will be like V dot value, and this is going to give us the selected value of the combo box, so you can store it inside another variable and let's call it selected value and then we can print the selected value inside our console log as well. So, it will be like, the start new game button is clicked, the game mode is, and let's add our selected value variable. So, this is somewhat similar to how we used to work in Apex, the only thing is the syntax is a bit different. We can also show a browser alert as well using this alert method and we can pass the same text there. Let's deploy our code, and now you will see that whenever we click on the start new button, we will see the value of combo box being displayed as well.

So, here if you click on this start new game, we see this alert box and it says, the start new game button is clicked, the game mode is in progress, from where are we getting this value? So, if you go to your markup, the value of this value attribute is in progress, and so far, we haven't changed the game mode. So, if you change it to something else, then we will see a different value.

So, this time it says, the game mode is medium, if we change it to hard, then we see hard here, and the same thing should be printed inside our console log as well. This is how you can access a component uniquely using the aura ID and find method. In the next video, we are going to talk about how we can access these attribute values inside our JS file and how we can set these attribute values inside our JS file.

Bound and Unbound Expressions:Dynamic vs static expressions in programming with {!v.str} and {⌗v.str} notation

There are two ways to access an attribute's value inside your markup file. The first way is using a bound expression and another way is using an unbound expression, the bound expression we have already seen. And what it does, it creates two way data binding. So, this means, if your attribute value changes inside the html file, it will travel to your JS file automatically and you do not need to write any specific code for it. And if this value is changing inside the JS file, then it will travel back to your html file as well without writing any specific code or any specific handler.

Now, if you use unbound expression, then it's a bit different. It only creates one way data binding. So, this means, if you are making a change in an attribute's value inside the html file, then it will travel to your JS file automatically. But if you make the change in JS file, then it will not travel back to your html file.

So, it doesn't create two way data binding and your JS file changes will not reflect to your markup file. We have already seen how we can use a bound expression, for that. we need to use curly braces, then we need to use exclamatory symbol and then the value provider. But in case of unbound expression, instead of this exclamatory symbol, you need to use pound.

So, the only difference is this exclamatory and the pound symbol. Now I will show you the clear difference between these two expressions. So, let's go to our VS code and make some changes to our board panel component. Here, I'll have one more line, maybe like, I'll wrap it up inside a paragraph tech. So, if you are very new to the html thing, then I'll highly recommend you guys to learn some html and basic JavaScript in order to get the complete understanding of this section of this course. Now, I'm going to copy this line and paste it again, but this time, I'm using unbound expression.

And I think I haven't shown you how to write comments inside the markup file, to write the comment inside a markup file, we need to use our angle brackets, then exclamatory symbol, then double dash, and we need to close our comment using double dash and this angle bracket again. And you can write your comment in between. So, here I'll write Unbound Expression. Now let's add one more comment. This should be unbound one and the first one should be bound expression. So, let's save this code and now you will see the difference. First, I'm going to deploy this, then let's clear cache, open our dev tools and reload the page.

Now, this time we are seeing this line twice because we have pasted this twice inside our markup file. The first one should show the value using the bound expression, the second one should show using the unbound expression. So, let's change our game mode and click on start new game. So, as soon as you click on start new game, you will see that our bound expression is showing the latest value from this combo box. But our unbound expression doesn't show any value. The reason is, it only creates one way data binding. So, the changes that you're making inside your JavaScript file, they do not travel back to your markup file.

So, you need to use this unbound expression in only those situations where you already have this attribute data and you do not expect it to change. Generally, this is used inside the loops where you already have this attribute value. But again, if you are not sure which one you should use, then go for bound expression. That's all in this video. In the next video, we'll start writing our another component which we will call the board component.

Inconsistent LWC Component Lifecycle Hook Behavior: Methods Running Twice on Quick Action but Once on Different Object

First, we work on storing the list of hundred words in our board component and to implement that, first we need to know about component's lifecycle. So, what actually happens when an aura component renders on a webpage? There are certain events that are fired by the aura framework itself, just to give us an indication about a component's lifecycle. For example, when a component is initialized, which means all the attributes are initialized, then we get an Init event from aura framework, and when a component is rendered on the Web page, then we get a renderer event from aura framework.

So, we are going to use these events to actually implement our list of 100 words. So first, I'll show you these events and how to handle them, to handle any type of events in aura framework, you need to have an event handler and this is just a single line that you need to add in your component. So first, I'll start from the top and here I'm going to have an aura handler. Let me use handler here. So, now to handle an event, you need to have a component called aura:handler, and after that, you need to specify the name of the event that you are handling.

Then the value, if you want to pass any value to this event and then the action. Here in this action, you need to pass the JavaScript method that you need to call when this event is handled. So in this line, we are handling an Init event which is fired when the component is initialized. So, that's why the name of the event is Init, you cannot change it to anything else.

You always need to pass this value to this event, here this refers to this component itself, so you cannot change this as well. Now, here in the action, you need to give your controller method name. It doesn't always have to be doInit, you can name your controller method anything else as well. Just make sure that this method exists in your controller file. So, let's open our controller file for the board component, and here I'm going to have a method called doInit, and I'm going to add a simple console log here and I'm going to add initialization complete. Now we can handle one more event, which is called the render event.

So for that, we need to have another aura handler, so there's no limit on the aura handlers, you can handle as many events in your component as you want. So, now I'm going to handle the render event, which is, again, a standard event fired by the aura framework itself. Again, I'm going to pass this value, and here this means the component itself. So, it's an instance of the component and then the action. So here, let's give our action as doRender maybe, you can give it any name that you want. Just make sure that this method exists in your controller file.

Let's copy everything else, and save it. Now here I'll mention render completed. Now, I'm going to deploy this component and we should see these two logs in our console, so let's clear our cache and reload the page. Let's open our dev tools, go to console tab, and we see two of our console logs printed here.

Let me zoom in a bit so that you can also see it. First we see initialization completed, then we see render completed. So, this means the Init event is fired first and then the render event, because at the time of Init event, the webpage is not rendered or your component is not rendered. In most of the cases, you need to handle this init event to do your automations at the time of component initialization, and that's what we will do in our code as well. When the component is initialized, then I'm going to build a list of 100 words, I'm going to remove the render from here or maybe like, I will comment it, because I do not need to handle the render event, it was just to show you guys how you will handle the render event. Now, in the controller file, we are printing this log.

After that, I need to build a list of hundred words. For this, I'm going to use my helper file, because as I said in my previous video, you need to put most of your reusable code inside the helper file and building this list of hundred words, I think I can use that multiple times, so I won't do that inside my controller file. I'll build that method inside the helper file.

So, let's open our board helper dot js file and here let's name our function as get words. Now in this function, I'm going to build a Javascript array. First I'm going to accept a function parameter, which I'll call count. Now we are talking about Javascript here, so you do not need to define the data type here like we used to do in Apex. Here you can directly mention your parameter name and javascript takes care of this data time binding behind the scene. Now in this count, I'll first check if the count is more than hundred or not, because we are only going to build a list of hundred words. So, if count is greater than hundred, then I will simply return from here, I won't do anything else.

But if that is not the case, then let's build an array of words. So, we are going to use our let keyword to create a variable and then I'm going to call our variable as words array, and here you can define an array using your square brackets. So, it will be like maybe, word 1, then you can add a comma and then you can define another element in this array and so on. So, I'm going to copy these words from my another file and this will be a list of hundred words, and I'm going to paste them here. So, here our words array has hundred words, but now our job is to check this count and only return the requested amount of words. So, if the user is only requesting nine words, so that means if he is playing an easy mode, then we will only return nine words from it.

So, let's do that, and to slice this array, we are going to use the slice function, which comes with the array in Javascript. So, it will be like words array dot slice, and here first you need to give the starting index form where you want to slice your array and then the number of elements that you want to slice. So, here I'll pass the count, which I'll get in this method as a parameter. So, now I'm making sure that I'm only returning the requested amount of words.

Now, in order to return this array, we need to use the return keyword, which we used to do in our Apex methods as well. Now we can call this method from our controller file. And for that, we need to use this helper variable. So far, we've only been using the component variable. But now, since we want to call the helper file's method, we need to use this helper variable. So, it'll be like helper dot, the method name, which is get words, and here you can pass the count, for example, let's say we want to request 16 words or maybe something simpler, like six words only, then we can do that. And let's print that inside a console log. So, that's it. Now let's deploy our code. Let's refresh our page. Let's open the dev tools and click on console, so here we should see our words list, so here our words are expansion, grandfather, nappy, oranges, beds and quack. So, since we have requested only six words, we are getting six words here and these six words are the first six words.

So, it doesn't matter how many times you reload this page, we will always get the six words. But this is not what we want to get, right? We want to randomize these words. So, here I have a list of hundred words, but I want to randomize this list and then only I want to return the requested words array. For that, I'm going to build another helper method to randomize my array words. Let's name this method as randomize array, and this function is going to accept an array which we are going to randomize and I'm going to paste a simple algorithm to randomize all the elements in this array. You don't have to do a deep dive of this algorithm. You can find it anywhere on the Internet as well. But what it does is, it takes the array and then it randomizes it and then returns it back. So, here we are storing this array inside a constant variable. Then we are iterating through all the items and then we are randomizing them. It's just like we are swapping these elements within the array itself. The randomize array method is ready. Now, we need to call it to randomize our words array.

So, I'm going to add one more comment here, randomize words array. So, I'm going to override this words array. So, let's copy it and I'm going to call this randomize array method. Now to call this randomize array method, we need to use this keyword and then the method name, and we can pass the words array which it is requesting. The reason why I'm using this This keyword is, here this refers to this helper class. If you do not want to use This keyword here, then you need to accept the helper reference from your controller file, something like this. So here, our getWords function is accepting a helper variable as well, which we need to pass from here, and then we can use this helper variable to call other methods of this helper class.

So, then you can remove this keyword and use helper here. But I prefer this syntax where I can use the This keyword without accepting this helper variable from the controller file. So, we have got our array, we have randomized it and then we are simply returning it back to our board controller's doInit method. Let's deploy it one more time and hopefully now we should get this random list of words. So this time, we have got a different set of words, and if you reload your page again, we'll get another set of words, because now we are randomizing our array before we are returning the output to our method caller. So, now we have it sorted out. Our next job is to find this win word, and this word should be among the list of words that we get from our first method. So, we'll do that in our next video.

Restricting Application Events to Child Components in Lightning

We already know how we can communicate from a parent component to a child component using public attributes. Now, if you want to communicate from your child component to your parent component or if you want to send some data from your child component to your parent components, then in that case, you need to use component events. The component events are very similar to the browser events that we have been handling so far. For example, when we were handling the on click event on the aura buttons, that was a type of component event that we were handling.

So, now in order to give the same functionality to our own custom components, we need to use the component events, so that we can notify our parent components about some change or we can send some data. You can fire a component event using the instance of the component. That means we need to use our component variable in the JavaScript file. And once you fire it, it can be handled in the same component which is firing it, or it can be handled by any of its parent components. So, let's take a look at the markup of a component event.

So, you need to create an aura event and the type should be component, and in this component, you can have as many attributes as you want or you can leave it blank as well. These attributes will act as a payload or the data that you want to send from your child component to your parent component and to fire an event, first you need to have an aura:registerEvent component, where you need to define the component name and the type of the component and here in the type, you need to give the exact name of the component that you will create.

And remember, you need to use your namespace here, and by default, all the salesforce has the custom namespace or C, but if you are working in a managed package, then you need to give the namespace of your managed package. So, this register event tag will go inside your component file and once you register the event, then in order to fire it, you need to use your JS files and to fire it, first you need to get the event using the getEvent method and inside this event method, you need to give the name of your component.

Then you can set all the parameters or the attributes to your component that you want to send. The event will carry these attributes or this data along with it, and this data can be used in the parent component. The last thing would be to use the fire method to actually fire this event. Just keep in mind, the getEvent method takes the name of your event.

Now, the second phase would be to handle this event, which will be happening in the parent component, and we already know how to handle an event because we have already been handling the Init event or we have already seen the example of handling the render event as well. So, we'll use the similar pattern, we will use our aura : handler tag to handle our event. Here, under the name attribute, you need to give the name of your component event.

Then under the event attribute you need to give the fully qualified event name along with the namespace, and then under the action attribute, you need to give the name of your JavaScript method, which is going to execute when this event will be handled.

So, let's go back to our word shuffle game and let's check out where do we need to handle these events and from where do we need to fire it. So here, once I click on a tile, I need to send an event to my parent board component, like I have clicked on this tile and this is the word behind it, so that my parent component can check if the user has won or not and it can update the moves counter as well. So, we will be firing it from the block component and we will be handling it in our board component.

So, let's go back to our VS code, and first thing that we need to do here is to create an aura event. So, open your command palette and select, create aura event. Let's name our event as block click event and let's select our default directory.

Now, by default, VS code will create this place holder code, here we need to change the type from application to component because we are creating a component event, and within this component event, I'm going to create an attribute as well, which is going to carry the label value of that particular block, so that our board component will know which of the block was clicked.

So, let's create an attribute here, and I'm going to name it as value, and this should be of type string. So, we have created our event, now we need to fire it from our block component and in order to fire it, first we need to register the event here. So, I'm going to add a comment here, and let's use our aura register event tag.

Here under the name, you can name it anything that you want, but I like to follow the similar syntax that we see in our browser events, so I'm going to name this event as onClick and then under the type, first you need to give the namespace, which is C, and then the event name, which is block click event, make sure that you do not do any spelling mistake or you do not do any type of casing errors here. Make sure that your event name is exactly the same as you have created it.

The best way to do it is to copy the event name from your file here. OK, so now we have registered our event. The next thing would be to fire it and we want to fire it when a user will click on that particular block. So, we are already handling this event here in our block click handler method.

So, let's go to our block controller file, and here, when we are setting this open property to true, here I want to fire the event as well. Remember our Syntax to fire an event, first we need to get the event using the get event method, so I'm going to name it comp event and we need to use our component instance or variable and then we need to use get event method, and this method takes the event name, which is, I believe, onClick, and then we need to set the parameters value. So, this event has one parameter or one attribute, which is called value, so we are going to set its value using comp event DOT set params method.

Now, this will be a json object, so you need to use your curly braces, then your attribute name, which is value, then the colon and then the actual value that you want to supply here. So, our actual value would be this label. Right? So first, let's get this label value, store it in a variable, and then we need to pass this label to our parent component. So, that should be it. Now, the last thing would be to fire it using the fire method. So, we have fired our event, now we need to handle it in our parent component, which is this board component.

So in order to handle it, we need to have one more aura handler, and the name of the event should be same as this event name, which is onClick, and then we do not need to give value to this event as this is our own custom event, but we need to give it the event name using the event attribute. So, this should be C:blockClickEvent, and then under the action attribute, we need to give the JavaScript method name. So, let's name it as blockclickhandler, and now we need to create this method inside our controller file. So, let's open the controller file of the board component.

Let's create one more method here. We are going to accept all the parameters, which is component, event, and helper and here, now we need to use our event variable because this event variable is going to carry the payload or the data with it, and we are interested in this label value that we'll be sending from our block component. Let's store it inside a variable, we are going to name it as value and we need to use our event variable dot get param.

So, when we were setting these values, we were using setParams, now we need to use getParam, and then the parameter name or the attribute name, which is this value. So, we've got our value here. Now, the next thing would be to check if this value is equals to this win word, because if that is the case, then the user has won. So, let's do that, here let's have an if condition where I'm going to match this value triple equals to component dot get V dot win word, and if that is the case, then the user has won, if not, then user has not won yet.

Now, along with this check, we also need to maintain our click counter or the moves left. So, here our click count is set to zero by default and we are going to increase it every time we are handling this event, because this event will be fired when the blocks will be clicked. So, that means the user is utilizing his moves. So first, let's get its current value, the current click count. I'm going to store them inside a variable, and this is going to give me the actual click count at the moment, then I'm going to add one to it, so that I will get the latest click count.

So, this is going to give me the previous click count, but since now we're inside this handler method, we need to increase it by one, because just now the user has clicked on one more block tile. So, if user has not won, then we are going to have an else if condition, where we will check if a user has utilized all his moves. So, let's use click count triple equals(===) to three. If that is the case, then user lose here. So, let's store this result somewhere in an attribute inside our board component. So, let's create one more attribute and let's call it result, this should be of type string and we are going to store our results from our JavaScript file.

So, let's set the value here component.set("V.result") and the value should be "you win". Let's copy this and here, we will say you lose. Let's also print this in our console log, so that we can also see it. And in the end, let's update our click counter as well, so that we always get the updated count next time. So, let's use component.set V dot click count, and this should be equals to click count. So, I guess this should be it, let's deploy our code.

We have got an error and it says, no event named block click event found. OK, I know the reason, we need to deploy all our components all together. So, right click on this default folder and click on deploy source to Org. This time it deployed fine. Let's refresh our page. Let's open our dev tools as well so that we can see the output. Start a new game, maybe in easy mode, the word that we need to find is round. Let's keep on clicking on these tiles, and here, after utilizing three moves, I see you lose because we haven't found a word.

We can keep on playing because now we do not have any disable board kind of thing. So, we can still keep on clicking on this tiles. And now we have found our round word and it says, you win. So, at least it's working, but our moves left counter has gone to minus one, which is not allowed. So, we'll fix these things in our next video.

So, we will fix these things in our next video. For now, I'm going to tell you one more way to handle these events, so you do not need to create the aura handler if you are handling your component events. So, you can comment this line and there is an easy way to handle your events. You can directly use your event name, which is this one, inside your parent component, and this only works on the immediate parent component.

So here, this block component is the direct child of our board component, so we can directly handle it here using the event name, you can use your event name like onclick. So, I'm getting this from here and then here you can define your handler method name. So, I am going to copy that from here, and we can save it. So, now this looks a lot similar to how we used to handle our browser events, so I generally prefer this syntax rather than having an aura handler, but if you want to use the aura handler approach, that's also fine.

Aligning Cell Values to the Left in Lightning Web Component Datatable

So, now I want to develop a game result component that will show the results of the previous games of that particular user. So, let's create a new aura component and we are going to call it as game result. In this component, we are going to use the out-of-the-box lightning data table component. So, let's view the documentation of that. So, here in our component library, search for data table and under this aura section, click on this lightning data table, and this is something that we want to show our game results to the user. So, let's scroll down and this is the component that we want to use. So, let's try to understand what is going on in this component. This component has two attributes. One is to store the data, and another one to store the columns.

So, this column attribute defines these columns, like the way we are seeing here, these top columns and this data attribute defines these rows, like what kind of data should go inside these columns. Apart from that, this has an out of the box lightning data table component, where we are passing these columns and data values.

Now, it also has an Init handler. Now in this init method, they are building their columns because it is always guarantee that this init method will be called and we will always have our columns data here. And then within this init method itself, they are getting their data as well, and that's what we will also do.

So, let's copy everything from here. Let's paste it here. First, I'm going to remove this mock data library because we are not going to use it, here let's name our action to doinit, and then I'm going to have a new lightning card, and I am going to name it as your results, and within this lightning card, I'm going to have my lightning data table. So, let's copy this one from here.

Maybe like I have a div tag and I'm going to have an out of the box slds class to give a nice padding around my lightning data table. So, let's use var-p, p here defines the padding and I am going to use around medium and then we can copy our lightning data table. Let's remove everything else. Let's make sure that we are closing our aura component.

So, this is how our component looks like, we have data, we have columns and we are using the lightning data table as well. Now, let's define our doInit method. So, let's go to the controller file, and here in this doInit method, first we are going to construct the columns, so I'm going to have a new variable here, let's name it as columns and this will be an array of objects, and we are going to follow the similar syntax.

If you want to read more about this data table and how these columns are generated, then you can go inside the documentation where they clearly mention each and everything about these column's properties, like what does this label mean, what is the field name, what is the type and everything.

I'll also explain it to you while we'll be building our own columns. So for now, let's copy this data from here, at least one single column. So, this will be the first item of our columns array and here I want to give this column name as game number. So, the label here defines the text that will appear on the top. Then the field name defines the actual API name of the field.

So, here our number will come from the game result object's name field. So, I'll show you what I mean by that. So, our number is stored in this name field, so we need to copy the API name, and the type of this field is text, so we'll leave it as is.

Now, we are going to copy it three more times. In the second column, we are going to show the game mode, the field name should be, I think, mode__c, and the type should be text, then I'm going to store one more column here, let's name it as played on, and this should be created date, which is a standard field and the type should be date, and the last one should be the result, and this should be result__c, and the type should be text and now we can store these columns inside our column attribute. OK, so that's it.

Now next step would be to create an Apex method to retrieve our previous games result, and within that Apex method, we are going to use our SOQL query to fetch all the records from this word shuffle object. So, let's create a new Apex class. Let's name it as game result controller. Let's create a new aura enabled method here, and this method is going to return a list of word shuffle object records, and let's name our method as get results.

Here, first we are going to get the current user's id because we do not want to show all the previous games result to every user. We only want to show the result of that particular user who's viewing it.

So, here we can simply get the current user's user ID using the user info class, which is a standard class in each and every Salesforce Org, and it also has a method which is called Get User ID, and this method is going to give me the current user's user ID, and then we are going to build an SOQL query, so it will be like list of word shuffle.

Let's name it as results, and then we are going to write our SOQL query, so we are getting id, name, result, mode and created date from our word shuffle object where the created by id is equals to this user, so that we will only fetch that particular user's record and we are going to order it by the created date in descending order, so that we will show the most recent result on the top, and now we can simply return these results. Awesome. Now we'll do the same thing that we have done in our previous video as well.

First, we are going to define a controller attribute and let's associate this component with game result controller. Let's also make our component available for our app builder pages. So, we need to implement this interface. The next step would be to call this apex method, and we are going to do that from our helper file. I'm going to name this method as fetch result. This is going to accept a component variable and here we are going to fetch our results from the Apex method.

So first, we need to get our action, which should be this one, then we need to set the parameters, but this method doesn't accept any parameters and delete this line. After that, we need to set the callback function, and here, if the call back is success, then we are going to get the return value using this get return value method. So, here we'll get all our previous results array that we are returning from this apex method. So, this list will be available to us here on this line.

Now, all that's left is to set this result inside our data attribute, which is this one. So, let's set our attribute value. Awesome. So, let's call this function from our controller file here. So, once we set our columns, now we also want to get the previous results. Now, let's deploy everything to our Salesforce Org, and hopefully this should work. If you feel that we are going fast with the aura component framework or if we are not covering all the things, that's because this course is primarily designed for the apex development, and in future, if I will get more time, then I'll add more modules in this aura framework development section.

But for now, I have given you all the fundamentals of aura framework and you should be able to create your own custom components and deploy those. So, let's open the edit page because we are going to add our game result component here. So, simply drag and drop your game result component, and I think we have got an error, we will solve it once we see it on our home page. OK, I know the reason why it's not working, and that's because inside this fetch result function, we are not passing this component variable, which we need to do.

Awesome. So, it seems our code is working and we see our game results. Let's play one more game, and we have won, but our result is not refreshing. So, for that, we need to handle our application event that can indicate that we have played another game and reload these results from server.

We already have an application event defined, we just need to handle that event inside our game result component as well, because right now what it is doing, it is loading these results in the init method, which is only called at the time of component initialization.

Once you get this result for the first time, there's no way for this component to know that you have played another game and it has to load back these results one more time. So, let's go back to our VS code and we are going to handle our application event. I think we were handling that inside the board panel component.

So, I'm going to copy the same line, I'm going to handle this event inside my game result component as well. And I am going to define this method, and in this method, I will simply call my fetch result function again, so that I'll make another server side call and fetch the latest results from my Apex method, and this should give me the new results as well.

So, let's deploy this one more time and hopefully now we will see our results every time we play a new game. Let's play a new game. OK, so we have lost this game, and if you notice, we have got our results immediately, perfect, our word shuffle game is almost complete.