London Force.com Developer Meetup

Tweet

This Thursday saw the inaugural London Force.com Developer Meetup, kindly sponsored by Tquila and organized by Wes Nolte, a name familiar to most readers of this blog I'm sure.  After years of reading about developer meetups all over the US, we finally got to have one of our own, and to top it all Jeff Douglas was attending.

There were three short talks - an overview of Talend, some thoughts on how to improve appplication development and a lively debate around whether Dynamic Visualforce Components are the Devil's work or a useful addition to the developer's tools.

There was also plenty of opportunity for networking and a chance to finally meet many people that I've had online exchanges with in the past.

Here's a picture from the event (courtesy of Ritesh Aswaney): L-R Bob Buzzard, Jeff Douglas, Wes Nolte:

The next meetup is scheduled for August 2nd.

Grouping Records and Children in Visualforce

Tweet

I've been working this week on producing a Visualforce page custom hierarchy style view of records and their children with additional grouping.  In this scenario I firstly want to display a record and its children in indented form, e.g

Account 1
   Contact 1
   Contact 2
Account 2
   Contact 1
   Contact 2

However, I also wanted to allow the user to group the parent records by particular attributes and display count information, e.g.

Attribute Value 1 - 2 records
   Account 1
      Contact 1
      Contact 2
   Account 2
      Contact 1
      Contact 2
Attribute Value 2 - 1 record
   Account 1
      Contact 1
      Contact 2

And finally, the user could regroup on demand by choosing a different attribute from a drop down list.

As I was looking to combine records and some additional information, I headed for my old friend the wrapper class.  In this case I wanted to wrap the group value, the list of records and the size of the records list.  As an aside, if I didn't need the record count I could probably have achieved this using a Map and Visualforce Dynamic Bindings using the techniques described in this post.

The wrapper class is shown below:

public class GroupWrapper
{
 public List<Account> accs {get; set;}
 public String groupedVal {get; set;}
 public Integer count {get {return accs.size(); } set;}
}

I've created this as an inner class of my controller. My page will be backed by a list of these classes, which I initially build from the constructor, but also rebuild if the user chose to regroup by a different attribute.

The first thing my controller constructor does is to retrieve the master list of records:

allAccs=[select id, Name, BillingStreet, BillingCity, BillingCountry, Type,
       (select id, Name, Email, Phone from Contacts limit 5)
    from Account
    where Type != null
    limit 10];

Note that I'm retrieving the child records through a relationship query. This means that I don't need to worry about managing these in my wrapper class, I can simply navigate to them via the parent record when traversing the list.

Next I define the initial grouping attribute as the Type field and invoke the method that groups the data. This initially traverses the list of accounts and stores them into a Map keyed by the group attribute value, whose value is a list of the accounts whose group attribute matches that value. Once the data is organized, the keyset of the map is traversed and an instance of the wrapper class created for each key/value pair:

private void setupGrouping()
{
 Map<String, List<Account>> groupedMap=new Map<String, List<Account>>();
 for (Account acc : allAccs)
 {
  String key=String.valueof(acc.get(groupFieldName));
  if ( (null==key) || (0==key.length()) )
  {
   key='Undefined';
  }
  List<Account> groupedAccs=groupedMap.get(key);
  if (null==groupedAccs)
  {
   groupedAccs=new List<Account>();
   groupedMap.put(key, groupedAccs);
  }
  
  groupedAccs.add(acc);
 }
 
 groups=new List<GroupWrapper>();
 for (String key : groupedMap.keySet())
 {
  GroupWrapper gr=new GroupWrapper();
  groups.add(gr);
  gr.accs=groupedMap.get(key);
  gr.groupedVal=key;
 }
}

The final job of the constructor is to create the select options that allow the user to choose a different grouping:

groupOptions=new List<SelectOption>();
groupOptions.add(new SelectOption('Name', 'Name'));
groupOptions.add(new SelectOption('BillingCity', 'BillingCity'));
groupOptions.add(new SelectOption('BillingCountry', 'BillingCountry'));
groupOptions.add(new SelectOption('Type', 'Type'));

The full controller is shown below:

