60 Customizing Search Views of the Contributor Interface

Different types of search views are available in the Contributor interface. Become familiar with these views and their configuration elements.

Topics:

• About Search View Customization

• Customization Processes

• Customizing Undocked Views

• About Customizing Docked Views

• Customizing Sort Menus and Tooltips

About Search View Customization

When users log in to the Contributor interface and access their sites, they can perform a simple or advanced search to locate the required assets. Search results are then presented in either List view or Thumbnail view. You can customize some features of different search views.

See Finding and Organizing Assets and Working with the Search Results List in Using Oracle WebCenter Sites.

Topics:

• Types of Search Views

• What You Can Customize in Search Views

• View-Rendering Process

• Configuration Elements for Search Views

Types of Search Views

The search results panel can be either undocked or docked and displayed as a List view or Thumbnail view. Thus, the Contributor interface includes the following views:

• List Undocked

• List Docked

• Thumbnail Undocked

• Thumbnail Docked

An undocked view opens only when no assets are open for editing. A docked view is attached to assets in edit mode and therefore opens only when an asset is open in edit mode.

What You Can Customize in Search Views

The following figure summarizes the features you can customize in List view. See Customizing Undocked Views, which also applies to docked views.

Sort menus and tooltips are customized separately. See Customizing Sort Menus and Tooltips.

Which view opens by default for a given mode depends on your configuration settings and the user's search habits. For example, if you set Thumbnail view as the default view for undocked mode, then Thumbnail view opens when the user first runs search in undocked mode and continues to open until the user switches to List view. (Search remembers the user's choice until browser cookies are cleared.)

The following figure shows the customizable features in List view.

Figure 60-1 Customizable Features in List View

Description of "Figure 60-1 Customizable Features in List View"

Customizable features for List view include:

• Maximum number of items to return

• Number of rows per page

• Fields (columns) to display

• Column display name

• Column width

• Format of date and other fields

• Default sort field and sort order

• Sort menu (docked mode)

• Context (right-click) menu

• Tooltip (docked mode)

The following figure summarizes the features you can customize in Thumbnail view.

Figure 60-2 Customizable Features in Thumbnail View

Description of "Figure 60-2 Customizable Features in Thumbnail View"

Customizable features for Thumbnail view include:

• Maximum number of items to return

• Number of rows per page

• Asset types for which special thumbnails are shown

• Fields to display

• Format of date and other fields

• Default sort field and sort order

• Sort menu

• Context (right-click) menu

• Tooltip (docked mode)

View-Rendering Process

System-defined and custom-defined views are rendered by similar processes. To illustrate, we begin with system-defined views.

System-defined views are rendered by the following elements (JSPs), whose names for undocked and docked views differ only by the Docked prefix.

When undocked:

• List view is rendered by the element: UI/Layout/CenterPane/Search/View/ListViewHtml

• Thumbnail view is rendered by the element: UI/Layout/CenterPane/Search/View/ThumbnailViewHtml

When docked:

• List view is rendered by the element: UI/Layout/CenterPane/Search/View/DockedListViewHtml

• Thumbnail view is rendered by the element: UI/Layout/CenterPane/Search/View/DockedThumbnailViewHtml

Rendering of undocked and docked views is similar (except that the names of elements for docked views start with Docked). The following steps illustrate the rendering of undocked views.

1. When a user runs a search routine, the search functionality determines the user's current view, which is either the default view or a subsequently chosen view.

   Note:

   "Default view" is the view that the system renders the first time search is run. (List view is the system-defined default view for both undocked and docked modes.) If the user switches to a different view, search remembers and continues to display the user's choice until browser cookies are cleared.

2. Search functionality reads UI/Layout/CenterPane/Search/SearchResultsConfig to obtain the path to the element that initiates the rendering of the view:

   • If the user is running search for the first time, or continues using the default view, search reads the value of the <defaultview> property.

   • If the user's view is other than the default view, search reads the value of either the <listview> or <thumbnailview> property (depending on which view was determined in step 1).

3. If search determines that List view must be rendered, it reads the element UI/Layout/CenterPane/Search/View/ListViewConfig and invokes UI/Layout/CenterPane/Search/View/ListViewHtml, which then renders the list view. If search determines that the Thumbnail view must be rendered, it reads the element UI/Layout/CenterPane/Search/View/ThumbnailViewConfig and invokes UI/Layout/CenterPane/Search/View/ThumbnailViewHtml, which then renders the Thumbnail view.

