Category: Visualforce

How to create Salesforce Visualforce page – Visualforce Basics

How to create Salesforce Visualforce page.

To create Salesforce Visulforce page,  navigate to Developer console. Salesforce VF pages can be created and edited using Salesforce developer console and from Pages. Salesforce Developer console has powerful development tools like syntax highlighting, tag pair matching, auto suggest, smart indenting and auto complete. To create Salesforce Visualforce page using developer console follow the steps given below.

  1. Open Developer console under your name or quick access menu.

Salesforce Developer Console

  1. Now developer Console will be opened in New window.
  2. To create VF page click File | New | Visualforce page.

Hello world Visualforce page

  • Now to File | Click on save button.
  • Now click on preview button to see you new Vf page.

Creating Salesforce Visualforce pages through pages.

This is another process of creating Salesforce Visualforce pages. To create Visualforce page navigate to Develop | Visualforce Pages.

create Salesforce Visualforce page

  • Click on New button to create Visualforce page.
  • Enter label and Name.
  • Finally click on save button.

create Salesforce Visualforce page

Creating Salesforce Visualforce pages from URL

This is the third method for creating Visualforce page. As shown in above steps, to create VF page must navigate to Setup | Build | Develop | pages or Developer console every time. To create Visualforce page directly from URL, click on the URL and add /apex/pages at the end of the Salesforce URL as shown below.

  • https://c.ap4.visual.force.com/apex/PageName.

Creating Salesforce Visualforce pages from URL

  • Click on createpage Vftestpage to create new Vf page in Salesforce.
  • To check the created visualforce page navigate to Build | Develop | Visualforce. Here list of all Vf pages in Salesforce will be displayed.

Visualforce pages can be used in different ways in Salesforce organisation. Some of them are

  • VF pages can be used by overriding the standard button.
  • VF page can be called using the custom help links for the custom object.
  • Creating JavaScript button to open VF page.
  • Creating custom buttons to open VF page.
  • Vf pages can be added to custom tabs, dashboards and page layouts.

How to add CSS to Visualforce pages | Salesforce

How to add CSS to Visualforce pages

We can add CSS to Visualforce pages to change the look and Feel of the Salesforce application. So what is CSS? CSS stands for Cascading Style Sheets(CSS), which allows user to create rules that specify how the content of an element should appear. Each statement in CSS consists of locations, a property in the location and a style to apply to that property. Salesforce Visualforce Stylesheets (CSS) are automatically included in Visualforce pages to define the properties of an attribute and to change the look and feel of the application.

We add CSS to Visualforce pages in three ways. They are

  1. Inline CSS.
  2. External CSS and
  3. Internal CSS.

 Add CSS to Visualforce pages through Inline CSS

Adding CSS to Visualforce page using Inline CSS, the style of the component is defined with in the component by using an attributes called Stye.

output

css in visualforce pages

As shown in above in Inline CSS, we will define the property with in the component itself. Below are the some CSS properties that we can use in Visualforce page.

Text PropertiesBackground EffectsFont PropertiesBorder Properties
Center, Right, JustifyBackground-colorFont-styleborder-bottom
over-LineBackground-imageFont-variantborder-collapse
UnderLineBackground-repeatFont-weightborder-color
Text-transformation:LowercaseBackground-attachmentFont-sizeborder-image
Text-transformation:uppercaseBackground-positionFont-familyborder-left
Text-transformation:CapitalizeBackground-sizeCaptionborder-style
Text-ShadowBackground-clipicon border-width

Internal CSS

Adding CSS to Visualforce page using Internal CSS, we define the CSS with in the Visualforce page and should be defined with in the <script> tag. Generally Internal CSS can be defined in three ways. They are

  • By Using ID.
  • By Using Class and
  • By Using tag.

Visualforce page

Output

External CSS

In external CSS, we must define the css file outside the Salesforce and we can load this file as a Static resource and use it in all the Visualforce pages. External CSS in Visualforce pages can be applied in three steps.

  • Create .CSS file.
  • Loading .CSS file file as Static resource in Salesforce.
  • Adding the CSS(Cascading stylesheet) in Visualforce page.

Conclusion : In this Salesforce tutorial, we have learned how to add CSS to Visualforce pages using Inline CSS and Internal CSS. In our upcoming Salesforce tutorial, we will learn how to include CSS file in Visualforce.

