Salesforce Knowledge Developer's Guide

Clouds with binary code floating aboveCloud with binary code floating above

No Results

Search Tips:

  • Please consider misspellings
  • Try different search keywords
PDF

Newer Version Available

This content describes an older version of this product. View Latest

Add Pagination to the Visualforce Article List

Let's add a Next and a Previous link to navigate from one page to another on the Visualforce Article Search tab.

  1. In the footer at the bottom of the Visualforce Article Search tab, click ArticleList to display the Visualforce development mode page editor.
  2. Delete all the existing markup in the Visualforce development mode page editor and replace it with the markup shown in the Visualforce Article List Pagination Code Sample.
  3. Click Save (Visualforce save icon).

    Since your new Visualforce code refers to Apex classes and methods, subsequent error messages appear and ask you to declare the expected class or method. Instead of declaring these items one at a time, let's just create the appropriate Controller.

  4. From Setup, click Develop | Apex Classes.
  5. Click New
  6. Copy and paste the content of the Visualforce Pagination Controller Code Sample.
  7. Click Save.
  8. Repeat steps 1 to 3.

Visualforce Article List Pagination Code Sample

This code sample is based on the Visualforce page you first saved but includes some enhancements to enable pagination. Lines in bold are described below the code sample.
1swfobject.registerObject("clippy.codeblock-0", "9");<apex:page sidebar="false" title="Article List" controller="vfListPaginationController">
2 <style>
3  td{
4  vertical-align : top;   
5  text-align: left;
6  }
7 </style>
8 <apex:form >
9  <apex:pageBlock title="Article List" > 
10   <apex:panelGroup id="theSearchResults" >
11   <apex:panelGrid width="100%">
12    <table width="99%">
13     <tr>
14      <th width="33%">Title</th>
15      <th width="33%">Article Type</th>
16      <th width="33%">Summary</th>
17     </tr>
18    </table>
19    <knowledge:articleList articleVar="article" pageNumber="{!currentPageNumber}" hasMoreVar="false" pageSize="10">
20    <table  width="99%">
21     <tr>
22      <td width="33%">
23      <apex:outputLink target="_blank" value="{!URLFOR($Action.KnowledgeArticle.View, article.id,['popup' = 'true'])}">{!article.title}</apex:outputLink>
24      </td>
25      <td width="33%"><apex:outputText >{!article.articleTypeLabel}</apex:outputText></td>
26      <td width="33%"><apex:outputText >{!article.abstract}</apex:outputText></td>
27     </tr>
28    </table>
29    </knowledge:articleList>
30     </apex:panelGrid> 
31     <apex:panelGrid columns="2">
32   <apex:commandLink action="{!previous}" value="Previous" style="{!IF(prevRequired = true,'display:block','display:none')}" reRender="theSearchResults"/> 
33   <apex:commandLink action="{!next}" value="Next"  style="{!IF(nextRequired = true,'display:block','display:none')}" reRender="theSearchResults"/>  
34    </apex:panelGrid>
35   </apex:panelGroup>
36  </apex:pageBlock>
37 </apex:form>
38</apex:page>

The code controller="vfListPaginationController" references the controller used with the Visualforce page, while pageNumber="{!currentPageNumber}" sets the pagination for the article list. The currentPageNumber variable is updated each time a user clicks the Next or Previous link.

The code fragment below, calls the previous method from the controller. The rerender attribute refreshes the article list only and not the whole page.

1<apex:commandLink action="{!previous}" value="Previous" style="{!IF(prevRequired = true,'display:block','display:none')}" reRender="theSearchResults"/>

Visualforce Pagination Controller Code Sample

Lines in bold are described below the code sample.

1swfobject.registerObject("clippy.codeblock-2", "9");public with sharing class vfListPaginationController {
2
3 //Page Size
4 private Static Final Integer PAGE_NUMBER = 10;
5 
6 public vfListPaginationController() {
7 String qryString = 'SELECT Id, title, UrlName, LastPublishedDate,LastModifiedById FROM KnowledgeArticleVersion WHERE (PublishStatus = \'online\' and Language = \'en_US\')';
8  List<KnowledgeArticleVersion> articleList= Database.query(qryString);
9  maxSize = articleList.size() ;
10 }
11 
12 //Keeps track of current page & max size of article list
13 Integer currentPage = 1;
14 Integer maxSize = 1;
15 
16 // Returns whether we need to see previous button or not
17 public boolean getPrevRequired() {
18  return currentPage > 1;
19 }
20
21 // Returns whether we need to see next button or not
22 public boolean getNextRequired() {
23  return currentPage * PAGE_NUMBER < maxSize;
24 }
25 
26 //Returns current page number 
27 public Decimal getCurrentPageNumber() {
28  return this.currentPage;
29 }
30
31 //action for next click
32 public PageReference next() {
33  if(maxSize > this.currentPage * PAGE_NUMBER) {
34   this.currentPage = this.currentPage + 1;
35  }
36  return null;
37 }    
38 
39 //action for previous click
40 public PageReference previous() {        
41  if(this.currentPage > 1)
42   this.currentPage = this.currentPage - 1;
43  return null;
44 }
45
46
47}

The code fragment below is an SOQL clause that retrieves the article information to display in the list. The WHERE clause specifies that only published articles are displayed in the Article List.

1SELECT Id, title, UrlName, LastPublishedDate,LastModifiedById FROM KnowledgeArticleVersion WHERE (PublishStatus = \'online\' and Language = \'en_US\')

Look at What We've Done

When you save your work, the Visualforce Article Search page refreshes and now displays a Next link at the bottom of the list. If you click Next, the page now shows a Previous link.

Article list with pagination