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 ([email protected])

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

Click Save

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

Type: TaskController

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

Click on Edit of an record

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

Technology

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