outputlink Example

apex:outputlink Example

Example 1: Display the detail page of a record when click on it.

page:
<apex:page sidebar=”false” standardController=”DataLoadTest__c” recordSetVar=”records”>
<style>
.headerRow th
{
display:none;
}
</style>
<apex:form >
<apex:pageBlock >
<apex:pageBlockSection >
<apex:pageBlockTable value=”{!records}” var=”r”>
<apex:column >
<apex:outputlink value=”https://ap1.salesforce.com/{!r.Id}”>{!r.Name}</apex:outputlink>
</apex:column>
</apex:pageBlockTable>
</apex:pageBlockSection>
</apex:pageBlock>
</apex:form>
</apex:page>

Example2: Display Detail page using command links by passing Ids from VF page to Apex Class

page:
<apex:page sidebar=”false” controller=”Detailoutputlink1″>
<style>
.headerRow th
{
display:none;
}
</style>
<apex:form >
<apex:pageBlock >
<apex:pageBlockSection >
<apex:pageBlockTable value=”{!records}” var=”r”>
<apex:column >
<apex:commandLink value=”{!r.Name}” action=”{!showDetail}”>
<apex:param name=”rId” value=”{!r.Id}” assignTo=”{!rId}”/>
</apex:commandLink>
</apex:column>
</apex:pageBlockTable>
</apex:pageBlockSection>
</apex:pageBlock>
</apex:form>
</apex:page>