You can override all of the above system-defined elements by customizing your own identically named elements and placing them under CustomElements to actualize the changes shown in Figure 60-1 and Figure 60-2. You can also customize individual features, such as sort menus and tooltips, by using the elements UI/Layout/CenterPane/Search/View/SearchTopBarConfig and UI/Layout/CenterPane/Search/View/SearchToolTipHtml respectively.

For a comprehensive list of elements, see Configuration Elements for Search Views.

Configuration Elements for Search Views

This section summarizes the JSP elements you use to customize search views.

• System-defined configuration elements: You can configure identically named elements to customize search views and searches that are global or specific to a site, asset type(s), or site and asset type(s). All customized elements should be stored under CustomElements (for an example, see Figure 60-3). For a summary of the elements, see the following tables:

  • This table lists system-defined configuration elements that define ready-to-use undocked views (all of the element names end with Config).

    Table 60-1 Configuration Elements for Undocked Search Views

    Path to Configuration Element (JSP)	Description	See …
    UI/Layout/CenterPane/Search/SearchResultsConfig	Element for setting the default search view (List view or Thumbnail view) in undocked mode.	Setting the Default Undocked View to List or Thumbnail
    UI/Layout/CenterPane/Search/View/ListViewConfig	Element for configuring the undocked List view.	Customizing the Undocked List View
    UI/Layout/CenterPane/Search/View/ThumbnailViewConfig	Element for configuring the undocked Thumbnail view.	Customizing the Undocked Thumbnail View

  • This table lists system-defined configuration elements that define ready-to-use docked views (all of the element names end with Config).

    Table 60-2 Configuration Elements for Docked Search Views

    Path to Configuration Element (JSP)	Description	See …
    UI/Layout/CenterPane/Search/DockedSearchResultsConfig	Element for setting the default search view (List view or Thumbnail view) in docked mode.	Customization Processes
    UI/Layout/CenterPane/Search/View/DockedListViewConfig	Element for configuring the docked List view.	Customization Processes
    UI/Layout/CenterPane/Search/View/DockedThumbnailViewConfig	Element for configuring the docked Thumbnail view.	Customization Processes

  • This table lists system-defined elements for customizing a search view's individual features, such as sort menus and tooltips (element names end with either Config or Html).

    Table 60-3 Configuration and Presentation Elements for Other Features in Search Views

    Path to Configuration Element (JSP)	Description	See …
    UI/Layout/CenterPane/Search/View/SearchTopBarConfig	Element for configuring fields as sort options in the sort drop-down menus for docked List, undocked Thumbnail, and docked Thumbnail views.	Customizing Sort Menus
    UI/Layout/CenterPane/Search/View/SearchToolTipHtml	Element for configuring tooltips for docked views (List and Thumbnail). This element enables you to configure tooltip appearance and custom messages.	Customizing Tooltips for Search Results
    UI/Config/GlobalHtml	Element for configuring context (right-click) menus. This element is valid for all search views.	Customizing Context Menus

• Custom elements: This table lists sample custom elements that are packaged with WebCenter Sites to help illustrate customization code.

  Table 60-4 Custom Sample Elements for Search Views

  Path to Sample Element	Description
  CustomElements/avisports/AVIArticle/UI/Layout/CenterPane/Search/View/ThumbnailViewConfig	Configuration element for undocked Thumbnail view for the AVIArticle asset type in the avisports sample site.
  CustomElements/avisports/AVIArticle/UI/Layout/CenterPane/Search/View/DockedThumbnailViewConfig	Configuration element for docked Thumbnail view for AVIArticle asset type in avisports site.
  CustomElements/avisports/AVIImage/UI/Layout/CenterPane/Search/View/ThumbnailViewConfig	Configuration element for undocked Thumbnail view for the AVIImage asset type in the avisports sample site.
  CustomElements/avisports/AVIImage/UI/Layout/CenterPane/Search/View/DockedThumbnailViewConfig	Configuration element for docked Thumbnail view for the AVIImage asset type in the avisports sample site.
  CustomElements/avisports/UI/Layout/CenterPane/Search/View/ThumbnailViewConfig	Configuration element for undocked Thumbnail view for the avisports sample site.
  CustomElements/avisports/UI/Layout/CenterPane/Search/View/DockedThumbnailViewConfig	Configuration element for docked Thumbnail view for the avisports sample site.