Apex Form Component

Apex Form Component

Apex Form Component is used to create Forms in Visualforce page. Apex input and output components are added inside <apex:form> Component. It is required to add only one <apex:form> tag instead of adding many form tags. The body of the form determines the data that is displayed and the way it is processed.

Apex Form Component Attributes.

Accept

Accept is an attribute and it’s a string type, the text to display as a tooltip when the user’s mouse pointer hovers over this component.

Accept charset

Its a string type, it’s a comma separated list of characters encoding that a server processing this form can handle.

forceSSLThe form will be submitted using SSL.
onclickA javascript invoked if the onclick event occurs.
ondclickA javascript invoked if the ondblclick event occurs.
targetThis attribute includes target names like “_blank”, “_parent”,”_self” and “_top”.
prependIdIt is a boolean type that specifies whether this form should prepend its ID to the IDS of it child component.

Visualforce page

Output

Apex Form component

Apex Form component supports HTML pass-through attributes using the “html-” prefix. Pass-through attributes are attached to the generated <form> tag. You can add arbitrary attributes to many Visualforce components that are “passed through” to the rendered HTML. This is useful, for example, when using Visualforce with JavaScript frameworks, such as jQuery Mobile, AngularJS, and Knockout, which use data-* or other attributes as hooks to activate framework functions

Apex pageblocksectionItem component

Apex pageblocksectionItem component

Apex pageblocksectionItem component can include up to two child components where an <apex: pageblocksection> creates one column in one row. If there is no content included in apex pageblocksectionItem component, then the content spans both cells of the column. If two child components are specified , the content of the first is rendered in left, “label” cells of the column, while the content of the second is rendered in the right , “data’’ cell of the column.

Apex pageblocksectionItem component attributes

dataStyleThis attribute is used to style the content using CSS.
dataTitleThis is used to display the pageblocksection column.
dirThis is used to display the direction of the text (RTL or LTR).
labelStyleIts a string type, these style used to display the content of the left “label” cell of the page block section column and uses all JavaScript enabled tags
renderdIt is a Boolean types, that specifies whether the component is rendered on the page or not.

In this Salesforce tutorial, we are going to create Visualforce page for addition of two number, subtraction and multiplication using apex pageblocksection and Apex pageblockSectionItem.

Visualforce page

In above Visualforce page, We have used controller “Subtraction” to perform addition, subtraction and multiplication operation. Apex : CommandButton and Apex:commandLink components must be defined inside Apex:form component.

  • Add pageblock and enter Title as “Calculator”.
  • Now add pageblocksection, Title and specify the number of columns that to be displayed.
  • Now in Apex pageblockSectionItem component, enter <apex:outputLabel> and <apex:inputText> as shown above.

Controller

Output

Apex pageblocksectionItem component

  • Enter x value and Y value.
  • Now click on the operation that you want to perform.
  • The result will be displayed as shown above.

Apex PageBlockSection component

Apex PageBlockSection component

Apex PageBlockSection component is used to create sections within a page block to categorize different fields into different sections. It’s similar to adding a section by using a edit page layout assignment. Apex PageBlockSection component consists of two cells, one for “Label” and another for “value“. 

Each component found in the body of an <apex: pageblock section> is placed into the next cell in a row until the no. of columns is reached. Apex pageBlockSection must be a child component to <apex:pageBlock> component. <apex:inputField> and <apex:outputField> are the two components used to add fields from a Salesforce object.

Apex PageBlockSection component attributes.

Title This attribute will display the title of Apex PageBlockSection component
Collapsible Collapsible is a boolean type. It Specifies whether the page block section can be expanded and collapsed by a user, by default its “TRUE”
ColumnsColumns is an Integer type. It specifies t specifies the no. of columns that can be included in a single row of a pageblock section
DirIt specifies the text direction RTL or LTR

Visualforce page

We can add any number of Apex Page Block Section component in <apex:pageblock> component. To specify Apex PageBlockSection as expanded and Collapsed use Collapsible attribute as shown above.

  • To specify the number of columns use columns attribute and enter the integer value in page block section.

Output

apex pageblocksection component

In the first page block section, we entered 2 columns for the row and in Second block section we enter 3 columns for the row. Now we understood the working and usage of Apex pageblockSection component.

Conclusion

