Jeff Douglas - Technology, Coding and Bears... OH MY! » Visualforce http://blog.jeffdouglas.com Get your head out of your #@! and into the clouds! Fri, 10 Sep 2010 10:06:58 +0000 en hourly 1 http://wordpress.org/?v=abc Why is this so DOM Hard? http://blog.jeffdouglas.com/2010/08/11/why-is-this-so-dom-hard/?utm_source=rss&utm_medium=rss&utm_campaign=why-is-this-so-dom-hard http://blog.jeffdouglas.com/2010/08/11/why-is-this-so-dom-hard/#comments Wed, 11 Aug 2010 12:27:01 +0000 Jeff Douglas http://blog.jeffdouglas.com/?p=3052

Let me start out right away by saying I am not a DOM or CSS master. I’ve typically had employees or co-workers to perform these functions for my so I’ve (unfortunately) let me skills wane. However, I’m not totally clueless. I was trying to build the following Visualforce page a couple of days ago and working with the DOM and Visualforce components seems to be much harder than what it should be. Perhaps I’m doing something wrong? Luckily Wes Nolte and Joel Dietz are experts and they both have a number of great blog posts on this subject.

I was trying to create the following Visualforce page that contains a simple SelectList (I’ve sanitized the code for your protection).

When the user submits the form, the value of the currently selected option is fired off via JavaScript. Shouldn’t be a big deal, right? Based upon the Visualforce docs for Using JavaScript to Reference Components, I thought this code would work using the $Component variable (line #5).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<apex:page controller="MyController" showHeader="false" id="thePage">
 
  <script language="javascript">
  function doSubmit() {
    alert(document.getElementById("{!$Component.theSelectList}").value);
  }
  </script>
 
  <apex:form id="theForm">
    <apex:pageblock id="thePageBlock">
      <apex:pageblockSection id="thePageBlockSection">
        <apex:pageBlockSectionItem id="thePageBlockItem">
          <apex:selectList value="{!selectedContentId}" size="1" id="theSelectList">
            <apex:selectOptions value="{!contentOptions}"/>      
          </apex:selectList>
        </apex:pageBlockSectionItem>
        <input type="button" value="Submit" onclick="doSubmit()" />
      </apex:pageblockSection>
    </apex:pageblock>
  </apex:form>
 
</apex:page>

Unfortunately Firebug choked with s null pointer for the object’s reference.

I found Wes’ great post, VisualForce Component Ids & Javascript, and took a look at the element Id that Salesforce generated for the SelectList component. Based upon the other elements in the DOM hierarchy, I hard-coded my JavaScript to use the id that Salesforce was generating and the method worked correctly!

3
4
5
6
7

  <script language="javascript">
  function doSubmit() {
    alert(document.getElementById("thePage:theForm:thePageBlock:thePageBlockSection:thePageBlockItem:theSelectList").value);
  }
  </script>

So now I was confused. I dug deeper into Wes’ post, the code and comments. Wes’ solution was to assign the element value to a JavaScript variable just after it appears on the page (or at the same level within the page tree). My final (working) code looks like the following. Notice line #16 where I set the local JavaScript variable and then line #5 where I reference it’s currently selected value.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<apex:page controller="MyController" showHeader="false" id="thePage">
 
  <script language="javascript"> 
  function doSubmit() {
    alert(options.value);
  }
  </script>
 
  <apex:form id="theForm">
    <apex:pageblock id="thePageBlock">
      <apex:pageblockSection id="thePageBlockSection">
         <apex:pageBlockSectionItem id="thePageBlockItem">
            <apex:selectList value="{!selectedContentId}" size="1" id="theSelectList">
              <apex:selectOptions value="{!contentOptions}"/>       
            </apex:selectList>
            <script> var options = document.getElementById("{!$Component.theSelectList}"); </script>
         </apex:pageBlockSectionItem>
        <input type="button" value="Submit" onclick="doSubmit()" />
      </apex:pageblockSection>
    </apex:pageblock>
  </apex:form> 
 
</apex:page>

Wes states that this solution is simple as well as flexible. However, what happens if you have 20+ form fields that you need to process in this manner? Does accessing the DOM seem too hard with Visualforce components? Let me know if I am doing something wrong?

]]> http://blog.jeffdouglas.com/2010/08/11/why-is-this-so-dom-hard/feed/ 14 Email a Document with Salesforce.com http://blog.jeffdouglas.com/2010/07/22/create-and-email-a-document-with-salesforce-com/?utm_source=rss&utm_medium=rss&utm_campaign=create-and-email-a-document-with-salesforce-com http://blog.jeffdouglas.com/2010/07/22/create-and-email-a-document-with-salesforce-com/#comments Thu, 22 Jul 2010 10:39:28 +0000 Jeff Douglas http://blog.jeffdouglas.com/?p=2895

After my last post, Create and Email a PDF with Salesforce.com, I received a few comments whether it was possible to do the same with Document stored in Salesforce.com. Could you choose a Document and then send it via email as an attachment? The short answer is yes! However, I tried to do it from a Force.com Sites page but was not able to get it to work. The document is not marked for internal use and it is marked as an externally available image. I also made sure that the public settings for my Site included read access to documents but still the query for the document returns no results. No time to look at it in depth right now so if anyone has an idea, please send it my way.

DocumentEmailer Visualforce Page

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

