therishabh/salesforce-visualforce

Salesforce Visualforce

What is Visualforce ?

• Visualforce is the component-based user interface framework for the Force.com platform.
• The framework includes a tag-based markup language, similar to HTML. So just like in HTML we have tags like tag and p tag etc. Similarly in visualforce we have tags.
• A web development framework that allows you to create custom user interfaces that can be used in the Lightning Platform
• Each Visualforce page can be accessible by a unique URL
• Visualforce Page uses tag based markup which is similar to HTML. Each tag has its own properties and corresponds to a user interface element such a block, section, list, row, etc.
• Lot of flexibility as VF markup can easily be mixed with generic HTML, Javascript, CSS which in turn provides flexibility in creating custom screens for users.
• Visualfofce has nearly 150 built in components that you can use on the page to build custom screens & pages.

When you should use Visualforce ?

Visualforce consists of a tag-based markup language that gives developers a more powerful way of building applications and customizing the Salesforce user interface. With Visualforce you can:

• You can override the standard salesforce pages with Visualforce page.
• Create your own custom flow control through an application.
• Define navigation patterns and data-specific rules for optimal, efficient application interaction.

Advantages of Visualforce

• Visualforce is a Model View Controller (MVC) development style.
• Visualforce Editor panel is present for every visualforce page.
• Visualforce has Huge number of components.
• Can be integrated with HTML, CSS, Ajax, Query.
• Visualforce is flexible and customizable with web technologies.

Visualforce tags can be divided to different types:

• Input tags
• Output tags
• Select tags
• Form tags
• Page tags
• Action tags
• Style tags

Page Tags

Visualforce Page tags:

• apex:page
• apex:pageMessage
• apex:pageBlock
• apex:pageBlocktable
• apex:pageBlockButtons
• apex:pageBlockSectionItem

apex:page

The basic tag that creates a visualforce page. Can be used only once in a page and all visulforce Tags have to be enclosed in this tag.

<apex:page>
  <h1>Hello Title </h1>
</apex:page>

apex:pageblock

A tag that creates an area within the page where multiple sections can be created and fields, buttons, tables or links can be displayed. It by default inherits the standard salesforce page style.

apex: pageBlockSection

This tag helps to create a section inside a page block. Multiple sections can be created in a page block and each section can be used to display any fields (input/output).

<apex:page>
   <apex:pageBlock title="Block One">
    <apex:pageBlockSection title="Section One Title" columns="3">
       <apex:pageBlockSectionItem labelTitle="item1 title">Item 1 here</apex:pageBlockSectionItem>
       <apex:pageBlockSectionItem labelTitle="item2 title">Item 2 here</apex:pageBlockSectionItem>
       <apex:pageBlockSectionItem labelTitle="item3 title">Item 3 here</apex:pageBlockSectionItem>
     </apex:pageBlockSection>
       <apex:pageBlockSection title="Section Two Title" columns="4">
       <apex:pageBlockSectionItem labelTitle="item1 title">Item 1 here</apex:pageBlockSectionItem>
       <apex:pageBlockSectionItem labelTitle="item2 title">Item 2 here</apex:pageBlockSectionItem>
       <apex:pageBlockSectionItem labelTitle="item3 title">Item 3 here</apex:pageBlockSectionItem>
       <apex:pageBlockSectionItem labelTitle="item4 title">Item 4 here</apex:pageBlockSectionItem>
       </apex:pageBlockSection>
   </apex:pageBlock>
</apex:page>

apex:pageBlockButton

Whenever < apex:commandbutton> tag is used, a button is created in a based on the position where the tag is written. But most of the times, we may want to place the buttons on the top or bottom of the page. This can be achieved with the help of this tag.

apex:pageMeaage

This component should be used for presenting custom messages in the page using the Salesforce pattern for errors, warnings and other types of messages for a given severity. See also the pageMessages component. There is one required attribute for this tag named Severity.

