攻略

基本的な検索機能を作成する

すべての検索ページには2つのSPEAKコンポーネントが必要です。アイテムを取得できるコンポーネントと、アイテムを表示するコントロールです。これはさまざまな方法で実現できます。この例ではSearchDataSourceコンポーネントとListControlを使用しています:

1. ページレイアウトに SearchDataSource コンポーネントを追加し、次のように設定します:

   • RootItemIdプロパティを、取得したいアイテムのルートフォルダのSitecore IDに設定します。

     Select Mediaダイアログでは、このルートフォルダがmasterデータベースのMedia Libraryフォルダです。現在のSitecore Rocksでは、RootItemIdプロパティシートフィールドからこのフォルダにアクセスすることはできません(ダイアログ自体はrootデータベースにあります)。Sitecoreエクスプローラー(Sitecore Rocksの一部)でフォルダのSitecore IDを見つけてコピーする必要があります。

   • データベースプロパティを $context_contentdatabaseに設定します。

2. ページに ListControl を追加し、次のように設定してください:
   • ViewModeプロパティを IconListに設定します。
   • Itemsプロパティを SearchDataSourceのItemsプロパティにバインドします: {Binding DataSource.Items}。

これはSPEAKの検索ページの最小限の設定です。項目にサムネイルフィールドがある場合、サムネイルとして表示され、そうでない場合はアイコンとして表示されます。

考慮すべき点

翻訳が必要な項目については、テキストプロパティを別々の設定項目に移すのがベストプラクティスです。

ListControlはアイコンリストとしてしかアイテムを表示できません。しかし、ListControlをカスタマイズして他のビューモードを指定することは可能です。

Searchテキストボックスを追加

ユーザーは「 メディア選択 」ダイアログのテキストボックスに検索語を入力し、Enterキーを押すか検索アイコンをクリックして検索できます:

この機能は次のように実装されます:

1. ページレイアウトにSearchPanelコンポーネントを追加してください。このコンポーネントは、ページのレイアウトやスタイルを正しく調整するためのプレースホルダーを追加します。

2. SearchPanelコンポーネントで、SearchesプレースホルダーにButtonTextBoxコントロールを追加してください。

3. ウォーターマークプロパティのテキストを指定します。例えば「検索条件を入力してください」 ButtonTextBoxコントロールは、テキストプロパティが空のときにこのテキストを表示します。

   • このテキストを翻訳する必要がない場合は、プロパティシートのウォーターマークプロパティの値として入力してください。
   • このテキストを翻訳する必要がある場合は、 ButtonTextBoxパラメータ テンプレートに基づいて設定項目を作成してください。 ButtonTextBox コントロールのDataSourceプロパティでこの項目を指し、設定項目のウォーターマークフィールドにテキストを入力します。

4. ButtonImageUrlプロパティの値として /sitecore/shell/client/Speak/Assets/img/Speak/Common/16x16/dark_gray/search.pngを入力してください。この画像はテキストボックスの右側にある検索アイコンです。

5. ButtonTextBoxコントロールのクリックプロパティの値として以下のJavaScriptを入力します:javascript

   .DataSource.refresh()。

   これにより、ユーザーがボタンをクリックした際にSearchDataSourceに更新されるよう指示されます。

6. SearchDataSourceのテキストプロパティをButtonTextBoxのテキストプロパティにバインドします:{Binding ButtonTextBoxId.Text}。

!注Enterでデータソースのリフレッシュをトリガーするために特別な操作は必要ありません。SPEAKはこの動作に必要なイベント配線を提供します。クリックイベントのリフレッシュは手動でトリガーする必要があります。なぜなら、SPEAKはこの場合配線について仮定しないからです。

メディアファイルのみ表示

SearchDataSourceはデフォルトですべてのアイテムを取得します。ただし、SearchDataSourceは特定のテンプレートに基づいてのみアイテムを取得するように指定できます:

1. SearchPanelの設定テンプレートに基づいて設定項目を作成します。