<apex:page controller="DocumentEmailController">
  <apex:sectionHeader title="Document Example" subtitle="Email a Document" 
    description="Example of how to email a Document."/>
 
  <apex:form >
    <apex:pageMessages />
    <apex:pageBlock title="Document Input">
 
      <apex:pageBlockButtons >
        <apex:commandButton action="{!sendDoc}" value="Send Document"/>
      </apex:pageBlockButtons>
 
      <apex:pageBlockSection >
 
        <apex:pageBlockSectionItem >
            <apex:outputLabel value="Email to send to" for="email"/>
          <apex:inputText value="{!email}" id="email"/>
        </apex:pageBlockSectionItem>
 
        <apex:pageBlockSectionItem >
            <apex:outputLabel value="Document" for="document"/>
            <apex:selectList value="{!documentId}" id="document" size="1">
                 <apex:selectOptions value="{!documents}"/>
            </apex:selectList>
        </apex:pageBlockSectionItem>
 
      </apex:pageBlockSection>
 
    </apex:pageBlock>
  </apex:form>
 
</apex:page>

DocumentEmailController

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

public with sharing class DocumentEmailController {
 
  public ID documentId {get;set;}
  public String email {get;set;}
 
  public List<SelectOption> documents {
    get {
      if (documents == null) {
        documents = new List<SelectOption>();
        documents.add(new SelectOption('01570000001NZDn','Cup of Coffee? - DOC'));
        documents.add(new SelectOption('01570000001NZDi','Workflow Cheatsheet -  PDF'));
      }
      return documents;
    }
    set;
  }
 
  public PageReference sendDoc() {
 
    Document doc = [select id, name, body, contenttype, developername, type 
      from Document where id = :documentId];
 
    Messaging.EmailFileAttachment attach = new Messaging.EmailFileAttachment();
    attach.setContentType(doc.contentType);
    attach.setFileName(doc.developerName+'.'+doc.type);
    attach.setInline(false);
    attach.Body = doc.Body;
 
    Messaging.SingleEmailMessage mail = new Messaging.SingleEmailMessage();
    mail.setUseSignature(false);
    mail.setToAddresses(new String[] { email });
    mail.setSubject('Document Email Demo');
    mail.setHtmlBody('Here is the email you requested: '+doc.name);
    mail.setFileAttachments(new Messaging.EmailFileAttachment[] { attach }); 
 
    // Send the email
    Messaging.sendEmail(new Messaging.SingleEmailMessage[] { mail });
 
    ApexPages.addMessage(new ApexPages.Message(ApexPages.Severity.INFO, 'Email with Document sent to '+email));
 
    return null;
 
  }
 
}

Test Class

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

@isTest
private class Test_DocumentEmailer {
 
  static Document document;
 
  static {
 
    document = new Document();
    document.Body = Blob.valueOf('Some Text');
    document.ContentType = 'application/pdf';
    document.DeveloperName = 'my_document';
    document.IsPublic = true;
    document.Name = 'My Document';
    document.FolderId = [select id from folder where name = 'My Test Docs'].id;
    insert document;
 
  }
 
  static testMethod void testDocumentEmailer() {
 
    PageReference pref = Page.DocumentEmailer;        
    DocumentEmailController con = new DocumentEmailController();    
 
    Test.startTest();
 
    System.assertEquals(2,con.documents.size());
 
    // populate the field with values
    con.documentId = document.id;
    con.email = 'test@noemail.com';
    // submit the request
    pref = con.sendDoc();
 
    Test.stopTest(); 
 
  }
}


]]> http://blog.jeffdouglas.com/2010/07/22/create-and-email-a-document-with-salesforce-com/feed/ 5 Create and Email a PDF with Salesforce.com http://blog.jeffdouglas.com/2010/07/16/create-and-email-a-pdf-with-salesforce-com/?utm_source=rss&utm_medium=rss&utm_campaign=create-and-email-a-pdf-with-salesforce-com http://blog.jeffdouglas.com/2010/07/16/create-and-email-a-pdf-with-salesforce-com/#comments Fri, 16 Jul 2010 12:03:15 +0000 Jeff Douglas http://blog.jeffdouglas.com/?p=2883

This is a continuation of my post a couple of days ago, Attach a PDF to a Record in Salesforce, and shows how to dynamically generate a PDF and attach it to an email. The code is fairly similar and has the same issue with testing the PageReference getContent() method.

You can run this demo at my developer site.

PdfEmailer Visualforce Page

The Visualforce page simply allows the user to enter their email address and select a sample Account from the picklist. This is Account that is passed to the PdfGeneratorTemplate Visualforce page to generate the PDF.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

<apex:page controller="PdfEmailController">
  <apex:sectionHeader title="PDF Example" subtitle="Email a PDF" 
    description="Example of how to email a dynamically generated PDF."/>
 
  <apex:form >
    <apex:pageMessages />
    <apex:pageBlock title="PDF Input">
 
      <apex:pageBlockButtons >
        <apex:commandButton action="{!sendPdf}" value="Send PDF"/>
      </apex:pageBlockButtons>
 
      <apex:pageBlockSection >
 
        <apex:pageBlockSectionItem >
            <apex:outputLabel value="Email to send to" for="email"/>
          <apex:inputText value="{!email}" id="email"/>
        </apex:pageBlockSectionItem>
 
        <apex:pageBlockSectionItem >
            <apex:outputLabel value="Account" for="account"/>
            <apex:selectList value="{!accountId}" id="account" size="1">
                 <apex:selectOptions value="{!accounts}"/>
            </apex:selectList>
        </apex:pageBlockSectionItem>
 
      </apex:pageBlockSection>
 
    </apex:pageBlock>
  </apex:form>
 
</apex:page>

PdfEmailerController

The Controller passes the Account ID that the user entered as a parameter for the Visualforce page being generated. It let creates the attachment from the PDF content. The Body of the attachment uses the Blob returned from the PageReference’s getContent method. You could also use the getContentAsPDF method which always returns the page as a PDF, regardless of the component’s renderAs attribute. However, this method always seems to throw an error in the test class. See the PageReference documentation for more info. The method then constructs the SimpleEmailMessage object and then sends it on its way to the recipient’s inbox.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