Severity: The severity of the message. Severity: Values supported are: 'confirm', 'info', 'warning', 'error' Strength: The strength of the message. This controls the visibility and size of the icon displayed next to the message. Use 0 for no image, or 1-3 (highest strength, largest icon).

<apex:page>
<apex:pageBlock>
    <apex:pageMessage summary="validation message" severity="confirm" strength="2"></apex:pageMessage>
</apex:pageBlock>
</apex:page>

---

Input Tags

Input tags used to capture user input for any standard or custom object field, and respects any metadata that is set on the field definition, such as whether the field is required or unique, or whether the current user has permission to view or edit it. Example of input tags:

- <apex:inputsecret>
- <apex:inputcheckbox>
- <apex:inputFile>
- <apex:inputHidden>
- <apex:inputField>
- <apex:inputTextArea>

Output tag and OutputLink tag

apex:outputLabel :
A label for an input or output field. Use this component to provide a label for a controller method that does not correspond to a field on a Salesforce object.

apex:outputLink:
This tag creates a link to a URL. The below code displays the text www.salesforce.com as a hyperlink text on the visual force page and when this link is clicked the URL specified in the value attribute will be opened. The body of an < apex:outputLink > can be text or an image

Q. What is the architechture of Salesforce ? or MVC Architecture ?

Ans :

Detailed examples:

Examples of M : (Model)
object, Relationship, Field etc

Examples of V: (View)
Logo, Tab, Button, Link, Page layout, Visualforce page etc

Examples of C: (Controller)
APEX code, WER, PB, Trigger, VR, AP etc

IQ: TCS

Q. What is force.com ?

Ans :
Force.com = platform
Salesforce.com = software (SFDC)

(but everything belongs to company Salesforce)

Force.com is example of PAAS
Salesforce.com is example of SAAS
(IAAS = not useful for our career)


Extra point:

Whenever we do coding in SF, actually, indirectly we are working on Force.com platform
Dev console = Force.com IDE

So we can conclude,

admins/clients work on = salesforce.com layer
devs work on = salesforce.com and force.com layer

https://chromewebstore.google.com/detail/salesforce-advanced-code/lnkgcmpjkkkeffambkllliefdpjdklmi?hl=en&pli=1

Q. Why to use Visualforce page in project ?

Ans:
To work on complex pages.

To display records from multiple objects.

When we want more than 2 column display of data. (IQ)

To edit multiple records at the same time.

To create multiple records at the same time.

Custom analytics capabilities.

(Show some advance charts etc using JS code. Ex: Radar chart)

Show lightning component in Classic page. (Bonus topic)

Moral:
When u cant do the needed things in "declarative" mode (standard record page/form given by SF), then opt VFP.

---

IQ / JQ: IMP
Declarative / Config approach - working on project without code
Non declarative / Customization approach - working on project with code

Admin syllabus = declarative
Dev syllabus = non declarative

What is VFP ?

A proprietary web development language created by Salesforce.com
Syntax for this language is like HTML.
Fits into the "View" level of MVC.
Allows developers to build custom web pages.
Not intended for pure custom website creation, only useful internal work of SF.

Strength: It allows developers to easily create a complete custom page that has the exact look and feel like a "standard Salesforce page"

Every Visualforce page start with <Apex:Page>

Create Visualforce Page:

How you'll check is opened page is visualforce page or normal ordinary page, so for this we need to check in URL, if in URL /apex/ keyword exists that means it is visualforce page.

Quiz: Fill in the blank
The way, it's hard to imagine a Trigger without xxxx (which gives business logic to Irigger), on the same note, it's hard to imagine a VEP in RTP (real time project) without a "Controller"!!

xxxx => Apex Class

What is controller in VFP ?

The way APEX class gives "Business Logic" to Triggers.
Controller gives "Business Logic" + "Data" to VFP.

Controller is like a backbone of Visualforce page. because VFP itself is Dumb. it is completly depends on controller.

Types of Controllers in VFP ?

1. Standard controller
2. Custom Controller
3. Controller Extensions AKA Extensions

(controllers => Backbone!)

IQ: Controllers can be what?

Or

what entity can become controller?

1. Object (standard or custom)
   or
   
2. Apex class
   
   Nothing else!!

Interviewer can ask you, tell me 2 reasons why we need visual force page ?

• Visualforce pages allow for the creation of custom user interfaces tailored to specific business needs.
• They enable the incorporation of custom logic and seamless integration with external systems.

why we need controller in visualforce page ? one line answer

A. Controllers are needed in Visualforce pages to handle business logic and manage data interactions between the user interface and Salesforce.

Types of Controllers:

1. Standard Controllers :

• It deals with Standard as well as Custom objects.
• We can write the standard object name or custom object name as a parameter for fetching the records from the database
• They provide the standard functions like save,delete or create records.
• Standard controllers are very helpful in designing a UI for the (custom) pages
• Due to this, we can create a complete page with lessefforts using the controllers

Syntax :
<apex:page StandardController="Account"> This is for accessing STANDARD OBJECT
<apex:page StandardController="Pen__c"> This is for accessing CUSTOM OBJECT

As we know visual force page is kind of less used in the market in that way Standard controller is rarely used in the market. You can say standard controller almost useless because of some limitations

Standard controller : When our VFP is dependent on any controller which is actually an object (standard or custom, does not matter) then that controller is called as Standard Controller.

Note: At a time, only 1 object can be used. Either standard or custom.

<apex:page standardController="Account">
    <apex:form>
        <apex:pageBlock title="My Content">
            <apex:pageBlockButtons>
            	<apex:commandButton action="{!save}" value="Save Me"/>
            </apex:pageBlockButtons>
            
            <apex:pageBlockSection title="My Content Section" columns="2"> 
                <apex:inputField value="{!Account.name}" required="false"></apex:inputField>
            	<apex:inputField value="{!Account.fax}" /> 
                <apex:inputField value="{!Account.phone}" />
            	<apex:inputField value="{!Account.accountNumber}"/> 
                <apex:inputField value="{!Account.industry}" />
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>
</apex:page>

Output :

Create a visualforce page tab and add it into our app.

Issues with Standard Controller ?

1. We can not show data from multiple objects
2. We can not write our logic in some APEX class and call the same when button is pressed
3. We can not fetch data from database
4. We can not do any DML
5. Relationship data fetching process is not feasible.

...lots of limitations

2. Custom Controllers :

• These are written in a class, using apex code
• These are used when we cant perfoem the needed work using the standard controllers
• When we want additional functionality in the page, by processing the objects, we need to use Custom Controllers
• They are used to create rich Ul with complex data sets ete

Syntax :
<apex:page Controller="MyControllersClass"> These dont use any object names as parameter.

here,
MyControllersClass is an apex class which controls the VF actions and variables

Example:

<apex:page controller="ExampleClassForVFP">
    <apex:form>
    	<apex:pageBlock title="My Content">
        	<apex:pageBlockSection title="My Content Section" columns="2">
            	<apex:outputLabel>Enter Name: </apex:outputLabel>
                <apex:inputText value="{!userName}" />
                <apex:commandButton value="Click Me" Action="{!ShowMessage}"/>
                <apex:outputLabel>{!message}</apex:outputLabel>
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>
</apex:page>

public class ExampleClassForVFP {
    public String userName {set;get;}
    public string message{set;get;}
    
    public void ShowMessage(){
        message = 'Welcome '+ userName;
    }
}

IQ: TCS

<apex:inputText> Vs <apex:inputField> ?
Ans:
inputField - "Copy" the field from that object which is mentioned as controller and display on a VE page | like сору paste work
inputText - it will help to create a field from scratch | stand alone field | new creation | not connected to any object.


Means, after using <inputText>, we have to take extra step like ######## to ensure data will go to DB, Which we don't need in case of <inputField>

####### => DML

IQ: Samsung

Benefits of using Command Button?

