Skip to main content

Visualforce Examples

<apex:page controller="OrderStatusUpdate" id="pageId">
    <script type="text/javascript">
        function updateStatus(input,id) {
        
            if(input.checked){
                document.getElementById(id).value="Processing";
                //alert(document.getElementById(id).value);
            }else{
                document.getElementById(id).value="New";
                //alert(document.getElementById(id).value);
            }
        }
    </script>
    <apex:form id="formId">
    <apex:pageBlock id="pageBId">
        <apex:pageBlockTable id="tableId" value="{!Orders}" var="order">
            <apex:column value="{!order.Name}"/>
            <apex:column value="{!order.Customer__c}"/>
            <apex:column id="checkId" headerValue="Status">
                <apex:inputField id="inputStatus" value="{!order.Status__c}" />
            </apex:column>
            <apex:column headerValue="Started Processing" >
                <apex:selectCheckboxes onclick="updateStatus(this,'{!$Component.inputStatus}');" >
                    
                 </apex:selectCheckboxes>
            </apex:column>
            
        </apex:pageBlockTable>
    </apex:pageBlock>
    </apex:form>
    
</apex:page>
<apex:page controller="JavaScriptRemotingController" id="pageId">
  <script type="text/javascript">
function updateStatus(input,id) {
var inputStatus=id;
JavaScriptRemotingController.doStartShipping(inputStatus,function(result,event){

},{escape:true});
}</script>

 <apex:form id="formId">
    <apex:pageBlock id="pageBId">
        <apex:pageBlockTable id="tableId" value="{!Orders}" var="order">
            <apex:column value="{!order.Name}"/>
            <apex:column value="{!order.Customer__c}"/>
            <apex:column id="checkId" headerValue="Status">
                <apex:inputField id="inputStatus" value="{!order.Status__c}" />
            </apex:column>
            <apex:column headerValue="Started Processing" >
                <apex:selectCheckboxes onclick="updateStatus(this,'{!order.Id}');">                    
                 </apex:selectCheckboxes>
            </apex:column>
            
        </apex:pageBlockTable>
    </apex:pageBlock>
    </apex:form>
</apex:page>
global with sharing class JavaScriptRemotingController {
   
    public List<Order__c> Orders{
        get{
         Orders = new List<Order__c>();
        Orders = [SELECT id, Name, Customer__c, Status__c, Planned_Delivery_Date__c, Delivered__c FROM Order__c LIMIT 1000];
        return Orders;
        }
        set;
    }
    
    public JavaScriptRemotingController(){
       
    } 

@RemoteAction
global static Item__c doStartShipping(String para){
    Order__c updateOrder;        
    try{
       updateOrder=[SELECT id, Name, Customer__c, Status__c, Planned_Delivery_Date__c, Delivered__c FROM Order__c Where Id =: para];        
       updateOrder.Status__c = 'Shipping';
           update updateOrder;   
    }catch(DMLException e){
         ApexPages.addMessages(e);
         return null;   
    }        
return null;
}
}
<apex:page StandardController="Order__c" id="pageId">
  <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" />
  
  <script type="text/javascript">  
      j$ = jQuery.noConflict();
      j$(document).ready(function() {
          j$('.checkBox').click(function () {          
              j$('.inputStatus').val('Processing');         
          });
      
      });        
    </script>
    <apex:form id="formId">
    <apex:pageBlock id="pageBId">
        <apex:pageBlockSection id="pBlockSection">
            <apex:outputField value="{!Order__c.Name}"/>
            <apex:outputField value="{!Order__c.Customer__c}"/>
            <apex:inputField styleClass="inputStatus" value="{!Order__c.Status__c}" />           
            <apex:pageBlockSectionItem id="pbSectionItem">
                <apex:outputLabel value="Mark as Started Processing"></apex:outputLabel>
                <apex:selectCheckboxes styleClass="checkBox" >                    
                 </apex:selectCheckboxes>
            </apex:pageBlockSectionItem>
        </apex:pageBlockSection>
    </apex:pageBlock>
    </apex:form>
</apex:page>
<apex:page docType="html-5.0" sidebar="false" showHeader="false"  standardStylesheets="false" cache="true" >
 
<html>
<head>
<style type="text/css">
#div1 {width:400px;height:400px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script>
function allowDrop(ev)
{
ev.preventDefault();
}

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<p>Drag the Salesforce logo into the rectangle:</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br/>
<img id="drag1" src="{!URLFOR($Resource.CustomStyleZip,'/CustomStyleZipFolder/images/sfLogo.png')}" draggable="true" ondragstart="drag(event)" width="400" height="400"/>

</body>
</html>
</apex:page>