public with sharing class PdfEmailController {
 
  public ID accountId {get;set;}
  public String email {get;set;}
 
  public List<SelectOption> accounts {
    get {
      if (accounts == null) {
        accounts = new List<SelectOption>();
        accounts.add(new SelectOption('0017000000LgRMb','United Oil & Gas Corp.'));
        accounts.add(new SelectOption('0017000000LgRMV','Burlington Textiles Corp of America'));
      }
      return accounts;
    }
    set;
  }
 
  public PageReference sendPdf() {
 
    PageReference pdf = Page.PdfGeneratorTemplate;
    // add parent id to the parameters for standardcontroller
    pdf.getParameters().put('id',accountId);
 
    // the contents of the attachment from the pdf
    Blob body;
 
    try {
 
      // returns the output of the page as a PDF
      body = pdf.getContent();
 
    // need to pass unit test -- current bug  
    } catch (VisualforceException e) {
      body = Blob.valueOf('Some Text');
    }
 
    Messaging.EmailFileAttachment attach = new Messaging.EmailFileAttachment();
    attach.setContentType('application/pdf');
    attach.setFileName('testPdf.pdf');
    attach.setInline(false);
    attach.Body = body;
 
    Messaging.SingleEmailMessage mail = new Messaging.SingleEmailMessage();
    mail.setUseSignature(false);
    mail.setToAddresses(new String[] { email });
    mail.setSubject('PDF Email Demo');
    mail.setHtmlBody('Here is the email you requested! Check the attachment!');
    mail.setFileAttachments(new Messaging.EmailFileAttachment[] { attach }); 
 
    // Send the email
    Messaging.sendEmail(new Messaging.SingleEmailMessage[] { mail });
 
    ApexPages.addMessage(new ApexPages.Message(ApexPages.Severity.INFO, 'Email with PDF sent to '+email));
 
    return null;
 
  }
 
}

PdfGeneratorTemplate Visualforce Page

This is the Visualforce page that is generated in the Controller. It simply uses the StandardController and displays the Account name for the ID passed to it. 

1
2
3
4

<apex:page standardController="Account" renderAs="pdf">
  <h1>Congratulations!!</h1>
  <p>You created a PDF for {!account.name}</p>
</apex:page>

Test Class 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

@isTest
private class Test_PdfEmailController {
 
  static Account account;
 
  static {
 
    account = new Account();
    account.Name = 'Test Account';
    insert account;
 
  }
 
  static testMethod void testPdfEmailer() {
 
    PageReference pref = Page.PdfEmailer;
    pref.getParameters().put('id',account.id);
    Test.setCurrentPage(pref);
 
    PdfEmailController con = new PdfEmailController();    
 
    Test.startTest();
 
    System.assertEquals(2,con.accounts.size());
 
    // populate the field with values
    con.accountId = account.id;
    con.email = 'test@noemail.com';
    // submit the record
    pref = con.sendPdf();
 
    Test.stopTest(); 
 
  }
}

]]> http://blog.jeffdouglas.com/2010/07/16/create-and-email-a-pdf-with-salesforce-com/feed/ 5 Attach a PDF to a Record in Salesforce http://blog.jeffdouglas.com/2010/07/14/attach-a-pdf-to-a-record-in-salesforce/?utm_source=rss&utm_medium=rss&utm_campaign=attach-a-pdf-to-a-record-in-salesforce http://blog.jeffdouglas.com/2010/07/14/attach-a-pdf-to-a-record-in-salesforce/#comments Wed, 14 Jul 2010 13:57:33 +0000 Jeff Douglas http://blog.jeffdouglas.com/?p=2854

Salesforce.com makes it extremely easy to generate PDF documents on the fly by simply using the renderAs=”pdf” attribute for the <apex:page> component. It’s also a snap to attach these PDFs to records as Attachments. Below is a small Visualforce page and Controller that generates a PDF and saves it to an Account.

Note: there is a small issue when it comes to testing the Controller. Salesforce currently throws an error (Salesforce.com Error “Unable to retrieve object”) when getContent or getContentAsPDF is called from a test method. There’s an Idea to make this work properly. I encourage everyone to vote for this.

PdfGenerator Visualforce Page

The Visualforce page allows the users to enter the ID of the Account to attach the PDF to as well as the name of the PDF. You could just have easily used a Controller Extension instead of entering the ID for the Account but I went this route for simplicity.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

<apex:page controller="PdfGeneratorController">
  <apex:sectionHeader title="PDF Example" subtitle="Attach a PDF" 
    description="Example of how to attach a PDF to a record."/>
 
  <apex:form >
    <apex:pageBlock title="PDF Input">
 
      <apex:pageBlockButtons >
        <apex:commandButton action="{!savePdf}" value="Save PDF"/>
      </apex:pageBlockButtons>
      <apex:pageMessages />
 
      <apex:pageBlockSection >
 
        <apex:pageBlockSectionItem >
            <apex:outputLabel value="File Name" for="pdfName"/>
          <apex:inputText value="{!pdfName}" id="pdfName"/>
        </apex:pageBlockSectionItem>
 
        <apex:pageBlockSectionItem >
            <apex:outputLabel value="Account ID" for="id"/>
          <apex:inputText value="{!parentId}" id="id"/>
        </apex:pageBlockSectionItem>
 
      </apex:pageBlockSection>
 
    </apex:pageBlock>
  </apex:form>
 
</apex:page>

PdfGeneratorController Custom Controller

The Controller passes the Account ID that the user entered as a parameter for the Visualforce page being generated. It then creates a new Attachment object and sets some attributes. It sets the ParentId to the value of the Account ID that the user entered so that the PDF is attached to that record. The Body of the attachment uses the Blob returned from the PageReference’s getContent method. You could also use the getContentAsPDF method which always returns the page as a PDF, regardless of the <apex:page> component’s renderAs attribute. However, this method always seems to throw an error in the test class. See the PageReference documentation for more info. The method then redirects the user to the Account page so they can view the PDF attachment.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

