Visual Force Pages In Salesforce
What is a VisualForce page?
Visualforce is a web development framework that allows developers to build custom user interfaces for Salesforce applications. It is a part of the Salesforce platform and enables developers to create pages using a markup language similar to HTML, combined with a set of tags and controllers to access data and perform actions.
Visualforce pages are used to create custom user interfaces for Salesforce applications. These pages can be used to display, edit, and interact with data stored in Salesforce. Visualforce pages can be designed to have a similar look and feel as standard Salesforce pages or can be completely customized to meet specific business requirements.
The essential elements of a Visualforce page consist of:
- Markup Language: Visualforce uses a markup language that resembles HTML. It includes various tags and attributes specific to Visualforce that allow developers to define the structure and layout of the page.
- Controllers: Controllers are Apex classes that provide the logic for the Visualforce page. They can interact with the Salesforce database to retrieve and manipulate data, perform calculations, and handle user input.
- Extensions: Extensions are additional Apex classes that can be added to a Visualforce page to provide extra functionality or data processing capabilities.
- Visualforce Tags: Visualforce provides a set of tags that can be used to create different types of components such as input fields, buttons, tables, and more.
- Custom Components: Visualforce allows developers to create reusable custom components that can be included on multiple pages, enhancing code reusability and maintainability.
How to Create VisualForce Page in Salesforce Lightning
To create a visualforce page, you need a Salesforce developer account. To create a Salesforce account, you can follow the instructions shown in my previous post. Creating A Salesforce Account
Once you log in to your Salesforce account, open your developer console from the settings tab.
Creating and operating in a VisualForce page:
- In the developer console, click on File => New => VisualForcePage.
- Give your page a name and click on Create.
- Once created you will be left out with the default page syntax.
- If you are familiar with HTML, this will be so similar. Inside the <apex:page></apex:page> tags you just start typing your page design.
- To help you with different page tags, you can head on to the Official visualforce developer guide.
- Once you have added your desired codes, you can preview the page by clicking the preview button on the left top of your developer console.
- While coding, just type in <apex: and press space, you will be listed with all the available tags that you can use. Choose one and press Enter. Your code will be applied there.
Using HTML Tags:
- Many HTML tags are available and can be used in a visual force page.
- So, most of the HTML tags that are related to UI design are available to use in visualforce pages.
- Example :
<apex:page>
<apex:pageBlock>
<div>
<p> A new paragraph tag
</p>
</div>
</br>
<b>This is a Bold Text</b>
</apex:pageBlock>
</apex:page>- Make sure all those tags are wrapped inside an apex Page Block Section block.
Using Styles:
· We can either use the ‘Style’ keyword and write all the styles on the tagline as shown below.
<apex:page>
<apex:pageBlock>
<div style ="margin-top:100px">
</div>
</apex:pageBlock>
</apex:page>· Or we can use the keyword StyleClass and mention a CSS class that can be used on multiple divisions that follow the same style. But the CSS style should be typed inside a separate block.
<apex:page>
<apex:pageBlock>
<div styleClass ="divStyle">
Sample Font
</div>
<div styleClass ="divStyle">
Sample Font2
</div>
</apex:pageBlock>
<style type="text/css">
.divStyle{
font-style: italic;
}
</style>
</apex:page>Using Scripts:
- Similar to the usage of Style tags, you can use the tag lines <script> </script> and type javascript functions, that can be used inside buttons.
- Use the below simple code snippet to kick-start your first basic visual force page.
<apex:page>
<apex:form>
<apex:pageBlock>
<div class="divStyle">
<apex:outputPanel id="messagePanel">
<apex:outputText value="Just Button Text" />
</apex:outputPanel>
</div>
<div class="container">
<apex:commandButton value="Login" styleClass="login-button" onclick="myButtonClick()" />
</div>
</apex:pageBlock>
</apex:form>
<style type="text/css">
.divStyle {
font-style: italic;
}
</style>
<script>
function myButtonClick() {
// Perform any JavaScript operations here
var message = "Button clicked!"; // Sample message, you can customize it as needed
// Update the message in the Visualforce page
document.getElementById("{!$Component.messagePanel}").innerHTML = message;
}
</script>
</apex:page>- To make your page look more beautiful, you can use an inbuilt style class called a lightning style sheet. Just use the below property at the definition of your visual force page, and your page will be more organized.
<apex:page lightningStylesheets="true"></apex:page>Usage Of Controllers:
Apart from javascript and type script functions, visual force pages are extensively known to use controller classes to perform actions within your visual force pages to make it a fully functional web page.
But, without knowing about the database side, it won’t be comfortable to use controller classes.
Let us create a simple controller action first, and then let us use the controller class to design a fully functional page to create a new contact object in your data table.
To use a controller in your visual force page, you just need to use Controller =”myController” which is a property of the apex page tag. So, using that define a visual force page and provide your controller class name.
Use the below code snippets as a basic template.
//page must be defined as a new visualforcepage
<apex:page lightningStylesheets="true" controller="newController">
<apex:form>
<apex:pageBlock>
<div style="margin-top : 250px; margin-bottom:100px;">
<apex:outputPanel id="messagePanel">
<apex:outputText value="{!labelText}" />
</apex:outputPanel>
</div>
<div class="container">
<apex:commandButton value="Change to After" reRender="messagePanel" action="{!changeText}" />
<apex:commandButton value="Change to Before" reRender="messagePanel" action="{!changeTextBack}" />
</div>
</apex:pageBlock>
</apex:form>
</apex:page>
//Controller class must be defined as a new apex class
public class newController {
public string labelText {get; set;}
public newController(){
labelText = 'Before Button Click';
}
public void changeText(){
labelText = 'After Button Click';
}
public void changeTextBack(){
labelText = 'Before Button Click';
}
}Once you have defined the new page and controller class, save them and click on Preview. Now if you click on the two buttons you can notice the change in the text above.
Explanation: The usage of most of the tags on the above page is self-explanatory. So, visualforce page buttons give us two ways to provide click actions. One is using the onClick property and the other is using the action property. The onClick property revolves more around typescript functions and the action property is used for controller class methods usage. And inside the action stage, we need to enter the controller method inside curly braces starting with an exclamation mark. ({!changetext}).
The re-render property is used to refresh any panels, using their id to reflect the changes made on the controller side. In our case, we have changed the text of our text display. To show the new change, we use the re-render property.
Now let us modify the above page into something more useful, by adding an Account object into the salesforce account table by getting Account Name from the user.
//page code change
<apex:page lightningStylesheets="true" standardController="Account" extension="newController">
<apex:form>
<apex:pageBlock>
<div style="margin-top : 250px; margin-bottom:100px;">
<apex:outputText value="{!message}">
</apex:outputText>
<apex:inputText value="{!newAccountName}" />
</div>
<div class="container">
<apex:commandButton value="Save Account" reRender="messagePanel" action="{!SaveAccount}" />
</div>
</apex:pageBlock>
</apex:form>
</apex:page>
//Controller code change
public class newController {
public string newAccountName {get; set;}
public string message {get; set;}
public Account newAccount {get; set;}
public newController(){
newAccount = new Account();
message = 'Enter your account Name';
}
public void SaveAccount(){
if(string.isBlank(newAccountName)){
newAccount.Name = newAccountName;
Insert newAccount;
message = 'Account Created';
}
else{
message = 'Account Creation Failed';
}
}
}Notice that, I have added the standard Controller property, to this page. So, every object that has been created in Salesforce has its default controller. So, we can either use that or define our controller. Usually, standard controllers are used where we operate only with a single salesforce object.
In our case, we are using only an account object, so we can end our page without defining a separate controller just by using the {!save} method from the standard account controller.
So, if we are using a standard controller, our custom controller should be entered inside another property named extension. You can eliminate the usage of standard controllers and just use our custom controller as before.
End Note: That is all about a visual force page in Salesforce, make sure to play around with different codes and possibilities on your own to learn more about them and if you have any queries and errors feel free to leave comments and I will try my best to fix them.
