Tag Archives: Visualforce Page

Disable LookUp Input Field on Visualforce Page

Sample Code:

<apex:page standardController="Contact" id="pg">
    <apex:form id="fm">
        <apex:inputField value="{!Contact.AccountId}" id="ifAcc" />
    var inpAcc = document.getElementById("pg:fm:ifAcc");


Check Object Level and Field Level Security Within a Visualforce Page

<!--Check object level access within a Visualforce page-->
<!--Check an Object field level access within a Visualforce page-->
<apex:outputText value="{!contactName}" rendered="{!$ObjectType.Contact.fields.Name.Accessible}" />
<!--Check an Object field level Update access within a Visualforce page-->
<apex:inputText value="{!contactEmail}" rendered="{!$ObjectType.Contact.fields.Email.Updateable}" />
<!--Check an Object Delete access within a Visualforce page-->
<apex:commandButton action="{!CustomDelete}" rendered="{!$ObjectType.Contact.Deletable}" />
<!-- Check an Object field level Create access within a Visualforce page .
stringToBecomeNewContactEmail is a generic string type-->
<apex:inputText value="{!stringToBecomeNewContactEmail}" rendered="{!$ObjectType.Contact.fields.Email.Createable}" />

Show required symbol in apex:inputText


public with sharing class Sample { 

    public String name {Get;set;}
    public Sample() {

Visualforce Page:

<apex:page controller="Sample">
    <apex:form >
        <apex:pageBlock >
            <apex:pageBlockSection >
                <apex:pageBlockSectionItem >
                    <apex:outputLabel value="Name"/>
                    <apex:outputPanel styleClass="requiredInput" layout="block" >
                        <apex:outputPanel styleClass="requiredBlock" layout="block"/>
                        <apex:inputText value="{!name}" required="true"/> 


Display pageBlock Buttons in bottom

We use location attribute in pageBlockButtons to display pageblock button in bottom alone. The possible values of location attribute are “top”, “bottom” and “both”. If not specified, this value defaults to “both”.

Here I’m using location="bottom" to display buttons in bottom only.

<apex:page standardController="Account">
		<apex:pageBlock mode="edit">
			<apex:pageBlockButtons location="bottom">
				<apex:commandButton action="{!Save}" value="Save"/>
				<apex:commandButton action="{!Cancel}" value="Cancel" immediate="true" />
			<apex:pageBlockSection columns="2" title="Account Information">
				<apex:inputField value="{!Account.Name}"  required="true"/>
				<apex:inputField value="{!Account.Phone}"/>

Note: If a pageBlock header facet is defined, the facet overrides the buttons that would normally appear at the top of the page block. Likewise if a pageBlock footer facet is defined, the facet overrides the buttons that would normally appear at the bottom of the page block.

Use Lightning Component in Visualforce Page

In Winter’16 the ability to add Lightning Components to Visualforce pages was made generally available. This powerful new feature allows you to reuse existing Lightning Components or design and implement new features as Lightning Components with the flexibility to use of them in new or existing Visualforce pages.

This article is to show you how to add Lightning components to Visualforce pages.

Let’s create a lightning component named “HelloWorld.cmp” either through developer console or through your IDE. Use the below mentioned code in your lightning component.

Lightning Component:

<aura:component implements="force:appHostable">
        Hello World    

Now we use this Lightning component in a Lightning app. For this I recommend you to create a new Lightning app, let’s call it “HelloWorldApp.app” and use the above lightning component “HelloWorld.cmp” in this app.

Lightning App:

<aura:application extends="ltng:outApp" access="global">
    <aura:dependency resource="c:HelloWorld"/>

In above Lightning app, I have used aura application access as global, so that it can be used anywhere in Salesforce organization like Visualforce. Extending ltng:outApp indicates that any component defined in this application can be used on Visualforce page.

Now create a VisualForce page which would display this lightning component. VisualForce page would provide the interface where we can view the lightning component that we are going to use in the page. Use the below code in your VF page.

In my Visualforce page, we have a special include apex:includeLightning for Lighting. We also need to create a container div id="LightningContainer" for the Lightning components to appear in.

Visualforce Page:

<apex:page >
    <apex:includeLightning />
    <div style="width:100%;height:100px;" id="LightningContainer" />
        $Lightning.use("c:HelloWorldApp", function() {
            $Lightning.createComponent("c:HelloWorld", { },
            function(cmp) {
                console.log('Component created');

Note: If your Org has a namespace, then in Visualforce page we have to mention the namespace for Lightning app as yournamespace:HelloWorldApp instead of c:HelloWorldApp.

Here is the Visualforce page output: