この文章は Salesforce 機械翻訳システムを使用して翻訳されました。詳細はこちらをご参照ください。
英語に切り替える

Visualforce を使用して記事リストを作成する

Visualforce 検索ページの最初のコンポーネントとなる記事リストを作成します。

  1. ブラウザのアドレスバーで、salesforce.com/ より右側すべてを apex/ArticleList に置き換えます。salesforce.com/ の左側は何も変更しないでください。

    この結果、URL は、https://instance.salesforce.com/apex/ArticleList のようになります。

  2. Enter キーを押します。

    ページがまだ存在しないことを示す Visualforce エラーページが表示されます。

  3. [ArticleList ページを作成] リンクをクリックします。
  4. 新しい Visualforce ページの下部にあるフッターで、[ArticleList] をクリックして Visualforce 開発モードのページエディタを表示します。
  5. Visualforce 開発モードのページエディタでデフォルトのマークアップをすべて削除し、「Visualforce 記事リストのコードサンプル」に表示されているマークアップに置き換えます。
  6. [保存] (Visualforce の保存アイコン) をクリックします。

マークアップを保存すると、Force.com プラットフォームでマークアップが有効であるかどうかが確認されて、エラーがあれば通知されます。マークアップが有効である場合、Visualforce ページの新しいバージョンが保存され、ブラウザに表示されます。これで、記事のリストが表示された [Article List (記事リスト)] ページを確認できます。

Visualforce 記事リストのコードサンプル

太字の行については、コードサンプルの後に説明があります。

1<apex:page sidebar="false" title="Article List">
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:panelGrid width="100%">
11    <table width="99%">
12     <tr>
13      <th width="33%">Title</th>
14      <th width="33%">Article Type</th>
15      <th width="33%">Summary</th>
16     </tr>
17    </table>
18   <knowledge:articleList articleVar="article"  hasMoreVar="false" pageSize="10">
19    <table  width="99%">
20     <tr>
21      <td width="33%">
22       <apex:outputLink target="_blank" value="{!URLFOR($Action.KnowledgeArticle.View, article.id,['popup' = 'true'])}">{!article.title}</apex:outputLink>
23      </td>
24      <td width="33%"><apex:outputText >{!article.articleTypeLabel}</apex:outputText></td>
25      <td width="33%"><apex:outputText >{!article.abstract}</apex:outputText></td>
26     </tr>
27    </table>
28    </knowledge:articleList>
29   </apex:panelGrid> 
30  </apex:pageBlock>
31 </apex:form>
32</apex:page>

次のコードフラグメントでは、knowledge:articleList Visualforce コンポーネントによって最初の記事リストが作成されます。pageSize 属性により、リスト内に 10 個までしか記事が表示されないようになります。

1<knowledge:articleList articleVar="article"  hasMoreVar="false" pageSize="10">

[Visualforce Article Search (Visualforce 記事検索)] タブの作成

次に、記事リストが表示される Visualforce ページの新しいカスタムタブを作成します。このページを [Visualforce Article Search (Visualforce 記事検索)] ページと呼ぶこととします。

  1. [設定] から、[クイック検索] ボックスに「タブ」と入力し、[タブ] を選択します。
  2. Visualforce タブ領域で、[新規] をクリックします。
  3. [Visualforce ページ] ドロップダウンリストで、ArticleList を選択します。
  4. [タブの表示ラベル] 項目に「Visualforce Article Search」(Visualforce 記事検索) と入力します。
  5. [タブ名] 項目のデフォルト値はそのままにしておきます。
  6. [タブスタイル] ルックアップアイコンをクリックして、新しいタブのスタイルを選択します。
  7. [Salesforce Classic Mobile 準備完了] チェックボックスをオフ、[スプラッシュページのカスタムリンク] ドロップダウンリストの設定を [--なし--] のままにします。
  8. [説明] 項目に「A tab for the Visualforce Article Search page」(Visualforce 記事検索ページのタブ) と入力します。
  9. [次へ] をクリックします。
  10. [次へ] を再度クリックして、デフォルトのユーザプロファイル表示を受け入れます。
  11. [カスタムアプリケーションに追加] ページで、自分のナレッジアプリケーション以外のすべての [タブを含める] チェックボックスをオフにします。
  12. [各ユーザのカスタマイズ設定にタブを追加する] チェックボックスをオンにします。
  13. [保存] をクリックします。

ページが更新されると、[Visualforce Article Search (Visualforce 記事検索)] タブが自動的にページ上部のアプリケーションタブに追加されます。

これまでの作業を確認する

[Visualforce Article Search (Visualforce 記事検索)] タブを選択して、記事リストを表示します。

リスト内の各項目には、記事のタイトル、記事タイプ、および記事の概要が表示されます。現時点では、Visualforce リストのコードサンプルの knowledge:articleList タグで設定したように、リストにはページごとに 10 個の記事しか表示されません。

[Article Search VF (記事検索 VF)] タブ