public class GroupingExampleController 
{
 private List<Account> allAccs {get; set;}
 public List<GroupWrapper> groups {get; set;}
 public String groupFieldName {get; set;}
 public List<SelectOption> groupOptions {get; set;}
 
 public GroupingExampleController()
 {
  allAccs=[select id, Name, BillingStreet, BillingCity, BillingCountry, Type,
         (select id, Name, Email, Phone from Contacts limit 5)
     from Account
     where Type != null
     limit 10];
  groupFieldName='Type';
  
  setupGrouping();
  groupOptions=new List<SelectOption>();
  groupOptions.add(new SelectOption('Name', 'Name'));
  groupOptions.add(new SelectOption('BillingCity', 'BillingCity'));
  groupOptions.add(new SelectOption('BillingCountry', 'BillingCountry'));
  groupOptions.add(new SelectOption('Type', 'Type'));
 }
 
 public PageReference regroup()
 {
  setupGrouping();
  return null;
 }
 
 
 private void setupGrouping()
 {
  Map<String, List<Account>> groupedMap=new Map<String, List<Account>>();
  for (Account acc : allAccs)
  {
   String key=String.valueof(acc.get(groupFieldName));
   if ( (null==key) || (0==key.length()) )
   {
    key='Undefined';
   }
   List<Account> groupedAccs=groupedMap.get(key);
   if (null==groupedAccs)
   {
    groupedAccs=new List<Account>();
    groupedMap.put(key, groupedAccs);
   }
   
   groupedAccs.add(acc);
  }
  
  groups=new List<GroupWrapper>();
  for (String key : groupedMap.keySet())
  {
   GroupWrapper gr=new GroupWrapper();
   groups.add(gr);
   gr.accs=groupedMap.get(key);
   gr.groupedVal=key;
  }
 }
 
 public class GroupWrapper
 {
  public List<Account> accs {get; set;}
  public String groupedVal {get; set;}
  public Integer count {get {return accs.size(); } set;}
 }
}

The Visualforce markup to display the data is quite straightforward - its a simple matter of generating a table by iterating the list of wrapper classes, iterating the list of accounts contained by each wrapper class, and finally iterating the associated contacts. That, plus a select list that allows the user to choose a different grouping and a command button to action the user's choice, is all there is to it:

<apex:page controller="GroupingExampleController" tabstyle="Account">
 <apex:form >
  <apex:pageBlock >
  Group By: <apex:selectList value="{!groupFieldName}" size="1">
     <apex:selectOptions value="{!groupOptions}" />
  </apex:selectList>&nbsp; <apex:commandButton value="Go" action="{!regroup}"/>
  <table border="0">
   <apex:repeat value="{!Groups}" var="group">
      <tr>
       <td colspan="3"><b>{!groupFieldName}:{!group.GroupedVal}</b> - {!group.count} records</td>
     </tr>
      <apex:repeat value="{!group.accs}" var="acc">
      <tr>
          <td width="30px"></td>
        <td colspan="2"><b>Account:</b>{!acc.Name}</td>
       </tr>
         <apex:repeat value="{!acc.Contacts}" var="cont">
           <tr>
               <td width="30px"></td>
               <td width="30px"></td>
              <td><b>Contact:</b>{!cont.Name}</td>
           </tr> 
         </apex:repeat>
      </apex:repeat>
   </apex:repeat>
  </table>
  </apex:pageBlock>
 </apex:form>
</apex:page>

And here's a screen capture of the page in action:

Automatic Dashboard Refresh

Tweet

This weeks post concerns a piece of functionality that I've been struggling with for ages, and I'm quite pleased with myself to have it working.  It's a feature that is requested time and time again by clients - a dashboard that refreshes itself.

The sticking point for this has always been that a Visualforce component is required to add logic to a dashboard, but as Visualforce pages are contained in an iframe served from a different host to the dashboard page, it isn't possible to navigate to the Refresh button and click it programmatically - the browser blocks this as a cross-site scripting attack.  There is another technique to embed Javascript into a Salesforce page via a sidebar component, but dashboard pages don't have a sidebar so that's out too.

Thus I needed to take an alternative approach to this and started to investigate effecting the refresh server side from Apex code.