Customization Processes

The steps you perform to customize views in undocked and docked mode are similar with only a few differences. Read further to know what those differences are.

• Customizing undocked and docked views:

  When customizing undocked views, follow instructions in Customizing Undocked Views and name your configuration elements (JSPs) as shown in that section (also in Table 60-1). When customizing docked views, also follow instructions in Customizing Undocked Views, but name your configuration elements as shown in Table 60-2 (that is, include the Docked prefix).

• Customizing sort menus and tooltips for search views:

  Elements for creating sort menus and tooltips apply to both undocked and docked mode. Name the elements exactly as shown in Table 60-3 (and Customizing Sort Menus and Tooltips, regardless of mode.

• To display a field in docked List view or docked Thumbnail view:

  By default, the UI/Layout/CenterPane/Search/View/DockedListViewConfig element points to the UI/Layout/CenterPane/Search/View/ListViewConfig element to get only the first listed field and display its name in docked List view. The field is defined in the first <field> property, as follows:

  <field>
      <fieldname>fieldname</fieldname>
      <displayname>DisplayName</displayname>
  

  To display any other field name in the docked List view, specify that name in your custom DockedListViewConfig.jsp element. The same logic applies to displaying a field name in docked Thumbnail view (except that your configuration elements are named ThumbnailViewConfig and DockedThumbnailViewConfig).

Customizing Undocked Views

You customize the undocked List and Thumbnail views by configuring your own identically named elements and placing them under CustomElements.

Customizing the undocked List and Thumbnail views involves overriding the system-defined elements shown in Table 60-1.

Topics:

• Basic Steps for Customizing Undocked Views

• Setting the Default Undocked View to List or Thumbnail

• Customizing the Undocked List View

• Customizing the Undocked Thumbnail View

Basic Steps for Customizing Undocked Views

To customize an undocked view, take any combination of the following steps:

• Set the default undocked view to be List or Thumbnail for all asset types or your choice of asset types. To set the view(s), override the element UI/Layout/CenterPane/Search/SearchResultsConfig, as shown in Setting the Default Undocked View to List or Thumbnail.

• Configure the undocked List or Thumbnails views or both. Specify the number of columns to be displayed in the view(s), configure column names and column widths, specify the sort order of returned items, and more.

  • To configure the List view, override the element UI/Layout/CenterPane/Search/View/ListViewConfig, described in Customizing the Undocked List View.

  • To configure the Thumbnail view, override the element UI/Layout/CenterPane/Search/View/ThumbnailViewConfig, described in Customizing the Undocked Thumbnail View.

• Configure additional features, such as sort menus for the views. In this step, configure JSP elements that are specific to the features of the view (such as a sort menu), rather than the view itself. See Customizing Sort Menus and Tooltips.

Setting the Default Undocked View to List or Thumbnail

When setting the default search view (List or Thumbnail), set it globally for all asset types. You also can specify a default search view for selected asset types of your choice.

• To set the default search view(s), override the element UI/Layout/CenterPane/Search/SearchResultsConfig by creating your own SearchResultsConfig.jsp under CustomElements and customizing its properties.

  The UI/Layout/CenterPane/Search/SearchResultsConfig element is shown next. Then the table describes the properties.

  Element UI/Layout/CenterPane/Search/SearchResultsConfig

  <searchconfig>
  <listview>UI/Layout/CenterPane/Search/View/ListView</listview>
     <thumbnailview>UI/Layout/CenterPane/Search/View/ThumbnailView</thumbnailview>
     <defaultview>listview</defaultview>
     <assettypeviews>
         <assettype id="Page" name="Page">listview</assettype>
           …
           …
           …
     </assettypeviews>
  </searchconfig>
  

Table 60-5 Properties in UI/Layout/CenterPane/Search/SearchResultsConfig

Property	Description	Value
<listview>	Path to the ListView controller element.	UI/Layout/CenterPane/Search/View/ListView Do not change the value of this property.
<thumbnailview>	Path to the ThumbnailView controller element.	UI/Layout/CenterPane/Search/View/ThumbnailView Do not change the value of this property.
<defaultview>	Specifies whether List or Thumbnail is the default view. The default view is the view that opens the first time search is run. If the user switches the view, search remembers the user's choice until browser cookies are cleared.	listview | thumbnailview The value of this property is case-sensitive.
<assettypeviews>	Used to selectively configure a default view for one or more asset types.	N/A
<assettype id= name= >	Used to specify the asset type and its default view (which remains until the user either switches to a different view or clears browser cookies). You can specify as many asset types as necessary (one per <assettype>).	<assettype id="unique_identifier" name="AssetTypeName"> listview | thumbnailview </assettype>

Customizing the Undocked List View

When customizing the List view, you can set the type of content to be returned and its presentation.

• To customize the undocked List view, override the UI/Layout/CenterPane/Search/View/ListViewConfig element by creating your own ListViewConfig.jsp under CustomElements and customizing its properties.

  The UI/Layout/CenterPane/Search/View/ListViewConfig element is shown next. Then the table describes the properties.

  Element UI/Layout/CenterPane/Search/View/ListViewConfig

  <listviewconfig>
      <numberofitems>1000</numberofitems>
      <numberofitemsperpage>100</numberofitemsperpage>
      <defaultsortfield>  </defaultsortfield>
      <defaultsortorder>  </defaultsortorder>
      <fields>
        <field id="name">
          <fieldname>name</fieldname>
          <displayname>Name</displayname>
          <width>350px</width>
          <formatter>fw.ui.GridFormatter.nameFormatter</formatter>
          <displayintooltip>true</displayintooltip>
      </field>
      <field id="updateDate">
          <fieldname>updateddate</fieldname>
          <displayname>Modified</displayname>
          <!-- <dateformat>MM/dd/yyyy hh:mm a z </dateformat> -->
          <javadateformat>SHORT</javadateformat>
          <width>auto</width>
          <formatter></formatter>
          <displayintooltip>true</displayintooltip>
        </field>
           …
           …
           …
        </fields>
  </listviewconfig>
  

  Table 60-6 Properties in UI/Layout/CenterPane/Search/View/ListViewConfig

  Property	Description	Value
  <numberofitems>	Maximum number of items returned by search.	Integer greater than 0. If -1 is entered for instance, then all results matching the search criteria are returned.
  <numberofitemsperpage>	Number of rows per page needed in the search results.	100 is the default.
  <defaultsortfield>	Default field that search should sort when fetching search results.	The default is empty. Therefore, search results are displayed by relevance. Configure this element if any other field should be set as the default for sorting.
  <defaultsortorder>	Sort order used by search.	ascending | descending Required when <defaultsortfield> is specified.
  <fields>	Columns that are shown in List view. These columns are shown in the same order as listed under <fields>. If you are creating an asset type-specific configuration and you want to display asset type-specific attributes in the search results, you must enable the asset type index and attribute search. See Configuring Attributes for Asset Type Index and Adding Asset Types to the Search Index in Administering Oracle WebCenter Sites. If you skip this procedure, search uses the global index.	N/A
  <field id= >	Defines a column to be shown in List view.	<field id="unique_identifier">
  <fieldname>	Asset's field name to render in the column.	This name must match the column name in the Lucene index. If locale is added as the field name, then it is displayed only if the site dimension is enabled.
  <displayname>	Display name shown in the column header.	Alphanumeric string
  <width>	Width of the column in pixels.	Width in units of px (for example, 350px). Oracle recommends setting the width to auto for the last field.
  <formatter>	Dojo formatter function to display column values in your preferred format.	The formatter must be made available in a Dojo module. See the modules property in UI/Config/GlobalHtml.
  <displayintooltip>	Indicates whether the associated field must be listed in the tooltip for docked List view. The element UI/Layout/CenterPane/Search/View/ SearchToolTipHtml renders tooltips and uses the value of this property to determine whether to list the associated field name in the tooltip (the field value also is listed). Tooltips can be customized only for docked views. See Customizing Tooltips for Search Results.	true | false
  <dateformat>	Applies to date fields only. This is an option to specify a custom date format if the date needs to be displayed in a format other than javadateformat.	A valid date format string. If <dateformat> is used, it takes precedence over <javadateformat>.
  <javadateformat>	Applies to date fields only.	Valid values are SHORT, MEDIUM, LONG, and FULL. If <javadateformat> is omitted or left blank, the system uses SHORT by default. If <dateformat> is used, it takes precedence over <javadateformat>.

Customizing the Undocked Thumbnail View

When customizing the Thumbnail view, you can set the type of content to be returned and its presentation.

To customize the undocked Thumbnail view, override the element UI/Layout/CenterPane/Search/View/ThumbnailViewConfig by creating your own ThumbnailViewConfig.jsp under CustomElements and customizing its properties.

The UI/Layout/CenterPane/Search/View/ThumbnailViewConfig element is shown next. Then the table describes the properties.

Note:

Pay particular attention to the following properties: <formatter> and <assettypes>. While the element UI/Layout/CenterPane/Search/View/ThumbnailViewConfig is mostly the same as UI/Layout/CenterPane/Search/View/ListViewConfig, the <formatter> property is defined differently. Also, the <assettypes> property is exclusive to ThumbnailViewConfig, where it is used to render thumbnails.

The <assettypes> property is described in detail in More About the <assettypes> Section in the ThumbnailViewConfig Element, where its usage is illustrated with examples. One of the examples shows how to supplement video assets with a custom element that shows a video player.

Element UI/Layout/CenterPane/Search/View/ThumbnailViewConfig

<thumbnailviewconfig>
    <numberofitems>1000</numberofitems>
    <defaultsortfield></defaultsortfield>
    <defaultsortorder></defaultsortorder>
    <numberofitemsperpage>12</numberofitemsperpage>
    <formatter>fw.ui.GridFormatter.thumbnailFormatter</formatter>
    <fields>
      <field id="name">
        <fieldname>name</fieldname>
        <displayname>Name</displayname>
        <displayintooltip>true</displayintooltip>
      </field>
      <field id="updateDate">
        <fieldname>updateddate</fieldname>
        <displayname>Modified</displayname>
        <!-- <dateformat>MM/dd/yyyy hh:mm a z </dateformat> -->
        <javadateformat>SHORT</javadateformat>
        <displayintooltip>true</displayintooltip>
      </field>
       …
       …
       …
    </fields>
  <assettypes>
     <assettype id="unique_identifier">
        <type>AVIImage</type>
        <subtype>Image</subtype>
        <element>UI/Layout/CenterPane/Search/View/ImageThumbnail</element>
        <attribute>imageFile</attribute>
      </assettype>
         …
         …
         …
    </assettypes>
</thumbnailviewconfig>

Table 60-7 Properties in UI/Layout/CenterPane/Search/View/ThumbnailViewConfig

Property	Description	Value
<numberofitems>	Maximum number of items to be returned by search.	Integer greater than 0. If -1 is entered for instance, then all results matching the search criteria are returned.
<numberofitemsperpage>	Number of rows per page needed in the search results.	100 is the default value.
<formatter>	Dojo formatter function to display values in your preferred format.	The formatter must be made available in a Dojo module. See the modules property in UI/Config/GlobalHtml.
<defaultsortfield>	Default sort field that search should sort when fetching search results.	The default is empty. Therefore, search results are displayed by relevance. Configure this element if any other field should be set as a default for sorting.
<defaultsortorder>	Sort order used by search.	ascending | descending This is required when <defaultsortfield> is specified.
<fields>	Fields that are shown below the thumbnails in Thumbnail view. These fields are shown in the same order as listed under <fields>. If you are creating an asset type-specific configuration and you want to display asset type-specific attributes in the search results, you must enable the asset type index and attribute search. See the following topics in Administering Oracle WebCenter Sites: Adding Asset Types to the Search Index Configuring Attributes for Asset Type Index If you skip this procedure, search uses the global index.	N/A
<field id=>	Describes a field under the thumbnail.	<field id="unique_identifier">
<fieldname>	Asset's field name to render below the thumbnail.	This name must match the column name in the Lucene index. If locale is added as the field name, then it is displayed only if the site dimension is enabled.
<displayname>	Display name to render below the thumbnail.	Alphanumeric string
<dateformat>	Applies to date fields only. This is an option to specify a custom date format if the date needs to be displayed in a format other than javadateformat.	A valid date format string. If <dateformat> is used, it takes precedence over <javadateformat>.
<javadateformat>	Applies to date fields only.	Valid values are SHORT, MEDIUM, LONG, and FULL. If <javadateformat> is omitted or left blank, the system uses SHORT by default. If <dateformat> is used, it takes precedence over <javadateformat>.
<displayintooltip>	Indicates whether the associated field must be listed in the tooltip for docked Thumbnail view. The element UI/Layout/CenterPane/Search/View/SearchToolTipHtml renders tooltips. It uses the value of the <displayintooltip> property to determine whether to list the associated field in the tooltip (the field value also is listed). Tooltips can be customized only for docked views. For instructions, see Customizing Tooltips for Search Results.	true | false
<assettypes>	This section specifies the asset types for which special thumbnails are shown. Each asset type must have an attribute whose content is rendered as a thumbnail. To learn when this section must be customized, see More About the <assettypes> Section in the ThumbnailViewConfig Element.	N/A
<assettype id= >	Describes the asset type for which a special thumbnail is shown.	<assettype id="unique_identifier">
<type>	Name of the asset type for which a thumbnail is rendered.	See Re-using the System-Defined Image Thumbnail Element and Using a Custom Thumbnail-Rendering Element.
<subtype>	Subtype of the asset type.	See Re-using the System-Defined Image Thumbnail Element and Using a Custom Thumbnail-Rendering Element.
<element>	Path to the controller element that renders the content specified in <attribute> as a thumbnail.	See Re-using the System-Defined Image Thumbnail Element and Using a Custom Thumbnail-Rendering Element. If you do not specify an element, the system-defined element UI/Layout/CenterPane/Search/View/GlobalThumbnail is used to render static icons, stored in the images/search directory. See Use of Static Icons.
<attribute>	Attribute whose content is shown as a thumbnail.	See Re-using the System-Defined Image Thumbnail Element and Using a Custom Thumbnail-Rendering Element.

More About the <assettypes> Section in the ThumbnailViewConfig Element

Table 60-7 contains the <assettypes> section, which may have to be configured, depending on which features you choose to customize. Various <assettypes> configuration scenarios are discussed below in the context of the most commonly performed customizations.

This section includes the following topics:

• Use of Static Icons

• Re-using the System-Defined Image Thumbnail Element

• Using a Custom Thumbnail-Rendering Element

Use of Static Icons

To use your own static thumbnails (stored in the file system), it is not required to customize the <assettypes> section of the UI/Layout/CenterPane/Search/View/ThumbnailViewConfig element, if you observe the following conventions:

• The name of the thumbnail icon should not contain spaces (they are replaced with underscores). The name must be in one of the following formats, depending on the size of the thumbnail:

  • <assettypename>.png or <assettypename>-<subtype>.png (small thumbnail, 96x96, docked view)

  • <assettypename>_large.png or <assettypename>-<subtype>_large.png (large thumbnail, 170x170, undocked view)

• The storage location of the icon is the /images/search directory of the file system.

If the above conventions are followed, the icon are automatically rendered as a thumbnail by the UI/Layout/CenterPane/Search/View/ThumbnailViewConfig element, which is coded to look for icons in the /images/search directory. Naming the icon after the asset type and subtype automatically associates the icon with assets of that type and subtype.

Re-using the System-Defined Image Thumbnail Element

Customizing the <assettypes> section of the ThumbnailViewConfig.jsp element is a requirement to dynamically render custom images as thumbnails by re-using the system-defined element ImageThumbnailHtml.jsp. This element processes images that are associated with image attributes belonging to specific asset types or subtypes or both.

To re-use the system-defined ImageThumbnailHtml.jsp, in your custom ThumbnailViewConfig.jsp, do the following:

1. Specify the asset types that require a custom image thumbnail. Each asset type must have an image attribute.

   <assettypes>
       <assettype>
           <type>Name_of_AssetType_containing_the_image_attribute</type>
           <subtype>Name_of_subtype_containing_the_image_attribute</subtype>
           <element>UI/Layout/CenterPane/Search/View/ImageThumbnail</element>
           <attribute>Name_of_imageAttribute_containing_the_image</attribute>
       </assettype>
        …
        …
       </assettypes>
   

2. For <element>, specify the path to the system-defined element ImageThumbnailHtml.jsp, exactly as shown in the sample code above.

Using a Custom Thumbnail-Rendering Element

Customizing the <assettypes> section of the ThumbnailViewConfig.jsp is a requirement if you plan to use a custom element that dynamically renders the content of an asset type's (or subtype's) blob attribute as a thumbnail.

