Visualforce pages

                                                                   Visualforce page

We will start VF pages from basic and then after we will go to expert level.

Tab Style: Tab Style means that on which tab you want to redirect your page.

Side Bar: A Boolean value that specifies whether the standard Salesforce sidebar is included in the page. If true, the sidebar is displayed. If not specified, this value defaults to true.

Rendered: This to rendered(ie., display) particular filed or section based on boolean value.  In the controller you need to have get method to assign the value for this variable.

Eg:

<apex:inputField value="{obj.Filed_C}"  Rendered="{!val == true}"/>

controller:

public boolean val{get;set;}

method(){
val = true;
}

RederAs:It is render a VF page as PDF or some other

Eg:

<apex:page controller="mmm" rederAs="pdf">

ReRender:This is to ReReder(ie.,Reload) some fields, or sections  after some operation/change. For this you need to assign id to field, sections. 

Eg:

<apex:actionRegion >
     <apex:inputField value="{!xxxx}"  >   
                        <apex:actionSupport event="onchange" rerender="yrs,yrss,yrsss,nodays,nohours,nominutes" action="{!xxx}" >
                            <apex:param name="Para" value="{!rowNum}" assignTo="{!IndexValue}" />                            
                        </apex:actionSupport>
                    </apex:inputField>   
                </apex:actionRegion>
</apex:inputFiel>

yrs,yrss,yrsss,nodays,nohours,nominutes  are the id's of field and sections

1. How to write hello on VF page.

Vf page: 

<apex:page>
  <apex:form>

 Hello!

</apex:form>
</apex:page>

<apex:page> = The basic tag that creates a visualforce page. Can be used only once in a page and all visualforce Tags have to be enclosed in this tag.

<apex:form> = It helps to create the page as a form. This tag needs to be included in the page to accept input from the users. It's a best practice to have only one < apex:form > tag in a page instead of including it many times.

2. How to make page block on VF page.

Vf page: 

<apex:page >
  <apex:form >

  <apex:pageBlock title="My Accounts" id="acc">

  </apex:pageBlock>
  </apex:form>
</apex:page>

<apex:pageBlock> = That tag creates an area in the page where we can make multiple section , fields , buttons or links. It by default inherit standard salesforce page style.

Id = An identifier that allows the pageBlock component to be referenced by other components in the page.

Title = The text displayed as the title of the page block section.

3. How to make page block Section on VF page.

Vf page: 

<apex:page >
  <apex:form >
  <apex:pageBlock title="My Accounts" id="acc">
   <apex:pageBlockSection title="Accounts" collapsible="false">
 
   </apex:pageBlockSection>
  </apex:pageBlock>
  </apex:form>

</apex:page>

<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).

Collapsible = If you want to show Section then salesforce has given us default true in VF pages and if you don't want section then mention collapsible false.

4. How to use input field in page block Section on VF page.

Vf page: 

<apex:page standardController="Account">
  <apex:form >
  <apex:pageBlock title="My Accounts" id="acc">
   <apex:pageBlockSection title="Accounts">
   <apex:inputField value="{!account.name}"/>
   <apex:inputField value="{!account.rating}"/>
   <apex:inputField value="{!account.accountnumber}"/>
   <apex:inputField value="{!account.type}"/>
   </apex:pageBlockSection>
  </apex:pageBlock>
  </apex:form>
</apex:page>

<apex:inputfield> = This tag helps to display fields of any standard or custom object (Any Sales force Object) on the visualforce page.When used in an < apex:pageBlockSection >, < apex:inputField > tags always display with their corresponding output label.

Standard Controller = In this controller we have mentioned standard object of salesforce.

Value = A merge field that references the Salesforce field that is associated with this inputField. For example, if you want to display an input field for an account's name field, use value="{!account.name}". You cannot associate this inputField with a formula merge field of type currency.

! declare the name of account. ! that sign is the path from there you can get any value.

5. How to make page block button on VF page.

Vf page: 

<apex:page standardController="Account">
  <apex:form >
  <apex:pageBlock title="My Accounts" id="acc">
   <apex:pageBlockSection title="Accounts">
   <apex:inputField value="{!account.name}"/>
   <apex:inputField value="{!account.rating}"/>
   <apex:inputField value="{!account.accountnumber}"/>
   <apex:inputField value="{!account.type}"/>
   </apex:pageBlockSection>
   <apex:pageBlockButtons>

   </apex:pageBlockButtons>
  </apex:pageBlock>
  </apex:form>
</apex:page>

We will always mention Page Block Button outside the Page Block Section.

