Tags used to Create VISUALFORCE Pages

Tags used to Create VISUALFORCE Pages

1). <Apex:Page>: This is a very important tag of a VF. This says that a single VF page and all the components must be wrapped inside this single page. Attributes of <apex: page> tag are:

• Action:

This invokes when this page is requested by the server, here we must use a expression language to reference an action method in APEX Action= {! do action} --->  Must be defined in APEX class. EX:-  action= {! int} or action= {!redir} ---> re directions the page to new page referred ---> Initializes

•  Controller:

It’s a string type and the name given here must be implemented in an Apex class, controller means an custom controller, this cannot be used if we use standard controller. <apex: page Controller="class name implemented in APEX">

• Extension:

This is used to extend the custom controllers we can have any extension for an custom controller, this is used to add extra functionality. <apex: page controller: “string" extension="string">

• ID:

It’s a string, gives an identification for tag, we can specify any name, but it should not be a duplicate, it’s generally used to refer this page by other components in the page.

• Record setvar:

it’s a string; this attribute indicates that the page users a set of records oriented by a standard controller only. Used to handle multiple records, this attribute converts a controller to a list controller.

• Render As:

it’s a string the name of any supported content converter, we can change the display in to a 'PDF' or another type currently it’s only a 'PDF' format. <apex: page render as='PDF'> displays a page in a pdf format

• Renderd:

it's a Boolean type, related to the displaying of a page by default it’s a 'TRUE', if we keep it false the page will not be displayed.

• Setup:

it's a Boolean type; it specifies whether the page should implement standard salesforce.com setup if its true.It will not implement by default if its "FALSE"

• Show header:

it's a Boolean type, displays or hides the salesforce header if true or false respectively.

• Sidebar:

it's a Boolean type, displays or hides the sidebar of standard salesforce site.

• standard controller:

it's the sales force object that's used to control the behaviour of this page, this attribute cannot be specified if custom controller is used. <apex: page standard controller="Account">

• Standard style sheets:

it's a Boolean type; it decides whether the standard salesforce style sheets are added to the generated page header if the showheader attribute is set false, if it’s set true the standard style sheets are by default, added to the generated page header. The other important tags are tab style title, help URL & help title. 2).Apex.form: A section of a VF page that allows users to enter o/p and then submit it with an <apex: command Button> or <apex :command link> The body of the form determines the data that is displayed and the way it is processed. Attributes of this tag are:

• Accept:it's a string type, the text to display as a tooltip when the user's mouse pointer hovers over this component.
• Accept charset: Its a string type, it’s a comma separated list of characters encoding that a server processing this form can handle.
• Dir: it’s a string type, it specifies the directions such as RTL & LTR (Right to left or left to right), that should display the components in the form of a VF page(position).

Onclick, anddblclick, onkeydown, on keypress, onkeyup, onmousedown, onmouseout, onmousemove, onmouseup, onreset, onsubmit These are the general attributes must be used within the form tag, all related when we use JAVASCRIPT in our design, when this JAVASCRIPT should be invoked either on one click, double click, onkeydown, press, up, down, move.............. On-reset and on submit are important, here the JavaScript is invoked when an event such as reset/submit occurs, if the user clicks on reset/submit buttons. 3).<apex:pageblock>: it's an area of a page that uses styles similar to the appearance of a salesforce detail page, without any default content. In detail page we can see only the components in 2 column's here we can make it to any number of columns using page Block section. And we can create instances rather than full names of objects i.e. <apex:pageblock value="{!account}" var="AC"> </apex:pageBlock> Attributes are:

• Dir:Direction of display 'RTL/LTR'
• helptitle: it's a string type, the text in title will be displayed when a user hovers the mouse over the help link for the pageblock. We must use this in relation with helpURL helpURL