class:
public with sharing class Detailoutputlink1 {
public String rId{get;set;}
public PageReference showDetail() {
pagereference ref = new pagereference(‘https://ap1.salesforce.com/’+rId);
ref.setredirect(true);
return ref;
}
List<DataLoadTest__c> lstdlt = new List<DataLoadTest__c>();
public List<DataLoadTest__c> getRecords() {
lstdlt=[select Id,name from DataLoadTest__c];
return lstdlt;
}
}

Example3: outputlink for navigating vf page to google page

<apex:page sidebar=”false” >
<apex:form >
<apex:outputlink value=”http://www.google.co.in/”>Google</apex:outputlink>
</apex:form>
</apex:page>

Example4: Display the Printable view page using output links

page:
<apex:page sidebar=”false” standardController=”DataLoadTest__c” recordSetVar=”records”>
<style>
.headerRow th
{
display:none;
}
</style>
<apex:form >
<apex:pageBlock >
<apex:pageBlockSection >
<apex:pageBlockTable value=”{!records}” var=”r”>
<apex:column >
<apex:outputlink value=”https://ap1.salesforce.com/{!r.Id}/p?retURL=/{!r.Id}”>{!r.Name}</apex:outputlink>
</apex:column>
</apex:pageBlockTable>
</apex:pageBlockSection>
</apex:pageBlock>
</apex:form>
</apex:page>

Dynamic Binding of input fields

Dynamic Binding of input fields

Example 1: Dynamic Binding of input fields

In scenario we used apex:repeat to get all inputfields dynamically.

page:
<apex:page sidebar=”false” standardController=”Testing__c” extensions=”DynamicBindingFieldsOnVFPage”>
<apex:form >
<apex:pageBlock >
<apex:pageBlockSection columns=”1″>
<apex:repeat value=”{!fields}” var=”f”>
<apex:inputfield value=”{!Testing__c[f]}”/>
</apex:repeat>
</apex:pageBlockSection>
<apex:commandButton value=”Insert” action=”{!doSave}”/>
</apex:pageBlock>
</apex:form>
</apex:page>

class:
public with sharing class DynamicBindingFieldsOnVFPage {
public DynamicBindingFieldsOnVFPage(ApexPages.StandardController controller) {
}
public pagereference dosave()
{
return null;
}
public List<String> lstfields = new List<String>();
public List<String> getfields(){
lstfields.add(‘Name’);
lstfields.add(‘city__c’);
return lstfields;
}

Example2: Component

code for component

<apex:component >
<apex:form >
<apex:outputtext value=”Welcome To Hyderabad” style=”color:blue;font-size:30px;”>
</apex:outputtext>
</apex:form>
</apex:component>
calling VF component:
/apexcomponent/componentName
page:
<apex:page sidebar=”false” standardController=”Testing__c” extensions=”DynamicBindingFieldsOnVFPage”>
<c:co1 />
<apex:form >
<apex:pageBlock >
<apex:pageBlockSection columns=”1″>
<apex:repeat value=”{!fields}” var=”f”>
<apex:inputfield value=”{!Testing__c[f]}”/>
</apex:repeat>
</apex:pageBlockSection>
<apex:commandButton value=”Insert” action=”{!doSave}”/>
</apex:pageBlock>
</apex:form>
<c:co1 />
</apex:page>

class:
public with sharing class DynamicBindingFieldsOnVFPage {
public DynamicBindingFieldsOnVFPage(ApexPages.StandardController controller) {
}
public pagereference dosave()
{
return null;
}
public List<String> lstfields = new List<String>();
public List<String> getfields(){
lstfields.add(‘Name’);
lstfields.add(‘city__c’);
return lstfields;
}
}

Example:External Javascript&Creating a menu bar

Visualforce Examples

Example 1: External Javascript:
Here the external javascript file name is jsTestingExt.
page:
<apex:page sidebar=”false”>
<apex:includeScript value=”{!$Resource.jsTestingExt}”/>
<apex:form >
<apex:commandButton value=”First” onclick=”one()”/>
<apex:commandButton value=”Second” onclick=”two()”/>
<apex:commandButton value=”Three” onclick=”three()”/>
</apex:form>
</apex:page>
.js file code:
function one()
{
alert(‘One’);
}
function two()
{
alert(‘two’);
}
function three()
{
alert(‘three’);
}

Example 2 : Creating a menu bar:
<apex:page >
<script type=”text/javascript”>
function showmenu(elmnt)
{
document.getElementById(elmnt).style.visibility=”visible”;
}
function hidemenu(elmnt)
{
document.getElementById(elmnt).style.visibility=”hidden”;
}
</script>
<style>
body{font-family:arial;}
table{font-size:100%;background:white;width:50px;}
a{color:black;text-decoration:none;font:bold}
a:hover{color:#606060}
td.menu{background:lightblue}
table.menu
{
font-size:100%;
position:absolute;
visibility:hidden;
}
</style>
<apex:form >
<table >
<tr bgcolor=”#FF8080″>
<td onmouseover=”showmenu(‘tutorials’)” onmouseout=”hidemenu(‘tutorials’)”>
Action
<table class=”menu” id=”tutorials” width=”120″>
<tr><td class=”menu”><a href=”https://www.gmail.com”>GMail</a></td></tr>
<tr><td class=”menu”><a href=”https://salesforce.com”>salesforce</a></td></tr>
</table></td></tr></table>
</apex:form>
</apex:page>

Removing the standard css from the pageblock table

CSS, Javascript Examples

CSS Example1: Removing the standard css from the pageblock table

<apex:page standardController=”DataLoadTest__c” recordSetVar=”records” sidebar=”false”>
<style>
.headerRow th{
display:none;
}
</style>
<apex:form >
<apex:pageBlock >
<apex:pageblockSection >
<apex:pageBlockTable value=”{!records}” var=”r”>
<apex:column >
{!r.Name}
</apex:column>
<apex:column >
{!r.City__c}
</apex:column>
<apex:column >
{!r.Country__c}
</apex:column>
<apex:column >
{!r.phone__c}
</apex:column>
</apex:pageBlockTable>
</apex:pageblockSection>
</apex:pageBlock>
</apex:form>
</apex:page>

Example2: showModalDialog():

Gives the seperate window for any other calculations.
This belongs to javascript..
ex:
page:
<apex:page standardController=”DataLoadTest__c” recordSetVar=”records” sidebar=”false”>
<style>
.headerRow th{
display:none;
}
</style>
<script>
function showModal(val){
window.showModalDialog(‘/apex/second123?id=’+val);
}
</script>
<apex:form >
<apex:pageBlock >
<apex:pageblockSection >
<apex:pageBlockTable value=”{!records}” var=”r”>
<apex:column >
<apex:commandlink value=”{!r.Name}” onclick=”showModal(‘{!r.Id}’)” />
</apex:column>
</apex:pageBlockTable>
</apex:pageblockSection>
</apex:pageBlock>
</apex:form>
</apex:page>

Few more Javascript examples with Apex

Javascript examples with Apex

Example1: Sum Calculation using JavaScript Function

Visualforce page:

<apex:page sidebar=”false” id=”p1″>
<script>
function sum(){
alert(‘hello’);
var a=parseInt(document.getElementById(‘p1:f1:n1’).value);
alert(a);
var b=parseInt(document.getElementById(‘p1:f1:n2’).value);
alert(b);
alert(‘Total value is ‘+(a+b));
}
</script>
<apex:form id=”f1″>
N1: <apex:inputtext id=”n1″/><br/>
N2: <apex:inputtext id=”n2″/><br/>
<apex:commandButton value=”Sum” onclick=”sum()”/>
</apex:form>
</apex:page>

Example2: CheckBox Hide Or Unhide the components based on Checked Property:
Visualforce page:
<apex:page sidebar=”false” id=”p1″>
<script>
function HUcomponent(){
var chkResult = document.getElementById(‘p1:f1:chk1’).checked;
alert(chkResult);
if(chkResult){
document.getElementById(‘p1:f1:out’).style.display=”block”;
}
else
{
document.getElementById(‘p1:f1:out’).style.display=”none”;
}
}
</script>
<apex:form id=”f1″>
<apex:inputcheckbox id=”chk1″ onclick=”HUcomponent()”/> <br/>
<apex:outputpanel id=”out” style=”display:none;”>
name: <apex:inputtext /> <br/>
City: <apex:inputtext /><br/>
<apex:commandButton value=”Save”/>
</apex:outputpanel>
</apex:form>
</apex:page>

Wrapper class Example

Wrapper class for displaying Int and String Data types 

A Wrapper class is a class whose instances are collection of other objects. It is used to display different objects on a Visual Force page in same table.

Visualforce page:
<apex:page sidebar=”false” controller=”WrapperIntStringDisplayClassTest”>
<apex:form >
<apex:pageBlock >
<apex:pageBlockSection >
<apex:pageBlockTable value=”{!lstwrapperIntString}” var=”w”>
<apex:column headervalue=”Action”>
<apex:inputcheckbox />
</apex:column>
<apex:column headervalue=”TestingName”>
{!w.Tname}
</apex:column>
<apex:column headerValue=”TestingCity”>
{!w.Tcity}
</apex:column>
<apex:column headervalue=”DataLoadCountry”>
{!w.Dcountry}
</apex:column>
<apex:column headerValue=”DataLoadPhone”>
{!w.Dphone}
</apex:column>
</apex:pageBlockTable>
</apex:pageBlockSection>
</apex:pageBlock>
</apex:form>
</apex:page>
Apex class:
public with sharing class WrapperIntStringDisplayClassTest {
List<Testing__c> lsttest = new List<Testing__c>();
List<DataLoadTest__c> lstdlt = new List<DataLoadTest__c>();
public List<wrapper> lstw = new List<wrapper>();
public List<wrapper> getLstwrapperIntString() {
lsttest = [select name,city__c from Testing__c];
lstdlt = [select country__c,phone__c from DataLoadTest__c];
for(Integer i=0;i<lstdlt.size();i++){
lstw.add(new wrapper(lsttest[i].name,lsttest[i].city__c,lstdlt[i].country__c,lstdlt[i].phone__c));
}
return lstw;
}
public class wrapper{
public String Tname{get;set;}
public String Tcity{get;set;}
public String Dcountry{get;set;}
public String Dphone{get;set;}
public wrapper(String Tname,String Tcity,String Dcountry,String Dphone){
this.Tname=Tname;
this.Tcity=Tcity;
this.Dcountry=Dcountry;
this.Dphone=Dphone;
}
}
}

Creating picklist using

Example1: Creating picklist using <apex:selectoption> (this is the static way to place the items within picklist):

page:
<apex:page sidebar=”false” >
<apex:form >
Countries: <apex:selectList multiselect=”false” size=”1″>
<apex:selectoption itemvalue=”–None–” itemlabel=”–None–“></apex:selectoption>
<apex:selectoption itemvalue=”India” itemlabel=”India”></apex:selectoption>
<apex:selectoption itemvalue=”Australia” itemlabel=”Australia”></apex:selectoption>
<apex:selectoption itemvalue=”America” itemlabel=”America”></apex:selectoption>
</apex:selectList>
</apex:form>
</apex:page>

Example2: Getting all names of an account into a Picklist
page:
<apex:page sidebar=”false” controller=”accPickNamesDisplayClass”>
<apex:form >
<apex:selectList multiselect=”false” size=”1″>
<apex:selectOptions value=”{!accNames}”>
</apex:selectOptions>
</apex:selectList>
</apex:form>
</apex:page>
class:
public with sharing class accPickNamesDisplayClass {
List<selectOption> options = new List<selectOption>();
public List<selectOption> getAccNames() {
for(DataLoadTest__c acc : [select Id,name from DataLoadTest__c])
{
options.add(new selectOption(acc.name,acc.name));
}
return options;
}
}

Example3: Dependent Picklist Preparation using Controller:
In this scenario we can see how to generate a picklist dynamically and preparation of dependant picklists.
Here dependant picklist is will be populated using apex:actionsupport.
page:
<apex:page sidebar=”false” controller=”DependentClassabcd”>
<apex:form >
Departments: <apex:selectList value=”{!selDept}” multiselect=”false” size=”1″>
<apex:actionSupport event=”onchange” reRender=”out”/>
<apex:selectOptions value=”{!deptnames}”>
</apex:selectOptions>
</apex:selectList> <br/>
Employees: <apex:selectList multiselect=”false” id=”out” size=”1″>
<apex:selectOptions value=”{!empnames}”>
</apex:selectOptions>
</apex:selectList>
</apex:form>
</apex:page>
class:
public with sharing class DependentClassabcd {
public String selDept { get; set; }
List<selectOption> empOptions = new List<selectOption>();
public List<selectOption> getEmpnames() {
empOptions.clear();
empOptions.add(new selectOption(‘–None–‘,’–None–‘));
for(Employee__c objEmp : [select Id,name,department__c from Employee__c where department__r.name=:selDept]){
empOptions.add(new selectOption(objEmp.name,objEmp.name));
}
return empOptions;
}
List<selectOption> deptOptions = new List<selectOption>();
public List<selectOption> getDeptnames() {
deptOptions.add(new selectOption(‘–None–‘,’–None–‘));
for(Department__c objDept : [select name from Department__c]){
deptOptions.add(new selectOption(objDept.name,objDept.name));
}
return deptOptions;
}
}

Using CSS & Javascript in Visualforce Examples

CSS & Javascript examples

Example1: Inserting records into custom object with including css:

Visualforce page:
<apex:page sidebar=”false” controller=”DataLoadTestingClass”>
<apex:form >
<div style=”border:1px solid; width:200px;”>
<div style=”height:30px;width:150px;margin-top:20px;margin-left:20px;font-size:15px;color:blue;”>
DATALOADTESTING
</div>
<table>
<tr>
<td>
Name
</td>
<td>
<apex:inputtext value=”{!nameVal}”/>
</td>
</tr>
<tr>
<td>
City
</td>
<td>
<apex:inputtext value=”{!cityVal}” />
</td>
</tr>
<tr>
<td>
Country
</td>
<td>
<apex:inputtext value=”{!countryVal}” />
</td>
</tr>
<tr>
<td>
Phone
</td>
<td>
<apex:inputtext value=”{!phoneVal}”/>
</td>
</tr>
<tr >
<td colspan=”2″ align=”center”>
<apex:commandButton value=”INSERT” style=”color:red;” action=”{!doInsert}” />
</td>
</tr>
</table>
</div>
</apex:form>
</apex:page>

Apex Class:
public with sharing class DataLoadTestingClass {
public PageReference doInsert() {
DataloadTest__c objdlt = new DataLoadTest__c();
objdlt.name=nameVal;
objdlt.city__c=cityVal;
objdlt.country__c=countryVal;
objdlt.phone__c=phoneVal;
insert objdlt;
pagereference ref = new pagereference(‘/apex/insertdlttest’);
ref.setredirect(true);
return ref;
}
public String phoneVal { get; set; }
public String countryVal { get; set; }
public String cityVal { get; set; }
public String nameVal { get; set; }
}

Example2: A Sample CSS for changing the Font size

<apex:page sidebar=”false”>
<style>
#fonttext{
font-size:20px;
color:green;
}
</style>
<apex:form >
<p id=”fonttext”> Welcome </p>
</apex:form>
</apex:page>

SENDING eMAIL TO ALL CONTACTS OF An ACCOUNT

SENDING eMAIL TO ALL CONTACTS

Visualforce Page:

<apex:page controller=”relatedcontacts”>
<script>
function showModal(val){
//window.showModalDialog(‘/apex/secondpage?id=’+val);
window.showModalDialog(‘/apex/contactswithcheckbox?id=’+val);
}
</script>
<apex:form >
<apex:pageblock >
<apex:pageBlockSection title=”Records”>
<apex:pageBlockTable value=”{!Accounts}” var=”a”>
<apex:column headerValue=”Name”>
<apex:commandlink value=”{!a.Name}” onclick=”showModal(‘{!a.accid}’)” />
</apex:column>
<apex:column headerValue=”phone” >
{!a.phone}
</apex:column>
<apex:column headerValue=”website” >
{!a.website}
</apex:column>
<apex:column headerValue=”taxable” >
{!a.taxable}
</apex:column>
</apex:pageBlockTable>
</apex:pageBlockSection>
</apex:pageblock>
</apex:form>
</apex:page>

controller:
public with sharing class relatedcontacts {
public relatedcontacts(){
AccountData();
}
list<Account> lstacc = new list<Account>();
list<accountwrapclass> lstAccwrap = new list<accountwrapclass>();
public list<accountwrapclass> getAccounts() {
// lstacc=[select id,name,phone,website,taxable__c from Account];
return lstAccwrap ;
}
public void AccountData(){
for(Account acc:[select id,name,phone,website,taxable__c from Account]){
accountwrapclass objacc = new accountwrapclass();
objacc.Name = acc.Name;
objacc.accid = acc.id;
objacc.phone = acc.phone;
objacc.website = acc.website;
if(acc.taxable__C == true){
objacc.taxable =’yes’;
}else{
objacc.taxable =’NO’;
}
lstAccwrap.add(objAcc);
}
}

wrapper class :
public class accountwrapclass{
public string accid{get;set;}
public string Name{get;set;}
public string Phone{get;set;}
public string Website{get;set;}
public string taxable{get;set;}
}
}
contacts with checkbox:second page
<apex:page controller=”wrapperClassController” showHeader=”false” >
<apex:form >
<apex:pageBlock >
<apex:pageBlockButtons location=”bottom”>
<apex:commandButton value=”Send Email” action=”{!processSelected}” rerender=”table” />
</apex:pageBlockButtons>
<!– In our table we are displaying the cContact records –>
<apex:pageBlockTable value=”{!contacts}” var=”c” id=”table”>
<apex:column >
<!– This is our selected Boolean property in our wrapper class –>
<apex:inputCheckbox value=”{!c.selected}”/>
</apex:column>
<!– This is how we access the contact values within our cContact container/wrapper –>
<apex:column value=”{!c.con.Name}” />
<apex:column value=”{!c.con.Email}” />
<apex:column value=”{!c.con.Phone}” />
</apex:pageBlockTable>
</apex:pageBlock>
</apex:form>
</apex:page>

controller:

public class wrapperClassController {
public string accid ;
public wrapperClassController (){
accid = apexpages.currentpage().getparameters().get(‘id’);
system.debug(‘***************Accid’+accid);
}
//Our collection of the class/wrapper objects cContact
public List<cContact> contactList {get; set;}
//This method uses a simple SOQL query to return a List of Contacts
public List<cContact> getContacts() {
if(contactList == null) {
contactList = new List<cContact>();
for(Contact c : [select Id, Name, Email, Phone from Contact where AccountId=:accid]) {
// As each contact is processed we create a new cContact object and add it to the contactList
contactList.add(new cContact(c));
}
}
return contactList;
}
public PageReference processSelected() {
//We create a new list of Contacts that we be populated only with Contacts if they are selected
List<Contact> selectedContacts = new List<Contact>();
//We will cycle through our list of cContacts and will check to see if the selected property is set to true, if it is we add the Contact to the selectedContacts list
for(cContact cCon : getContacts()) {
if(cCon.selected == true) {
selectedContacts.add(cCon.con);
}
}
// Now we have our list of selected contacts and can perform any type of logic we want, sending emails, updating a field on the Contact, etc
System.debug(‘These are the selected Contacts…’);
for(Contact con : selectedContacts) {
string conEmail = con.Email;
Messaging.SingleEmailMessage mail = new Messaging.SingleEmailMessage();
// Strings to hold the email addresses to which you are sending the email.
String[] toAddresses = new String[] {conEmail};
//String[] ccAddresses = new String[] {‘smith@gmail.com’};
// Assign the addresses for the To and CC lists to the mail object.
mail.setToAddresses(toAddresses);
// mail.setCcAddresses(ccAddresses);
// Specify the address used when the recipients reply to the email.
mail.setReplyTo(‘support@acme.com’);
// Specify the name used as the display name.
mail.setSenderDisplayName(‘Salesforce Support’);
// Specify the subject line for your email address.
mail.setSubject(‘New Case Created : ‘ + case.Id);
// Set to True if you want to BCC yourself on the email.
mail.setBccSender(false);
// Optionally append the salesforce.com email signature to the email.
// The email address of the user executing the Apex Code will be used.
mail.setUseSignature(false);
// Specify the text content of the email.
mail.setPlainTextBody(‘Thank for Contacting’);
mail.setHtmlBody(‘Thank for Contacting’);
// Send the email you have created.
Messaging.sendEmail(new Messaging.SingleEmailMessage[] { mail });
// system.debug(con);
}
return null;
}
// This is our wrapper/container class. A container class is a class, a data structure, or an abstract data type whose instances are collections of other objects. In this example a wrapper class contains both the standard salesforce object Contact and a Boolean value
public class cContact {
public Contact con {get; set;}
public Boolean selected {get; set;}
//This is the contructor method. When we create a new cContact object we pass a Contact that is set to the con property. We also set the selected value to false
public cContact(Contact c) {
con = c;
selected = false;
}
}
}

How to Display related contacts using inputfield?

Displaying related contacts

Visualforce page:
<apex:page standardController=”account” extensions=”ipf”>
<apex:form id=”f1″>
<apex:pageBlock >
<apex:pageBlockSection >
<apex:inputField value=”{!account.name}”/><br/>
<apex:commandButton value=”Find” action=”{!find}” reRender=”out” status=”mystatus”/>
</apex:pageBlockSection>
<apex:pageBlockSection id=”pb”>
<apex:actionStatus id=”mystatus” startText=”Loading……”>
<apex:facet name=”stop”>
<apex:outputPanel id=”out”>
<apex:pageBlockTable value=”{!conts}” var=”c” id=”tbl” >
<apex:column headerValue=”Name” value=”{!c.name}”/>
<apex:column headerValue=”phone” value=”{!c.phone}”/>
</apex:pageBlockTable><br/>
<apex:outputText rendered=”{!(conts.size=0)}” value=”No Records Found”/>
</apex:outputPanel>
</apex:facet>
</apex:actionStatus>
</apex:pageBlockSection>
</apex:pageBlock>
</apex:form>
</apex:page>

Apex class:
public with sharing class ipf
{
ApexPages.StandardController con;
account ee;
List<Account> lstaccount = new List<Account>();
List<contact> lstcontacts = new List<contact>();
public ipf(ApexPages.StandardController controller)
{
// employee__c ee=(employee__c)controller.getRecord();
con=controller;
}
public List<contact> getconts()
{
ee=(account)con.getRecord();
lstcontacts.clear();
accIds.clear();
lstaccount.clear();
if(ee.name<>null)
{
lstaccount=[select id,name from Account where name=:ee.Name];
}
for(Integer i=0;i<lstaccount.size();i++)
{
accIds.add(lstaccount[i].Id);
}
lstcontacts =[select id,name,phone,accountId from contact where accountid in : accIds];
return lstcontacts;
}
set<string> accIds = new set<string>();
public pagereference find()
{
return null;
}
}

See the below vfpage output:

Contacts