In this Salesforce tutorial, we clearly understood about Apex Page block section component. In our upcoming Salesforce tutorial, we will learn about Apex pageblocksectionItem component and it’s attributes.

apex pageblockbuttons Component

apex pageblockbuttons Component

Apex pageblockbuttons Component is used to create  set of buttons on pageBlock component. Apex pageblockbuttons component can be styled like Standard salesforce buttons and the the component must be a child component of an apex:pageblock componentThis apex pageblockbuttons tag creates buttons and can be placed on the top, bottom and on both using “Location” attribute.

apex pageblockbuttons Component attribute.

TitleTitle attribute is used to create title for pageBlock component.
DirDir attribute will specify the direction in which content of the pageblock should be displayed on the page.
renderedrendered attribute is a boolean type. This attribute specifies whether the pageblock should be displayed on the page or not.
IdId attribute will specify id of the component to recognize the component in the page
LocationLocation is an attribute which specifies the location of the buttons to be displayed either on top, bottom or on both.

Visualforce page

  • Every Visualforce page must be started with <apex:page> tag. Apex pageblockbuttons Component must be a child of Apex pageblock component, so we added inside <apex:pageblock> tag.
  • Every <apex:CommandButton> must be written inside <apex:form> tag and the tag must be only one.
  • We can add location of the buttons as top, bottom and both.
  • For command buttons we have added action and enter disabled as “true” in the second block, this disables the function of the button.

Output

apex pageblockbuttons component

Conclusion

In this Salesforce tutorial, we have learned about Apex pageblockbuttons component and its tags. In our next Salesforce tutorial, we will learn about Apex PageBlockSection component.

apex:CommandButton Component

apex:CommandButton component is used to create a button on Visualforce page. <apex:CommandButton>must always be a child of<apex:form> component, which means to create a button apex:CommandButton must written in apex:form tag. Button in Visualforce page is rendered as an HTML output element. 

Example

apex:CommandButton Component Attributes

Action Action attribute is used to determine what action should be performed when we click on “Submit button”.
AccessKeyAccessKey attribute is a string type.The keyboard access key that puts the command button in focus
DisableIt is a Boolean type. If we want to disable the button we should give it as “True”. If set to true, the button appears disabled. If not specified, this value defaults to false.
DirDir attributes is used to display text direction on the button.
ImagesIt is a String Type. The absolute or relative URL of the image displayed as this button
RerenderIt is a Boolean type. It specifies whether the component is rendered on the page.

Visualforce page

As shown in above Visualforce page<apex:CommandButton>must always be a child of<apex:form> component. To create command button add apex:commandbutton component and enter the value for the button. Now we must add action attribute to the button. This action attribute is used to determine what action should be performed when we click on “Submit button”.

Output

apex:commandbutton component

Conclusion : In this Salesforce tutorial, we have learned about apex:CommandButton component and it’s attributes with an example. In our upcoming Salesforce tutorial, we will learn about apex:pageBlockButton.

apex:pageblock component

apex:pageblock component

apex:pageblock component will create a block in the page to create styles similar Salesforce detail page, without any default content. In Salesforce detail page, we see the components in 2 column  by default. Using apex:pageblock component we can define any number of columns using title and body. In this Salesforce tutorial, we will learn about apex:pageblock component and it attributes with an example.

apex:pageblock component Attributes.

TitleTitle attribute is used to create title for pageBlock component.
helptitlehelptitle is string type. The text in title will be displayed when a user hovers the mouse over the help link for the pageblock.
DirDir attribute will specify the direction in which content of the pageblock should be displayed on the page.
renderedrendered attribute is a boolean type. This attribute specifies whether the pageblock should be displayed on the page or not.
IdId attribute will specify id of the component to recognize the component in the page
helpURLhelpURL attribute is string type. The URL of a webpage that provides help for the page block. We can perform the same actions which can be performed using the form tag, the Java script enabled tag attributes are like the following Onclick, onclick, onkeydown, onkeypress, onkeyup.

Visualforce page

In the above Visualforce page, we have added three page blocks. In the first pageblock we added Title, helpTitle and helpUrl. When we click on needHelp it will redirect to ”https:www.tutorialakart.com”. In Second pageblock we have added direction as “Right to Left” and in third pageblock we added rendered attribute as {!NOT(true), this will not display third block in the output. If we added {!NOT(false)}, third block will be displayed as usual.

Output

apex:pageblock