it's a string type, the URL of a webpage that provides help for the page block. Here also we can perform the same actions which can be performed using the form tag, the Java script enabled tag attributes are like the following. Onclick, onclick, onkeydown, onkeypress, onkeyup........... 4).<apex.facetname>: This is an tag which is used to mention the column name of the column and this will overrides the attributer properties of the <apex:pageblock> section like JavaScript enabled attributes, title, help text, help URL,....... And the column component can be added in both ways i.es the header and footer.

• footer: The components that appear at the bottom of the page block.
• Header: The components that appear as a header of the page block.

5).apex:PageBlock section This tag can be used to create sections within a page block to categorize different fields into different sections. It’s similar to adding a section by using a edit page layout assignment. These sections spans of two cells. One for the field label, and another for its value. Each component found in the body of an <apex: pageblock section> is placed into the next cell in a row until the no. of columns is reached. To add fields, and objects to this <apex: pageblock section> we use <apex:inputfield> or <apex:outputfield> component each of these component automatically displays with the field's associated label. Attributes

• Clooapsible: it's a Boolean type, it specifies whether the page block section can be expanded and collapsed by a user, by default its "TRUE"
• Columns: it's an integer type, it specifies the no. of columns that can be included in a single row of a pageblock section, a single column can span two cells-one for field label, and another for its value.
• Dir: Direction RTL or LTR
• Showhader:It's a Boolean type variable, value that specifies whether the page block section title is displayed, if it's true.

6). apex:pageblocksection item A single piece of data in an <apex: pageblocksection> that takes keep up one column in one row. An <apex:pageBlocksection Item> component can include up to two child components, If no content is specified, the content spans both cells of the column. If two child components are specified , the content of the first is rendered in left, "label" cells of the column, while the content of the second is rendered in the right , "data' cell of the column. EX:-  if we include an <apex:outputfield> or an <apex:inputfield>component in an <apex:pageblockitem>, these components do not display with their label or custom help text as they do when they are children of an <apex:pageblockitem> And these components cannot be rendered, rerender the child components instead. Attributes : (DIr, helptext,ID)

• Labelstyle: Its a string type, these style used to display the content of the left “label" cell of the page block section column and uses all JavaScript enabled tags (discussed above)

7). <Apex:pageblock buttons>: A set of buttons that are styled like standard salesforce buttons the component must be a child component of an <apex: pageblock> This tag creates buttons and places them in the page block title area and footer area. Here we can specify the location of the button's in a section it can be either "Top/Bottom" Attributtes: Dir, Location: it's the area of the page block where the buttons should be rendered.Possible values are "top/bottom" or "both". This can be overridden when we use facet (header/footer) By default it's set to both. 8).apex:command button: A button that is rendered as an HTML o/p element with the type attribute set to "submit" , "rest" or "image" depending on the <apex: command button> tags specified values The button executes an action the child of an <apex: form> component EX:<apex:commandbutton action="{!save}" value="save" id="the button"/> Attributes:

• Accesskey: it's a string type, it's a keyboard accesskey that puts the command button in focus. action: Apex page. Action this can be invoked by AJAX request to the server uses merger-field syntax to reference the method. Action="{! save}" references save method written in controller. If action is not specified, the page simply refreshes.
• Dir:ID:Disabled
• images: it's a string type, the absolute or relative URL of image displayed as this button, if specified; the type of the generated HTML input element is set to "image" Supports all Java script enabled attributes.
• Rerender: its Boolean type, value that specifies whether the component is rendered on the page. If not specified, by default its true.
• Timeout: it’s an integer type, the amount of time (in milliseconds) before an AJAX update request should time out.
• Value:it’s an object type, text displayed on the Command Button as its label.

9). <apex: message>:

This tag can be used to display custom error messages on a VF page.

If this is not mentioned then the errors can be displayed only in debug log;

10). <apex:messages>:

All messages that were generated for all components on the current page.(standard salesforce style error messages) Default name is "error"

11).<apex:pagemessage>:

This component should be used for presenting custom messages in the page using the salesforce pattern for errors, warnings and other type of messages for a given severity.

