Month: September 2014

Defining Visualforce page as a Template

Defining Visualforce page as a Template

In our previous Salesforce Developer tutorial we have learned about How to insert single visualforce in another visualforce page. Through this Visualforce training tutorial we are going to learn about how to define Visualforce page as a Template.

How to define Visualforce page as a Template ?

To define visualforce page as a template we have to use composition component in VF page. This composition component is one of the method in creating powerful modular  visualforce pages in salesforce.com.

What does the template contain ?

When the template of the visualforce page is created, it contains static content and placeholders. This static content can be overridden by implementing page and it make easy to developer’s by not remembering every sequences of include component.

How visualforce page template is useful ?

  • Not required to remember the structure and sequences of included visualforce page.
  • It has more control over the appearance of many visualforce pages.
  • Easy for maintenance.

Important points to remember.

  1. When insert component is used in template page to define named area, this named area can be overridden by implementing page  template.
  2. We use Composition component in implementing page.
  3. Composition component is used to set the name of the page.
  4. Define component is used to provide content for the named area of the template.

Creating Visualforce page as a Template.

Create new visualforce page as shown below.

Defining Visualforce page as a Template

Click on Create page apextemplate as shown below.

Defining Visualforce page as a Template

Visualforce apex code.

Defining Visualforce page as a Template

Defining Visualforce page as a Template

From above visualforce page template, it consists of header, body and footer and also horizontal lines in between these three.

Defining Visualforce page as a Template Output.

Defining Visualforce page as a Template

Visualforce page using Template.

Defining Visualforce page as a Template

Defining Visualforce page as a Template

Here we have merged the three header, body and footer of the template. Here we have used composition component to render by itself.

Output.

Defining Visualforce page as a Template

We have successfully created visualforce page as a template.

How to insert Visualforce page in another Visualforce page

In our previous Salesforce training tutorial we have learned about static resources in Salesforce.com. In this visualforce training tutorial we are going to learn about how How to insert Visual force page in another Visualforce page. Adding visualforce page in another visualforce page is very easy and also it is very helpful in creating different modular visualforce pages. Using Include component in visualforce we can add a visualforce pages in another visualforce.

What happens when visualforce pages is inserted ?

When visualforce page is inserted  using Include component, it embeds the content and properties of the include pages in the current page.

Inserting visualforce page in another VF page.

To insert VF page use include component and pagename attribute. This pagename attribute specifies the name of the visualforce page to be inserted. We have to give the exact name of the visualforce page.

Ex :- <apex:include pagename=”actionstatus”/>.

Let us create simple VF page.

Below shown is theVF page that we created using include component.

visualforce page

From above screenshot, we have used include component to add actionstatus VF page which we created in our previous salesforce tutorial. pageName=”actionstatus” includes actionstatus VF page to current apexinclude page.

Output

visualforce pageSuppose if there are multiple controller in included visualforce page then include component makes the controllers to isolate with each other and makes every controller to work independently.

Creating Static Resources in Salesforce.com

Static Resources in Salesforce.com :- In our previous Salesforce developer tutorial we have clearly learned about different visualforce modular features. In this Salesforce Visualforce Tutorial we are going to learn about how to create static resources in Salesforce.com.

What is Static Resource in Salesforce.com ?

In salesforce.com, Static resources are those which are used to store images, files, documents, pdf document, archived, Zip files, style sheets, JavaScript files and so on. All these files are uploaded to static resources in salesforce.com to use in visualforce pages as a reference.

When images or file is uploaded to static resource we have to enter name where these names are validated when visualforce page is compiled. When visualforce page is compiled it prevents in creating invalid static resources. We can upload maximum size of  file to static resources is 5MB for single static resource. We have maximum for static resources in salesforce.com is 250MB only.

 How to upload files to Static Resources in Salesforce.com ?

To upload files or images to Static Resources in salesforce.com follow the steps given below.

Go to Develop=>Static Resources.

Creating Static Resources in Salesforce.com

Click on Static resources as shown above.

Creating Static Resources in Salesforce.com

Click on New button to create new Static resource in Salesforce.com.

Creating Static Resources in Salesforce.com

  • Enter the name for the static resource. The name must not contain spaces, alphanumeric characters, must be unique, name must begin with letter.
  • Description is optional.
  • Click on Choose file button to upload images, files, documents to resources.
  • Select cache control as private.

We have two option in cache control value in Static resources they are private and public.

If cache control is Public :- When creating static resources in Salesforce.com, Static resources data cached on saelsforce.com server will be shared to other user in our organization. It has no security and can be used by any user in an organization.

If cache control is Public :- If cache control is selected as private no Static Resource image are filed is shared with users in an organization. We have set cache control as private only.

How to use static resources in salesforce :- Get full details on Static resources.

Visualforce Modular features