1. After pressed, it will send VFP data to server (Sync concept)
2. It will call associated function
3. Update in dack wiem latest data present im server. it will bring fresh data! (Sync concept)

IQ: What are properties in Salesforce?

(the key players in the F'end to B'end and B'end to F'end transfer!)

Set = we are giving rights to VFP to set values in the related variables present in APEX Class (frontend to backend)

Get = we are giving rights to VFP to get values of the related variables on VFP present in APEX (backend to frontend)

Example:
public string UserName {set;get;}
public string message {set; get;}


public string UserName {set;}
when error will come ?

public string UserName {get;}
when error will come ?


IQ: Morgan Stanley: What types of binding present in VF:

1. Data binding
2. Action binding
3. Component binding (rarely user, almost outdated) (see below code just for over view) (people are using Ltng components)

3. Extension Controllers :

• It gives the benefit of Standard as well as Custom Controllers.
• We canuse the fascility or ease that we get in Standard controller as well as we can get the flexibility provided by the customr controller.
• We can get all these benefits in one single page using the Controller Extension
• We cant use more than 1 object in Standard Controller,as well as we cant use more than 1 class in Custome controller. But using Controller Extension, we can go beyond these limitiations.
• Controller Extenstions are widely used in higher level Visual force page where we want to implement complex kind of logic n produce the related UI

**Syntax:**

<apex:page standardController="Account" extension="Class_1, Class_2, Class_3"></apex:page>

Example:

<apex:page standardController="Account" extensions="MyControllerExtensionExample" >
    <apex:form>
    	<apex:pageBlock title="Page Block 1">
        	<apex:pageBlockSection title="Page Block Section 1 | Custom Controller Example" columns="2">
            	<apex:pageBlockSectionItem>
                	<apex:commandButton value="Greeting" Action="{!ShowGreeting}"/>
                </apex:pageBlockSectionItem>
                <apex:pageBlockSectionItem>
                	<apex:outputLabel>{!message}</apex:outputLabel>
                </apex:pageBlockSectionItem>
            </apex:pageBlockSection>
        </apex:pageBlock>
        
        <apex:pageBlock title="Page Block 2">
        	<apex:pageBlockSection title="Page Block Section 2 | Standard Controller Example" columns="2">
            	<apex:pageBlockSectionItem>
                    New Company : <apex:inputField value="{!Account.name}" required="false"/>
                </apex:pageBlockSectionItem>
                <apex:pageBlockSectionItem>
                    <apex:commandButton value="Standard Save" action="{!save}" />
                </apex:pageBlockSectionItem>
            </apex:pageBlockSection>
        </apex:pageBlock>
        
        <apex:pageBlock title="Page Block 3">
        	<apex:pageBlockSection title="Page Block Section 3 | Using Custom code for Save" columns="2">
            	<apex:pageBlockSectionItem>
                    New Company : <apex:inputText value="{!VariableForStoringAccountName}"/>
                </apex:pageBlockSectionItem>
                <apex:pageBlockSectionItem>
                    <apex:commandButton value="Custom Save" action="{!mysave}" />
                </apex:pageBlockSectionItem>
            </apex:pageBlockSection>
        </apex:pageBlock>
        
    </apex:form>
</apex:page>

public class MyControllerExtensionExample {
    
    public string VariableForStoringAccountName {set; get;}
    public string message {set; get;}
    
    public MyControllerExtensionExample(ApexPages.StandardController stdController) {
        // any code
    }
    
    public void ShowGreeting() {
        message = 'Welcome to Extension Demo';
    }
    
    public void mysave() {
        Account acc = new Account();
        acc.Name = VariableForStoringAccountName;
        acc.Industry = 'Chemical';
        
        insert acc;
    }
}

IQ: TCS :If ur calling an element (function/method) present in the Controllers to VF page, and assume u r having 3 such extension classes in which that element is present with EXACT SAME NAME - then can u tell me, from which class the element will be called? Will it give any error ?

Ans : It will not give an error, and function will execute from left to right class, if that function will find in first class then it'll execute and leave next classes.