The first thing that I decided I needed to get at was the ID of the dashboard itself.  This is encoded in the dashboard URL, an example from my dev org is : https://na6.salesforce.com/01Z80000000lf7nEAA, where 01Z80000000lf7nEAA is the ID.  Once again though, it isn't possible to interrogate the URL of the main window from a Visualforce component due to Cross Site Scripting.  Thinking back to my web development days at Olive Systems Limited, it struck me that the HTTP request headers for the Visualforce component might provide some useful information.  I therefore created a Visualforce page with a controller that traversed the HTTP headers and output the details to the System log:

Map headers=ApexPages.currentPage().getHeaders();
for (String key : headers.keySet())
{
   System.debug('### ' + key + '=' + headers.get(key));
}

I then added this page to my dashboard which gave the following output in the system log:

14:50:34.055 (55491000)|USER_DEBUG|[20]|DEBUG|### Accept=application/xml,application/xhtml+xml,text/html;q=0.9,text/plain;q=0.8,image/png,*/*;q=0.5
14:50:34.055 (55645000)|USER_DEBUG|[20]|DEBUG|### Accept-Charset=ISO-8859-1,utf-8;q=0.7,*;q=0.3
14:50:34.055 (55790000)|USER_DEBUG|[20]|DEBUG|### Accept-Encoding=gzip,deflate,sdch
14:50:34.055 (55936000)|USER_DEBUG|[20]|DEBUG|### Accept-Language=en-GB,en-US;q=0.8,en;q=0.6
14:50:34.056 (56092000)|USER_DEBUG|[20]|DEBUG|### CipherSuite=RC4-MD5 TLSv1 128-bits
14:50:34.056 (56239000)|USER_DEBUG|[20]|DEBUG|### Connection=keep-alive
14:50:34.056 (56388000)|USER_DEBUG|[20]|DEBUG|### Host=kab-tutorial.na6.visual.force.com
14:50:34.056 (56532000)|USER_DEBUG|[20]|DEBUG|### Referer=https://na6.salesforce.com/01Z80000000lf7nEAA
14:50:34.056 (56677000)|USER_DEBUG|[20]|DEBUG|### User-Agent=Mozilla/5.0 (X11; Jolicloud Linux i686) AppleWebKit/534.24 (KHTML, like Gecko) Joli OS/1.2 Chromium/11.0.696.14 Chrome/11.0.696.14 Safari/534.24
14:50:34.056 (56823000)|USER_DEBUG|[20]|DEBUG|### X-Salesforce-Forwarded-To=na6.salesforce.com
14:50:34.056 (56967000)|USER_DEBUG|[20]|DEBUG|### X-Salesforce-SIP=80.176.152.54

and I have a result - the Referer header shows the full URL of the dashboard that my Visualforce component has been added to.

Referer=https://na6.salesforce.com/01Z80000000lf7nEAA

The next hurdle was how to programmatically trigger a dashboard refresh.  Inspecting the Refresh button didn't help much - it was tied to a bunch of Javascript that wouldn't help me server side.   Using the Fiddler web debugger, I clicked the Refresh button and monitored the requests that were submitted to the Salesforce server with fingers crossed that it would be a GET rather than a POST request.  Once again I had a result and could see that one of the requests was an HTTP GET on:


https://na6.salesforce.com/dash/dashboardRefresh.apexp?id=01Z80000000lf7nEAA.

I copied this URL and submitted it directly via the browser. The first attempt returned a minimal page body that the refresh had been submitted - not quite what I had in mind. Upon requesting the page again, I received another small page, but this time telling me that the dashboard had been refreshed. Opening the dashboard page in another tab showed that the refresh had taken place successfully.

At this point I started to think that this might be possible after all!

Next up I added code to my controller to retrieve the referrer and extract the id.  Upon adding this to my dashboard it threw an error.  Not quite what I had in mind.  The reason for this turned out to be simple - the URL for a dashboard edit page is in a different format to the view.  A similar issue was waiting when the dashboard was embedded in a Home page - in this case the Referer header wasn't present.  Luckily these were straightforward to detect and put out a message that the dashboard wouldn't refresh.

