[SF1] Visualforce as Home Page Component

Every release for Force.com offers some sneaky new feature which is pretty easy to gloss over - but for those that need the feature, is actually really powerful.

Free from the confines as a dashboard, Visualforce can now be added to the home page as an area component. This gives developers an high level of flexibility on what can be displayed on the first thing many users see when they log into Salesforce.com.

Setup is just like an other home page area, and you'll need to use a custom controller a la:

public class OpportunitiesController {

public List<Opportunity> opportunities {get; set;}

public OpportunitiesController() {
    opportunities = [SELECT Id, Name, Account.Name, ExpectedRevenue, CloseDate from Opportunity WHERE OwnerId = :UserInfo.getUserId()];
}

And probably a page that has no header (OK, definitely that) but retains some of the style. In this example I use a simple datatable but override a few bits of CSS:

<apex:page showHeader="false" controller="OpportunitiesController" standardStylesheets="true">
<style>
    th { background-color: #ccc; }
    td { padding: 5px; padding-left: 0px; background-color: white; }
</style>
<apex:pageBlock >
<apex:pageBlockSection title="My Opportunities" columns="1">

<apex:dataTable value="{!opportunities}" var="opp" >

        <apex:column>

            <apex:facet name="header">Name</apex:facet>
            <apex:outputLink value="/{!opp.Id}" target="_top">
                <apex:outputText value="{!opp.name}"/>
               </apex:outputLink>


        </apex:column>

        <apex:column>

            <apex:facet name="header">Account</apex:facet>

            <apex:outputText value="{!opp.Account.Name}"/>

        </apex:column>

        <apex:column>

            <apex:facet name="header">Expected Revenue</apex:facet>
            <apex:outputText value="{0,number,$#,###,###.00}">
                <apex:param value="{!opp.ExpectedRevenue}" />
            </apex:outputText>

        </apex:column>

</apex:dataTable>

</apex:pageBlockSection>        
</apex:pageBlock>

Full gist

Summer 14 release notes

comments powered by Disqus