In the example below, you create elements that work together to render video thumbnails. The figure below shows a sample video Thumbnail view, which you can reproduce by following the steps in this topic.

Figure 60-3 Sample Video Thumbnail View

Description of "Figure 60-3 Sample Video Thumbnail View "

The steps below provide guidelines for (1) creating elements that work together to dynamically render video thumbnails, and (2) customizing the <assettypes> section of the ThumbnailViewConfig element.

Note:

To make this sample work, ensure that you have assets with a blob attribute and video files for that blob attribute are uploaded to your site's directory.

To play the video file the browser plugin should be available.

To create elements that render video thumbnails:

1. Write a video thumbnail Action element that uses the AssetAPI and gets the URL of the blob using BlobUtil for the video attribute specified in the element. (The element can be named as you want, but it must end in Action. The element should be stored in a directory under CustomElements.)

   A sample element named VideoThumbnailAction.jsp is available in the zip file containing this guide.

2. Write a video thumbnail Html element, which takes the URL built in the previous step and renders the video and other asset details below the thumbnail. (The element can be named as you want, but it must end in Html. The element should be stored in a directory under CustomElements.) This Html element calls the Action element.

   A sample element named VideoThumbnailHtml.jsp is available in the zip file containing this guide.

3. To use the video thumbnail Html element, configure the <assettype> property in your custom ThumbnailViewConfig.jsp element as shown below:

   <assettype>
       <type>Name_of_AssetType_containing_blob_attribute</type>
       <subtype>Name_of_asset_subtype</subtype>
       <element>CustomElements/path_to_your_element/Element</element>
       <attribute>Name_of_attribute_containing_video</attribute>
   </assettype>
   

   A sample element named ThumbnailViewConfig.jsp is available in the zip file containing this guide.

