Month: August 2014

What is meant by visualforce native user interface?

visualforce native user interface : In our previous Salesforce Developer Tutorial we have learned about Visualforce Force.com user interface components. In this Visualforce Training Tutorial we are going to learn about how visualforce pages are integrates with native user interface pages.

What is meant by visualforce native user interface?

In salesforce Force.com proivdes a way to integrate visualforce pages with native user interface pages. By using native user interface in visualforce we can override the buttons, override standard pages, we can add buttons to standard pages, add tabs. All these actions can be done to provide custom user interface.

What is meant by visualforce native user interface?

What is meant by visualforce native user interface?

Custom user interface interaction can be done to some of the following. They are

  • Standard pages.
  • Standard Buttons.
  • Page Layouts.
  • Custom Buttons and Links.
  • Custom Tabs.

Standard pages :- Standard Pages are the default pages provided by salesforce.com .These pages can be overridden by using custom visualforce pages.

Standard Buttons :- In standard pages we can find different standard buttons like create, edit, delete, view , edit and so on. The working of these standard buttons can be extended by using custom visualforce code.

Page layouts :- In standard and custom page layouts we define the position and visibility of a fields, buttons, related list  in salesforce. We can create custom page layouts with different user’s permissions. Visualforce pages can also be embedded in to page layouts.

Custom Buttons and Links :- In Standard pages Custom Buttons can be presented at the top of the page and custom links are presented in a detail page.

Custom Tabs :- Using custom visualforce page we can create custom tabs at the top the navigation bar for every application in salesforce.com

Force.com User Interface Components

Force.com User Interface Components :- In our previous Visualforce Training Tutorial we have learned about Force.com Styled Components. In this Salesforce Developer Tutorial we are going to learn about Force.com User Interface Components and how Force.com User interface Components are used in visualforce pages.

What are Force.com User Interface Components ?

Force.com User Interface components are used to expand many subordinate user interface elements to our visualforce pages. Through Force.com user interface components we can create, edit, deletes records.

Force.com User interface components are divided in to four types. They are

  • List view Components.
  • EnhancedList Components.
  • RelatedList Components.
  • Detail Components.

List View Components :-  listviews component binds database object to a  component.The listview component is rendered only when Enable Enhanced Lists option is disabled for the organization. Through listviews components we can edit, create list views of a record.

EnhancedList Components :- Enhancedlist component is an advanced or modern version for listview components. These components will have drop down list, columns, sortable columns, view names and tables of records.

RelatedList Components :- RelatedList components renders a list of child components. Depending upon the user’s permissions the related records can be edited, deleted and created. relatedlist component supports both Detail and Lookup relationships.

Detail Components :- Detail Components are those which provides subset to user interface’s detail page for an object. It provides inline editing feature for an object ad also it respects page layouts defined per record type.

Force.com Styled Components in Salesforce

Force.com Styled Components : In our previous Salesforce Tutorials we have learned about primitive components in salesforce.In this Salesforce Training Tutorial we are going to learn about Force.com Styled Components and what are the different categories in Force.com Styles Components.

What are Force.com Styled Components ?

Force.com Styled Components are those which provides styling to web pages by using CSS and Java Script and no prioir knowledge on CSS and Java Script is required for developers. When using force.com Styled components CSS and JavaScript properities are automatically interfaces with visualforce pages through some functions.

Force.com Styled Components in Salesforce

Styled Components are divided into  five categories based on their functions. They are

  • Page Structure.
  • Action Containers.
  • Table.
  • Pagination Components.
  • Notifications.

Page Structure :-Based on page structure we have four structural elements in Force.com. SectionHeader, pageBLockSection, PageBlock and pageBlockSectionItem are four page structure based components. These elements provide clear organizational structure, sections, subsections, labels and fields.

Action Containers :- PageBlockButtons, toolbar, toolbarGroup are the components based on Action Containers. Action Container provides buttons, links and different action functions to visualforce pages.

Table :- PageBlockTable is an element used to insert rows and Columns.

Pagination Components :- PanelBar, PanelBarItem, tab, tabpanel are the components based on pagination components.  Pagination components are used to show or Hide content, buttons and links dynamically.

Notifications :- PageMessage is a component used  to show error messages.

Primitive Components in Salesforce

In our previous Salesforce Developer Tutorial we have learned about action components in Salesforce. In this Salesforce Training Tutorial we are going to learn about Primitive components in Salesforce.

What are primitive Components?

Primitive Components.

Some of the primitive components are as follows

OutputPanel OutputText
Outputink Image
includescript styleSheet
iframe