public with sharing class PdfGeneratorController {
 
  public ID parentId {get;set;}
  public String pdfName {get;set;}
 
  public PageReference savePdf() {
 
    PageReference pdf = Page.PdfGeneratorTemplate;
    // add parent id to the parameters for standardcontroller
    pdf.getParameters().put('id',parentId);
 
    // create the new attachment
    Attachment attach = new Attachment();
 
    // the contents of the attachment from the pdf
    Blob body;
 
    try {
 
        // returns the output of the page as a PDF
    	body = pdf.getContent();
 
    // need to pass unit test -- current bug	
    } catch (VisualforceException e) {
    	body = Blob.valueOf('Some Text');
    }
 
    attach.Body = body;
    // add the user entered name
    attach.Name = pdfName;
    attach.IsPrivate = false;
    // attach the pdf to the account
    attach.ParentId = parentId;
    insert attach;
 
    // send the user to the account to view results
    return new PageReference('/'+parentId);
 
  }
 
}

PdfGeneratorTemplate Visualforce Page

This is the Visualforce page that is generated in the Controller. It simply uses the StandardController and displays the Account name for the ID passed to it. 

1
2
3
4

<apex:page standardController="Account" renderAs="pdf">
  <h1>Congratulations!!</h1>
  <p>You created a PDF for {!account.name}</p>
</apex:page>

Test Class

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

@isTest
private class Test_PdfGeneratorController {
 
  static Account account;
 
  static {
 
    account = new Account();
    account.Name = 'Test Account';
    insert account;
 
  }
 
  static testMethod void testPdfGenerator() {
 
    PageReference pref = Page.PdfGenerator;
    pref.getParameters().put('id',account.id);
    Test.setCurrentPage(pref);
 
    PdfGeneratorController con = new PdfGeneratorController();    
 
    Test.startTest();
 
    // populate the field with values
    con.parentId = account.id;
    con.pdfName = 'My Test PDF';
 
    // submit the record
    pref = con.savePdf();
 
    // assert that they were sent to the correct page
    System.assertEquals(pref.getUrl(),'/'+account.id);
 
    // assert that an attachment exists for the record
    System.assertEquals(1,[select count() from attachment where parentId = :account.id]);
 
    Test.stopTest(); 
 
  }
}

]]> http://blog.jeffdouglas.com/2010/07/14/attach-a-pdf-to-a-record-in-salesforce/feed/ 6 Building a Dynamic Search Page in Visualforce http://blog.jeffdouglas.com/2010/07/13/building-a-dynamic-search-page-in-visualforce/?utm_source=rss&utm_medium=rss&utm_campaign=building-a-dynamic-search-page-in-visualforce http://blog.jeffdouglas.com/2010/07/13/building-a-dynamic-search-page-in-visualforce/#comments Tue, 13 Jul 2010 10:31:34 +0000 Jeff Douglas http://blog.jeffdouglas.com/?p=2778

I brushed this code off and thought it might be useful to someone as a starting point for a dynamic search page. It has some cool functionality including passing search criteria via Javascript to the controller, search as you type, sorting of results by clicking on the column header plus much more. Hope you find it useful.

You can run this demo at my developer site.

Some of the interesting features of the Visualforce page and Apex controller include:

  • Instead of the typical overhead of using getters/setters in the controller to maintain the variables for the search form, I used Dave Carroll’s blog as an example to pass the variables via Javascript.
  • Since I’m using Javascript to pass my parameters, I can get fancy and make the search form more dynamic by running the search as the user types or selects an option in the picklist. No submit button is required.
  • Users can click on the column headers to toggle the direction of the search results by using a CommandLink component and passing the column name.
  • Build the picklist using Dynamic Apex’s Describe functionality so that it’s maintenance free.
  • Perform the search against multiple fields including multi-select picklists using dynamic SOQL and preventing SOQL injection attacks.

ContactSearchController

Take a look at the Apex code below. The search interaction is split up between two separate but integral parts. When the search is fired from the Visualforce page via Javascript, the SOQL is constructed in the runSearch() method and is then passed to the runQuery() method to execute. The SOQL string is persisted so that when the user clicks on the table column the same SOQL can be issued again in the toggleSort() method but ordered by a different field name and sort direction.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92