Attributes are:

• Detail:it's a string type, the detailed description of the errors information.
• Severity:it's a string type, values supported by this are ‘confirm’, 'info', warning', 'error'.We can display the severity of the error messages generated.
• Strength:it's an integer type, it’s the strength of the message, this controls the visibility and size of icon displayed next to the message. Use 0 for no image, or 1-3 (highest strength, largest icon)
• Summary: it's a string type, the summary message.

12).<apex:page messages>: This component displays all messages that were generated for all components on the current page, presented using the SF styling. Attributes:

• Escape:its Boolean type, A Boolean value whether, sensitive HTML, and XML characters should be escaped in the HTML old generated by this component.
• show details:It's a Boolean type, specifies whether it displays the detail position of the messages, by default its false.

13).<Apex:Detail>

This is a self sustained tag, this is a very powerful tag, this displays details page of a particular object. This component includes attributes for including or excluding the associated related lists, related lists hover links, and title bar that appear in the standard SF API.

Attributes

• Inline Edit: It's a Boolean type, controls whether the component supports inline editing or not
• Related list: It's Boolean type, which specifies whether the related lists are included in the rendered component.
• Related list Hover: It's a Boolean type that specifies whether the related list hover links are included in the rendered component. Enable Related List Hover Links: Selected under setup/Customize /user interface.
• ID: It's a string type, indentifies that allows the detail component to be referenced by other component in the page.
• Rendered: It's a Boolean value that specifies whether the component is rendered on the page, by default its true.
• Render: It's an object type, the ID of one or more components that redrawn when the result of an AJAX updates requested returns to the client. ***This will only works if inline Edit or show chatter are set to true.

14).<Apex:panel Bar>: This tag creates a panel bar on a VF page which can accommodate multiple panels. ***This can include up to 1, 0000 >apex: panel Bar Item> tags. This tag creates a pannel bar on a VF page which can accommodate multiple panels. Attributes:

• Height: It's a string type, the height of the pannel bar when expanded, expressed either as a percentage of the available vertical space height="50" or height "200 px"s
• Switch type: It's a string type, the implementation method for switching between Pannel Bar Items. The possible values include; "client", "server" and ajax . The value; it's an object type the ID of the Pannel Bar is displayed.
• Var: It's a string type, the name of the variable that represents one element in the collection of data specified by the item attribute. We can then use this variable to display the element. Itself in the body of the Pannel Bar. Component tag.
• Width: Controls the width of the pannel bar, expressed either in percentages of the available horizontal space or as a number of pixels. If not specified default is ="100%".

15). <apex:pannel baritem>:

It's a section of <apex: Pannel Bar > That can expand or retract when a user clicks the section header, when expanded the header and the content of the <apex: Panel Bar Item> is displayed, when retracted, only the header of the <apex: Panel Bar Item> displays.

Attributes

• Expanded: It's a Boolean type, that specifies whether the content of this : Panel Bar Item is displayed.
• Labelstyle : It's a string type, the text displayed as the header of the Panel Bar Item component.
• Onenter: It's a string type, JavaScript invoked when the Panel Bar Item is not selected and the user clicks on the component to select it.
• Onleave: It's a string type, JavaScript invoked when the user selects a different Panel Bar Item.

16).< Apex:TabPanel>: A page area that displays as a set of tabs. When is a user clicks a tab header, the tabs associated content displays binding the content of others tabs. Creates a Panel, which can accommodate multiple tabs. Attributes are Active tab Classes It's a string type its a style classes used to display a tab header in the tab panel when it is selected, used primarily to designate, which css styles are applied when using an external css style sheet. An HTML style name which controls the look and feel of the tab that is currently selected. Inactive Tab Class : Controls the look and feel of inactive tabs. Selected Tab: Name of the tab that should be first selected on displayed to the user when the page is first open . it will be the default tab when the page loads. Header Alignment: Left/Right. And we can adjust the spacing b/w tabs through header spacing. 17).<Apex:Tab>:  This component must be a child of an <apex: tab panel> Attributes are:

• id: It's a string type, an identifier that allows the tab component to be referenced by other component in the page.
• Immediate: It's a Boolean type, specifies whether the action associated with this component happen's immediately, without processing any validation rules associated with the fields on the page. If set to true, the action happen's immediately and validation rules are skipped, by default it's false. and support s all Java enabled tags such as onclick, on doubleclicks....

Desired to gain proficiency on Salesforce? Explore the blog post on Salesforce training and certification to become a pro in Salesforce.

Output Tags: 18) <Apex: Output field value = "{!-----}"/> 19) <Apex: Output label value = "{! }"/> 20) <Apex: Output label value = "{! }"/> 21) <Apex: Output text value = "www.google.com" > <Apex: Output link> To displays views: 22) <Apex: List view value ="Standard/custom object"/> 23) <Apex: enhanced list type ="Standard/custom object"/> 24) < Apex: Sectioned header>: A tittle bar for a page. In a standard salesforce.com page the title bar is a colored header displayed directly under. Attributes are : the tab bar.

• Description: It's a string type, description text for the page that displays just under the colored title bar.
• Printer: It's a string type, the URL is printable view.
• Subtitle: The text displayed just under the main title in the colored title bar.

25). <apex: Selected Checkboxes> These are elements, displayed in a table. Attributes are

• access key: It's a string type, the keyboard access key that puts check boxes component in focus.
• layout: It's a string type, the method for which check boxes should be displayed in the table value

Possible values are: "Lines direction". Check boxes are horizontal "page direction" placed vertically. By default its value is "line direction" 26). <apex:selectlist>: A list of options that allows users to select only one value or multiple values at a time, depending on the value of its multiselect attribute. Attributes are: 

• Multiselect: It's a Boolean type, specifies whether the user's can select only one or more items from a list.
• tabindes:It's a string type, the order in which this select list component is selected compared to other page components when a user presses the tab key repeatedly. The value is an integer from 0-32767.

27). <apex:select option> The values are provided from <apex: selected checkboxes > or <apex: Select List> or <apex : select radio> component. It must be a child of one of the above component. The no. of checkboxes/Radio buttons/List values that are declared in logic (method apex) in the controller part. ---> Uses attributes discussed above. 29). <apex:selection>:same as <apex:selection> Only we have 3 attributes: id, render, value 30). <apex:select radion> A set of related radio button input elements, displayed in a table, unlike checkboxes, only one radio button can ever be selected at a time. Tags used to invoke Java script using AJAX request (A synchronous Java script and XML). And the tags are

1).<apex:action function>

A component that provides support for invoking controller action method directly from JavaScript code using an AJAX request. An <apex: action function> it must be a child of <apex: from>. difference: <apex: action support>, supports invoking controllers action method from other VF components. (referenced by other components) <apex: action function> defines New JavaScript function which can then be called from within a block of JavaScript code. (within JavaScript )>. Attributes are

• Action: This is Apex Pages. Action, type, the action method invoked when the action Function is called by a JavaScript event elsewhere in the page markup. We use merge field syntax to reference the method. If an action is not specified, the page simply refreshes.
• Name: It's a string type, the name of the JavaScript function, that when invoked yes, elsewhere in the page Markup, causes the method specified by the action attribute to execute. When the action method components specified by the rerender attributes will be refreshed.
• Render: It's an object type, the ID of one or more components that are redrawn when the result of the action method returns to the client.
• Status:The component which are redrawn when-separated lists of ID's, or a merge filed expression for a list or collection of ID's (These are displayed after the execution of the method).

