Demo how to create visualforce and apex controller to update, delete custom object

Demo how to create Visualforce and Apex Controller to
update, delete custom object
Description: Demo how to create visualforce and Apex Controller to load, create and update custom
object.
Author: Tuan Vo (tuanv2t@gmail.com)
Version: 1.0
Contents
Create a custom object Task.........................................................................................................................1
Create a classic Visualforce Page..................................................................................................................7
Show page on a tab.......................................................................................................................................8
Create controller to get Tasks.....................................................................................................................13
Modify Visualforce page to show tasks ......................................................................................................16
Create new visualforce page to add new Task ...........................................................................................19
Create button New Task on the list ............................................................................................................24
Create and page to update existing Task....................................................................................................28
Create a custom object Task
Log in as a Developer Salesforce account.
Create new custom object Task

Add some fields for the new custom object Task.
Add Text field Title
Add new Date field Due Date

Add new number field Remaining Hours

Add new number field Priority
Finally, there are some custom fields as below

Create a classic Visualforce 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 Task 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 Task 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 tasks from database and show tasks in page .
Create controller to get Tasks
File > New > Apex Class

Copy and paste this code segment into the TaskController
public class TaskController {
public List<Task__c> getTasks(){
List<Task__c> results = Database.query(
'SELECT Id, Title__c, Remaing_Hours__c,Priority__c,Due_Date__c ' +
'FROM Task__c ' +
'ORDER BY Title__c'
);
return results;
}
}
Now the TaskController looks like this

Note: According to the rule of Apex, the method getTasks will allow the code on Visualforce page to use
variable Tasks (See more at https://www.developerforce.com/guides/Visualforce_in_Practice.pdf )
Modify Visualforce page to show tasks
Back to the page Task ( Developer Console -> File > Open Resource )
Find Task.vfp

Modify the source of Task.vfp as below
<apex:page controller="TaskController">
<apex:pageBlock title="Tasks">
<apex:pageBlockTable value="{!Tasks}" var="task">
<apex:column value="{!task.Title__c}"/>
<apex:column value="{!task.Remaing_Hours__c}"/>
<apex:column value="{!task.Priority__c}"/>
<apex:column value="{!task.Due_Date__c}"/>
</apex:pageBlockTable>
</apex:pageBlock>
</apex:page>
Now the Task.vfp looks like this

Now login salesforce, reopen the tab Task page and see how it works

There’s no data now. We will create form to input data.
Create new visualforce page to add new Task
First, it might need to create a new controller that will take responsibility to create new Task
In this case,it’s able to reuse controller TaskController 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 Task__c newTask {get;set;}
This model must be instanced in the constructor
public TaskController(){
newTask = new Task__c();
}
Create a new public method to receive model and create new Task
public PageReference createNewTask() {
insert newTask;
return new PageReference('/apex/Task?id=' + newTask.Id);
}
The return statement will bring user back to the list whenever the new task has been created.
Nex, create a new Visualforce page from Developer Console, this page will be used as a form to create
new Task.

The content of the page looks like this
<apex:page controller="TaskController ">
<h1>Add Task</h1>
<apex:form>
<apex:pageBlock>
<apex:pageBlockSection columns="1">
<apex:inputField value="{! newTask.Title__c }"/>
<apex:inputField value="{!newTask.Remaing_Hours__c}" />
<apex:inputField value="{!newTask.Priority__c}" />
<apex:inputField value="{!newTask.Due_Date__c}" />
</apex:pageBlockSection>
<apex:pageBlockButtons>

<apex:commandButton action="{!createNewTask}" 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/TaskNew
And here’s how it looks like

Enter some values and try to create new task

After clicking button Create
Go to the url of the Task like this
https://c.ap4.visual.force.com/apex/Task
(c.ap4 is my domain of my developer account, your domain might be different.
The new created task will be shown on the list.
Until now, the controller TaskController looks like this
}

'FROM Task__c ' +
'ORDER BY Title__c'
);
return results;
}
insert newTask;
}
}
There’s no change on the visualforce page Task.vfp
The next step is creating a new button on the list, clicking on that button will bring user to the page to
create Task above
Create button New Task on the list
Modify controller TaskController to add new public method
public PageReference redirectCreateTask()
{
PageReference pr = new PageReference('/apex/TaskNew');

return pr;
}
Open Developer console and open the visualforce page of the Task.vfp
Add new script below
<apex:form >
<apex:commandButton action="{!redirectCreateTask}" value="New Task"/>
</apex:form>
Note, the apex:commandButton must be located inside a apex:form
Now the visualforce page Task.vfp will look like
<apex:form >
</apex:form>
</apex:pageBlock>
</apex:page>

Open the tab Task on salesforce to check

The button New Task has appeared.
Clicking on that button will bring user to page to add new task.
Until now, the content of the controller look like this
}

'FROM Task__c ' +
'ORDER BY Title__c'
);
return results;
}
insert newTask;
}
{
return pr;
}
}
The next step is creating a new page to Update an existing task.
Create and page to update existing Task
First, it’s able to reuse the controller TaskController ( there’s no need to create a new custom controller
such as TaskUpdatingControler ).
The constructor of the controller will receive the Id of task.

Modify TaskController , add new public Task__c updatedTask to act as a model in the edit page ( the edit
page will be created soon )
public Task__c updatedTask
//https://www.developerforce.com/guides/Visualforce_in_Practice.pdf
if(ApexPages.currentPage().getParameters().get('id')!=null){
updatedTask = [select Id, Title__c, Remaing_Hours__c,Priority__c,Due_Date__c from Task__c
where id=:ApexPages.currentPage().getParameters().get('id')];
}
}
Add new public method to update the task
public PageReference updateTask () {
update updatedTask;
return new PageReference('/apex/Task');
}
Here’s how the controller looks like
//https://www.developerforce.com/guides/Visualforce_in_Practice.pdf
if(ApexPages.currentPage().getParameters().get('id')!=null){
updatedTask = [select Id, Title__c, Remaing_Hours__c,Priority__c,Due_Date__c from Task__c
where id=:ApexPages.currentPage().getParameters().get('id')];
}

}
'FROM Task__c ' +
'ORDER BY Title__c'
);
return results;
}
insert newTask;
}
{
return pr;
}
public Task__c updatedTask {get;set;}
public PageReference updateTask () {
update updatedTask;

return new PageReference('/apex/Task');
}
}
Now create a new visualforce page that will be used to update
Create a new visualforce page , name it TaskUpdate and its content will be
<apex:page controller="TaskController ">
<h1>Edit Task</h1>
<apex:form>
<apex:pageBlock>
<apex:pageBlockSection columns="1">
<apex:inputField value="{! updatedTask.Title__c }"/>
<apex:inputField value="{!updatedTask.Remaing_Hours__c}" />
<apex:inputField value="{!updatedTask.Priority__c}" />
<apex:inputField value="{!updatedTask.Due_Date__c}" />
</apex:pageBlockSection>
<apex:pageBlockButtons>
<apex:commandButton action="{!updateTask}" value="Save" />
</apex:pageBlockButtons>
</apex:pageBlock>
</apex:form>
</apex:page>

Now modify the home Task.vfp page, add new link Edit, clicking on that link will bring user to the edit
page

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

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

Demo how to create visualforce and apex controller to update, delete custom object

More Related Content

Similar to Demo how to create visualforce and apex controller to update, delete custom object (20)

Recently uploaded (20)

Demo how to create visualforce and apex controller to update, delete custom object