primitive components

Generally With regular HTML tags we are able to increase the size of the page, loading time and also able to hide javascript and CSS but visualforce provides attributes to improve performance of the page. We can not insert JavaScript and CSS directly into the HEAD like HTML but in visualforce pages it is not possible where duplication of scripts and stylesheets are not possible.

Visualforce Action Components

Action Components :- In our previous Salesforce Tutorial we have learned about Visualforce Data components, what are the different types of Data components. In this Salesforce Training Tutorial we are going to learn about Visualforce Action Components and how Action Components are used in Visualforce Pages.

What are Action Components in Visualforce ?

Action Components are those which allows a controller in to a visualforce page to perform various operations like inserting, updating a page, refreshing a page or navigating to new page.

How Action Components Works ?

If we have written Action component code to refresh a page or to navigate to a new visualforce page first the state of the user interface input elements on the page are injected into the variables of the controller using Setter.

Action Components

When working with Action components in visualforce we mainly observe two action components they are commandbutton and commandlink.

CommandButton :- Commandbutton is used to insert  Hyper markup Text Language (HTML) buttons.

CommandLink :- CommandLInk components is used to insert anchor text to links.

Note :- Both Command Button and Command LInk components are used between <apex:form> and </apex:form> tag only.

Primitive Components.

Some of the primitive components are as follows

OutputPanel OutputText
Outputink Image
includescript styleSheet
iframe

Generally With regular HTML tags we are able to increase the size of the page, loading time and also able to hide javascript and CSS but visualforce provides attributes to improve performance of the page. We can not insert JavaScript and CSS directly into the HEAD like HTML but in visualforce pages it is not possible where duplication of scripts and stylesheets are not possible.

Visualforce Data Components Overview

Visualforce Data Components :- In our previous Salesforce Tutorial we have learned about Visualforce view components basics. In this salesforce Training Tutorial we are going to learn about visualforce Data Components and list of data components.

Visualforce Data Components

What are Data components ?

Visualforce Data Components are those which manipulates fields and records of the Force.com data base with in visualforce page.

Visualforce data components

To clearly understand about Data Components in visualforce we have divided Data components in to three categories. They are

  • Metadata-Aware Components.
  • Primitive Data Components.
  • Repeating Components.

Metadata-Aware Components.

Metadata-Aware Components are only valid when the fields and records are bounded with database object. These components uses the definition of the database object yo determine the appearance of the component of the page.Inputfield and Outputfield are the two components available to display input elements and output elements.

  • Inputfield.
  • Outputfield.

Primitive Data Components.

Primitive Data Components are components which adds Visualforce functionality to Standard HTML Tags. This type of components must be used inside FORM tag.

List of Primitive Data Components.

OutputLabel InputCheckbox InputFile
InputHIdden InputSecret InputText
inputTextArea SelectList SelectRadio
SelectCheckBox

Repeating Components

Repeating Component renders the components body for every child in the collection. There are three types of repeating components available they are.

  •  DataList :- DataList Component is rendered as an HTML list. It renders every list item.
  • DataTable :- DataTable component is rendered as an HTML Table.
  • Repeat :- Repeat component loops over the elements of the collection and it does not provide any HTML formatting.

View Component Basics

View Component Basics :In our previous Salesforce Tutorial we have learned about Different Visualforce Controller. In this CRM Salesforce Training Tutorial we are going to learn about View Component Basics like what are the important areas to understand in View Components.

As already we have learned that view components are the the type of components which works with controllers to define appearance and behaviour of a Visualforce User interface. View Components are embedded with Visualforce page using XML markup.

view component basics

View Component Basics

To understand clearly about view components in visualforce we have to learn about three topics. They are

  • View Component Syntax.
  • Page Definition.
  • Component Visibility.

View Component Syntax

View Components consists of three parts they are

  • Component Name.
  • Attributes.
  • Component Body.

To understand clearly about view component syntax let us see an example.

<apex:dataList value=”{!resources}” var=”resource”>
<b>{!resources.Name}</br>
</apex:datalist>

Component Name :- From above code the name of the Component is named as tag name datalist. Datalist renders an HTML list with series of Li tags with a UL tags.

Attributes:- Every component has it’s own supported attributes. Attributes are the set of static name or expressions. From above example Var is the attribute which specifies a variable name to access each element of the collection.

Component Body :- The text between starting tag and ending tag is named as the component body.

Page Definition.

Page Definition is nothing but defining PAGE component in the beginning  of Visualforce page. When page component is defined in visualforce page is connects with controller and also it overrides the appearance of the page. Page component requires standard or custom controllers.