I then created an action method that would carry out the HTTP GET, by creating a PageReference to the  refresh page identified above, adding the id to the parameters and executing the getContent() method.  This code is inside a loop, which will make a maximum of 10 attempts to refresh before giving up.  An actionFunction on the page in association with a Javascript setTimeout() invoked the refresh action method 60 seconds after the page was loaded.   Finally, using a technique outlined in an earlier post from this blog, I was able to automatically reload the dashboard after the refresh.

Refreshing after 60 seconds seemed far too arduous for the Salesforce servers, so I upped the timeout to one hour.  This introduced the next issue - session timeout.  The next version reduced the timeout to 60 seconds, but for the first 59 times the timeout expired, the page simply refreshed.  Only on the 60th did the dashboard actually refresh.  This nicely circumvented the session timeout, as the page was submitted every minute.

Finally, I wanted to give the users a visual indication that the dashboard would automatically refresh, resulting in a recurring timeout that fired every second and counted down the seconds until refresh.

While this is probably starting to sound like quite a lot of code, there isn't actually that much to it.

Controller:

////////////////////////////////////////////////////////////
//
// Custom controller for dashboard refresh Visualforce page
//
// Author: Keir Bowden
//
////////////////////////////////////////////////////////////
public with sharing class DashboardRefreshController
{
 public Boolean needsRefresh {get; set;}
 public Boolean canRefresh {get; set;}
 public Id dbIdent {get; set;}
 public Integer minutes {get; set;}
 
 public DashboardRefreshController()
 {
  needsRefresh=true;
  setup();
  minutes=59;
 }
 
 public void setup()
 {
  Map<String, String> headers=ApexPages.currentPage().getHeaders();
  String referrer=headers.get('Referer');
  
  if (null==referrer)
  {
   canRefresh=false;
  }
  else
  {
   Integer lastSlashPos=referrer.lastIndexOf('/');
   lastSlashPos++;
   Integer paramPos=referrer.indexOf('?', lastSlashPos);
  
  
   String result='';
   if (-1!=paramPos)
   {
    result=referrer.substring(lastSlashPos, paramPos);
   }
   else
   {
    result=referrer.substring(lastSlashPos);
   }
   
   try
   {
    dbIdent=result;
    canRefresh=true;
   }
   catch (Exception e)
   {
    canRefresh=false; 
   }
  }
 }
 
 public PageReference refreshDashboard()
 {
  minutes--;
  if (-1==minutes)
  {
   needsRefresh=false;
   String refUrlStr='/dash/dashboardRefresh.apexp?id='+dbIdent;
   Boolean refreshed=false;
   Integer idx=0;
   while ( (!refreshed) && (idx<10) )
   {
    PageReference pr=new PageReference(refUrlStr);
    Blob body=pr.getContent();
    String bodyStr=body.toString();
    refreshed=(-1!=bodyStr.indexOf('Last refreshed'));
    idx++;
   }
  }
   
  return null;
 }
}

Page:

<apex:page sidebar="false" showheader="false" standardstylesheets="false" controller="DashboardRefreshController">

<apex:outputPanel rendered="{!canRefresh}">
 <apex:form >
     <apex:actionFunction name="doRefresh" action="{!refreshDashboard}" />
     <apex:outputPanel id="detail">
   <div id="countDown"></div>
     </apex:outputPanel>
 </apex:form>

 <apex:outputPanel id="scriptPanel">
     <apex:outputPanel rendered="{!needsRefresh}">
   <script>
    window.onload = function() 
    {
     startCountDown(59, 1000, doRefresh);
    } 

    function startCountDown(i, p, f) 
    {
     var pause = p;
     var fn = f;
    
     var countDownObj = document.getElementById("countDown");
     if (countDownObj == null) 
     {
      alert("div not found, check your id");
      return;
     }
    
     countDownObj.count = function(i) 
     {
      countDownObj.innerHTML = 'Refreshing in {!minutes} minutes ' + i + ' seconds';
      if (i == 0) 
      {
       fn();
       return;
      }
      setTimeout(function() 
       {
        countDownObj.count(i - 1);
       },
       pause
      );
     } 
  
     countDownObj.count(i);
    }
   </script>
     </apex:outputPanel>
     
  <apex:outputPanel rendered="{!NOT(needsRefresh)}">
   <script>
       window.top.location='/{!dbIdent}';
   </script>
     </apex:outputPanel>
 </apex:outputPanel>

