 Hello, everyone. I am Sanjay Gupta. I welcome you on Sanjay Gupta Tech School. So this is day 59 of Salesforce Learning Bootcamp. And in today's session, I will be discussing about Visualforce page. And this week it is third session of Visualforce page, right? So today I will be completing all the basics of Visualforce page. So I hope with the help of these three sessions, you will get to know basics of Visualforce pages. And as you all know, we don't implement Visualforce pages nowadays because we are working on lightning experience. So you just need to go through with all these three sessions so that you can understand how Visualforce page actually works. So yesterday, a few folks asked like in an interview whether there will be questions related to Visualforce page. So I would say there will be no questions related to Visualforce page. But you just need to know so that you can differentiate Visualforce page and lightning or a component or web component in your mind only, right? And if you have basic knowledge of Visualforce page, then if in any project like if you are converting any Visualforce page into lightning web component, so it will be easy for you to understand the working, right? So this way I hope you are clear why I just conducted these three sessions on Visualforce pages. Okay, so moving forward. So once again, welcome everybody, those who are watching this session live and those who are watching the recording. So welcome to those as well. And if you are joining this session like this whole bootcamp for the first time, so you can just go through this slide. It shows whatever I am doing, whatever I have done, what experience I am having, right? So moving forward like from the beginning, from the day one of this bootcamp, we are following this virtual learning best practices. So I am sure like those who are following these sessions from the beginning, so they are following all the best practices. So just follow all the sessions and there is a good news like from next week, we will be having integration related sessions. So be consistent, do regular practice, whatever I am explaining to you. For Visualforce pages also, whatever I am explaining, just implement in your system so that you will be having proper hands on, right? This is telegram group, so if you join this telegram group, so you will be part of the community where only learners are available. No promotion is there, no, like anyone cannot post any promotional post there. So people are asking questions and those who are having enough information or knowledge, so they are helping each other, right? So this is important and generally I do session for one or 30 minutes, but this week session length is little less because Visualforce, I am just explaining to give you basic insight, right? So this week, like Visualforce basics will be completed and in upcoming two weeks, we will be having sessions on integration, right? So if you have not followed Sanjay Gupta Tech School on YouTube, LinkedIn, Instagram or Telegram, so you can follow and all the important links are available in the description. So follow, subscribe and share this channel and lot more bootcamp will be available. So right now, Salesforce and cybersecurity bootcamps are going on. Next month, I will be starting one more bootcamp that will be related to CNC++ so that bootcamp is basically targeted on those audience who are BTEC students, like freshers, searching for jobs, non tech folks, those who want to strengthen their coding skills and career gap folks who want to revise all the coding related concept. So C will give you all the insight related to programming and C++ will give you the object oriented programming concepts, right? And if you learn CNC++ programming language and then you switch your gear to Apex programming, so easily you will be able to understand that, right? So now again, I'm jumping to Visualforce pages. So if you remember, yesterday we implemented a code and here you can see this is the session tracker. Its link is available in the description of the video. So here all the session related information you can find. Okay, so now like yesterday we implemented this code. If I preview it so you can see the results. So here you can see we can provide account name, phone, rating and active, right? So these information we can provide and if we click on save, so new record will be inserted. Now the requirement is we need to perform both the operations through this VF page. So what we need to do? We need to actually place this Visualforce page on account record page. Why so? Because this code is basically having standard controller as account. So if we place this Visualforce page on account record page, so we can either create new account or the existing account record information will be available here also. And if you want to modify that information, we can do, right? So now I'm going to do that for you. But before that, what we need to do here, you just need to search for Visualforce page, right? You will be searching for Visualforce page and click on Visualforce page link. So all available Visualforce pages will be listed here. So right now I opened VF demo four. So here it is and you just need to edit it. And you need to enable this checkbox available for lightning experience, experience builder sites and the mobile app. So if you enable this checkbox, it means you will be able to use your Visualforce page on a particular place. It can be lightning experience, it can be lightning experience builder site or the mobile app, right? So I will be placing this Visualforce page on lightning experience page, right? So I'm just saving it so that Visualforce page is modified. Now I'm just moving to accounts and I'm going to open an account record and here I will be placing that page. So from this gear icon, I'm just clicking on edit page. So lightning app builder will open this page in edit mode and from left hand side, I can just search for... From left hand side, I can just search for Visualforce page. So here you can see it is available. So what I need to do, I just need to drag and drop it. So here VF demo one is by default populated. So from this list, you can see a VF demo one and VF demo four two are available because for two Visualforce pages that checkbox is enabled that I enabled prior to this step. So I'm selecting VF demo four and I'm just clicking on save. And from top left corner, I'm clicking on back, right? So what will happen on this page or Visualforce page will be available, right? So here you can see in this lightning record page, I'm just using that Visualforce page. And whatever details we have on this record, like account name and active is yes. Here you can see active is yes. So that is populated here and phone and rating are blank, right? So what I'm going to do from here, if I populate rating and if I type dummy phone number, if I click on save, so through this page, I will be able to modify the record. So here phone number is modified and rating is modified. And those modified information is available here on this VF page as well, right? So sometimes what happens, you need like small component where you just need selected fields and through those fields, if you want to edit your or you want to update your record, so you can do it this way. But in recent times, we don't create a Visualforce page for this operation. Instead, we will be implementing lightning web component and we can place that component here where Visualforce page is available, right? So this way, I just showed you how you can place your Visualforce page on record page. And on that record page, if your Visualforce page is available, so through that we can do both the operations, insert and update. So although this record is already created, so it will be utilized for update only. And if I place this page, Visualforce page on home page, if I place it on home page, so from there, I can create the records, newly, new records I will be able to create. Okay, so this way, this page can be used at two different pages, home page and record page. So if you want to place it on home page, so again, what you need to do from this gear, I can just click on edit page and simply you can drag and drop and that Visualforce page will be available. So I'm just clicking on edit page so that I can show you that as well. So from here, I just search for Visualforce page and I'm just dragging and dropping it here. So here we have demo four is available. So here you can see it is visible. I am just clicking on save. It is asking for activation. So I'm activating it. Assign as org default and save. Now from top left corner, I'm clicking on back. So here you can see this Visualforce page is available and right now it is not having any information. So if I create any record, so account from home page and if I select these information, click on save. So here you can see a record is created. So we created it from home page. So it is available here and this page is available here and from here you can modify the information. Right. So this way you can create reusable Visualforce pages that you can place at different locations. But remember nowadays we do this with the help of lightning web components. So from next month, I am going to start lightning web component phase of this boot camp. Right. So in that boot camp third phase. Right now we are going to end second phase of this boot camp like an upcoming two weeks. So first phase was admin plus flow. Second page. Second phase is apex trigger test class, async apex, visual force and integration. And third phase will be lightning web component development that will be starting from next month. So I will be covering HTML, CSS, JavaScript, lightning or lightning web component. Everything will be covered in detail. Right. So at that time you will see that visual force page will be replaced with lightning web component and that we will be using here. Okay. So this way I hope you understood whatever I demonstrated right now. Now I'm going to show you how we can show records along along with the related records. So for example here on the UI if I'm showing account information. So at the bottom you will see a related list and that related list will be showing the particular related information. It can be account. Sorry. It can be contact. It can be opportunity or any other related list. So we are taking example of account or parent record will be account and it's related list. So I'm taking example of contact. So contact related list will be available here. So in the same code, I'm going to do some modifications. So here I'm going to write some code. So after this apex page block, I'm just having one more page block and its title will be contacts. Now inside this page block, I will be having page block table. So here I need to provide the values. So values I will be fetching from account dot contacts. So if you remember on account, we have a child relationship name that is contacts. So through that child relationship name, whatever account we are viewing, it's all related contacts will be available automatically. And they are like here I'm going to use a variable and that variable is gone. So what will happen one by one, each contact will be available into this con variable. And they will be this dollar action dot contact dot edit and then con dot ID. And here I'm providing at it. Right. So let me explain what is happening here. So we created this page block table. So what is happening here? We are providing the values values are available in account dot contacts. Right. So it will give contacts one by one into this contact variable automatically because it is a feature of apex page block table. Table will be created and it will be having different different columns where like first part will be the edit. And similarly, I'm just copying and pasting it. So here one more part will be for delete. Right. And here instead of edit, I'm using delete. So these are predefined dollar action contact dot edit dollar action contact dot delete. These are predefined and contact IDs will be associated that we will be receiving from here and URL for means like if you click on that. So it will be opening added form. And if you click on delete, so it will be deleted. Right. And after this column, so this will be our first column in the table column means horizontal column. So sorry, vertical column. So if you see a table, so in table, we have rows and columns. So for one row, this is first column. Now here we need to create one more column. So I'm creating a picks column and value I'm going to provide as condot name. And this I'm closing here. So you can see in above column, I was having some elements to provide. So I just started and ended it here. But for this column, I don't have anything to provide other than value. So value I'm putting here with this element only and it is closed here. Now I'm just copying it, pasting it. So here I'm going to provide email. Right. So this way what is happening? How many columns are there? Three columns I have. So in one row, there will be three columns. In another row, there will be again three columns. So for example, if account is having five contacts, so automatically five rows will be created and all those rows will be having three columns. One for edit and delete links, one for name and one for email. Right. So this way I just modified this page, a visual force page. Now here you will see the related contacts will be available. So now what I'm going to do I'm moving here and I'm going to open an account where related records are available. So if I open this edge communication. We have three contacts related. Okay. So now what I'm going to do I'm just copying this ID and here I am putting it like this and pressing enter. So here you can see basis on that ID that account information is available here and all the contacts which are related. They are showing up here and if I zoom in so here you can see edit and delete links are available. So if I click on edit so automatically control will be redirected to that contact record and edit form. Right. If you go back so you will be able to see those information. Okay. So yeah. So here again, we just need to pass that like this. So this way you will be able to so whenever you will be using this space. So you need to pass this account ID as a parameter and basis on that account ID you will be able to see the related contacts. Right. So now I'm going to take your questions. So if you have any question you can ask in the chat. So I can see only one question. So there's a question. I'm stuck in the work from. So I would say for this requirement like if you can send the detailed requirement then only I will I will be able to help you. And instead of asking these kind of questions here, you can just join the telegram group and lots of folks are available and I'm sure like if you through any challenge so people will try to help you. So first for this you need to search for the visual force documentation where you will be able to see all the methods but for a standard controller. So for standard controller what we are doing we're just providing the object API. Right. And all other things like whatever I am using here. So for that you need to understand the detailed documentation then only you will be able to use them. Someone is asking to explain this URL for so basically URL for is function which is already defined and here we need to pass an action. So action we are passing contact dot edit. So contact edit option action will be assigned with this URL and which contact. So here we are passing the ID. So it is specific to visual force in lightning web component. You will be having different things for doing this operation. Right. And link is creating through this apex colon output link. So here we are using these so that's why that link is created. Okay. So first apex page block is showing account information and second page block section is basically showing contact information. Right. Yes. Vladimir we can change the background color and all but for that you need to apply some sort of CSS. So I already told you like I have never explored visual force pages much. I just understood the basic concepts. Those I am just explaining you and if you need to explore so you just need to search for the Salesforce official documentation and then you can do those things. And I would suggest like don't waste your time exploring visual force instead focus on aura component and lightning web component. So this we are just doing so that we can understand the basic structure of visual force pages like how it is used or implemented. Yes, Rajiv contacts are not showing on home like this record page. I'm also wondering why they are not showing up here. I'm just refreshing it. So I think why they are not available here because here we just need to pass this ID as a parameter and that is not being passed here because this code is working in that sense. If you pass that account ID as a parameter then only it is working. So that's why it is showing up here not on the record page. Right. So if you use this as a URL this visual force link then only this will be working not on direct record page. Right. So this is kind of limitation. Now one more thing I'm going to show you like how you can create standard list controller with list views. So in visual force pages like you can have list views as well. I'm going to show you that and after that I will show you like how you can have your apex class in your visual force page. Right. So two more examples I'm going to show you. Okay. So I'm going to create new visual force page. So naming it as we have demo five and here I'm going to implement the code for you so that you can understand how it will be actually implemented. Right. Okay. So from here I can just know. Okay. Just just implement it from the beginning. So I'm just going to use standard controller that is actually a count. Now one more thing you need to understand like here we have record set variable. Here I am passing name as a countless. So what is happening as I define standard controller as a count. So whatever records are available under account object. All those records will be automatically stored in this account list. Right. So this is standard behavior. Now here I'm going to use a picks page block and title. I'm assigning as a countless inside this apex block. I'm going to create a picks block table. So apex page block table and in table. So we in previous example also we use this table. So here we just need to pass the list. So I'm going to pass account list here and then I'm having a variable. So variable is account. So one by one whatever account record is available in this account list. It will go to this ACC and through that ACC I will be creating the columns. So first column I'm creating and providing value as ACC dot name. Right. Now I'm just going to copy these. So account dot name then account dot phone account dot rating account dot type. Right. So this way this code is implemented. So I'm just going to preview it so that we can see the results. So here you can see account list is available and four fields are displayed. Account name is available here. Then we have phone then we have rating and then we have type. Right. So all the account records are available here. Now I'm going to have a list view. So you know on account we have list views basis on that list view. We can simply select particular list view and we can filter the data. Right. So the same type of behavior I'm going to implement in this code. So here what I'm going to do I'm just having one more tag that is a picks form and I'm just shifting it here. Right. So after a picks form we are having this page block. Right. So the page block is for account list and here I'm just going to add one more thing that is ID. So here I'm adding ideas accounts list. Then here I'm writing a text as filter then I'm writing a picks select list value equals to filter ID and then size equals to one. Right. So inside this I will be writing two more elements. One is select options value equals to list view options. And then one more element I'm going to write that is a picks colon action support event equals to on change and re-render accounts colon list. Right. So this code I'm adding here. So basically what is happening this select list this block will be for list view and below page block table is for the table that we created earlier. Right. So what is happening here through this list view options all the list views will be available automatically and we are using this element that is a picks select options. Right. So this will automatically show all the list views available. So for any object like if you want to have a list view on the page so you can just use this select options element and here you can pass this. It is common for all the objects then action support we have event as on change like if you change your list view if you select different list views. So here we have an attribute that is re-render. So what we need to re-render account list. So account list is the ID of this page block. So this whole page block will be re-rendered. Re-rendered means it will be refreshed. So here we need to define the ID and then here we are re-rendering that ID and whatever list view you will be selecting that ID will be passed here in the filter ID. So basis on that records will be filtered automatically. Right. So now I'm going to save this code so that we can see the results. So here you can see it is previewed automatically and here we are having the list views. Right. So whole list of list views are available if you change it. So accordingly your data will be rendered. So I'm just refreshing it one more time. Yeah. So there is a mistake. So you can see it is case sensitive. So here I used account list and here I'm using account capital L. So what I need to do I just need to copy it and I'm pasting it here. Now both are matching. Right. So I'm saving it again. So this is case sensitive in nature. If I refresh and if I change it now so it will be changed so you can see new last week. No record new this week to records. Right. Then all accounts so it is showing all accounts. This way here list view is working fine and it is refreshing automatically. So only this block is refreshing not whole page. So that is happening due to this re-render. Right. So you just need to pass which block you just need to re-render. So here with that particular block you just need to provide the ID as well. Right. So this way like this the similar functionality we can implement in lightning aura and lightning aura components as well. So we'll be doing that there as well. Okay. So this way like this is more complex complicated code as prior visual force pages. So this feature also we can implement. Right. Now last feature I'm going to show you like how you can connect your visual force page with apex class. Right. So that I'm going to show you. So we'll be creating a visual force page first and then I will be connecting that visual force page with the apex class and then I will be taking your question. So let's take questions related to this code right away. Okay. Someone is asking telegram link. So can anyone share that telegram link in the chat on my behalf telegram link on of our self help group. So if you can share so when I can join otherwise I am going to implement that code for you. So I'm going to create a new visual force page. So name of this VF pages VF demo six. Right. So I'm going to create it for you so that you can understand how we can connect apex code with our visual force page. So first of all I'm going to implement it. So in in these examples I used standard controller. But right now I will be using simply controller and this controller will be actually our apex class. So I will be creating a contact controller that I'm going to use here. So right now I have not created this contact controller. I will be creating after implementation of this visual force page. So here I'm creating a form and inside this form I'm going to create a page block. So its title will be contact list and here I'm going to provide ideas con list. Now inside this apex page block I'm going to use one more one more element that is page block table. So as you know we'll be receiving a list will be receiving a list. So that list I'm going to iterate here. So list name will be contacts and here I'm creating a variable naming it as con. Right. So again in this space block table we need to create columns. So I'm creating first column and here I'm providing value as con dot first name. Right. So now I'm going to copy it pasting it pasting it. So here I'm writing last name. Here I'm writing email. So this way what I did I just created three columns. So three columns will be there and number of rows will depend on this list contacts. Right. So this contact list I will be receiving from apex code. Right. So after this what I need to do I just need to create the apex code so that this context will be having a particular data and that data set will be iterating one by one and records will be available into this con variable and through that first name last name and email will be rendered on the UI. So I'm just saving this code. Now I just need to create apex class and name of apex class will be contact controller. So I already copied that name and I'm pasting it here and creating it. So here I'm creating a variable private string sort order. So we'll be implementing the sorting functionality as well and it will be dynamic. So public list of contact. It is the return type. Then we have get context. So this is get context method which will be returning the list. Right. And here I'm going to define list of contact results equals to. So now here I'm going to use database dot query method which will be creating the dynamic SOQL. So here I'm writing select ID first name last name email that I'm using plus. So here if you want to write SOQL in different different lines so you just can enclose them in single quotes. If you are using database dot query method. So here I'm writing from contact then again plus then order by and now here I'm using that variable sort order. So this is basically dynamic SOQL. This way you can write your dynamic SOQLs. Right. So what is happening here? ID first name last name and email will be queried from contact and sorting will be done by this sort order variable that we created above and sorting will be done in ascending order and limit is 10. So 10 records will be queried. Okay. So this way this code is implemented here. Now if you run this code. So prior to that we just need to return the results as well. So right now sort order is defined as first name. So the data will be sorted basis on the first name. Right. So this result will be returned automatically this get context will be called automatically and here I'm going to save this code. Clicking on preview. Okay. Something is not written correctly here. So I just need to modify this. Okay. So what mistake I did I just need to provide a space here because this is a single line and I didn't provide space. So everything is concatenated without space. That's why this thing converted into error. So what I need to do I just need to provide spaces here. So after this order by I need to provide a space and before this ASC I need to provide space. So now I'm just saving it and it is being refreshed. Okay. Unexpected token buy. So here also so I'm just writing it like this. Okay. So what I'm going to do here also I'm providing some spaces. So after each line at the end I provided space. And yeah now it is working. Okay. So make sure whenever you line these you write these lines you provide spaces here. Okay. So everywhere I provided spaces and at the end it is not required. So here we are able to see the data and you can see it is sorted basis on first name. So wherever first name is blank so it is blank then it is sorted basis on a then B. So now what we'll do we'll have a link here. Like if I click on this heading first name so data will be sorted on first name. If I have if I click on this last name so data will be sorted basis on this last name. Right. So that kind of thing we are going to implement. So first I'm going to implement this code. So here I'm going to have public void sort by last name. So if this method is called so sort order will be defined as last name then if I call if I define one more method. So here I'm writing it as sort by first name and here I'm going to define sort order as first name. Right. So these two methods I have defined now I just need to call these methods in the visual force page. Right. So I'm going to show you how we can do that thing. Okay. So here we have page block then inside that page block we have page block table and in page block table basically we are having these columns. So now I'm going to modify this. So here page block column is having this value. So here I'm not closing it. I'm having its closing tag as well. So this apex column will be having some code now. So I'm writing here apex colon facet. Right. So facet name I'm defining as header here because this will be available on top of the table. And here I'm going to have a command, command link. So action I'm defining as sort by first name. So you remember here we created a method sort by first name. So I'm going to call it here as an action. Right. And what will happen? It will re-render con list. So here you can see we provided the ID and I already showed you the use of ID like IDs for the space block. So if we re-render this con list so whole page block will be re-rendered. Right. And here I'm just writing first name. Okay. So this will be the label and on this label a command link will be created. Okay. So I'm not closing it here instead it will be closed here and I'm aligning everything. So this is the command link which is having first name as a text. Action is sort by first name that method is defined here in the apex class. We are going to call it and it will be re-rendering that apex space block whose ID is con list. Right. So this we did for this first column which is for first name. Now the same thing we need to do for last name as well. So what I'm going to do I'm just copying this code and in place of this I'm pasting it. So above you can see this column is for first name. Then we have this column for last name. So I'm just going to modify it. Right. So this way I just modified the code. I'm just saving this visual force page moving here and refreshing it. So here you can see if you see it it is when I hover on first name it is changing its color from black to blue. So it is having a link if I click so it is sorting. So by default it is sorting on first name. Now if I click on this last name so basis on last name sorting is done in ascending order. Right. So this order changed. Now if I click on first name so you can see it is changing. Okay. Yeah. It is showing different records. It depends on the SOQL. So it is querying a random record but the functionality is working. Right. So if you click on first name so basis on that data is arranging. So different records are available if you click on last name. So different records are querying and basis on that data is filtering. Right. So this way I hope you understood how we can create an apex class and those methods we can call. We can get the data from backend and those we can show on the UI. Right. So this is all what I planned for you. So this is basically known as custom controller demo. Okay. So this is it for today. Now if you have any question you can post your questions in the chat so that I can answer your questions case. So I'm going to take your questions. So Nana is asking reason to create contact controller class. So the requirement is I just wanted to show you like if you want to fetch some data and if you want to create custom custom SQL like earlier what was happening we were using account and account as standard controller than we are using that. But if you want to apply some SQL like custom things like here we applied this sort order and things like that. So if you want to customize your query so in that case you can create a custom apex class and then you can link that apex class with your visual force page. And here we implemented two methods that we are calling here. So if you want to create custom business logic so in that case you need to implement this apex code without that you won't be able to do that. So Praveen is asking to elaborate facet tags. So basically it is not face it it is face it FACET. So this is basically used to have this command link in the header of the table. So on column you can see at top we are having that facet which is having that command link. So here face it is working as a placeholder for this command link. So this is kind of a syntax that we need to use as is. Okay guys so this way I hope you understood whatever I demonstrated today. So just go through all three visual force sessions so that you have basic understanding. Yes Archana you need to use get context function name only. So Kalyan is asking why you mentioned plus. I didn't get that plus where is that plus. Okay so you are talking about this. Yeah so basically for concatenation purpose we are like we are writing these lines separately in different different lines that's why I'm using plus. If you write whole in single line so then you don't need to use plus. You can write it in single line and closing in single quotes. But for this separation like if you write something in single quotes and then you use a variable. So for separation we use this plus sign. Yes Praveen we can do that as well like we can take some input from user and basis on that we can do. But those things we will be doing with lightning or lightning web components. So I just learned few basic things of visual force that I explained to you right I'm not going in detail for visual force pages but we'll be doing those things like how to fetch data from UI. So those will be doing with the help of lightning or lightning component. Okay so this is it for today's session. Next session will be on Monday and next two weeks will be for integration and my teammate will be explaining integration to you right so those are very much important so join those sessions and whatever questions you will be having you can ask and I will try to create some questionnaire basis on integration so that you can practice right so this is all about today's session. Thank you so much for joining today's session. See you on Monday. Thank you everybody.