Demo how to create visualforce page and custom controller via developer console

Demo how to create visualforce page and custom controller
via Developer Console
Description: Demo how to create visualforce page and custom controller to load, create and update
standard Account object using Developer Console.
Author: Tuan Vo (tuanv2t@gmail.com)
Version: 1.0
Contents
Create a classic Page.....................................................................................................................................1
Show page on a tab.......................................................................................................................................2
Create controller to get Accounts.................................................................................................................6
Modify Visualforce page to show accounts..................................................................................................9
Create new visualforce page to add New Account Demo ..........................................................................11
Create button New Account on the list......................................................................................................15
Create and page to update existing Account..............................................................................................18
Create a classic Page
Open the Developer Console under Your Name or the quick access menu (Setup gear icon).
The Developer Console opens in a new window.
Click File | New | Visualforce Page.
Enter AccountDemo for the name of the new page, and click OK.
A new, blank Visualforce page opens in the Developer Console.

Modify the content
<apex:page >
<h1>This is my Account Demo page</h1>
</apex:page>
The content will be updated later.
Show page on a tab
Go to Setup, Type Tab -> Create Tabs

Note: Select the Visualforce tab

Now we need to create controller to retrieve accounts from database and show accounts in page with
simple two columns Name and Account Number.
Create controller to get Accounts
File > New > Apex Class

Copy and paste this code segment into the AccountDemoController
public class AccountDemoController {
public List<Account> getAccounts(){
List<Account> results = Database.query(
'SELECT Id, Name, AccountNumber ' +
'FROM Account ' +
'ORDER BY Name'
);
return results;
}
}
Now the AccountDemoController looks like this

Modify Visualforce page to show accounts
Back to the page AccountDemo, File > Open Resource
Find AccountDemo.vfp

Modify the source of AccountDemo.vfp as below
<apex:page controller="AccountDemoController">
<apex:pageBlock title="Accounts">
<apex:pageBlockTable value="{!Accounts}" var="account">
<apex:column value="{!account.Name}"/>
<apex:column value="{!account.AccountNumber}"/>
</apex:pageBlockTable>
</apex:pageBlock>
</apex:page>
Now the AccountDmo.vfp looks like this

Now login salesforce, reopen the tab Account Demo and see how it works
Create new visualforce page to add New Account Demo
First, it’s necessary to create a new controller that will take responsibility to create new Account
In this case, controller AccountDemoController is able to reuse to make it simple
Because this is a custom controller, it’s necessary to add new public property to make it become a
model
public Account newAccount {get;set;}
This model must be instanced in the constructor
public AccountDemoController(){
newAccount = new Account();
}

Create a new public method to receive model and create new Account
public PageReference createNewAccount() {
insert newAccount;
return new PageReference('/apex/AccountDemo?id=' + newAccount.Id);
} The return statement will bring user back to the list whenever the new account has been created.
Nex, create a new Visualforce page from Developer Console, this page will be used as a form to create
new Account Demo.
The content of the page looks like this
<h1>Add Account Demo</h1>
<apex:form>
<apex:pageBlock>
<apex:pageBlockSection columns="1">

<apex:inputField value="{! newAccount.Name }"/>
<apex:inputField value="{!newAccount.AccountNumber}" />
</apex:pageBlockSection>
<apex:pageBlockButtons>
<apex:commandButton action="{!createNewAccount}" value="Create" />
</apex:pageBlockButtons>
</apex:pageBlock>
</apex:form>
</apex:page>
It’s able to access to page directly from url such as
https://c.ap4.visual.force.com/apex/AccountDemoCreate
And here’s how it looks like

Try to enter name, number and click Create
The new created Account will be shown on the list.
The next step is creating a new button on the list, clicking on that button will bring user to the page to
create Account above
Until now, the controller AccountDemoController looks like this
}

'FROM Account ' +
'ORDER BY Name'
);
return results;
}
insert newAccount;
}
}
There’s no change on the visualforce page AccountDemo
Create button New Account on the list
Modify controller AccountDemoController to add new public method
public PageReference redirectCreateAccountDemo()
{
PageReference pr = new PageReference('/apex/AccountDemoCreate');
return pr;
}
Open Developer console and open the visualforce page of the AccountDemo
Add new script below
<apex:form >

<apex:commandButton action="{!redirectCreateAccountDemo}" value="New Account"/>
</apex:form>
Note, the apex:commandButton must be located inside a apex:form
Now the visualforce page AccountDemo will look like
<apex:form >
</apex:form>
</apex:pageBlock>
</apex:page>

And the content of controller
}
'FROM Account ' +
'ORDER BY Name'
);
return results;

}
{
return pr;
}
insert newAccount;
}
}
The next step is creating a new page to Update an existing Account
Create and page to update existing Account
First, it’s able to reuse the controller AccountDemoController.
The constructor of the controller will receive the Id of account
Modify AccountDemoController, add new public Account updatedAccount to act as a model in the edit
page ( the edit page will be created soon )
public Account updatedAccount {get;set;}
//https://www.developerforce.com/guides/Visualforce_in_Practice.pdf
if(ApexPages.currentPage().getParameters().get('id')!=null){
updatedAccount = [select Id, Name, AccountNumber from Account where
id=:ApexPages.currentPage().getParameters().get('id')];

}
}
Here’s how the controller looks like
//https://www.developerforce.com/guides/Visualforce_in_Practice.pdf
if(ApexPages.currentPage().getParameters().get('id')!=null){
updatedAccount = [select Id, Name, AccountNumber from Account where
id=:ApexPages.currentPage().getParameters().get('id')];
}
}
'FROM Account ' +
'ORDER BY Name'
);
return results;
}
{
return pr;
}

insert newAccount;
}
public Account updatedAccount {get;set;}
public PageReference updateAccount () {
update updatedAccount;
return new PageReference('/apex/AccountDemo');
}
}
Now create a new visualforce page that will be used to update
Create a new visualforce page , name it AccountDemoUpdate and its content will be
<h1>Update Account Demo</h1>
<apex:form>
<apex:pageBlock>
<apex:pageBlockSection columns="1">
<apex:inputField value="{! updatedAccount.Name }"/>
<apex:inputField value="{!updatedAccount.AccountNumber}" />
</apex:pageBlockSection>

<apex:pageBlockButtons>
<apex:commandButton action="{! updateAccount }" value="Save" />
</apex:pageBlockButtons>
</apex:pageBlock>
</apex:form>
</apex:page>
Now modify the home AccountDemo page, add new link Edit, clicking on that link will bring user to the
edit page
<apex:column>
<apex:outputLink
value="AccountDemoUpdate?id={!account.Id}">
Edit
</apex:outputLink>
</apex:column>
So until now, here are the whole AccountDemo looks like

<apex:form >
</apex:form>
<apex:column>
<apex:outputLink
value="AccountDemoUpdate?id={!account.Id}">
Edit
</apex:outputLink>
</apex:column>
</apex:pageBlock>
</apex:page>
Run it

Make change something for this account and click Save, user will be brought back to the list

Demo how to create visualforce page and custom controller via developer console

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (8)

Similar to Demo how to create visualforce page and custom controller via developer console

Similar to Demo how to create visualforce page and custom controller via developer console (20)

Recently uploaded

Recently uploaded (20)

Demo how to create visualforce page and custom controller via developer console