Render --->before execution Render ---> after execution} à component displayed [1]  It's a string, the ID of an associated component that displays the status of an AJAX: update request. Timeout: It’s an integer type, the amount of time (in milliseconds) before an AJAX update request should time out. Immediate A Boolean value that specifies whether the action associated with this component should happen immediately, w/o passing any validation rule associated with the fields on the page, if set to true. (Validations are skipped) by default its false. OnceComplete:It’s a string type, this provides us with a name of the JavaScript file invoked when an event occurs. When AJAX request is processed.

2).<apex:action poller>

It does a partial page refreshment based on time interval. The times sends an AJAX update request to the server according to a time interval that we specified. (don't use this with enhanced listing) <apex :action poller> is ever re-rendered as the request of another action, it resets itself. It should be within the <apex: action region>. Attributes are

• Action: ApexPage. Action, invoked by the periodic AJAX update request from the component, can use merge field syntax to reference a method.
• Action: "{!increment counter}" reference the incrementcounter () method in the controller. If action is not mentioned the page simply refreshes.
• Interval: Time interval between AJAX update request, in seconds here the updation can be done for multiple fields at a time. This can be written in action logic.

3).<Apex:action region>

This tag helps us to create a set of components which can be displayed whenever some Ajax up date is performed on a VF page. An area of a VF page that demonstrates which components should be processed by the Force.com server. Only the components inside <apex: action region> are processed by the server during an AJAX request. But it doesn't define the area (s) of the pages (s),( rendered) when the request completes . To controls the behavior, use the rerender attribute on an <apex: action support> <Apex: action Poller > <Apex: Command Button> <apex: Command Link> <apex: tab <apex: tab Pannel>. Attributes are ID: It's a string type, it indentifies that allows the component to be referenced by other component in the page. Render region only It's a Boolean type, a Boolean value that specifies whether AJAXinvoked behaviour outside of the action region should be displayed when the action region is processed, if true. By default it’s set to TRUE

4).<apex:Status Action>:

A component that displays the status of AJAX update request. An AJAX request can either be in progress or complete. Message can be anything like inserting, updating completed, done -----etc. Attributes: It's a string type, the status text displayed at the start if AJAX request. the message to be displayed once the action is invoked or before the action is completed.

• for:This is a string type, the ID of an action region component for which the status indicator is displaying status.
• id:allows the action status components to be referenced by other components in the page.
• Stop Text:The status text displayed when an AJAX request completes.

5).<apex:action support>:

A component that adds AJAX support to another component, allowing the component to be refreshed asynchronously by the server when a particular event occurs, such as button click or mouse over. Attributes are: (creates a set of components displayed whenever some update is performed on VF pages).

• event:It's a string type, this is an JavaScript event that generates the AJAX request possible values are ("on blur", on change", "on click", "on bl click", "on focus", "on key down", "on key press'---------)
• focus:The id of the component that is in focus after the AJAX request completes.
• status:It's a string type, the ID of an associated component. That displays the status if AJAX update request.

Visual force scenarios: Visual force Page Scenario 1: Create the Visualforce page called “Opportunity View”with the following code and override with the “New” button on Opportunity Object.Result would be like once we click on the Opportunity tab and click on “New” button

<apex:pagestandardController="Opportunity" sidebar="false" showHeader="true">
 <apex:form>
 <apex:pageBlock title="Opportunity Detail">
 <apex:pageBlockButtons>
 <apex:commandButton value="Save The Opportunity" action="{!Save}"/>
 </apex:pageBlockButtons>
 <apex:pageBlockSection title="Opportunity Information 1" columns="2"
 collapsible="false">
 <apex:inputField value="{!Opportunity.Name}"/>
 <apex:inputField value="{!Opportunity.Active__c}" required="true"/>
 <apex:inputField value="{!Opportunity.DeliveryInstallationStatus__c}"/>
 <apex:inputField value="{!Opportunity.TrackingNumber__c}"/>
 <apex:inputField value="{!Opportunity.CloseDate}"/>
 </apex:pageBlockSection>
 <apex:pageBlockSection title="Opportunity Information 2" columns="2"
 collapsible="true">
 <apex:inputField value="{!Opportunity.Description}"/>
 <apex:inputField value="{!Opportunity.LeadSource}"/>
 <apex:inputField value="{!Opportunity.NextStep}"/>
 <apex:inputFieldvalue="{!Opportunity.Type}"/>
 <apex:inputField value="{!Opportunity.StageName}"/>
 </apex:pageBlockSection>
 </apex:pageBlock>
 </apex:form>
 </apex:page>

