 Hello everyone, I am Sanjay Gupta. I welcome you on Sanjay Gupta Tech School. So today as you can see, we are going to have one more session and it is day 57. And today I will be discussing about visual force page. And in this session, like this is part one of visual force page. So I will be having three sessions back to back on visual force page. So today we'll discuss about the basics of visual force, right? So that you can understand what visual force page is and how we can create visual force page and where we can actually use visual force pages, right? So those things I'm going to explain you in this session. And on my YouTube channel, there is no video related to visual force page. So basically visual force pages we implement while working with classic. So for your knowledge, like in Salesforce, we have two types of experiences. One is classic and one is lightning. So in classic, we generally implement visual force pages, but in few of the project, like if you are working in lightning experience, then also there may be requirement of implementing visual force pages. So on the demand of viewers, like I'm going to explain you briefly what visual force pages and how you can create it. Okay, so welcome everybody once again. And I'm going to start the session. So if you have joined this session for the first time, so through this slide, you can go through like what I have done, what I'm doing, and what like what is the purpose of doing this bootcamp. So everything is written over here and we are just following all the learning best practices. So I hope everybody is following this and you are doing lots of practice. So basically consistency is the key and because of that, you need to do regular practice. So I can see lots of folks are utilizing session tracker. So here in session tracker, you can see all the topics are organized. So if you are joining this bootcamp session for the first time, so in the description of this video or this live stream, you will find a link of this session tracker. And here you can see we have one exercise sheet link. So if you click on this link, so you will be having this exercise sheet where day wise exercises are available. So if you are a beginner and you want to really want to make your career in Salesforce ecosystem, so you can just go through with this. So these two, like the sheet and that exercise document, these two resources are very much helpful if you are a beginner and you want to make your career in Salesforce ecosystem. And along with that, you can see in different tabs we have information related to other bootcamps. So cybersecurity bootcamp is also going on in parallel. And from next month, I will be starting coding bootcamp for the beginners. It will be based on C and C++. So these I have, I'm doing and I have planned. So just follow this bootcamp session tracker sheet so that you can learn many things about programming. Okay, so if you want to join self-help telegram group where lots of people are interacting with each other. So you can just scan this QR code and you can just join that telegram group. And this is the timeline of the bootcamp. So we are in week 16. We are going to discuss about visual force pages. And next two weeks are for integration, right? So lots of folks demanded like please have sessions on visual force and integration. So like this month, both the topics will be covered, right? And after completion of these topics, I will be focusing on the front end development that is done through lightning components. So we'll be doing lightning or a component development and lightning web component development. And I will be teaching those from the beginning. So first I will be covering HTML, CSS and JavaScript. So here you can see I have just modified the session tracker properly. So you can see visual force page sessions and integration. Then we'll be doing development project as well. So one week I kept for that. And then we'll be starting lightning component development. So I will be delivering sessions on HTML, CSS and JavaScript. Then we'll do or a component development for one week. And then like we will be doing lightning web component development sessions. So four weeks are for this lightning web component. And if we need to discuss more topics, I will be modifying this, right? So this is about the present and future of this bootcamp. And if you have not followed Sanjay Gupta Tech School, so you can just follow this platform on YouTube, LinkedIn, Instagram and Telegram. And all the important links like session tracker, exercise sheet, those are available in the description of the video, right? So share this channel link with lots of people, those who want to really make the career in IT or Salesforce ecosystem. Okay, so now let's jump to build some visual force pages. So first of all, I will be explaining what visual force page is, right? So visual force pages basically we use for web development. And in Salesforce, we have two types of experiences. One is classic and one is lightning. So in classic experience, like we generally implement visual force pages. In lightning experience, these visual force pages are replaced with lightning component. So in lightning experience, we implement lightning or a component or lightning web component. But in previous times when projects were used to implement with the help of classic. So at the time, thoroughly, we used to implement everything with the help of visual force pages, right? So visual force is a web development framework which enables to build mobile and desktop applications, right? So if you want to create any UI, if you want to create any UI page, that you can do with the help of visual force page, right? Nowadays in lightning experience, it is replaced with the help of lightning component, right? So apps, those are developed through visual force can align with the styling of lightning experience. So if you create any visual force, so like if you're creating any application through visual force pages, so you can just align those with lightning experience styling as well. And visual force can integrate with any standard web technology of JavaScript frameworks to allow for animated and rich user interface, right? So if you have created any visual force page, so you can just integrate it with like web technology. So it can be lightning component. So generally we connect visual force page with lightning component. And this way, like sometimes if you need like implementation of visual force pages, so in that case, you can integrate that visual force page with your lightning component. But we rarely use, but few viewers demanded like we need to understand how we can write visual force pages and how we can use it. So for that purpose, I'm just conducting two, three sessions on visual force. So each page of visual force is accessible by a unique URL that we'll see right now. So I will be creating a visual force page and I will show you how you can access it. And like similar to flows, like if you create any screen flow. So that screen flow you can place on the lightning page. It can be record page or homepage, or you can launch your flow through quick action. So similarly, if you have created a visual force page so that visual force page you can place on particular page like homepage, record page, or you can create a tab for that. You can also launch your visual force page through a quick action, right? So these things we can do so that we can show that visual force page as part of the application. So moving for further like when we have pages accessed, it performs data processing required by the page and renders the page into HTML and returns the results to the browser, right? So generally in visual force page we'll be implementing HTML and to implement some business logic that visual force page can be connected with any Apex class, right? So the business logic will be available in the Apex class that Apex class you will be using with the help of visual force page, right? So you need to connect your visual force page with Apex class. So Apex class will be having all the business logic and if you want to connect with your S objects like your data, so that can be done with the help of that Apex class, right? So moving forward like this is the diagram with which you can understand the working of visual force pages. So you can consider yourself as a client and if you need to access Salesforce org or visual force page so as a client you will be accessing those pages or org through internet and at right-hand side you can see we have three blocks. So first is visual force page which will be available on the UI and that visual force page will be connected with application logic in the back end. This application logic is nothing it is actually your Apex class and that Apex class will be next connected with your database. So here database means your standard or custom objects, okay? So this way your visual force page architecture basically works. So on UI you will see only visual force page and in the back end it will be connected with your Apex class and in your Apex class you can write some business logic or you can just write the code so that you can interact with your database, right? So with the help of this diagram I hope you have understood the concept. So moving forward I am going to show you how we can create a visual force page so that you can understand it well, right? So jumping to the org. So now if you want to create your visual force page. So for visual force page creation you just need to jump to developer console, right? Under developer console you will be able to create a visual force page. So now I am going to show you how you can do that. So I am just closing these files because these are not required right now, okay? So now what you need to do you just need to click on file, okay? You need to click on file and here if you click on new so you will be seeing one option that is related to visual force page, right? So you need to click on visual force page and from here if you write name of that page so let's say VFDemo1. So here you can see a visual force page is created and these starting ending tags will be available automatically, right? Now if I save it so here you can see on top left corner we have a preview button. So with this preview button if you want to view like whatever code you have written in your visual force page how it will look like on the UI. So here you can implement some code. I am just writing HTML tags. So if you are familiar with HTML so I hope you can understand this H1 is for heading, right? So here I am writing my first visual force page heading. Then for paragraph we use p tags. So my first VF page paragraph, right? So these are actually HTML tags or elements that we are using here. So I am not going to explain these in detail because after integration we will be having specific sessions on HTML CSS then you will be able to understand. But if you already know so this H1 is for heading and p for paragraph and according to these elements properties they will be rendering the result on the UI. So what I am going to do I am going to save this code. Now I have implemented this sample code in this visual force page. Now I just need to view how it will be looking on the UI. So I just need to click on preview as I click on preview. So here you will see output will be available, right? So my first VF page heading it isn't bold because it is a heading. And then we have my first VF page paragraph. So it is shown as a paragraph, right? So it is not bold. It is shown in simple form, right? So this way whatever code you implement in visual force page. So through this preview button you will be able to visualize how it will be rendering on the UI, right? So this is the basic about visual force page. Now I can see there are few questions. So let me just take those questions. So there is a question like someone is looking for career in Salesforce. So just learn Salesforce admin development, few clouds and then do some certification. Then if you apply for the job so you will get immediate response. So Praveen this project that I will be demonstrating. So it is basically recruitment application that we implemented while working with admin. So here you can see some prerequisite links are available. So project doc link is available. So if you have not implemented this admin project. So do implement this project before starting off this development project week, right? Because I will be extending that admin project only to fulfill the requirement of development project. So session number 16 to 21 I already explained these things. So through those videos you will be able to implement that project, right? Otherwise it will be difficult for you to understand. So Rajiv is asking can we create VF page without going to developer console directly from Salesforce page. So I think you can do it from here. If you go to home and from here you can search for visual force pages. So from here also if you click on new so your visual force page will be created. Right? So you can just provide label name and then here you can write the code. Right? So this way from here also you can create your visual force page. Yes. First you can create visual force page via VS code. And Rajiv is asking can we use LWC in visual force. So I'm not sure like I don't think we can. But I will explain this question while we'll be understanding lightning web component. Right? And generally like you won't be using visual force page while implementing lightning web component because all the features those are available with visual force that you can do with lightning web component as well. So Pooja is asking from where we can learn all visual force tags. So those you can learn through the documentation of visual force. So you need to search for Salesforce official document for that. But don't worry soon we'll be covering HTML CSS. So yeah. So right now for this visual force page understanding you need some HTML CSS basics but now I'm not going into the detail. I'm just explaining you how you can create visual force pages how you can use it at different places and few basics code basic codes related to HTML. Right? Still if you're not able to understand no need to worry because in lightning experience we rarely use visual force implementation. Yes Praveen we can set validation rule on visual force pages like if you create a UI so you can just apply some validations as well. So validations will be like business logic so that business logic you can implement while writing the apex class that you will be connecting with your visual force page. So Vera is asking VF is required for Salesforce development or HTML is enough. So actually Vera so if you work on Salesforce classic then you need visual force but if you are working in lightning experience then visual force is not required. In that case you will be working on lightning web component and for lightning web component we need HTML CSS JavaScript as a base. So Pooja this is the opening and closing element for visual force page. So this is by default available if you want to write any code so you will be writing the code in between these right. So you I think you by mistake created lightning sorry visual force pay visual force component you don't need to create component you need to create visual force page. So then you will be having these these apex colon page. So these are some prebuilt elements that you will be using. So I'm getting advantage of visual force pages like if you are working in Salesforce classic then we implement visual force pages. Nowadays we we don't implement visual force pages because we have lightning or a component or lightning web components. So Gabriel it is not deprecated as of now that's why we are able to implement it. It is not deprecated so you can create but it is more related to Salesforce classic. It is not related to Salesforce experience much Salesforce sorry lightning experience much. So in lightning experience basically we focus on aura and LWC. So you can see you can see like these are outdated features but still available to use. Okay, so moving forward like now I'm going to show you like if you have created any visual force page so how you can create its tab so that you can place it in the navigation bar of any application. So let's understand this so it will be very easy for you to understand. So here you need to search for tabs if you click on tabs so here lots of tab options are available. So as you know whenever we create any custom objects so we create a tab for that. So similarly if you create any visual force page and that page if you want to add in your application so for that visual force page you can create a tab. Right so now what I'm going to do here through this new button I will be creating a visual force page sorry visual force page tab. So from here I can select the visual force page so right now in my org I have only one visual force page so that page I'm selecting now tab label. So I'm labeling it as VF demo then here I need to select a tab style so I can select any tab style it is similar to the tab style we select while creating tab for any object. Right so I'm just clicking on next so here this with this step I think you are already familiar so while creating tabs for different objects we see this screen. So from here like you can select default on default off or tab it and as per the requirement. So right now I'm keeping it as default on for all the profiles now I'm just clicking on next. Now it is asking in which application you want to add this newly created tab so I'm unchecking all the applications and I'm going to select recruitment tab. So we created recruitment apps so I'm just selecting that app and clicking on save. Right so here you can see a visual force tab is created VF demo and if I take you to the recruitment app so there you will see that tab. So I'm just opening recruitment application and in this recruitment application you will see here you can see this VF demo tab is available. If I click on this so it will show you the data which is available under visual force page. So it is kind of showing in form of VF page or web page. Okay so here at the end you can see tab is available and if I click on this so here it is rendering. So whatever you write whatever code you write in your visual force page that will be rendering here so it is kind of a web page. Okay so this is first way like how you can create a tab and how you can add it in the navigation bar. If you miss this tab in this navigation bar due to any reason so what you can do just click on this pencil icon and from here also you can add this item. But right now it is already added so you can just ignore this but if you want to add so you can add it through pencil icon in this navigation. Yep so now I can see Furus mentioned one thing so visual force like if you want to do PDF generation. Yeah so for that purpose generally we use visual force nowadays. Yeah so this is true and how we can do so you can just search the code on internet and you can use that code in your system so that you can just generate PDF with the help of visual force. Yeah so Pooja is asking why to use apex component so basically there is one more thing along with visual force page we have visual force component as well. So if you create this visual force component then it will show you that apex component right. So I also never worked much on visual force pages because classic got outdated in 2017-18 and that time lightning was in pace. I also started my journey with lightning experience so I just know the basics of visual force that I am just explaining with you. I am just discussing with you so that you also can understand like how we can write the code here. Right so I hope you understood like how we can use it as a tap. Now next I am going to explain like if you have created your visual force page so how you can add that page on app or home or record page. So if I take you here so you can see we have home page. So now I am going to place our visual force page on this home page and app page and record page are similar. So if you understand how we can place our visual force page on home page so with similar steps you will be able to place your visual force page on app page and record page. So you just need to search for visual force and you can drag and drop it anywhere wherever you want to place your visual force page. Okay so here you can see it is showing no visual force pages available. Right so now listen it carefully one thing that we need to configure. So from here you will be searching your visual force pages. You will be editing your visual force page and here you will see one checkbox. So right now this checkbox is unchecked available for lightning experience, experience builder site and the mobile app. So right now this page is not available for these places. That's why when I try to search that visual force page so it is not available here. So what I need to do I just need to enable this checkbox. So once this checkbox is enabled it means that visual force pages are available to place on the like lightning experience pages. It can be app page home page or record page. Right so I'm just enabling this and clicking on save. So now that setting is modified if I go here and refresh the page. So now I will be able to see that visual force page. So here I am searching for visual force. So now you can see we have demo one is available here. So right now in my org I have only one visual force page. That's why it is available here like this only one and this way it will render on the page. So if I click on save so it will ask for yeah it is saved. I am just moving back and on home page you will see the visual force page. Here it is. So whatever you have created whatever you have whatever code you have implemented through visual force page. So it will render here right and it will be available to use. So this way you can create visual force page and it can be placed on home page. So right now I just placed it on home page. If you want to place it on the record page so the steps will be same. You can open any record and you can edit the page and anywhere you can place this visual force page. So I think it is very easy to understand so no need to do the repetitive steps. So for app page home page and record page placement of visual force page is same right. So I hope with this you also understood this step. Now next is how to launch visual force page through quick action. Like if you click on a button and if you want to pop up your visual force page so how it can be done. So that I'm going to show you right away. So for example if we go to position and open any position record. So here I want a button if I click on that button so that visual force page should render or should pop up. Okay so what I'm going to do so visual force page is already available. So I'm going to object manager and here I'm searching for position. So here I have an option button links and actions right so I'm just clicking on this. So at top right corner I have an option for new action so I'm clicking on it. So here we need to select custom visual force right so this quick action we used while using screen flow. At the time I selected flow when we'll be working on lightning web components in that case you can select lightning web component. If you're implementing lightning or a component so you can select lightning component only but right now we have created a visual force page and we want to launch that visual force page through quick action. So what I need to do I am selecting visual force but here it is not available create a visual force page to use as a custom action. Let me just refresh. Okay so actually what I need to do so here we need to do some modifications so we just need to set some statements so that this visual force page will be available. To launch through quick action right so I'm just going to modify the code and then you will be able to see like how we can launch it. But it should be launched through this so let me just figure it out give me one minute. Okay so I'm just going to modify this visual force page. So these are simple tags that I'm going to use so here in the first line like show header it is false. So header won't be shown when this page will be rendered right and standard controller means account so this visual force page will be connected with account. So if you want to launch any visual force page through quick action so you just need to write the code like this. If you don't write the code like this so it won't be available there it should be connected with particular object and then only you will be able to use that. Right so here I'm going to create a table then inside table we have TR tag so TR is for table row in tables we have rows. So if you want to create a row so you will be using table row and then inside table row if you want to put some data. So you can use TD TD stands for table data. So here I'm using TD and so first table data is account name and in second I am writing apex colon input field and here I'm going to write value right. So now you just you just need to understand what it what is happening here. So this will be creating a row in table we have rows. So this statement will be creating a row in that row we will be having two columns. First first column will be having this table data that is account name and second column will be having this table data that is account name. So this is actually an expression. So we are using this standard controller account here through that standard controller we are fetching the name. That is the API name of that particular record. So on any particular record if you are placing this or you are launching it from that particular quick action. So account name will be populated in this input field right so it is basically predefined. Now after this TR if you want to create one more TR. So here what I'm going to do I'm creating one more TD and here I'm writing apex colon command button. So command button value will be safe and here I'm writing action as save then I'm just copying it and pasting. So first command button it is labeled as save and second one I'm labeling as cancel and action will be cancel. So these are two buttons those will be available there. So these are some Salesforce specific elements apex colon input field apex colon command button right. So through these buttons will be created and this input field will be creating input box where account name will be available. So now I'm going to save it and like here you can see the result. It is previewed automatically if I close and preview it again. So you will see the result like this. So here we have two rows. So you can see in the code we used TR twice. This is first row and this is second row right. So now in the result you can see we have a table which is having two rows in first row. We have this account name which is TD and this is like input box where we can have some data. This is also through TD. So this is first table data and this is another table data right. Then in another table row we have two times TD and these are apex command button. So here you can see we have save and cancel two buttons available right. Now if I go here and refresh the page. So I am just refreshing it. I don't know why it is still not available. So I'm just checking. Let me just check the setting again. So security is fine like system admin can access. So here it is unchecked. So I'm just saving it. I don't know why it is unchecked because we earlier checked this checkbox. Now let me just check whether it will be available now. So I'm moving to accounts clicking on button links and action clicking on new action. Yep. This time it is available. So I think maybe this is because of that checkbox right. So here I can just provide a label. So I'm labeling that labeling it as launch visual force and just clicking on save right. So button is created and button is connected with visual force page. So here it is right. So make sure I'm just showing you this again make sure whenever you create your visual force page. So this checkbox is checked. If it is checked then only it will be available to use. Okay. So moving back to accounts buttons and links and actions. Yeah. So here it is and launch vf button is created. Now we need to go to visual sorry page layout and here I can add that button. So I'm just clicking on mobile and lightning action and here it is available launch visual force. I'm just clicking on save. So moving here and I'm going to sales application. So under each account record you will see that button launch visual force. If you click your visual force page will be launched and this way you will have the data. So here you can see account name is also populated on this account account name is 1304. So you can see it is populated here automatically right. If you want to change it like if you want to add some more digits and if you hit save. So it will be modified you can see right. So this way you can just place your visual force page on quick action as well. Right. So I hope you understood this. So there were some issues like I just created a different code. So you can just try it as well. Right. Now let me see if we have any question. Yes. So similar to aura we can launch our visual force space through like quick action similar to model or so that we is asking can we create the visual force page in lightning form lightning form means what can you please elaborate more. Yeah. I think we can call it using I frame Vishal. If you want to build recruitment apps so you need to go through the videos that document is not available. Yes. Yes. Rajiv I just did it on account. Yeah. I did it. It was on position but if we created it for account like the standard controller account so it will be on account. Right. Next we have one more thing like override standard button on links. So what we can do like right now what happens if you click on this new button if you click on this new button so like this page opens. So if you want to override the standard behaviors of the buttons so you can just override it using visual force page. So let me just see how we can do that. Okay. So what I'm going to do the code which I have implemented here that code I will be using and I will be like modifying the added button. So basically I'm moving here under button links and actions. So on each record if you go here so I'm not overriding new because it is on list view so instead of that if we open any record so on each record we have this added button. So I'm going to override this added button. So if we go here so we will find this added button available here and if I click on added so here these options are available. So we have a standard button that is added. Now if you want to override so from here you can select visual force page. Right. So visual force page will be available and lightning experience mobile will be using the Salesforce classic override and Salesforce classic override is using the visual force page that we created right now. So I'm just clicking on save. So now what will happen that added button won't be doing its normal functionality. It will be just rendering that visual force page. Right. So from here if I click on this added button so you can see we are viewing this visual force page. Right. So if any time if you want to override the standard functionality so for that purpose also we can use this visual force page. So I'm just reverting it back. So I'm selecting no override and clicking on save. So now if I refresh so you will see the added option. So from here if I open any record click on edit so you will see the standard behavior. And right now like it is showing in classic why so because so here we need to use it. Right. So accordingly change these options. Okay. It is not allowed. So we need to choose it. Yep. So I think it is a cash issue. So if you refresh multiple times so that will be resolved. It will be giving you the lightning experience. Yeah. Here it is. If I refresh so now I can see the lightning look and feel. So if you open any of the account record and if you edit it so you will see lightning experience. Okay. So I hope this way you got to know about the standard behavior of visual force pages and tomorrow I will be explaining few more things. So Jenna it will be very time consuming process for me so I won't be able to do that because I don't have much time for this. So Kalyan daily class time is 7 30 p.m. And you can just go through this session tracker. This session tracker link is available in the description. So here a day time date everything is mentioned. So you can just follow this. So you can find the link in the description of the video. Yes Kalyan we have WhatsApp groups so that link is also available in the description. Yeah. So Jenna we write standard controller equals to account so that when I am using account dot name. So this visual force page can relate like this name is account field. That's why I connected this visual force page with account s object. Right. So in next sessions you will understand these things like here in the third session you will be understanding how we can connect with different s objects. So I will be creating a custom controller as well like apex class that we'll be calling in the visual force page. So in three in these three sessions you will be able to understand lots of things. Yes. We already showed like I already showed you through button also you can launch your visual force page. Akash. Yeah. I use like but for this boot camp I am not using slack we are communicating through telegram. So Ravi Shankar you are asking can we create visual force like yeah we can we can apply that look and feel but it will be very difficult but I think we can apply Salesforce lightning design system in visual force pages but instead of doing that you can just create those lightning components directly. Okay Kalyan I am just going to share telegram group link in the chat so that you can access. Okay so guys if you have any more question you can ask if no then you can leave and at 9 p.m. we'll be having one more boot camp session that will be on cybersecurity. So I can see huge response on that boot camp as well and it is very demanding technology and Salesforce itself says like they have more than 80,000 jobs for that particular role. So if you have not attended so just start following all the sessions of cybersecurity. So till now we have completed total six sessions right and this week we'll be conducting day seven, eight and nine so for knowledge wise this boot camp is very much important. So you will get to know about network. So Sumit explained these things very in very detail and today you will be like in this week you will be understanding different things related to cybersecurity. So if you follow this you will be able to learn things pretty well and please spread this information with other folks as well. So this is it for today and tomorrow I will be explaining some more examples related to visual force page. Yeah, so when I basically if you create a quick action if I show you the quick action so it will open like a model so if I click on this launch visual force so this way it is opening it in form of model through quick action but if you override any button so it will be redirecting it won't be opening a pop up. Okay, so I hope everybody understood whatever I demonstrated today and if you didn't understand much so no need to worry because this is outdated and we rarely use visual force pages in lightning experience. Okay, so thank you so much guys. See you tomorrow at same time. Thank you for joining this session and please spread the word like from next week integration sessions will be there so those will be important for you because integration is demanding. Okay, thank you so much. See you tomorrow same time.