ページネーションを Visualforce 記事リストに追加する
[Visualforce Article Search (Visualforce 記事検索)] タブに、ページ間を移動するための [次へ] および [前へ] リンクを追加します。
- [Visualforce Article Search (Visualforce 記事検索)] タブの下部にあるフッターで、[ArticleList] をクリックして Visualforce 開発モードのページエディタを表示します。
- Visualforce 開発モードのページエディタで既存のマークアップをすべて削除し、「Visualforce 記事リストページネーションのコードサンプル」に表示されているマークアップに置き換えます。
-
[保存] (
) をクリックします。新しい Visualforce コードは、Apex クラスおよびメソッドを参照しているため、後でエラーメッセージが表示されて、想定されるクラスまたはメソッドを宣言するように求められます。これらの項目を 1 つずつ宣言する代わりに、適切なコントローラを作成します。
- [設定] から、 をクリックします。
- [新規] をクリックします。
- Visualforce ページネーションコントローラのコードサンプルの内容をコピーして貼り付けます。
- [保存] をクリックします。
- ステップ 1 ~ 3 を繰り返します。
Visualforce 記事リストページネーションのコードサンプル
このコードサンプルは、最初に保存した Visualforce ページに基づいていますが、ページネーションを有効にする機能強化が含まれています。太字の行については、コードサンプルの後に説明があります。
1swfobject.registerObject("clippy.codeblock-0", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<apex:page sidebar="false" title="Article List" controller="vfListPaginationController">
18 <style>
19 td{
20 vertical-align : top;
21 text-align: left;
22 }
23 </style>
24 <apex:form >
25 <apex:pageBlock title="Article List" >
26 <apex:panelGroup id="theSearchResults" >
27 <apex:panelGrid width="100%">
28 <table width="99%">
29 <tr>
30 <th width="33%">Title</th>
31 <th width="33%">Article Type</th>
32 <th width="33%">Summary</th>
33 </tr>
34 </table>
35 <knowledge:articleList articleVar="article" pageNumber="{!currentPageNumber}" hasMoreVar="false" pageSize="10">
36 <table width="99%">
37 <tr>
38 <td width="33%">
39 <apex:outputLink target="_blank" value="{!URLFOR($Action.KnowledgeArticle.View, article.id,['popup' = 'true'])}">{!article.title}</apex:outputLink>
40 </td>
41 <td width="33%"><apex:outputText >{!article.articleTypeLabel}</apex:outputText></td>
42 <td width="33%"><apex:outputText >{!article.abstract}</apex:outputText></td>
43 </tr>
44 </table>
45 </knowledge:articleList>
46 </apex:panelGrid>
47 <apex:panelGrid columns="2">
48 <apex:commandLink action="{!previous}" value="Previous" style="{!IF(prevRequired = true,'display:block','display:none')}" reRender="theSearchResults"/>
49 <apex:commandLink action="{!next}" value="Next" style="{!IF(nextRequired = true,'display:block','display:none')}" reRender="theSearchResults"/>
50 </apex:panelGrid>
51 </apex:panelGroup>
52 </apex:pageBlock>
53 </apex:form>
54</apex:page>コード controller="vfListPaginationController" は、Visualforce ページで使用されるコントローラを参照し、pageNumber="{!currentPageNumber}" は、記事リストのページネーションを設定します。currentPageNumber 変数は、ユーザが [次へ] または [前へ] リンクをクリックするたびに更新されます。
次のコードフラグメントでは、コントローラ内の previous メソッドをコールします。rerender 属性は、ページ全体ではなく記事リストのみを更新します。
1<apex:commandLink action="{!previous}" value="Previous" style="{!IF(prevRequired = true,'display:block','display:none')}" reRender="theSearchResults"/>Visualforce ページネーションコントローラのコードサンプル
太字の行については、コードサンプルの後に説明があります。
1swfobject.registerObject("clippy.codeblock-2", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17public with sharing class vfListPaginationController {
18
19 //Page Size
20 private Static Final Integer PAGE_NUMBER = 10;
21
22 public vfListPaginationController() {
23 String qryString = 'SELECT Id, title, UrlName, LastPublishedDate,LastModifiedById FROM KnowledgeArticleVersion WHERE (PublishStatus = \'online\' and Language = \'en_US\')';
24 List<KnowledgeArticleVersion> articleList= Database.query(qryString);
25 maxSize = articleList.size() ;
26 }
27
28 //Keeps track of current page & max size of article list
29 Integer currentPage = 1;
30 Integer maxSize = 1;
31
32 // Returns whether we need to see previous button or not
33 public boolean getPrevRequired() {
34 return currentPage > 1;
35 }
36
37 // Returns whether we need to see next button or not
38 public boolean getNextRequired() {
39 return currentPage * PAGE_NUMBER < maxSize;
40 }
41
42 //Returns current page number
43 public Decimal getCurrentPageNumber() {
44 return this.currentPage;
45 }
46
47 //action for next click
48 public PageReference next() {
49 if(maxSize > this.currentPage * PAGE_NUMBER) {
50 this.currentPage = this.currentPage + 1;
51 }
52 return null;
53 }
54
55 //action for previous click
56 public PageReference previous() {
57 if(this.currentPage > 1)
58 this.currentPage = this.currentPage - 1;
59 return null;
60 }
61
62
63}次のコードフラグメントは、記事情報を取得してリストに表示する SOQL 句です。WHERE 句では、公開記事のみが記事リストに表示されるように指定しています。
1SELECT Id, title, UrlName, LastPublishedDate,LastModifiedById FROM KnowledgeArticleVersion WHERE (PublishStatus = \'online\' and Language = \'en_US\')これまでの作業を確認する
作業内容を保存すると、[Visualforce Article Search (Visualforce 記事検索)] ページが更新されて、[次へ] リンクがリストの下部に表示されます。[次へ] をクリックすると、ページに [前へ] リンクが表示されます。