6. How to Command button on VF page.

Vf page: 

<apex:page standardController="Account">

  <apex:form > 

  <apex:pageBlock title="My Accounts" id="acc">

   <apex:pageBlockSection title="Accounts">

   <apex:inputField value="{!account.name}"/>

   <apex:inputField value="{!account.rating}"/>

   <apex:inputField value="{!account.accountnumber}"/>

   <apex:inputField value="{!account.type}"/>

   </apex:pageBlockSection>

   <apex:pageBlockButtons >

   

   <apex:commandButton value="Save" action="{!Save}"/>

   

   </apex:pageBlockButtons>

  </apex:pageBlock>

  </apex:form>

</apex:page>

<apex:Commandbutton> = Buttons are very important in any page and they are the means using which a user interacts with the system to perform some actions such as Save, Update, Create, Delete, Cancel etc...

This tag helps us to create buttons.The action that has to be executed when the button is pressed depends on the ACTION attribute specified in this tag. 

An < apex:commandButton > component must always be a child component of the < apex:form > tag.

Value = Value is used to display a text as a label on the command button.

Action = The action method invoked by the AJAX request to the server. Use merge-field syntax to reference the method. For example, action="{!save}" references the save method in the controller. If an action isn't specified, the page simply refreshes.

7. What is the command link in VF page.

Vf page: 

<apex:page standardController="Account">
  <apex:form >
  <apex:pageBlock title="My Accounts" id="acc">
   <apex:pageBlockSection title="Accounts">
   <apex:inputField value="{!account.name}"/>
   <apex:inputField value="{!account.rating}"/>
   <apex:inputField value="{!account.accountnumber}"/>
   <apex:inputField value="{!account.type}"/>
   </apex:pageBlockSection>
   <apex:pageBlockButtons >

   <apex:commandLink value="Save" action="{!Save}"/>
   </apex:pageBlockButtons>
  </apex:pageBlock>
  </apex:form>
</apex:page>

Command link doing work same as command button but difference is it shows as a link on the User Interface.

8. What is the Output link in VF page.

Vf page: 

<apex:page standardController="Account">
  <apex:form >
  <apex:pageBlock title="My Accounts" id="acc">
   <apex:pageBlockSection title="Accounts">

   <apex:outputLink value="https://www.facebook.com/">Facebook</apex:outputLink>

   </apex:pageBlockSection>
  </apex:pageBlock>
  </apex:form>
</apex:page>

<apex:OutputLink> = This tag creates a link to a URL.

9. How to use output field in VF page.

Vf page: 

<apex:page standardController="Account">

  <apex:form >

  <apex:pageBlock title="My Accounts" id="acc">

   <apex:pageBlockSection title="Accounts">

   <apex:outputField value="{!Account.name}"/>

   </apex:pageBlockSection>

  </apex:pageBlock>

  </apex:form>

</apex:page>

<apex:OutputField> = A read-only display of a label and value for a field on a Salesforce object.

10. How to use input text in VF page.

Vf page: 

<apex:page standardController="Account">

  <apex:form >

  <apex:pageBlock title="My Accounts" id="acc">

   <apex:pageBlockSection title="Accounts">

   <apex:inputtext value="{!account.Industry}"/>

   <apex:inputfield value="{!account.Industry}"/>

   </apex:pageBlockSection>

  </apex:pageBlock>

  </apex:form>

</apex:page>

<apex:inputText> Input text tag showing only text field if you have passed any picklist and number field in this tag it will showing on user interface as a text.

Ex. In the code i have taken same field in input text and input field but input field showing standard picklist value and input text showing that picklist value as a text field. Below have attached the image.

11. How to use input hidden tag in VF page.

Vf page: 

<apex:page standardController="Account">
  <apex:form >
  <apex:pageBlock title="My Accounts" id="acc">
   <apex:pageBlockSection title="Accounts">
   <apex:inputtext value="{!account.Industry}"/>
   <apex:inputfield value="{!account.Industry}"/>

   <apex:inputHidden value="{!account.accountnumber}"/>

   </apex:pageBlockSection>
  </apex:pageBlock>
  </apex:form>
</apex:page>

<apex:inputhidden> Input hidden An HTML input element of type hidden, that is, an input element that is invisible to the user. Use this component to pass variables from page to page.

12. How to use input Secret tag in VF page.

Vf page: 

