 Hello friends. In this module, we are going to learn how we can create attributes and expressions in lightning or our components. So jumping into developer console. Now I'm going to create one lightning component. So I'm going to label it as LC demo one. So lightning demo one component will be created in a previous module. I already demoed you like what is the meaning of these things. So if you enable these checkboxes, so in that case, you will be able to use your lightning component and tabs phase record pages, etc. So right now I'm just going to demonstrate attribute an expression how you can use them in the component. So I don't need to place it in particular place. So I'm leaving it as is clicking on submit. So here you can see two things are available. This is the description of this component. So you can close this and in this component, you need to implement your code. So now I'm going to tell you like how we can create attributes. So we have two different things. One is attribute and one is expression. So attributes basically known as variables in our components. So what you need to do, you need to write or a colon attribute, then you need to provide name of the variable. So I'm labeling it as variable one. You need to provide the type. So providing a type as string, then you need to put the default value. So I am putting test value. Right. So this way, in this component we created one attribute. So attribute is similar to variable. Its name will be where one and its type is string and default values test value. So attribute value is optional. You can you can remove this at like you can remove this part from this attribute and if you want to provide value of this variable from somewhere else. So that is also possible. Now how we can display value of this attribute on the UI. So for that you need to create expression. So this is the simple plain text component attributes value. Now we need to frame one expression. So what we need to write V dot where one. So this will be known as expression. So here we is representing the view of this component and dot where one is the variable. So I can save this. Now if you want to test whether this V dot VR one expression will display test value on UI or not. So for that you need to create one application. So I'm going to create one demo application. So I guess it is already there so I'm going to search for demo application. And here I'm going to use LC demo one saving this application clicking on preview. Here you can see component attributes value this masses plain text is available and we are is replaced with the default value that we set in the attribute. So this way if you create any attribute so you can use this expression so that that variables or attributes value can be displayed on the UI. Right. So now if we suppose we have one more component. Let me create one more component. So I am creating LC demo two and clicking on submit. So in lightning component or if you're implementing lightning or a component. So you can use one component into another. Right. So this I already demoed you in previous modules. So from here, like this default value we are setting here. If I go to this demo to so here we can write C colon LC demo one and from here we can pass value to that variable one. So inside these double quotes we can pass the values right now. So I'm passing value from LC demo to and saving this and here I'm going to use C colon LC demo two. So here you can see output is automatically refreshed. So here two outputs are available. So in this application we called LC demo one. So LC demo one will display value of this VR attribute and this VR default values test value. So that is displayed on the UI right now we created one more component like LC demo two in LC demo two. I'm calling LC demo one and I'm passing value of this VR one variable and value is value from LC demo two. So this time in this LC demo one if this attribute is available. So it's previous value will be overturned and this value will be stored and we are calling LC demo two. So that's why this overwritten value is displayed on the UI. So if you have more than one components so you can call one component into another and you can pass the values as well. Now if I close this if I remove this from here. And now I'm going to show you like if we don't have this default value. And if you if you want to set its value from the controller of this component. So in previous module in one of the module I explained like we have these various files. So right now I'm going to click on this controller. So this controller is basically JavaScript file and through this controller we can also set value of the attributes. So here we need to create one handler. So let me first implement the code. So name of this handler will be in it. Its value is equals to this and action is C dot doing it. Right. So let's understand this first. So this is basically handler which will handle one event. So even will be in it like whenever this component will be loading. So this unit event will be fired and that in it even will be handled by this handler value equals to this means like it is handled in this current component only. And action is like through which method you are handling that so method name is doing it. Now if this method is defined in the com controller components controller. So here you need to use C dot. Right. So we represents view and see represents controller. Now I'm saving this code moving here. So here this my action is representing name of this method or function. So here I need to write doing it then function then these are the parameters those I'm leaving as is. Now here what I can do I can set the value of the attribute through this method. So for that I need to write component dot set in component dot set. We can we can set the value of that attribute. Right. So. Now here what we need to do we need to use that variable or attribute in double quotes. And after comma separation we can provide the value. So I'm writing demo value from components controller and saving this code. Right. So when this component will be loaded this in it even will be fired and it will be handled through this doing it. Now we need to do one more modification like V dot. So I already told you whenever you are representing view. So you need to use V dot and if you're representing controller then you need to write C dot. So in this controller we are using attribute of the view. So that's why we are writing V dot. And in this view we are using the function of controller. That's why we are writing C dot. So this unit to remember otherwise errors will be displayed. So moving here doing the refresh. So here you can see the value which we provided from the controller is displayed here. Right. So this way I hope you understood how we can set value of attributes from the controller. So if you want to set the value you need to use component dot set. And if you want to get the value then you need to use component dot get. So now after understanding how we can set the value of this attribute from the controller. Now let's create some more attributes. So I'm just. Okay, let's keep it as is. So after this I'm going to create one more attribute. Naming it as new account type equals to account. So here we are creating attribute for a subject. And in new line I'm writing default. So here we need to set its default value. So in double quotes. I'm writing as object type comma name test ACC one. And after that I'm closing the curly base. Double quotes and this attribute. Right. So this way what we did we created one attribute attributes name is new account. It's type is account. And in default, we first we set the subject type and then whatever feels that a subject has, we are setting its values. Now, if you want to display its value. So you need to, you need to set, or you need to use an expression in this in that expression you will be using the attribute. So now I'm going to tell you how we can write that. So this is the, like syntax of the expression, you need to use curly base then exclamation sign then be dot. So now you need to use this name. Dot and name. So name of attribute is new account and for this attribute we provided default value for this name as test account one. So I'm sorry. It was mistakenly. So here. Everything is saved. Now moving here. So name of one is called now clicking on preview. So here you can see it is showing test ACC one. Right. So we provided value of this name as test ACC one. So that is displayed on the UI. So this way if you want to use attribute for as object type. So you can set it like this. So in upcoming module you will see like how we can set values into this as object type attribute dynamically. So we will be fetching data from like your objects and those data will be available into these. So right now for demonstration purpose I provided default values, but in later modules you will learn a lot about these. Now moving forward. So after implementation of this as object type attribute. Now we need to create some more attributes of different types. Right. So what I'm going to do, I'm going to. Let me remove this. So I'm going to create one more attribute. This time name is a demo. So I'm going to create area of string type and providing default value. So moving it here in new line and now here I'm going to put values as V1. So you need to use single quotes V1. Then again single quotes V2. Again single quotes. Then you need to write one more value as V3. So it depends on you like how many values you want to put because it is adding so it can store any number of elements. So name of this attribute is at a demo and it's type is string. So it is having these values. Now, if you want to display it on UI. So array values. Now I'm creating the expression. So V dot then name of array array demo and then you can use indexing. Right. So in this module, I'm not demonstrating any loop. So those I will be demonstrating in upcoming model modules. So here I'm just trying to access the value which is available on the 0th index. So I'm saving this moving here doing a refresh. So here you can see array values V1 it is displayed. If you want to display one more value so you can copy it. You can provide some space and you can replace this zero with one. You can go here in the tab and you can refresh. So it will display V1 V2. Right. And if you want to apply some formatting so you can use STML tags as well. Like we used H1 in previous example. Right. So this was array demo. Now, if you want to create a list so that is also possible. So now I'm going to create some collections type of attributes for you. Right. So, so I hope till now you understood like whenever we want to create any variable. So we need to use our column attribute. Then every time we need to provide name so that we can uniquely identify that. So naming it as list demo type equals to list. So in Apex basically we use collection as list set and maps. So all those collections we can create in the sliding component as well. And here I'm going to provide default values. So double quotes, then square brackets and in single quotes. I can write values. So I'm writing list one. List two. List three. Right. So this way. All three list values are available if you want to put more so you can do that as well. And again, I'm just providing default values. Later on you will be like putting these values through some calculations also. So we won't be using all the default values. We can store the values in the code as well. In this demonstration like we used controller and we set the V dot where one value from here. So through JavaScript controller also you can control these attributes. Now here I'm going to write list values. So again, I need to create one expression. So V dot list demo. And let's say one. And for separation between them I'm using HR tag. So horizontal line will be available. So I saved this code moving here doing a refresh. So you can see array values we would be to our display then horizontal rule then list values list to is displayed because I provided. I provided one here as index. So this way, whenever you want to create any attribute of list type. So that is possible. Now if you want to create an attribute of type set. So that is also possible. So naming it as set demo and its type will be set. And then you need to provide default value. Right. So list can contain duplicate values and set contains unique values. So similar to list you can create set as well. So let's say I'm copying these values, putting them here and modifying these. So here you can see set values set to is displayed. So this way if you want to use set so that is also possible. Now next time going to show you how you can use map. So map demo is the name of attribute type will be mapped here we need to provide default values as well. Double codes curly base, then in map, if you know apex so you must know like in map we need to put two things for creating a pair. So we need to provide key and then value. So here I'm key or providing key as a then colon value as map one. Then comma B colon. Map to comma C colon. Map. Then closing it. So this way I created a map, which is having these three values. So these are ABC and values are map one map two and map three. Now I'm using this horizontal rule. So here I'm writing map values, map demo dot, then key. So you can iterate over this map as well with the help of these keys so that we will understand later on in the other modules. So now I'm going to the fresh it so you will see list certain map values are displayed here. So this way I created map. So I hope you understood how it is working. So, whenever you want to create anything related to these collections so you can simply create them. Now if you want to like identify length of particular collection so that is also possible. Suppose here I'm writing HR slash length of list V dot list demo dot length. So here you can see it is showing length of list as three. So this way, if you want to like find out size of particular attribute so that is also possible. Next, if you want to create JavaScript object. So we have one more type of attribute. So naming it as JS object. It's type will be object right now at top here you can see or a handler is available whose name is in it values equals to this. The handler will be available in this component only and here action for this handler is doing it. So now what we need to do we need to go to controller and we need to define this doing it so it is already defined in this controller and instead of using this. We need to set the values for that JavaScript object that we created. So attribute name is JS object. So I will be storing values into this. Now how we can do that. So first we need to create a variable. So I'm naming it as data. Now we need to assign values into this. So currently which is I'm assigning name, then colon test name, then email test at the rate test.com then semicolon then component dot set V dot JS object, comma data. So here in JavaScript you created the data in JSON format and you assigned that data into the JS object. Now on the UI if you want to display that. So first you need to save this controller. Now here you can use HR slash and you can display that so so if you want to display JS object values so you need to use V dot then JS object dot name and V dot JS object dot email. So this is the name of attribute and through dot we are accessing name and email. So those values will be rendered on the UI. So I clicked on refresh. So here you can see JS object values test name hyphen test at the rate test.com. So this way you can create JS object you can set its values from the controller and controllers working automatically because we are implement we implemented this handler in it handler. That's why it is working on load off the component. Right. So this way like we implemented lots of attributes. Now we need to implement one more scenario. So to understand that same scenario like what we are going to do, we will be creating a wrapper class and we will be using that wrapper class in this lightning component. So first of all we need to create new apex class. So naming it as LC demo wrapper. And inside this class. I'm writing public class. And in this curly basis unit to write or enabled then public string my string one gets it. Then again or enabled public integer. My integer one gets it and you can save it. So this way we created a wrapper class. So in wrapper class, there are two variables. Right. And now what we need to do, we need to like said values of this wrapper class like my string one my integer one in our component. Right. So moving to a lightning component and here I'm creating one more attribute. Naming it as user data and type here I'm providing LC demo wrapper dot wrapper test. Right. So here we created LC demo wrapper. And in LC demo wrapper we have this wrapper class. Right. And wrapper test. So here it is having two variables that we can use. So I'm saving it now moving to controller. So here I'm writing component dot set. Then we got user data then comma so we got user data is the attribute that we created. And it is off type this wrapper class and wrapper test. Right. So in one wrapper class like you can have multiple blocks like this. So here we got user data. Then my string one string value. My integer one. So here we need to provide integer value. Right. So you can provide any integer value. So let's say I'm providing 2021. Then this curly basis closed. And then I'm putting one bracket. We're moving this saving this code moving to a component view. Now if I want to render that user data on UI. So that for the values. We dot user data dot my string one. Right. So now you might be thinking like what is the benefit of using this wrapper class. So a benefit of wrapper classes like if you want to club the values of different types. So you can create a collection in form of a wrapper and then you can use that all together. So here I'm using. We dot user data dot. My integer one saving this code. And going to refresh. So here you can see it is showing string value hyphen 2021. So this way. This wrapper values. So first of all, we created this upper class. And here you need to see like I use this at the rate or I enabled annotation. So if you want to use these variables in our component. So you need to use this annotation. Otherwise you won't be able to use these variables in the your component. And then you can set values through this JavaScript controller. And whatever value you will be setting, you can use this user data attribute because it. It's at like attributes name is user data. So here we can use it like this to display the values. Right. So this way I hope you understood. All different type of attributes that I created to demonstrate you like how we can use attributes and expressions in lightning or a component.