2. 設定項目でBase Templatesフィールドを編集してください。現行のSitecore Rocksではこれを行うことはできません。コンテンツエディターを使って設定項目を見つけて開いてください:

   

3. 編集 **をクリックし、**必要なテンプレートを選択してください。 Fileテンプレートを指定すると、SearchDataSourceがファイル項目を取得します。これによりフォルダとサブフォルダの項目がフィルタリングされます。

   !注前の例では、Fileと呼ばれる2つのテンプレートがあります。1つはバージョン管理され、もう1つは非バージョン管理です。これは、両方のテンプレートを使うアイテムが存在するため必要です。

4. Sitecore Rocksで、SearchDataSourceの**「レンダリングプロパティ編集**」ダイアログを開きます。ステップ1で作成した設定項目をSearchConfigItemIdプロパティに指定します。

FilterControlを使います

FilterControlは、ユーザーがアイテムをファセットごとにフィルタリングできるようにします。「メディア選択」ダイアログでは、最初にフォルダした状態のFilterControlが表示されます。

FilterControlはFiltersToggleButtonをクリックすると展開します:

「Dimensions」「Media Type」「Date Uploaded」はファセットです。例えば、Dimensionsファセットはアイテムを「Medium」と「Small」の2つのセットに分けます。

ユーザーが「Medium」を選択すると、SearchDataSourceはこのセット内のアイテムのみを取得します。もしユーザーが「Today」も選択した場合、SearchDataSourceは「Medium」セットと「Today」セットの両方に属するファイルを取得します。

ユーザーがどの側面でもグループを選択していない場合、SearchDataSourceはすべての項目を取得します。

レイアウトにSearchDataSourceコンポーネントがある場合、次のようにファセット機能を作成できます:

1. ページ設定のファセット項目の下にフォルダを追加してください。このフォルダに必要な各ファセットのファセットテンプレートに基づいてアイテムを作成します。

2. FieldNameフィールドでは、アイテムの元となるテンプレート内のフィールド名を指定します。Sitecoreはこのフィールドの値をアイテムのグループ化に使用します。

   !注注意してください。指定したフィールドにアイテム間で多くの異なる値がある場合、ファセットはあまり役に立ちません。値が比較的小さな集合に属するフィールドを使うのが最適です。例えば、「メディア選択」ダイアログでは、メディアタイプファセットがTemplateNameフィールドを使ってアイテムをグループ化します。

3. SearchDataSourceコンポーネントのFacetsRootItemIdプロパティを、Facetアイテムを作成しているフォルダに指定してください。

4. レイアウトにFilterControlコントロールを追加し、そのコントロールのFacetsプロパティをSearchDataSourceコンポーネントのFacetsプロパティにバインドします。

5. SearchDataSourceコンポーネントのSelectedFacetsプロパティをFilterControlコントロールのSelectedFacetsプロパティにバインドします。

HyperlinkButtonsGroupを作成する

メディア選択ダイアログには「メディア」というメニューがあります。このメニューには「すべての画像ファイル」「すべての動画ファイル」などの一連のビューへのリンクがあります。リンクはHyperlinkButtonGroupコントロール内でHyperlinkButton項目として作成し、ビューは検索設定項目として作成します:

1. 各ビューごとに検索設定項目を作成します。
2. PageSettingsの下にフォルダを作成し、そのフォルダ内の各ビューごとにHyperlinkButtonアイテムを作成します。
3. HyperlinkButtonのアイテムは次のように設定します:
   • テキスト欄のリンクに「すべてのビデオファイル」などのテキストを指定します。
   • SearchDataSourceコンポーネントのSearchConfigItemIdプロパティを変更するためにクリックフィールドでJavaScriptを指定します。例えば:set
     ({"searchConfig": "{378D67C9-279A-4FBB-AB43-52EC07034FE8}"})
4. ページレイアウトに HyperlinksButtonGroup コンポーネントを追加し、そのDataSourceプロパティをHyperlinkButtonアイテムを作成したフォルダを指定します。