About Customizing Docked Views

Methods for customizing docked views are similar to those for undocked views. The main differences are outlined in Customization Processes.

Customizing Sort Menus and Tooltips

There are some features that you can customize for undocked views, some for docked views, and some for both.

Features discussed in this section can be customized for undocked views, docked views, or both, as shown in this table.

Table 60-8 Customizing Other Features for Search Views

Customization Option	Undocked List	Undocked Thumbnail	Docked List View	Docked Thumbnail	See …
Sort Menus	No	Yes	Yes	Yes	Customizing Sort Menus
Tooltips for Search Results	No	No	Yes	Yes	Customizing Tooltips for Search Results
Context Menus	Yes	Yes	Yes	Yes	Customizing Context Menus

Topics:

• Customizing Sort Menus

• Customizing Tooltips for Search Results

• Customizing Context Menus

Customizing Sort Menus

Sort menus can be customized only for the views listed in Table 60-8. You can specify which sort fields to display in a sort menu. You also can specify sort order for each field.

• To customize a Sort menu, override the element UI/Layout/CenterPane/Search/View/SearchTopBarConfig by creating your own SearchTopBarConfig.jsp under CustomElements and customizing its properties.

  The UI/Layout/CenterPane/Search/View/SearchTopBarConfig element is shown next. The table that follows describes the properties.

  Element UI/Layout/CenterPane/Search/View/SearchTopBarConfig

  <sortconfig>>
       <sortfields>
          <sortfield id="unique_identifier">
             <fieldname>name</fieldname>
             <displayname>Name(A-Z)</displayname>
             <sortorder>ascending</sortorder>
          </sortfield>
          <sortfield id="unique_identifier">
             <fieldname>name</fieldname>
             <displayname>Name(Z-A)</displayname>
             <sortorder>descending</sortorder>
          </sortfield>
          <sortfield id="unique_identifier">
             <fieldname>AssetType_Description</fieldname>
             <displayname>Asset Type</displayname>
             <sortorder>ascending</sortorder>
          </sortfield>
                 …
                 …
       </sortfields>
  </sortconfig>
  

  Table 60-9 Properties in UI/Layout/CenterPane/Search/View/SearchTopBarConfig

  Property	Description	Value
  <sortfield id= >	Describes the search index field by which to sort search results.	id=unique_identifier
  <fieldname>	Name of the search index field. The same field can be repeated multiple times to provide multiple sort orders.	For example, name in the code above.
  <displayname>	Display name of the user-readable field.	For example, Name in the code above.
  <sortorder>	Sort order.	ascending | descending