</apex:outputPanel>
<apex:outputPanel rendered="{!NOT(canRefresh)}">
   Edit mode/home page - refresh disabled
</apex:outputPanel>


</apex:page>

Below is a screenshot of the page embedded in a dashboard:

Once the countdown reaches 0 minutes and zero seconds, the page is automatically refreshed and reloaded to show the updated details.

A couple of words of caution:

• The page that I'm hitting to refresh isn't documented by Salesforce, which most likely means it is unsupported.  Thus a future release could easily break this functionality.
• I haven't tried this on a hugely complex dashboard, so I don't know what would happen if the dashboard took significant time to refresh.
• This is using the browser to trigger the refresh, so if you close the browser session, the refresh won't happen.
• Refreshing dashboards pulls in information from a number of sources, so refreshing with a short time interval will put additional strain on the Salesforce servers.  
• I've only tested this with google chrome, so it may not work with other browsers.

Execute Custom Search when Opening Page

Tweet

This week's post is another generated from posts on the Salesforce discussion boards.

The scenario that was troubling the poster was as follows:

• They had written a custom search page
• When the results of the search were displayed, the user could click on a result and be taken to another page to edit the record
• Once the change was made, the user should be returned to the search page
• The search page should display the previous list of results - i.e. retain the query that was executed

It was the final bullet point that was causing the problem - how to retain the query through the call to the edit page and back again.

In this example, I'm using the standard Salesforce edit page.

The controller code is shown below:

public class RetUrlSearchController 
{
 public String nameQuery {get; set;}
 public List<Account> accounts {get; set;}
 
 public PageReference executeSearch()
 {
  String queryStr='%' + nameQuery + '%';
  accounts=[select id, Name, BillingStreet 
            from Account 
            where name like :queryStr];
           
  return null;
 }
 
 public RetUrlSearchController()
 {
  // if query appears in URL, execute it
  String urlQuery=ApexPages.currentPage().getParameters().get('query');
  
  if ( (null!=urlQuery) && (0!=urlQuery.length()) )
  {
   nameQuery=urlQuery;
   executeSearch();
  }
 }
}

The important part of the controller is the constructor - this looks for a query string supplied in the URL and if one is found, executes the search and populates the results.

Next up the page:

<apex:page controller="RetUrlSearchController">
  <apex:form >
    <apex:pageBlock >
      <apex:pageBlockSection title="Criteria">
      <apex:outputLabel value="Enter Name Snippet"/>
      <apex:inputText value="{!nameQuery}"/>
      <apex:commandButton action="{!executeSearch}" value="Search"/>
   </apex:pageBlockSection>
   
   <apex:pageBlockTable value="{!accounts}" var="acc">
      <apex:column headerValue="Name">
         <apex:outputLink value="/{!acc.id}/e?retURL={!URLENCODE('/apex/RetUrlSearchPage?query='+nameQuery)}">{!acc.Name}</apex:outputLink>
      </apex:column>
      <apex:column value="{!acc.BillingStreet}"/>
   </apex:pageBlockTable>
 </apex:pageBlock>
  </apex:form>
</apex:page>

Notice how the link to the edit page is constructed:

<apex:outputLink value="/{!acc.id}/e?retURL={!URLENCODE('/apex/RetUrlSearchPage?query='+nameQuery)}">{!acc.Name}</apex:outputLink>

This sets the retURL parameter which will be used by Salesforce to determine which page to return the user to after their editing is complete.    As well as the page, I've also added the query that the user last entered.  Thus when the browser is returned to the RetUrlSearchPage, the constructor shown earlier will pull the query from the URL, execute the search and the page displayed to the user will be that of their last search.

Here are screenshots showing the page flow.  First up is the search page with a query executed - note there are no parameters in the URL:

I then click on the Name link and am taken to the standard edit page but with the retURL parameter set in the URL:

Note that I've edited the Billing Street value.  I then click Save, which takes me back to the search page and executes the search:

Looking at the URL shows that the query parameter is set, the search is therefore automatically executed and the edited version of the BrightGen account appears.