Now click on the Opportunity tab and click on “New” button Visualforce Page Scenario 2: Write a visualforcepage to view the Account Related list as Tabs

<apex:pagestandardController="Account" showHeader="true" tabStyle="account">
 <style>
 activeTab {background-color: #236FBD; color:white;background-image:none}
 inactiveTab { background-color: lightgrey; color:black;background-image:none}</style>
 <apex:tabPanelswitchType="client" selectedTab="tabdetails"
 id="AccountTabPanel" tabClass="activeTab" inactiveTabClass="inactiveTab">
 <apex:tab label="Details" name="AccDetails" id="tabdetails">
 <apex:detailrelatedList="false" title="true"/>
 </apex:tab>
 <apex:tablabel="Contacts" name="Contacts" id="tabContact">
 <apex:relatedList subject="{!account}" list="contacts" />
 </apex:tab>
 <apex:tablabel="Opportunities" name="Opportunities" id="tabOpp">
 <apex:relatedList subject="{!account}" list="opportunities" />
 </apex:tab>
 <apex:tablabel="Open Activities" name="OpenActivities" id="tabOpenAct">
 <apex:relatedList subject="{!account}" list="OpenActivities" />
 </apex:tab>
 <apex:tab label="Notes and Attachments" name="NotesAndAttachments"
 id="tabNoteAtt">
 <apex:relatedList subject="{!account}" list="NotesAndAttachments" />
 </apex:tab>
 </apex:tabPanel>
 </apex:page>

Create the button called “Tabbed Account” on the Account object. While creating button, select “OnClick Java Script” as the Content Source and write the following code parent.window.location.replace ("/apex/RelatedListAsTabsDisplay?id={!Account.Id}"); Note: RelatedListAsTabsDisplay --> Visualforce Page Nam> Once we click on “Tabbed Button”, we will get the following screen.

• Click on Details tab -->to open Detail page
• Click on Contacts tab -->tto open the Contacts related list and

same for Opportunities, Open Activities and Notes and Attachments   Explanation: In the 1st step starts with pagetag, here it includes standardController=”ACCOUNT”, and the header will be enabled, and tab style will be of account.

• <Style> is used to include STYLE SHEETS, here we used them to disply the ACTIVE AND INACTIVE tabs. ACTIVE is: BLUE COLRED And INACTIVE: Grey in color.
• We are taking a tab panel which consists of all the tabs of account
• SwitchType: The implementation method for switching between tabs specifies the general operation is between CLIENT and Server.
• SELECTED TAB:The name of the default selected tab when the page loads.
  <apex:tab> defines the tab name, label and id.
• 
  <apex;detail/> this is a self sustained tag gives the detail page of each account tab selected and the attribute RELATED list can be a Boolean one.
• 
  <apex:related list> in this we used SUBJECT and LIST.

The attribute Subject specifies the parent record from which the data or the related list has to be mentioned in your case it’s ACCOUNT. LIST: name of the child that should be appeared on the tab CHILDS of account.. Note: Redirecting the visualforcepage to the listviewpage using single tag.

<apex:page action="{!URLFOR($Action.Account.List,$ObjectType.Account)}"/>

Visualforce Scenario 3: The followingvisualforce page displays the Contacts for particular account in a separate window as the table (format is standard salesforce page) Page Name=”ContactsForAccount”

<apex:pagestandardController="Account">
 <apex:pageBlock title="Hello {!$User.FirstName} {!$User.LastName}!">
 We are viewing the Contacts for this <b>{!account.name}</b> Account.
 </apex:pageBlock>
 <apex:pageBlock title="Contacts">
 <apex:pageBlockTable value="{!account.Contacts}" var="con">
 <apex:column value="{!con.Name}"/>
 <apex:column value="{!con.Lastname}"/>
 <apex:column value="{!con.Phone}"/>
 <apex:column value="{!con.Title}"/>
 </apex:pageBlockTable>
 </apex:pageBlock>
</apex:page>

Create the button called “ContactsForAccount” on Account Object and override above visualforce page with this button.   Explination:

• Starting tag for a visualforcepage is <apex:page> and this follows standard object ACCOUNT.
• Forming a new page block which gives the user name and Account holder name.
• Forming a new page block with title as CONTACTS.
• And then retrieving the contact fields using account and the field label are shown as column headers.

Visualforce Scenario 4: Create the Visualforce page with the following code. This is the example for custom controller.

Page Name=”PageReference”
 <apex:page controller="MyCustomController" tabStyle="Account">
 <apex:form>
 <apex:pageBlock title="Account Detail">
 <apex:pageblockSection title="Account Information" >
 <apex:inputField value="{!account.Name}"/>
 <apex:inputField value="{!account.Phone}"/>
 <apex:inputField value="{!account.Industry}"/>
 <apex:inputField value="{!account.Rating}"/>
 <apex:inputField value="{!account.Website}"/>
 <apex:inputField value="{!account.Active__c}"/>
 </apex:pageblockSection>
 <apex:pageblockSection title="Account Detail" >
 <apex:inputField value="{!account.BillingCity}"/>
 <apex:inputField value="{!account.BillingCountry}"/>
 <apex:inputField value="{!account.Description}"/>
 <apex:inputField value="{!account.Fax}"/>
 <apex:inputField value="{!account.ShippingCity}"/>
 <apex:inputField value="{!account.ShippingCountry}"/>
 <apex:inputField value="{!account.AnnualRevenue}"/>
 </apex:pageblockSection>
 <apex:pageBlockButtons>
 <apex:commandButton action="{!saveMethod}" value="Save the Page"/>
 </apex:pageBlockButtons>
 </apex:pageBlock>
 </apex:form>
 </apex:page>

My Custom Controller Class:

public class MyCustomController{
 Public Account acc;
 public MyCustomController(){
acc = [select id,Name,Phone,Industry,Website,Active__c,Rating,BillingCity,Description,Fax,
 ShippingCity,AnnualRevenue,BillingCountry,ShippingCountry from Account where
 id=:ApexPages.currentPage().getParameters().get('Id')];
 }
 public Account getAccount() {
 return acc;
 }
 public PageReference saveMethod() {
 update acc;
 PageReference pageRef = new ApexPages.StandardController(acc).view();
 return pageRef;
 }
 }

Create the “Detail Page Link” with the name “PageReference” on Account Object. While creating select “Execute JavaScript” as the behavior and “onClick JavaScript” as the Content Source parent.window.location.replace("/apex/PageReference?id={!Account.id}"); Add the PageReference link to the Account Layout Update the field values then click on “Save the Page” button in the above window,we will get the Standard Account detail page Visualforce Senarion 5:

Create the Visualforce page with the following code. This is the example for custom controller.
 Page Name=”WithoutPageReference”
 <apex:page controller="MySecondController" tabStyle="Opportunity">
 <apex:form>
 <apex:pageBlock title="Opportunity Detail">
 <apex:pageBlockButtons>
 <apex:commandButton value="Save The Opportunity" action="{!saveMethod}"/>
 </apex:pageBlockButtons>
 <apex:pageBlockSection title="Opportunity Information" columns="2"
 collapsible="false">
 <apex:inputField value="{!Opportunity .Name}"/>
 <apex:inputField value="{!Opportunity .DeliveryInstallationStatus__c}"/>
 <apex:inputField value="{!Opportunity .TrackingNumber__c}"/>
 <apex:inputField value="{!Opportunity .CloseDate}"/>
 </apex:pageBlockSection>
 </apex:pageBlock>
 </apex:form>
 </apex:page>

My second Controller class:

public class MySecondController {
 Public Opportunity opp;
 public MySecondController(){
 opp= [select id,Name,DeliveryInstallationStatus__c,TrackingNumber__c,CloseDate fr
 om Opportunity where id=:ApexPages.currentPage().getParameters().get('Id')];
 }
 public Opportunity getOpportunity () {
 return opp;
 }
 public PageReference SaveMethod() {
 update opp;
 return null;
 }
 }

Create the “Detail Page Link” with the name “WithoutPageReference” on Opportunity Object. While creating select “Execute JavaScript” as the behavior and “onClick JavaScript” as the Content Source Follow the java script to call a visualforce page parent.window.location.replace("/apex/WithoutPageReference?id={!Opportinuty}.id}"); Go to Opportunity detail page and click on the WithoutPageRef link Update the field values in the following window and click on “Save The Opportunity” button, then values will be updated but redirects to the same page but not to the opportunity detail page Visualforce Senarion 6: Before we have written trigger saying that when the Contact is created by checking Contact Relationship checkbox, then Contact Relationship will be created for that contact automatically. Create the visualforce page with the following code. Create the button called "Create Multiple Contact Relationship "on Account object and once we click on this button on account detail page, then Contacts will be populated which don't have Contact Relationships. Visualforce Code:

Page Name="ContactRelationShips"

<apex:pagestandardController="Account" extensions="MultipleContactRelationships"
 sidebar="false" showHeader="false">
 <apex:form>
 <apex:pageBlock>
 <apex:sectionHeader title="Contacts" />
 <center>
 <apex:commandButton value="Create Contact Relationship"/>
 </center>
 <apex:pageBlockTable value="{!Conres}" var="CR" cellPadding="40">
 <apex:columnheaderValue="Action" >
 <apex:facet name="header">Action</apex:facet>
<apex:inputCheckbox>
 </apex:inputCheckbox>
 </apex:column>
 <apex:column>
 <apex:facet name="header">Contact Name</apex:facet>
 <apex:outputText value="{!CR.Name}" />
 </apex:column>
 <apex:column>
 <apex:facet name="header">Title</apex:facet>
 <apex:outputText value="{!CR.Title}" />
 </apex:column>
 <apex:column>
 <apex:facet name="header">Email</apex:facet>
 <apex:outputText value="{!CR.Email}" />
 </apex:column>
 <apex:column>
 <apex:facet name="header">Phone</apex:facet>
 <apex:outputText value="{!CR.Phone}" />
 </apex:column>
 </apex:pageBlockTable>
 </apex:pageBlock>
 </apex:form>
 </apex:page>

MultipleContactRelationships Class:

public with sharing class MultipleContactRelationships {
 public MultipleContactRelationships(ApexPages.StandardController controller) {
 }
 public List<Contact> ContactList{get;set;}
 Public List<Contact>getConres()
 {
 Contact c = new Contact();
 ContactList=[select id, Name,Title,Email,Phone from Contact where Accountid=:ApexPa
 ges.currentPage().getParameters().get('id') and Contact_Relationship__c=true ];
 system.debug('********'+ ContactList);
 return ContactList;
}
}

Button Creation: Create the button called "Create Multiple Contact Relationship" on Account Object with the following Java Script Parent.window.location.replace("/apex/ContactRelationShips?id={!Account.id}"); The following window will come when we click on "Create Multiple Contact Relationship" on the above window

For indepth understandingng on Salesforce click on

• Salesforce Tutorials
• SalesForce Interview Questions & Answers
• Annotations in SalesForce
• Loops in SalesForce
• Apex Data Manipulation
• Creating Apex Classes
• Salesforce Wave Analytics Training In San Jose