Add a Search Field to the Visualforce Article Search page

Let's create a keyword search field above the Article List. Entering text in this field refreshes the list and displays only articles containing this keyword.

Using a search field requires new methods to set and retrieve the search string. That's why we'll add a new controller before modifying the code from the Visualforce Article Search page.

From Setup, enter Apex Classes in the Quick Find box, then select Apex Classes.
Click New
Copy and paste the content of the Visualforce Keyword Search Controller Code Sample.
Click Save.
In the footer of the Visualforce Article Search tab, click ArticleList to display the Visualforce development mode page editor.
Delete all the existing markup in the Visualforce development mode page editor and replace it with the markup shown in the Visualforce Keyword Search Code Sample.

Visualforce Keyword Search Code Sample

Lines in bold are described below the code sample.

1<apex:page sidebar="false" title="Article List" controller="vfKeywordSearchController">
2 <style>
3  td{
4  vertical-align : top;   
5  text-align: left;
6  }
7 </style>
8 <apex:form >
9 <apex:pageBlock title="Search" >
10   <apex:inputText value="{!searchstring}" id="theSearchstring" maxlength="100" size="110"/> &nbsp;
11   <apex:commandButton value="Go" id="submitButton" style="width:30" reRender="theSearchResults" />
12  </apex:pageBlock>  
13  <apex:messages />
14  <apex:pageBlock title="Article List" > 
15  
16  <apex:panelGroup id="theSearchResults" >
17   <apex:panelGrid width="100%">
18    <table width="99%">
19     <tr>
20      <th width="33%">Title</th>
21      <th width="33%">Article Type</th>
22      <th width="33%">Summary</th>
23     </tr>
24    </table>
25 <knowledge:articleList articleVar="article" pageNumber="{!currentPageNumber}" Keyword="{!searchstring}" hasMoreVar="false" pageSize="10">
26    <table  width="99%">
27     <tr>
28      <td width="33%">
29       <apex:outputLink target="_blank" value="{!URLFOR($Action.KnowledgeArticle.View, article.id,['popup' = 'true'])}">{!article.title}</apex:outputLink>
30      </td>
31      <td width="33%"><apex:outputText >{!article.articleTypeLabel}</apex:outputText></td>
32      <td width="33%"><apex:outputText >{!article.abstract}</apex:outputText></td>
33     </tr>
34    </table>
35    </knowledge:articleList>
36   </apex:panelGrid> 
37   <apex:panelGrid columns="2">
38   <apex:commandLink action="{!previous}" value="Previous" style="{!IF(prevRequired = true,'display:block','display:none')}" reRender="theSearchResults"/> 
39   <apex:commandLink action="{!next}" value="Next"  style="{!IF(nextRequired = true,'display:block','display:none')}" reRender="theSearchResults"/>  
40 </apex:panelGrid>
41  </apex:panelGroup>
42  </apex:pageBlock>
43 </apex:form>
44</apex:page>

The code fragment below uses the Keyword attribute. The value for this attribute invokes the searchstring method of the vfKeywordSearchController controller.

1<knowledge:articleList articleVar="article" pageNumber="{!currentPageNumber}" Keyword="{!searchstring}" hasMoreVar="false" pageSize="10">

Visualforce Keyword Search Controller Code Sample

Lines in bold are described below the code sample.

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

The code fragment below sets and retrieves the search keyword.

1public String searchstring { get; set; }

Look at What We've Done

The Visualforce Article Search page now shows a Search field above the article list.

Salesforce Knowledge Developer Guide

Add a Search Field to the Visualforce Article Search page

Visualforce Keyword Search Code Sample

Visualforce Keyword Search Controller Code Sample

Look at What We've Done