public with sharing class ContactSearchController {
 
  // the soql without the order and limit
  private String soql {get;set;}
  // the collection of contacts to display
  public List<Contact> contacts {get;set;}
 
  // the current sort direction. defaults to asc
  public String sortDir {
    get  { if (sortDir == null) {  sortDir = 'asc'; } return sortDir;  }
    set;
  }
 
  // the current field to sort by. defaults to last name
  public String sortField {
    get  { if (sortField == null) {sortField = 'lastName'; } return sortField;  }
    set;
  }
 
  // format the soql for display on the visualforce page
  public String debugSoql {
    get { return soql + ' order by ' + sortField + ' ' + sortDir + ' limit 20'; }
    set;
  }
 
  // init the controller and display some sample data when the page loads
  public ContactSearchController() {
    soql = 'select firstname, lastname, account.name, interested_technologies__c from contact where account.name != null';
    runQuery();
  }
 
  // toggles the sorting of query from asc<-->desc
  public void toggleSort() {
    // simply toggle the direction
    sortDir = sortDir.equals('asc') ? 'desc' : 'asc';
    // run the query again
    runQuery();
  }
 
  // runs the actual query
  public void runQuery() {
 
    try {
      contacts = Database.query(soql + ' order by ' + sortField + ' ' + sortDir + ' limit 20');
    } catch (Exception e) {
      ApexPages.addMessage(new ApexPages.Message(ApexPages.Severity.ERROR, 'Ooops!'));
    }
 
  }
 
  // runs the search with parameters passed via Javascript
  public PageReference runSearch() {
 
    String firstName = Apexpages.currentPage().getParameters().get('firstname');
    String lastName = Apexpages.currentPage().getParameters().get('lastname');
    String accountName = Apexpages.currentPage().getParameters().get('accountName');
    String technology = Apexpages.currentPage().getParameters().get('technology');
 
    soql = 'select firstname, lastname, account.name, interested_technologies__c from contact where account.name != null';
    if (!firstName.equals(''))
      soql += ' and firstname LIKE \''+String.escapeSingleQuotes(firstName)+'%\'';
    if (!lastName.equals(''))
      soql += ' and lastname LIKE \''+String.escapeSingleQuotes(lastName)+'%\'';
    if (!accountName.equals(''))
      soql += ' and account.name LIKE \''+String.escapeSingleQuotes(accountName)+'%\'';  
    if (!technology.equals(''))
      soql += ' and interested_technologies__c includes (\''+technology+'\')';
 
    // run the query again
    runQuery();
 
    return null;
  }
 
  // use apex describe to build the picklist values
  public List<String> technologies {
    get {
      if (technologies == null) {
 
        technologies = new List<String>();
        Schema.DescribeFieldResult field = Contact.interested_technologies__c.getDescribe();
 
        for (Schema.PicklistEntry f : field.getPicklistValues())
          technologies.add(f.getLabel());
 
      }
      return technologies;          
    }
    set;
  }
 
}

CustomerSearch Visualforce Page

The Visualforce page has three sections: 1) a search form, 2) a results blockTable and 3) a debug panel displaying the SOQL that was executed.

The search form has a number of fields that fire the Javascript search using the onkeyup and onchange events. Instead of each form field passing the current values to actionFunction’s Javascript method, for ease of use, each form field calls the doSearch() function that gathers up the values and submits them. When the actionFunction renders it creates a Javascript function that POSTs the values to the controller in the same manner as CommandLink or CommandButton.

The search results BlockTable is rerendered when the search is submitted to the controller so that the results display properly. Users can click on the column headers to reorder the results of the query. This uses a CommandLink to pass the sort field to the controller and toggle the sort direction.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121

<apex:page controller="ContactSearchController" sidebar="false">
 
  <apex:form >
  <apex:pageMessages id="errors" />
 
  <apex:pageBlock title="Find Me A Customer!" mode="edit">
 
  <table width="100%" border="0">
  <tr>  
    <td width="200" valign="top">
 
      <apex:pageBlock title="Parameters" mode="edit" id="criteria">
 
      <script type="text/javascript">
      function doSearch() {
        searchServer(
          document.getElementById("firstName").value,
          document.getElementById("lastName").value,
          document.getElementById("accountName").value,
          document.getElementById("technology").options[document.getElementById("technology").selectedIndex].value
          );
      }
      </script> 
 
      <apex:actionFunction name="searchServer" action="{!runSearch}" rerender="results,debug,errors">
          <apex:param name="firstName" value="" />
          <apex:param name="lastName" value="" />
          <apex:param name="accountName" value="" />
          <apex:param name="technology" value="" />
      </apex:actionFunction>
 
      <table cellpadding="2" cellspacing="2">
      <tr>
        <td style="font-weight:bold;">First Name<br/>
        <input type="text" id="firstName" onkeyup="doSearch();"/>
        </td>
      </tr>
      <tr>
        <td style="font-weight:bold;">Last Name<br/>
        <input type="text" id="lastName" onkeyup="doSearch();"/>
        </td>
      </tr>
      <tr>
        <td style="font-weight:bold;">Account<br/>
        <input type="text" id="accountName" onkeyup="doSearch();"/>
        </td>
      </tr>
      <tr>
        <td style="font-weight:bold;">Interested Technologies<br/>
          <select id="technology" onchange="doSearch();">
            <option value=""></option>
            <apex:repeat value="{!technologies}" var="tech">
              <option value="{!tech}">{!tech}</option>
            </apex:repeat>
          </select>
        </td>
      </tr>
      </table>
 
      </apex:pageBlock>
 
    </td>
    <td valign="top">
 
    <apex:pageBlock mode="edit" id="results">
 
        <apex:pageBlockTable value="{!contacts}" var="contact">
 
            <apex:column >
                <apex:facet name="header">
                    <apex:commandLink value="First Name" action="{!toggleSort}" rerender="results,debug">
                        <apex:param name="sortField" value="firstName" assignTo="{!sortField}"/>
                    </apex:commandLink>
                </apex:facet>
                <apex:outputField value="{!contact.firstName}"/>
            </apex:column>
 
            <apex:column >
                <apex:facet name="header">
                    <apex:commandLink value="Last Name" action="{!toggleSort}" rerender="results,debug">
                        <apex:param name="sortField" value="lastName" assignTo="{!sortField}"/>
                    </apex:commandLink>
                </apex:facet>
                <apex:outputField value="{!contact.lastName}"/>
            </apex:column>
 
            <apex:column >
                <apex:facet name="header">
                    <apex:commandLink value="Account" action="{!toggleSort}" rerender="results,debug">
                        <apex:param name="sortField" value="account.name" assignTo="{!sortField}"/>
                    </apex:commandLink>
                </apex:facet>
                <apex:outputField value="{!contact.account.name}"/>
            </apex:column>
 
            <apex:column >
                <apex:facet name="header">
                    <apex:commandLink value="Technologies" action="{!toggleSort}" rerender="results,debug">
                        <apex:param name="sortField" value="interested_technologies__c" assignTo="{!sortField}"/>
                    </apex:commandLink>
                </apex:facet>
                <apex:outputField value="{!contact.Interested_Technologies__c}"/>
            </apex:column>
 
        </apex:pageBlockTable>
 
    </apex:pageBlock>
 
    </td>
  </tr>
  </table>
 
  <apex:pageBlock title="Debug - SOQL" id="debug">
      <apex:outputText value="{!debugSoql}" />           
  </apex:pageBlock>    
 
  </apex:pageBlock>
 
  </apex:form>
 