Customizing Tooltips for Search Results

Tooltips can be customized only for docked views. Docked views are displayed in a limited space and therefore provide a limited amount of information about the assets that are returned as search results. Tooltips are a way of displaying more information about the returned assets. For example, you can customize tooltips to display field names and values in addition to those displayed in docked mode, as shown in the figure below. You can also customize tooltips to display custom messages, and you can modify the appearance of tooltips.

Figure 60-4 Tooltip in Undocked List View

Description of "Figure 60-4 Tooltip in Undocked List View"

The default tooltip for docked search results is rendered by the element UI/Layout/CenterPane/Search/View/SearchToolTipHtml. This element renders the tooltip as a box. Within the box, it renders the name of each field in the <fields> section of UI/Layout/CenterPane/Search/View/ListViewConfig (or UI/Layout/CenterPane/Search/View/ThumbnailViewConfig), but only if the field's <displayintooltip> property is set to true. For example, the Name, Type, and Modified fields in the ListViewConfig.jsp below are displayed as part of the tooltip in the preceding figure, given that <displayintooltip> is set to true:

<fields>
        <field>
            <fieldname>name</fieldname>
            <displayname>Name</displayname>
            <width>350px</width>
            <formatter>fw.ui.GridFormatter.nameFormatter</formatter>
            <displayintooltip>true</displayintooltip>
        </field>
        <field>
            <fieldname>type</fieldname>
                  <displayname>Type</displayname>
                  <width>auto</width>
                  <formatter></formatter>
                  <displayintooltip>true</displayintooltip>
        </field>
        <field>
                  <fieldname>updateddate</fieldname>
                  <displayname>Modified</displayname>
                  <javadateformat>SHORT</javadateformat>
                  <width>auto</width>
                  <formatter></formatter>
                  <displayintooltip>true</displayintooltip>
        </field>