Visualforce Modular features :- In our previous Visualforce Training Tutorial we have learned about visualforce asynchronous action components. In this Salesforce Tutorial we are going to learn about Different visualforce modular features in Salesforce.com.

Visualforce Modular features

In Salesforce.com, Visualforce pages consists of different modular features which consists of  smaller building blocks. Visualforce pages are the building blocks for developing different applications. Through visualforce pages we can provide rich user interface appearance and  behaviour to users.

There are some major modular features in visualforce that are helpful to create high maintainable modular features. In visualforce pages we use common function in a single place rather than repeating in different pages. Some of the visualforce modular features are

  • Static Resource :- In Static resources we can store images, Scripts, HTML, CSS, PDF, word documents and different static content can be stored in static resources. All these static resources can be used in visualforce pages. We can find static resource in salesforce.com here.

Go to Develop=>Static Resources.

Visualforce Modular features

Static resource

  • Visualforce page Inclusion :- In salesforce.com visualforce pages can be inserted in other visualforce page. Using include component we can insert visualforce page in other visualforce page.
  • Visualforce Composition :- To create powerful modular visualforce pages composition plays an important role in visualforce. Using composition we can create static and dynamic templates for visualforce pages.
  • Custom components :- Different custom components are available in visualforce to develop rich user interface visualforce pages.

Salesforce ActionStatus Component

Salesforce ActionStatus Component :- In our previous Salesforce Developer Tutorial we have learned about visualforce Actionsupport component with an example.In this Salesforce visualforce training we learn about Actionstatus component.

ActionStatus component in visualforce ?

In visualforce, Actionstatus component is used to notify the status of an asynchronous actions. Generally this component can also be use to notify when the action startes and when the action stopped.

 Example :- For example if we have created visualforce page  using Actionstatus Component. This component displays message when an action starts and when an action stopped. Actionsupport component must be placed in the location of the visualforce page where we want to test the action status. To display Action status messages we have to use startText and stopText attributes in visualforce page.

=> Let us see an example.

Actionstatus Controller.

action poller1

Now create new visualforce page as shown below.

action status

Click on Create page actionstatus.

action status0

Actionstatus visualforce page.

action status1

From above code we have used actionstatus component to display started action and stopped action. StartText attribute is used to show message when action is started and stopText attribute is used to display message when action is stopped. Here we also inserting input text field. When user click on input text field, action is fired to display action status message. Initially the actionstatus messages will be displayed as started. When action stops, actionstatus message will be displayed as stopped.

ActionStatus Output

action status2

action status3

ActionSupport Component – Visualforce ActionSupport Tag

 ActionSupport Component

In our previous salesforce developer tutorial we have learned about visualforce actionpoller component with an example. In this Salesforce Visualforce tutorial we are going to learn about visualforce actionSupport Component.

Why we have to use actionsupport component ?

When creating visualforce pages we have to use many action components to invoke javascript action to a controller. Like wise actionsupport component is used to invoke actions like Javascript, HTML input fields to a controller used for visualforce pages.

What action does actionsupport component takes ?

When actionsupport component is used in visualforce pages it triggers JavaScript or HTML  action. We have different JavaScript actions like onblur, onclick, onfocus  and many more events.

Where we have to place actionsupport component ?

Action Support component must be placed between <apex:form> and </apex:form> tags in the body of a visualforce page.

Let us see an example how ActionSupport component works.

Create new visualforce page as shown below.

action support

Click on the link as shown below.

action support0

Controller.

ActionSupport component controller

We have created controller that multiplies the result by two.

Visualforce pages using ActionSupport

action support1

Through this visualforce page we displaying the multiplication result. From above code when the text field receives Onfocus event timestwo action is triggered.

Output.

action support2

action support3

Visualforce ActionPoller Component

Visualforce ActionPoller Component  :- In our previous Salesforce Tutorial we have learned about Actionfunction in Salesforce with an example. In this Salesforce developer Training Tutorial we are going to learn about Visualforce Actionpoller component, visualforce actionpoller component with an example.

How  visualforce actionpoller component is used ?

In visualforce, actionpoller component is used to perform long run operations incrementally. This increment can be done by a series of small steps. In Visualforce pages, Actionpoller component is invoked with controller  during constant time intervals to perform long running actions.

Example :- Actionpoller component can be used to refresh database list for every 60 seconds.

Let us see a simple program on visualforce actionpoller component.

Create new visualforce page as shown below.

Visualforce Action Poller Component

Click on Create Page actionpoller link as shown below.

Visualforce Action Poller Component

Visualforce Page :- 

Visualforce Action Poller Component

  • When using action poller component in visualforce page we must provide value for  action attribute ex:- action={!timeTwo}.
  • Action poller component must be written between <apex:form> and </apex:form> tag.
  • If we required to perform long run action in visualforce pages, in action poller component we have to provide a value for interval attribute.