</apex:page>
]]> http://blog.jeffdouglas.com/2010/07/13/building-a-dynamic-search-page-in-visualforce/feed/ 16 Sharing Controller Context with a Visualforce Popup http://blog.jeffdouglas.com/2010/06/17/sharing-controller-context-with-a-visualforce-popup/?utm_source=rss&utm_medium=rss&utm_campaign=sharing-controller-context-with-a-visualforce-popup http://blog.jeffdouglas.com/2010/06/17/sharing-controller-context-with-a-visualforce-popup/#comments Thu, 17 Jun 2010 11:11:58 +0000 Jeff Douglas http://blog.jeffdouglas.com/2010/06/17/sharing-controller-context-with-a-visualforce-popup/

“How do I popup a dialog in Visualforce”.

I’m not sure what the deal is but this week I’ve received 3 emails asking me how to open a Visualforce popop window from a Visualforce page but both running in the same session. The question is asked fairly often on the message boards but there isn’t a native solution.

The use case is that you have a Visualforce page with a commandbutton that launches a Visualforce popup. You want the popup to be able to access the controller’s context so you can share state. Unfortunately this is not currently possible with Visualforce and Apex. Opening a new window will start a new request which initializes a new instance of the controller. You could pass some variables to the new controller via Javascript but making a callback to the opening Visualforce is tedious as best.

Depending on what your popup needs to do, the best solution might be to create a modal instead of a new Visualforce page. Dave Carroll has a great article titled, “Modal Dialogs in Visualforce using the Yahoo! User Interface Library“, that shows how to use an In-Page DIV or Hidden DIV to create the modal. You can probably accomplish the same effect with other libraries but Dave’s solution with YUI! is straight-forward, simple and well documented.


]]> http://blog.jeffdouglas.com/2010/06/17/sharing-controller-context-with-a-visualforce-popup/feed/ 0 Uploading an Attachment using Visualforce and a Custom Controller http://blog.jeffdouglas.com/2010/04/28/uploading-an-attachment-using-visualforce-and-a-custom-controller/?utm_source=rss&utm_medium=rss&utm_campaign=uploading-an-attachment-using-visualforce-and-a-custom-controller http://blog.jeffdouglas.com/2010/04/28/uploading-an-attachment-using-visualforce-and-a-custom-controller/#comments Wed, 28 Apr 2010 11:07:11 +0000 Jeff Douglas http://blog.jeffdouglas.com/?p=2486

This is a follow up post to Uploading a Document using Visualforce and a Custom Controller showing an example for uploading an attachment for a Contact. The Visualforce page and Controller is very similar with a few exceptions.


Attachments are different than documents and are only available for the following objects:

  • Account
  • Asset
  • Campaign
  • Case
  • Contact
  • Contract
  • Custom objects
  • EmailMessage
  • EmailTemplate
  • Event
  • Lead
  • Opportunity
  • Product2
  • Solution
  • Task

Salesforce.com restricts an attachment size to a maximum size of 5 MB. For a file attached to a Solution, the limit is 1.5MB. The maximum email attachment size is 3 MB. You can contact Salesforce.com support and possibly have them increase these limits. They should be able to increase the document and attachment size to 25MB. They cannot increase the limits for emails.

AttachmentUploadExample

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

<apex:page controller="AttachmentUploadController">
  <apex:sectionHeader title="Visualforce Example" subtitle="Attachment Upload Example"/>
 
  <apex:form enctype="multipart/form-data">
    <apex:pageMessages />
    <apex:pageBlock title="Upload a Attachment">
 
      <apex:pageBlockButtons >
        <apex:commandButton action="{!upload}" value="Save"/>
      </apex:pageBlockButtons>
 
      <apex:pageBlockSection showHeader="false" columns="2" id="block1">
 
        <apex:pageBlockSectionItem >
          <apex:outputLabel value="File Name" for="fileName"/>
          <apex:inputText value="{!attachment.name}" id="fileName"/>
        </apex:pageBlockSectionItem>
 
        <apex:pageBlockSectionItem >
          <apex:outputLabel value="File" for="file"/>
          <apex:inputFile value="{!attachment.body}" filename="{!attachment.name}" id="file"/>
        </apex:pageBlockSectionItem>
 
        <apex:pageBlockSectionItem >
          <apex:outputLabel value="Description" for="description"/>
          <apex:inputTextarea value="{!attachment.description}" id="description"/>
        </apex:pageBlockSectionItem>
 
      </apex:pageBlockSection>
 
    </apex:pageBlock>
  </apex:form>
</apex:page>

AttachmentUploadController

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

public with sharing class AttachmentUploadController {
 
  public Attachment attachment {
  get {
      if (attachment == null)
        attachment = new Attachment();
      return attachment;
    }
  set;
  }
 
  public PageReference upload() {
 
    attachment.OwnerId = UserInfo.getUserId();
    attachment.ParentId = '0037000000lFxcw'; // the record the file is attached to
    attachment.IsPrivate = true;
 
    try {
      insert attachment;
    } catch (DMLException e) {
      ApexPages.addMessage(new ApexPages.message(ApexPages.severity.ERROR,'Error uploading attachment'));
      return null;
    } finally {
      attachment = new Attachment(); 
    }
 
    ApexPages.addMessage(new ApexPages.message(ApexPages.severity.INFO,'Attachment uploaded successfully'));
    return null;
  }
 
}


]]> http://blog.jeffdouglas.com/2010/04/28/uploading-an-attachment-using-visualforce-and-a-custom-controller/feed/ 3 Create a New Record in Force.com Sites http://blog.jeffdouglas.com/2010/04/27/create-a-new-record-in-force-com-sites/?utm_source=rss&utm_medium=rss&utm_campaign=create-a-new-record-in-force-com-sites http://blog.jeffdouglas.com/2010/04/27/create-a-new-record-in-force-com-sites/#comments Tue, 27 Apr 2010 12:00:09 +0000 Jeff Douglas http://blog.jeffdouglas.com/?p=2474