<apex:page controller="DynamicBindingsMapListExample">
  <apex:form >
    <apex:actionFunction name="reDisplayCustomers" rerender="cust" />
    <apex:pageBlock title="Criteria">
       <apex:outputLabel value="Starting Letter"/>
       <apex:selectList value="{!selectedKey}" size="1" onchange="reDisplayCustomers()">
          <apex:selectOptions value="{!keys}" />
       </apex:selectList>
    </apex:pageBlock>
    <apex:pageBlock title="Customers">
       
             <apex:outputPanel id="cust">
                <apex:pageBlockTable value="{!customerMap[selectedKey]}" var="cus">
                   <apex:column value="{!cus.name}"/>
                   <apex:column value="{!cus.Address__c}"/>
                   <apex:column value="{!cus.Email__c}"/>
                  
                </apex:pageBlockTable>
             </apex:outputPanel>
    </apex:pageBlock>
  </apex:form>
</apex:page>
public class DynamicBindingsMapListExample
{
    public Map<string, List<Customer__c>> customerMap{get; set;}
    public List<selectoption> keys {get; set;}
    public String selectedKey {get;set;}
    public Map<string, Customer__c> custByName {get;set;}
     
    public Set<string> getMapKeys()
    {
        return customerMap.keySet();
    }
     
    public DynamicBindingsMapListExample()
    {
        custByName = new Map<string, Customer__c>();
        List<string> sortedKeys=new List<string>();
        customerMap = new Map<string, list<Customer__c>>();
        customerMap.put('All', new List<Customer__c>());
        List<Customer__c> customers = [SELECT Id, Name, Email__c, Address__c FROM Customer__c ORDER BY Name asc];
                             
                             
        for (Customer__c tempCustomer : customers)
        {
            customerMap.get('All').add(tempCustomer);
            String start = tempCustomer.Name.substring(0,1);
            List<Customer__c> custFromMap = customerMap.get(start);
            if (custFromMap == null)
            {
                custFromMap =new List<Customer__c>();
                customerMap.put(start, custFromMap);
            }
            custFromMap.add(tempCustomer);
            custByName.put(tempCustomer.name, tempCustomer);
        }
         
        keys=new List<selectoption>();
        for (String key : customerMap.keySet())
        {
            if (key != 'All')
            {
                sortedKeys.add(key);
            }
        }
        sortedKeys.sort();
        sortedKeys.add(0, 'All');
         
        for (String key : sortedKeys)   {
            keys.add(new SelectOption(key, key));
        }         
        selectedKey='All';
    }
}

Working with field sets

A field set is a group of fields which can be defined in a declarative manner. Field sets are available in Visualforce pages in the API Version 21.0. These field sets can be displayed on a Visuaforce page by dynamic binding. For example, suppose we have created a field set (field set name: CustomerDetails) with the Email__cName, and Address__c fields of the customer object. We can refer to the CustomerDetailsfield set in Visualforce as follows:
<apex:page standardController="Customer__c">
    <apex:repeat value="{!$ObjectType.Customer__c.FieldSets.CustomerDetails}" var="f">
        <apex:outputText value="{! Customer__c [f]}" /><br/>
    </apex:repeat>
</apex:page>
When we want to create a managed package or add/ remove/reorder fields in the field set, we can accomplish that without modifying any code.

Tip

A Visualforce page can have up to 50 field sets.








Popular posts from this blog

Visual Workflow

The benefits of Visual Workflow There are  certain benefits of using Visual Workflow. They are as follows: It allows you to create an automated business process using click not code. Visual Workflow does not require coding, and even if you do not know Apex code you can still develop business processes. Using screens, fields, and choices, you can implement complex business processes to make sure that your users are entering data in the right format. Through Visual Workflow, you can manipulate data for certain objects that are not available for the Workflow rule. For example, when a "contact role" is created or updated as primary for an opportunity then create a new task. It allows you to auto submit records for approval. You can post messages on Chatter. For example, if opportunity status gets Closed Won, post a message on Chatter group. It allows you to embed the Flow into the Visualforce page and using the Force.com Site you can expose it for ...

VisualForce Best Practices

Accessing component IDs When we refer Visualforce  components in JavaScript, the ID attribute plays a major role. Every Visualforce component has an ID attribute. The ID attribute must be specified to a particular component in order to refer to it in JavaScript and it is used to bind the two components together. When the page is rendered, this ID attribute is a part of DOM ID of the particular component. The ID attribute must be unique as well. The following best practices are applied for accessing component IDs: Use the  $Component  global variable  to simplify access. For an example, when we have an input field with  id="inputOne"  within a page block with  id="blockOne" , we can access the input field with the $Component.blockOne.inputOne  expression. No need to  specify an ID for a component you want to access if it is an ancestor or sibling to the $Component  variable in the Visualforce component's hierarchy. ...

Visualforce fundamentals

Visualforce  is a web development framework that enables developers to build sophisticated, custom user interfaces for mobile and desktop apps that can be hosted on the  Force.com  platform. You can use  Visualforce  to build apps with user interfaces that look like the standard interface provided by  Force.com , as well as your own completely custom interface. Visualforce  enables developers to extend  Salesforce ’s built-in features, replace them with new functionality, and build completely new apps. Use powerful built-in standard controller features, or write your own custom business logic in  Apex . You can build functionality for your own organization, or create apps for sale in the  AppExchange . Visualforce  app development is familiar to anyone who has built web apps. Developers create  Visualforce  pages by composing components, HTML, and optional styling elements.  Visualforce  can integrate with ...