<apex:page standardController="Account">
  <apex:form >
  <apex:pageBlock title="My Accounts" id="acc">
   <apex:pageBlockSection title="Accounts">
   <apex:inputtext value="{!account.Industry}"/>
   <apex:inputfield value="{!account.Industry}"/>

   <apex:inputsecret value="{!account.accountnumber}"/>

   </apex:pageBlockSection>
  </apex:pageBlock>
  </apex:form>
</apex:page>

<apex:inputSecret> = An HTML input element of type password.You can take any field in this tag.

13. How to use input Textarea tag in VF page.

Vf page: 

<apex:page standardController="Account">
  <apex:form >
  <apex:pageBlock title="My Accounts" id="acc">
   <apex:pageBlockSection title="Accounts">
   <apex:inputtext value="{!account.Industry}"/>
   <apex:inputfield value="{!account.Industry}"/>

   <apex:inputtextarea value="{!account.description}"/>

   </apex:pageBlockSection>
  </apex:pageBlock>
  </apex:form>
</apex:page>

<apex:inputtextarea> = An HTML input element of type of text area.

14. How to use Page Block Table tag in VF page.

Vf page: 

<apex:page standardController="Account" recordSetVar="accounts">
  <apex:form >
  <apex:pageBlock title="My Accounts" id="acc">

   <apex:pageBlockTable value="{!accounts}" var="acc">

   </apex:pageBlockTable>
  </apex:pageBlock>
  </apex:form>
</apex:page>

recordSetVar = Tag is used to showing bunch of data on the page.

Value = Value is used to showing collection of data in page block table.

Var = You can then use this variable to display the element itself in the body of the pageBlockTable component tag.

Which name we have declare in recordsetver that same name should be display in page block table value.

15. How to use Column in Page Block Table tag in VF page.

Vf page: 

<apex:page standardController="Account" recordSetVar="accounts">
  <apex:form >
  <apex:pageBlock title="My Accounts" id="acc">
 
   <apex:pageBlockTable value="{!accounts}" var="acc">
 
   <apex:column value="{!acc.name}"/>
 
   </apex:pageBlockTable>
  </apex:pageBlock>
  </apex:form>
</apex:page>

<apex:column> = A single column in a table. An < apex:column > component must always be a child of an < apex:dataTable > or < apex:pageBlockTable > component.

Value = The text that should be displayed in every cell of the column, other than its header and footer cells. If you specify a value for this attribute, you cannot add any content between the column's opening and closing tags.

16. How to use Input checkbox tag in VF page.

Vf page: 

<apex:page standardController="Opportunity" recordSetVar="opps">
  <apex:form >
  <apex:pageBlock title="My Opportunity" id="opp">

   <apex:pageBlockTable value="{!opps}" var="opp1">

   <apex:column value="{!opp1.name}"/>
   <apex:column value="{!opp1.stageName}"/>
   <apex:column value="{!opp1.closedate}"/>
   <apex:column headerValue="Private">
   <apex:inputCheckbox value="{!opp1.IsPrivate}"/>
   </apex:column>
   </apex:pageBlockTable>
   <apex:pageBlockButtons >

   <apex:commandButton value="Save" action="{!Save}"/>
   </apex:pageBlockButtons>
  </apex:pageBlock>
  </apex:form>
</apex:page>

Header Value = Any header you want to show in column.

<apex:inputCheckbox> = An HTML input element of type checkbox. Use this component to get user input for a controller method that does not correspond to a field on a Salesforce object. 

17. How to use Output label tag in VF page.

Vf page: 

<apex:page standardController="Opportunity" >
  <apex:form >
  <apex:pageBlock title="My Opportunity" id="opp">

   <apex:outputLabel value="Opp name" for="name1"/>
   <apex:inputText value="{!opportunity.name}" id="name1"/>

    <apex:pageBlockButtons >

   <apex:commandButton value="Save" action="{!Save}"/>
   </apex:pageBlockButtons>
  </apex:pageBlock>
  </apex:form>
</apex:page>

<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. 

For = The ID of the component with which the label should be associated. When the label is in focus, the component specified by this attribute is also in focus.

18. How to use Output text tag in VF page.

Vf page: 

<apex:page standardController="Opportunity" >
  <apex:form >
  <apex:pageBlock title="My Opportunity" id="opp">

  <apex:outputText value="My all opportunity"></apex:outputText>

  </apex:pageBlock>
  </apex:form>
</apex:page>

<apex:Outputtext> = Displays text on a Visualforce page. You can customize the appearance of < apex:outputText > using CSS styles, in which case the generated text is wrapped in an HTML < span > tag. You can also escape the rendered text if it contains sensitive HTML and XML characters. This component does take localization into account. 

