Newer Version Available

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

Add a Last Updated Promotions Box to the Visualforce Article Search Page

Finally, we'll add a Last Updated Promotions box.

  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 Box Code Sample.
  3. Click Save (Visualforce save icon).

Visualforce Box Code Sample

Lines in bold are described below the code sample.

1swfobject.registerObject("clippy.codeblock-0", "9");<apex:page controller="VfSearchController" sidebar="false" title="Knowledge Search">
2<style>
3 td{
4  vertical-align : top;   
5  text-align: left;
6 }
7</style>
8<apex:form >
9 <apex:panelGrid columns="2" >
10  <apex:panelGroup >
11   <apex:pageBlock >
12    <apex:outputText value="Filter Your Results" />
13     <apex:pageBlockSection columns="1">
14      <apex:dataTable value="{!dataCategoryGroupInfo}" var="dataCategory" id="dataCategory">
15       <apex:column width="20%">
16        <apex:outputLabel for="categoryType_{!dataCategory.name}">{!dataCategory.name}</apex:outputLabel> 
17        <br />
18        <select id="categoryType_{!dataCategory.name}" name="categoryType_{!dataCategory.name}" onchange = "refreshSearchResult()" >
19         <option value="NoFilter">No Filter</option>
20         <option value="All">All</option>
21         <knowledge:categoryList categoryVar="category" categoryGroup="{!dataCategory.name}" rootCategory="All" level="-1">
22         <option value="{!category.name}">
23          <apex:outputText escape="false" value="{!LPAD(' ',6*category.depth,'&nbsp;')}" />
24          {!category.label}
25         </option>
26        </knowledge:categoryList>
27        </select>
28       </apex:column>
29      </apex:dataTable>
30     </apex:pageBlockSection>
31    </apex:pageBlock>
32    <apex:pageBlock >
33    <apex:outputText value="Last Updated Promotions" />    
34    <apex:pageBlockSection columns="1">
35     <knowledge:articleList articleVar="article" articleTypes="Promotion__kav" pageSize="10" >
36     <li>
37      <apex:outputLink target="_blank" value="{!URLFOR($Action.KnowledgeArticle.View, article.id, ['popup' = 'true'])}">{!article.title}</apex:outputLink>
38     </li>
39     </knowledge:articleList>
40    </apex:pageBlockSection>
41   </apex:pageBlock>
42 </apex:panelGroup>
43 <apex:panelGroup >
44  <apex:pageBlock title="Search" >
45   <apex:inputText value="{!searchstring}" id="theSearchstring" maxlength="100" size="110"  onkeypress="if (event.keyCode == 13) {refreshSearchResult();return false;} "/> &nbsp;
46   <apex:commandButton value="Go" id="submitButton" style="width:30" reRender="theSearchResults" />
47  </apex:pageBlock>  
48  <apex:messages />
49  <apex:panelGroup id="theSearchResults" >
50  <apex:pageBlock title="Search Results" > 
51   <apex:panelGrid width="100%">
52    <table width="99%">
53     <tr>
54      <th width="33%">Title</th>
55      <th width="33%">Article Type</th>
56      <th width="33%">Summary</th>
57     </tr>
58    </table>
59    <knowledge:articleList articleVar="article"  categories="{!categoryKeyword}" Keyword="{!searchstring}" pageNumber="{!currentPageNumber}" hasMoreVar="false" pageSize="10">
60    <table  width="99%">
61     <tr>
62      <td width="33%">
63      <apex:outputLink target="_blank" value="{!URLFOR($Action.KnowledgeArticle.View, article.id,['popup' = 'true'])}">{!article.title}</apex:outputLink>
64      </td>
65      <td width="33%"><apex:outputText >{!article.articleTypeLabel}</apex:outputText></td>
66      <td width="33%"><apex:outputText >{!article.abstract}</apex:outputText></td>
67     </tr>
68    </table>
69    </knowledge:articleList>
70  </apex:panelGrid> 
71 </apex:pageBlock>
72 <apex:panelGrid columns="2">
73   <apex:commandLink action="{!previous}" value="Previous" style="{!IF(prevRequired = true,'display:block','display:none')}" reRender="theSearchResults"/> 
74   <apex:commandLink action="{!next}" value="Next"  style="{!IF(nextRequired = true,'display:block','display:none')}" reRender="theSearchResults"/>  
75 </apex:panelGrid>
76 </apex:panelGroup>
77 </apex:panelGroup>
78 </apex:panelGrid>
79 <apex:actionFunction action="{!refreshSearchResult}" name="refreshSearchResult" rerender="theSearchResults" >
80 </apex:actionFunction>
81
82
83 </apex:form>
84</apex:page>

In the code fragment below, the <knowledge:articleList> tag retrieves by default any last published articles. The articleTypes attribute specifies that only Promotion articles are displayed in the Last Updated Promotions box.

1<apex:outputText value="Last Updated Promotions" />    
2<apex:pageBlockSection columns="1">
3 <knowledge:articleList articleVar="article" articleTypes="Promotion__kav" pageSize="10" >
4 <li>
5  <apex:outputLink target="_blank" value="{!URLFOR($Action.KnowledgeArticle.View, article.id, ['popup' = 'true'])}">{!article.title}</apex:outputLink>
6 </li>
7</knowledge:articleList>

Look at What We've Done

You can now see the Last Updated Promotions box on the left pane of the Visualforce Article Search page. This box displays any new or the most recently updated promotions.

The Last Published Promotions box in the Article Search VF page