So someone asked me yesterday for some code to allow external users to create contact records in Salesforce.com. They needed a simple form where people could enter the details and once submitted receive a confirmation of what information was entered. Here’s what the final page that was developed looks like. You can try the code out on my developer site to see how it runs.


If this solution was meant to run inside the Salesforce.com UI, you would simply need a single Visualforce page that utilizes the standard controller for Contact. Once submitted, the standard controller would insert the new record and relocate the user to the display page for the new record.

However, since this is an external page we have to do a little more work. We need two Visualforce pages (one for the form and one for the confirmation page) and a custom controller to submit the new contact record and show the user the confirmation page. You’ll also need to set up a new Force.com Site and add the two new Visualforce pages to the site so they are accessible externally. You’ll also need to modify the Public Access Settings for the site to allow Read access to the Contact object.

Your code should look like the following:

Contact_Create Visualforce Page

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<apex:page controller="ContactCreateController">
  <apex:sectionHeader title="Visualforce Example" subtitle="Create a Contact"/>
 
  <apex:form >
    <apex:pageMessages /> <!-- this is where the error messages will appear -->
    <apex:pageBlock title="Contact Info">
 
      <apex:pageBlockButtons >
        <apex:commandButton action="{!save}" value="Save"/>
      </apex:pageBlockButtons>
 
      <apex:pageBlockSection showHeader="false" columns="2">
        <apex:inputField value="{!contact.firstName}" />
        <apex:inputField value="{!contact.lastName}" />
        <apex:inputField value="{!contact.email}" />
      </apex:pageBlockSection>
 
    </apex:pageBlock>
  </apex:form>
</apex:page>

Contact_Create_Thankyou Visualforce Page

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<apex:page controller="ContactCreateController">
  <apex:sectionHeader title="Visualforce Example" subtitle="Thank You"/>
 
  <apex:form >
    <apex:pageBlock title="Contact Info">
 
      <apex:pageBlockSection showHeader="false" columns="2">
        <apex:outputField value="{!contact.firstName}" />
        <apex:outputField value="{!contact.lastName}" />
        <apex:outputField value="{!contact.email}" />
      </apex:pageBlockSection>
 
    </apex:pageBlock>
  </apex:form>
</apex:page>

Apex Controller

public with sharing class ContactCreateController {
 
  // the contact record you are adding values to
  public Contact contact {
    get {
      if (contact == null)
        contact = new Contact();
      return contact;
    }
    set;
  }
 
  public ContactCreateController() {
    // blank constructor
  }
 
  // save button is clicked
  public PageReference save() {
 
    try {
      insert contact; // inserts the new record into the database
    } catch (DMLException e) {
      ApexPages.addMessage(new ApexPages.message(ApexPages.severity.ERROR,'Error creating new contact.'));
      return null;
    }
 
    // if successfully inserted new contact, then displays the thank you page.
    return Page.Contact_Create_Thankyou;
  }
 
}


]]> http://blog.jeffdouglas.com/2010/04/27/create-a-new-record-in-force-com-sites/feed/ 8 Uploading a Document using Visualforce and a Custom Controller http://blog.jeffdouglas.com/2010/04/22/uploading-a-document-using-visualforce-and-a-custom-controller/?utm_source=rss&utm_medium=rss&utm_campaign=uploading-a-document-using-visualforce-and-a-custom-controller http://blog.jeffdouglas.com/2010/04/22/uploading-a-document-using-visualforce-and-a-custom-controller/#comments Thu, 22 Apr 2010 11:56:00 +0000 Jeff Douglas http://blog.jeffdouglas.com/?p=2461

The Salesforce docs for the inputFile Visualforce component has an example of uploading a document using the Standard Controller. Here is a quick example of using a Custom Controller in case you want to make the upload process part of a larger transaction.


Make sure you take a look at the finally block in the controller below. The finally block always executes when the try block exits regardless if an error occurs or not. You need to ensure you clear out document’s body (document.body = null) so that the blob is not automatically included in the serialized image of the controller. If you do not clear out the body, you’ll get the following view state error:

Maximum view state size limit (128K) exceeded. Actual viewstate size for this page was…

FileUploadExample

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

<apex:page controller="FileUploadController">
  <apex:sectionHeader title="Visualforce Example" subtitle="File Upload Example"/>
 
  <apex:form enctype="multipart/form-data">
    <apex:pageMessages />
    <apex:pageBlock title="Upload a File">
 
      <apex:pageBlockButtons >
        <apex:commandButton action="{!upload}" value="Save"/>
      </apex:pageBlockButtons>
 
      <apex:pageBlockSection showHeader="false" columns="2" id="block1">
 
        <apex:pageBlockSectionItem >
          <apex:outputLabel value="File Name" for="fileName"/>
          <apex:inputText value="{!document.name}" id="fileName"/>
        </apex:pageBlockSectionItem>
 
        <apex:pageBlockSectionItem >
          <apex:outputLabel value="File" for="file"/>
          <apex:inputFile value="{!document.body}" filename="{!document.name}" id="file"/>
        </apex:pageBlockSectionItem>
 
        <apex:pageBlockSectionItem >
          <apex:outputLabel value="Description" for="description"/>
          <apex:inputTextarea value="{!document.description}" id="description"/>
        </apex:pageBlockSectionItem>
 
        <apex:pageBlockSectionItem >
          <apex:outputLabel value="Keywords" for="keywords"/>
          <apex:inputText value="{!document.keywords}" id="keywords"/>
        </apex:pageBlockSectionItem>
 
      </apex:pageBlockSection>
 
    </apex:pageBlock>
  </apex:form>
</apex:page>

FileUploadController

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

public with sharing class FileUploadController {
 
  public Document document {
    get {
      if (document == null)
        document = new Document();
      return document;
    }
    set;
  }
 
  public PageReference upload() {
 
    document.AuthorId = UserInfo.getUserId();
    document.FolderId = UserInfo.getUserId(); // put it in running user's folder
 
    try {
      insert document;
    } catch (DMLException e) {
      ApexPages.addMessage(new ApexPages.message(ApexPages.severity.ERROR,'Error uploading file'));
      return null;
    } finally {
      document.body = null; -- clears the viewstate
      document = new Document();
    }
 
    ApexPages.addMessage(new ApexPages.message(ApexPages.severity.INFO,'File uploaded successfully'));
    return null;
  }
 
}


]]> http://blog.jeffdouglas.com/2010/04/22/uploading-a-document-using-visualforce-and-a-custom-controller/feed/ 7 Easily Search and Edit Records with Visualforce http://blog.jeffdouglas.com/2010/04/07/easily-search-and-edit-records-with-visualforce/?utm_source=rss&utm_medium=rss&utm_campaign=easily-search-and-edit-records-with-visualforce http://blog.jeffdouglas.com/2010/04/07/easily-search-and-edit-records-with-visualforce/#comments Wed, 07 Apr 2010 11:43:04 +0000 Jeff Douglas http://blog.jeffdouglas.com/?p=2427

I tend to over think Visualforce development sometimes and make it harder than it should be. Development with Force.com is surprisingly easy, elegant and quick. For example I recently needed to develop a way for the users to search for records and update specific values. Users should be able to search for records by keyword search, view multiple matching records, update values for multiple records, commit the changes to the database and check for validation errors.

Now if I was doing this in Java I’d need to:

  • Create a JSP for the UI
  • Create a bean to model the data
  • Implement a Javascript framework for form validation
  • Write a DAO layer of to handle the search, retrieval and persisting of records
  • Write a Servlet to control the entire process

Force.com makes developing this type of interface a snap. Using only a single Visualforce page and an Apex controller you can whip up the following in no time.



Force.com provides the data model (custom object), the search functionality (SOQL/SOSL) and the DAO layer (DML) for you so all you have to do is implement the business logic and process flow. One of my favorite features of Visualforce is the baked-in form validation. Gone are the days when you had to implement validation in each page you developed and then always remember to update the rules when changes are made. You simply define the fields at the object level with all of its rules and datatype specifics. When developing your Visualforce page, by simply using the standard components you invoke the validation inherit in the platform as well as some nifty Ajax eye-candy. You can focus on the business requirements and not the low level data integrity requirements.



So here is the code for the Visualforce page and Apex controller in case anyone wants to use it for a starting point.

<apex:page standardController="MyObject__c" extensions="ItemEditController">
  <apex:sectionHeader title="{!MyObject__c.Name}" subtitle="Edit Records"/>
  <apex:form >
    <apex:pageBlock mode="edit" id="block">
 
      <apex:pageBlockButtons location="both">
        <apex:commandButton action="{!save}" value="Save Records"/>
        <apex:commandButton action="{!cancel}" value="Cancel"/>
      </apex:pageBlockButtons>
      <apex:pageMessages />
 
      <apex:pageBlockSection >
        <apex:pageBlockSectionItem >
          <apex:outputLabel for="searchText">Keyword</apex:outputLabel>
          <apex:panelGroup >
          <apex:inputText id="searchText" value="{!searchText}"/>
          <apex:commandButton value="Search" action="{!search}" rerender="block" status="status"/>
          </apex:panelGroup>
        </apex:pageBlockSectionItem>
      </apex:pageBlockSection><br/>
 
      <apex:actionStatus id="status" startText="Searching... please wait..."/>
      <apex:pageBlockSection title="Search Results" id="resultsBlock" columns="1">
        <apex:pageBlockTable value="{!searchResults}" var="item" rendered="{!NOT(ISNULL(searchResults))}">
          <apex:column value="{!item.Name}" headerValue="Item" width="100"/>
          <apex:column headerValue="Value" width="200">
            <apex:inputField value="{!item.Value__c}"/>
          </apex:column>
        </apex:pageBlockTable>
      </apex:pageBlockSection>
    </apex:pageBlock>
  </apex:form>
</apex:page>

public with sharing class ItemEditController {
 
  private ApexPages.StandardController controller {get; set;}
  public List<itemObject__c> searchResults {get;set;}
  public string searchText {get;set;}
 
  // standard controller - could also just use custom controller
  public ItemEditController(ApexPages.StandardController controller) { }
 
  // fired when the search button is clicked
  public PageReference search() {
    String qry = 'select id, name, value__c from ItemObject__c ' +
      'where name LIKE \'%'+searchText+'%\' order by name';
    searchResults = Database.query(qry);
    return null;
  }
 
  // fired when the save records button is clicked
  public PageReference save() {
 
    try {
      update searchResults;
    } Catch (DMLException e) {
      ApexPages.addMessages(e);
      return null;
    }
 
    return new PageReference('/'+ApexPages.currentPage().getParameters().get('id'));
  }
 
  // takes user back to main record
  public PageReference cancel() {
    return new PageReference('/'+ApexPages.currentPage().getParameters().get('id'));
  }
 
}


]]> http://blog.jeffdouglas.com/2010/04/07/easily-search-and-edit-records-with-visualforce/feed/ 10