Controlling Component Visibility

We can control the visibility of the components in visualforce page by defining the component Boolean value as false. CSS and Java scripts can be controlled in visualforce page. Ex: Display : none

Visualforce View Components List

Visualforce View Components List : In our previous Salesforce Training Tutorial we have learned about Visualforce Controller extension. In this Salesforce Training Tutorial we are going to learn about Visualforce View Components, what are the different view components in visualforce and how they are used for visualforce pages.

Visualforce View Components List

To define the appearance and behaviour of a Visualforce User Interface we use View Components. There are different types of view components which are used to style visualforce page, to insert text boxes, labels, input and output action elements and so on.

What are the different types of Visualforce View Components.

Force.com provides 5 different view components to support common Web user interface design patterns. They are.

  • Data Components.
  • Action Components.
  • Primitive Components.
  • Force.com-Styled Components.
  • Force.com User Interface Components.

Data Components : Data Components are those which enables Visualforce page to move Data in to Controller and also used to extract Data from controller using various Standard Hyper Text Mark-up Language(HTML) elements. Some of the HTML elements like <p>, </p>, <br> and so on.

Action Components :- Action Components in visualforce page van be used to invoke methods on the controller , can also used for updating view state. Action components can also be used to refresh visualforce page and to navigate to a new page by using various action components.

Primitive Components :-Primitive Components are used to connect Standard Html  and Visualforce functions.

Force.com-Styled Components :- When creating visualforce page we are required to inherit the properties of Force.com native user interface there we use Force.com-Styled components. Using these components we can create CSS files in visualforce.

Force.com User Interface Components :- Force.com User Interface Components are used to inherit both the appearance of native user interface and its behaviour.

Visualforce Controller Extension

Visualforce Controller Extension :In our previous Salesforce Tutorial we have learned about Visualforce Custom controller and in this Salesforce Training Tutorial we are going to learn about visualforce controller extension with simple example.

What is visualforce controller extension ?

Visualforce controller Extension :-If we want to use both custom controller functionality and standard controller functionality we use extension controllers. Extension Controllers begins with Standard controller and extended or overridden with custom controller with custom apex code.

Syntax :- <apex:page standardcontroller = “contact” extensions = “Testclass1, Testclass2″></apex:page>.

Controller extension is the third type of controller which extends the behaviour of standard controller. Controller extensions are used to integrate visualforce page with native user interface. Controller extension can not override the functions of standard buttons.

Custom controllers are used along with standard controllers to become controller extensions. In controller extensions we can use multiple extensions in single visualforce page. Here the extension controller is divided in to smaller controllers. These smaller controllers acts as a subset of the behaviours.

let us see an example of extension controller.

visualforce custom controller0

Above shown code is the class for controller extension. For controller extension a constructor is used to pass a single record or multiple records to the class. StandardController is used to pass  single record to the class and StandardSetcontroller is used to pass multiple records to the class.

controller extensiom

The above shown is the visualforce page using Controller Extension.

Visualforce Custom Controller

Visualforce Custom Controller : In our previous Salesforce Tutorial we have clearly learned about Visualforce Standard Controller. In this Salesforce Training tutorial we are going to learn about Visualforce Custom controller actions that are invoked to visualforce page.

Visualforce Custom Controller

When a developer needs different logic and functionality he/she may write their own Apex controller class. Custom controller’s will not provide default functions like standard controllers. Custom apex code must be written for custom controllers.

Syntax :- <apex : page controller = “Mycontroller”></apex:page>

Visualforce Custom controller requires custom apex code to be bounded with visualforce page. When writing custom controller we have to define two actions.They arevisualforce custom controller

  • Exposing data.
  • Writing Actions methods.

Exposing Data.

In controller, page components can use expressions to bind data by reference. When data in visualforce page is modified controller can also be modified. if we want to provide read-only or read and write access to data we have to provide getter and setter methods  or both to variables.

Writing Action methods.

Action methods are public, non static controllers methods that return a pagereference object or null. If null, visualforce current page is refreshed and if it is not null pagereference is used to determine the location of the new page. Action methods in custom controllers have some  purpose. They are

  • To preserve View State.

At runtime Force.com preserves View state of the page and send back to server for invocation of an action. By using view state we can build multiple page without writing code.

  • To invoke custom logic.

To invoke custom logic like updating, inserting records to a data base we use DML methods. Along with constructors, action methods are used to write new business logic and also used to call existing apex code in visualforce controller.