19. How to use page block Scetion Iteam tag in VF page.

Vf page: 

<apex:page standardController="Opportunity" >
  <apex:form >

  <apex:pageBlock title="My opportunity" mode="Edit">
  <apex:pageBlockSection title="Custom opportunity">

  <apex:pageBlockSectionItem >
  <apex:outputLabel value="opportunity name" for="opportunity_name"/>
  <apex:inputText value="{!opportunity.name}" id="opportunity_name"/>
  </apex:pageBlockSectionItem>

  </apex:pageBlockSection>
  <apex:pageBlockButtons >

   <apex:commandButton value="Save" action="{!Save}"/>
   </apex:pageBlockButtons>
  </apex:pageBlock>

  </apex:form>
</apex:page>

<apex:pageBlockSectionItem> = A single piece of data in an < apex:pageBlockSection > that takes up one column in one row. An < apex:pageBlockSectionItem > component can include up to two child components. If no content is specified, the column is rendered as an empty space. If one child component is specified, the content spans both cells of the column. If two child components are specified, the content of the first is rendered in the left, "label" cell of the column, while the content of the second is rendered in the right, "data" cell of the column.

20. How to use Data Table tag in VF page.

Vf page: 

<apex:page standardController="Opportunity" recordSetVar="opportunities">

  <apex:form >

  <apex:pageBlock title="Data table">

  <apex:dataTable value="{!opportunities}" var="opp">

  <apex:column value="{!opp.name}" headerValue="Opportunity name"/>

  </apex:dataTable>

  </apex:pageBlock>

  </apex:form>

</apex:page>

<apex:datatable>= An HTML table that is defined by iterating over a set of data, displaying information about one item of data per row. The body of the < apex:dataTable > contains one or more column components that specify what information should be displayed for each item of data. The data set can include up to 1,000 items.

21. How to use Tab Panel tag in VF page.

Vf page: 

<apex:page id="pageid">

  <apex:tabPanel switchType="client">

  </apex:tabPanel>

</apex:page>

<apex:TabPanel> = Tab Panel tag is used to show set of tabs.In which When a user clicks a tab header, the tab's associated content displays, hiding the content of other tabs.

SwitchType = The implementation method for switching between tabs. Possible values include "client", "server", and "ajax". If not specified, this value defaults to "server".

22. How to use Tab tag in VF page.

Vf page: 

<apex:page standardController="Account" id="pageid">

  <apex:form >

  <apex:tabPanel switchType="client" selectedTab="name2">

  <apex:tab label="One" name="name1">

  <apex:inputtext value="{!Account.name}"/></apex:tab>

  <apex:tab label="Two" name="name2">

  <apex:inputtext value="{!Account.name}"/></apex:tab>

  </apex:tabPanel>

  </apex:form>

</apex:page>

<apex:Tab> = Apex tab is the child of apex tab panel and use to show the tab.

Selected tab = Which tab you want to show default on the page load.

Name = In the name declare the selected tab name.when you will save your vf page then default tab will be visible.

Ex ; Suppose you want to show tab 2 default on the page load.Firstly use the selected tab in tab panel and you have mentioned any name in selected tab suppose tab 2 after that you have mentioned that same name in tab tag.then you will load your page tab 2 will default display. 

Explanation of switch type: Switch type have three type

1.Client

2.Server

3.Ajax

If you have not mentioned any switch type in tab panel then tab panel work default in sever switch type.
Below is the example of Switch type.

Vf Page:

<apex:page standardController="Account" id="pageid">

  <apex:form >

  <apex:tabPanel switchType="client" selectedTab="name2">

  

  <apex:tab label="One" name="name1">

  <apex:inputtext value="{!Account.name}"/></apex:tab>

  <apex:tab label="Two" name="name2">

  <apex:inputtext value="{!Account.name}"/></apex:tab>

  

  </apex:tabPanel>

    <apex:tabPanel switchType="Server" selectedTab="name2">

  

  <apex:tab label="One" name="name1">

  <apex:inputtext value="{!Account.name}"/></apex:tab>

  <apex:tab label="Two" name="name2">

  <apex:inputtext value="{!Account.name}"/></apex:tab>

  

  </apex:tabPanel>

  <apex:tabPanel switchType="ajax" selectedTab="name2">

  

  <apex:tab label="One" name="name1">

  <apex:inputtext value="{!Account.name}"/></apex:tab>

  <apex:tab label="Two" name="name2">

  <apex:inputtext value="{!Account.name}"/></apex:tab>

  

  </apex:tabPanel>

  </apex:form>

