Tag Archives: Visualforce Page

Radio Button in Visualforce Page

<apex:page >
    <apex:form >
        <apex:pageBlock >
            <apex:pageBlockSection >
                <apex:pageBlockSectionItem >Gender
                    <apex:selectRadio >
                        <apex:selectOption itemLabel="Male" itemValue="m"/>
                        <apex:selectOption itemLabel="Female" itemValue="f"/>           
                    </apex:selectRadio>     
                </apex:pageBlockSectionItem>
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>
</apex:page>

Custom Label in Salesforce

Custom labels enable developers to create multilingual applications by automatically presenting information (for example, help text or error messages) in a user’s native language. Custom labels are custom text values that can be accessed from Apex classes, Visualforce pages, or Lightning components. The values can be translated into any language Salesforce supports.

We can create up to 5,000 custom labels for your organization, and they can be up to 1,000 characters in length.

Setup | App Setup | Custom Labels | Click ‘New Custom Label’ Button

Fill in the details and Click ‘Save’ button.

 

Custom Label in Visualforce page:
$Label.CustomLabel for Visualforce page.

<apex:page standardController="Account">
	
<h1>Example for Custom labels</h1>

	<apex:outputLabel value="{!$Label.Message}"/>
</apex:page>

 

Custom Label in Apex Class:
System.Label.Label_name for apex class

String msg = System.Label.Message; 

 

Custom Label in Lightning Component:
$Label.c.labelName for the default namespace.
$Label.namespace.labelName if your org has a namespace, or to access a label in a managed package.

<aura:component implements="flexipage:availableForAllPageTypes">
    
<div onclick="{!c.clickLabel}">
        <ui:outputText value="{!$Label.c.Message}}" />
    </div>

</aura:component>

 

Custom Label in Javascript:
$A.get(“$Label.c.labelName”) for the default namespace.
$A.get(“$Label.namespace.labelName”) if your org has a namespace, or to access a label in a managed package.

({
    clickLabel : function(component, event, helper) {
        var label = $A.get("$Label.c.Message");
        alert(label);
    }
})

Summary field as footer of pageblock table in Visualforce page.

In this post I’ll show, how can we add the summary field or total amount or other information in footer of PageBlockTable or DataTable in Visualforce page.

In the below example I’m using the apex:facet name="footer" tag, to show sum of all the opportunity line items of an Opportunity in footer of PageBlockTable.

<apex:page standardController="Opportunity">    
    <apex:pageBlock title="{!Opportunity.Name}">    
        <apex:pageblocktable value="{!Opportunity.OpportunityLineItems}" var="item">
            <apex:column value="{!item.PricebookEntry.Name}"/>
            <apex:column value="{!item.ServiceDate}"/>
            <apex:column value="{!item.Quantity}"/>
            <apex:column value="{!item.UnitPrice}">
                <apex:facet name="footer">
                    <apex:outputText value="Total:" style="float: right;"/>
                </apex:facet>
            </apex:column>
            <apex:column value="{!item.TotalPrice}">
                <apex:facet name="footer">
                    ${!Opportunity.Amount}
                </apex:facet>
            </apex:column>
        </apex:pageblocktable>
    </apex:pageBlock>
</apex:page>

Insert Records in Salesforce by using JavaScript

In this article I’ll demonstrate how to insert record in Salesforce object by using javascript, in VF page without any standard or custom controller or by apex class.

By using AJAX Toolkit we can do this task easily. There are two types of AJAX Toolkit one is synchronous and another one is asynchronous call.

Here is a simple example of data insert using Javascript in Visualforce page. In below example I’m using synchronous call.
These are the steps to insert data using Javascript:

  1. Connecting to the AJAX Toolkit(By using login methods or getting Session_ID).
  2. Embedding the API methods in JavaScript.
  3. Processing the results.

Sample Code:

<apex:page id="pg">
    <script src="/soap/ajax/20.0/connection.js" type="text/javascript"></script>
	<script>
		function insertAcc(){

			// Getting Session ID.
			sforce.connection.sessionId = "{!$Api.Session_ID}";

			//Creating New Account Record.
			var account = new sforce.SObject("Account");

			//Getting Account Name from inputText.
			account.Name = document.getElementById("pg:frm:pb:pbs:pbsi:txtName").value;

			//Create method 
			var result = sforce.connection.create([account]);

			//Getting result 
			if (result[0].getBoolean("success")) {
				alert("New Account is created with id " + result[0].id);
			}
			else {
				alert("failed to create new Account " + result[0]);
			}
		}
	</script>
	<apex:form id="frm">
		<apex:pageBlock title="Insert Account" tabStyle="Account" id="pb">
			<apex:pageBlockSection title="Account Name" columns="1" id="pbs">
				<apex:pageBlockSectionItem id="pbsi">
					<apex:outputLabel value="Name" />
					<apex:inputText title="Name" id="txtName" />
				</apex:pageBlockSectionItem>
			</apex:pageBlockSection> 
			<apex:pageBlockButtons>
				<apex:commandButton onclick="return insertAcc();" value="Save"/>
			</apex:pageBlockButtons>
		</apex:pageBlock>
	</apex:form>
</apex:page>

Difference between Remote Action and Action Function in Salesforce

Here are some differences between apex:actionFunction and @RemoteAction.

Remote Action Function:

  • Remote Action is an Apex annotation used to mark a method as being available for javascript remoting.
  • Remote Action can call the apex methods from any apex class.
  • Remote Action allows you to call the method from javascript yourself and retrieve the result as a javascript object for manipulation.
  • Remote Action methods are static and global, hence don’t have access to your current controller variables and methods.
  • Remote Action methods require less bandwidth, and server processing time, because only the data you submit is visible and the view state is not transferred.
  • Remote Action methods have to update the DOM manually using explicit JavaScript.
  • Remote Action methods can return data directly back to the calling JavaScript, but cannot update the page’s view state.

Action Function:

  • Action Function is a Visualforce tag allows you to invoke a controller action from the Visualforce Page asynchronously via AJAX requests.
  • Action Function can call the apex methods only from the class linked to the Visualforce page.
  • Action Function doesn’t let you get retrieve data but you can rerender the page or a specific section of the page to update it with new values from the controller instance.
  • Action Function methods are instance methods, and so can see the entire page state.
    Action Function has to transfer the page view state.
  • Action Function methods automatically update the Visualforce DOM and can refresh part or all of the page, and can provide a standard interface for showing a loading status through apex:actionStatus.
  • Action Function methods can update the page’s view state, but cannot return data directly back to JavaScript (although you can do this with some extra effort using oncomplete).

In general, apex:actionFunction is easier to use and requires less code, while @RemoteAction offers more flexibility. Moreover, @RemoteAction helps in reducing View State size and also provides you near real time transaction.
.