Form this Visualforce action poller component example, multiplication of a number by two can be automatically incremented for every 5 sec. Initially One is multiplied with number two after 5 sec result is multiplied by two and after 5 sec interval of time result is multiplied by two.

Controller :-

Visualforce Action Poller Component

Visualforce Actionpoller Component Output :-

Visualforce ActionPoller Component

After few intervals of time output is as shown below.

Visualforce ActionPoller Component

Actionfunction in Salesforce Example

Actionfunction in Salesforce :- In our previous Salesforce Developer Training Tutorial we have clearly learned about Refreshing visualforce page partially using reRender attribute.In this visualforce Tutorial we are going to learn about Actionfunction in Salesforce example, how actionfunction is used in salesforce.

What is an Actionfunction component?

Action function component triggers an action if a user  clicks on any  custom link or button used in visualforce page. In visualforce action function component is used to call method in a controller as a JavaScript function. Action function component can be used any where in the visualforce page to call action which include custom JavaScript code.

Actionfunction Example :

<apex:actionfunction name=”timestwofunction” action=”{!timestwo}” reRender=”result”>.

Let us see an example on action function component.

  • Create an visualforce page.

Action function in Salesforce Example

  • Click on create page actionfunction link as shown below.

Action function in Salesforce Example

  • Create an apex class as show below.

Actionfunction in Salesforce Example

Visualforce page:-

Actionfunction in Salesforce Example

To invoke an action by an actionfunction component we have to invoke action in action attribute(ex:- action=”{!timetwo}”) and JavaScript name is mentioned in the name attribute(ex:- name=”timestwofunction”). All these attributes must be written in between <apex:form> and </apex:form> tag.

<apex:param> is used to define arguments on the function. Param component must be used inside actionfunction component.

From this Salesforce Tutorial we creating visualforce page using action function component to multiply a number with two and reRender attribute which partially refreshes visualforce page. A value can be multiplied with value two using a controller method and JavaScript function.

Action function Output.

When we click on Save button the output will be as shown below.

Actionfunction in Salesforce Example

When we click on Run the result will be 2.

Actionfunction in Salesforce Example

When we click on Run again the result value is multiplied with 2 and displayed a 4.

Actionfunction in Salesforce Example

Refreshing Visualforce Page Partially using Rerender Attribute

Refreshing Visualforce Page Partially using Rerender : -In our previous Salesforce Developer Training Tutorial we have learned about different action components in visualforce. In this Visualforce Tutorial we are going to learn about Refreshing Visualforce Page Partially using Rerender attribute.

The default behaviour of any visualforce pages is to refresh whole page and it makes user to experience  slow page loading  performance. If we use Rerender attribute in Visualforce pages ir refreshes the subsets of visualforce pages like table of data and many more rather than refreshing entire page.

Rerender attribute can be used in any action component for Refreshing Visualforce Page Partially. reRender attribute will have identifiers. The identifiers must be proper visualforce components only and not any other tags like HTML.

Refreshing Visualforce Page Partially using Rerender Attribute

Let us see how to refresh visualforce page partially using reRender attribute rather than refreshing entire page.

Create new visualforce page as shown below.

Rerender Attribute

Click on Create page Partialpagerefresh link as shown below.

Rerender Attribute

Observe the code shown below.

Controller

partial page refresh

Visualforce Page :-

Rerender Attribute

Rerender Attribute

In this Salesforce Developer Tutorial we creating a visualforce page that which increments the value by 5. The initial value is Zero, if the user clicks on increment button the page is partially refreshed and the value is changes to 5. Again if the increment button is clicked the page is partially refreshed and the value is incremented to value 10. From above screenshot observe we have used reRender =”result”.

Output :-

Rerender Attribute

Rerender Attribute

Different Visualforce Action Components

Different Visualforce Action Components : In this Visualforce Training Tutorial we are going to learn about advanced topics on Visualforce.  Here we  learn about what are the different visualforce action components used in visualforce pages that interacts with controllers. In visualforce Salesforce.com has provided different action components to built various aplications with out using different Javascript code, ajax and different javascript libraries. All these applications are integrated with different scripts and HTML components automatically when visualforce components are used in VF pages to give rich user interactive experience to users.

What is an Action Component in Visualforce ?

Action Component invokes with a method in a controller and used to submit, delete, edit or any other action function can be done.

Different Visualforce Action Components

When writing visualforce page we can use ajax in pages. Visualforce supports ajax in two ways. They are

  • Visualforce action components allows different actions to run on background.
  • Visualforce action components can be used to refresh a different visualforce subsets like tables.

Different Visualforce Action Components.

  • Partial page reference using reRender attribute.
  • Actionfunction Components.
  • ActionPoller Component.
  • ActionSupport Component.
  • ActionStatus Component.

When a page is partially refreshed rather than refreshing entire page give rich experience to user and also it gives better page loading performance. Above mentioned action components will be clearly explained in our next visualforce tutorials.