</apex:page> 

To understand how this works, try one tabPanel at a time.

Select "Tab 1"

Write something on the inputText box

Switch to the "Tab 2"

This is where the real differences appear.

For SwitchType="Client": The inputText box on "Tab 2" does not get filled.

For SwitchType="Server": The inputText box  on "Tab 2" does indeed get filled, but the entire page gets refreshed.

For SwitchType="Ajax": The inputText box  on "Tab 2" does indeed get filled, but the only a section of the page gets refrehed.

23. How to use Tool bar and tool bar group tag in VF page.

Vf page: 

<apex:page id="thePage">
    <apex:toolbar id="theToolbar">
        <apex:outputText value="Sample Toolbar"/>
        <apex:toolbarGroup  itemSeparator="line" id="toobarGroupLinks">
            <apex:outputLink value="http://www.salesforce.com">salesforce </apex:outputLink>
            <apex:outputLink value="http://developer.salesforce.com">apex developer network </apex:outputLink>
        </apex:toolbarGroup>
 
        <apex:toolbarGroup itemSeparator="grid" location="right" id="toobarGroupForm">
           <apex:form id="theForm">
                <apex:inputText id="theInputText">Enter Text</apex:inputText>
                <apex:commandLink value="search" id="theCommandLink"/>
            </apex:form>
        </apex:toolbarGroup>
    </apex:toolbar>
</apex:page>

<apex:toolbar> = A stylized, horizontal toolbar that can contain any number of child components. By default, all child components are aligned to the left side of the toolbar. 

<apex:toolbarGroup> = component to align one or more child components to the right.

Iteam Separator = The symbol used to separate toolbar components. Possible values include "none", "line", "square", "disc", and "grid". If not specified, this value defaults to "none".

24. How to use Page Message tag in VF page.

Vf page: 

<apex:page standardController="Opportunity" recordSetVar="opportunities" tabStyle="Opportunity" sidebar="false">

    <p>Enter an alphabetic character for the "Close Date," then click Save to see what happens.</p>

    <apex:form >

        <apex:pageBlock >

        <apex:pageMessage summary="This pageMessage will always display. Validation error 

           messages appear in the pageMessages component." severity="warning" strength="3" />

        <apex:pageMessages />

        <apex:pageBlockButtons >

            <apex:commandButton value="Save" action="{!save}"/>

        </apex:pageBlockButtons>

            <apex:pageBlockTable value="{!opportunities}" var="opp">

                <apex:column value="{!opp.name}"/>

                <apex:column headerValue="Close Date">

                    <apex:inputField value="{!opp.closeDate}"/>

                </apex:column>

            </apex:pageBlockTable>

        </apex:pageBlock>

    </apex:form>

</apex:page>

<apex:pageMessage> = 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.

Summery : Something message you want to display.

Severity: The severity of the message. 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).

25. How to use Panel bar abd Panel bar item tag in VF page.

Vf page: 

<apex:page >
    <apex:panelBar >
       <apex:panelBarItem label="Item1">data1</apex:panelBarItem>
       <apex:panelBarItem label="Item2">data2</apex:panelBarItem>
        <apex:panelBarItem label="Item3">data3</apex:panelBarItem>
    </apex:panelBar>
</apex:page>

<apex:panelBar>= A page area that includes one or more < apex:panelBarItem > tags that can expand when a user clicks the associated header. When an < apex:panelBarItem > is expanded, the header and the content of the item are displayed while the content of all other items are hidden. When another < apex:panelBarItem > is expanded, the content of the original item is hidden again. An < apex:panelBar > can include up to 1,000 < apex:panelBarItem > tags.

<apex:panelBarItem>= A section of an < apex:panelBar > that can expand or retract when a user clicks the section header. When expanded, the header and the content of the < apex:panelBarItem > is displayed. When retracted, only the header of the < apex:panelBarItem > displays. 

26. How to use Panel Grid tag in VF page.

Vf page: 

<apex:page >

<apex:page >

    <apex:panelGrid columns="3" id="theGrid">

        <apex:outputText value="First" id="theFirst"/>

        <apex:outputText value="Second" id="theSecond"/>

        <apex:outputText value="Third" id="theThird"/>

        <apex:outputText value="Fourth" id="theFourth"/>

    </apex:panelGrid>

</apex:page>

<apex:panelGrid>= Renders an HTML table element in which each component found in the body of the < apex:panelGrid > is placed into a corresponding cell in the first row until the number of columns is reached. At that point, the next component wraps to the next row and is placed in the first cell.