Note:

The UI/Layout/CenterPane/Search/View/SearchToolTipHtml element also renders field values. However, customized messages and changes to tooltip appearance must be coded in the custom SearchToolTipHtml.jsp element.

To create a tooltip or add fields to the tooltip:

1. To create a tooltip, override the element UI/Layout/CenterPane/Search/View/SearchToolTipHtml by creating your own SearchToolTipHtml.jsp under CustomElements.
2. To add fields to the tooltip, add the fields to your custom ListViewConfig.jsp or ThumbnailViewConfig.jsp and set each field's <displayintooltip> property to true.
3. To display a custom message in the tooltip (custom or system-defined) or to change the appearance of the tooltip, code a custom SearchToolTipHtml.jsp element. For example:

   <%@ taglib prefix="cs" uri="futuretense_cs/ftcs1_0.tld" 
   %><%@ taglib prefix="ics" uri="futuretense_cs/ics.tld" 
   %><cs:ftcs>
   <style>
   .customSearchTooltip {
        	font-weight: bold;
        	color: #333;
        	font-style: italic;
   }
   </style>
   
   <div class='customSearchTooltip'>
        	You are Viewing a Custom Tooltip
   </div>
   </cs:ftcs>
   

Customizing Context Menus

Context menus can be customized for all search views.

To customize a context menu, override the element UI/Config/GlobalHtml by creating your own MyConfig.jsp with the following code:

<%@ taglib prefix="cs" uri="futuretense_cs/ftcs1_0.tld" %>
<cs:ftcs>
   webcenter.sites['${param.namespace}'] = function (config) {
     config.contextMenus = {
       "default":["bookmark"],
       "asset":["edit","preview", "share", "bookmark", "tagasset"],
       "asset/Page":["edit", "preview", "delete", "bookmark"],
       "proxy":["preview", "bookmark", "tagasset"],
       ;
   }
</cs:ftcs>