How to: Customize the Asset Picker in SharePoint Server 2010 (ECM)

Applies to: SharePoint Server 2010

In this article
Customizing the Asset Picker at the Page-Layout Level
Add an AssetUrlSelector Control to Any .aspx Page in Your Application
Example

The asset picker tool enables authors to more easily find, sort, and view different types of assets that are available on the site. For example, you can find, view, and then insert a URL or an image from any SharePoint Server library or list in the current site collection. You can use the asset picker to insert content without having to type the URL that points to it. The asset picker is available in many field controls found on publishing sites, such as:

• The HTML Editor field control

• The Image field control

• The Summary Links Web Part

The Look In pane contains shortcuts to predefined SharePoint Server libraries. These shortcuts are designed to help authors locate content quickly, without having to navigate through the folders in the site collection. In image pickers, these shortcuts point to:

• The image library for the current site.

• The image library for the current site collection.

In URL pickers, the shortcuts point to:

• The pages library for the current site.

• The document library for the current site.

• The document library for the current site collection.

If your authors frequently want to insert documents that are not found in these default locations, you can define an additional shortcut pointing to another location in your site collection. You can define one custom shortcut to image pickers and one custom shortcut to URL pickers. When defined, these shortcuts appear in the Look In pane next to the default shortcuts. You can define custom picker shortcuts only in the scope of one control: After you edit the markup for a control in a template file, only asset pickers launched from that control display the specified custom shortcuts.

Customizing the Asset Picker at the Page-Layout Level

You can define a custom picker shortcut for a RichHtmlField control or for a RichImageField control inside a page layout:

1. Navigate to \Program Files\Common Files\Microsoft Shared\web server extensions\14\TEMPLATE\FEATURES\PublishingLayouts\PageLayouts and open a page layout .aspx file.

2. Find the Publishing field control associated with the control that uses the asset picker. For example, <PublishingWebControls:RichHtmlField> represents the HTML Editor field control.

3. Add one or both of the following attributes to this tag:

   • DefaultAssetLocation: Defines the URL for the custom shortcut in a URL picker.

   • DefaultAssetImageLocation: Defines the URL for the custom shortcut in an image picker.

     These URLs should be site collection–relative URLs pointing to a library, list, or other location in your site collection, such as /ReusableContent.

     For example, the following <PublishingWebControls:RichHtmlField> control defines the custom shortcuts /URLpicker and /imagepicker for URL and image pickers, respectively.

     <PublishingWebControls:RichHtmlField id="Content" FieldName="PublishingPageContent" DefaultAssetLocation="/URLpicker" DefaultAssetImageLocation= "/imagepicker" runat="server"/>
     

     Similarly, the following <PublishingWebControls:RichHtmlField> control defines a custom shortcut for its image picker.

     <PublishingWebControls:RichImageField id="Content" FieldName="PublishingPageImage" DefaultAssetImageLocation="/imagepicker" runat="server"/>
     

4. Save changes and close the page layout .aspx file.

Add an AssetUrlSelector Control to Any .aspx Page in Your Application

You can add a <cms:AssetUrlSelector> server control to any .aspx page in your application. This server control renders a TextBox that displays the currently selected URL and a LinkButton that, when clicked, runs the appropriate ECMAScript (JavaScript, JScript) code to launch the Asset Picker user interface.

You can use the attributes of the <cms:AssetUrlSelector> control shown in Table 1 to customize the Asset Picker dialog box.

Table 1. Attributes used to customize the Asset Picker dialog box

Example

This example <cms:AssetUrlSelector> control uses many of the available attributes.

<CMS:AssetUrlSelector
    DefaultOpenLocationUrl="~SiteCollection/"
    DefaultToLastUsedLocation="false"
    DisplayLookInSection="true"
    OverrideDialogFeatures="resizable: no; status: yes; scroll: yes; help: no; dialogWidth:500px; dialogHeight:500px;"
    OverrideDialogTitle="Custom Picker Title"
    OverrideDialogDescription="Custom Picker Description"
    OverrideDialogImageUrl="~Site/PublishingImages/AssetPickerLogo.jpg"
    AssetTextClientID="testAssetTextClientIDCust"
    ClientCallback="function(returnedUrl) { window.alert('ClientCallback[AssetTextClientID]: ' + returnedUrl); }"
    id="assetSelectedImageCustomLauncher" 
    UseImageAssetPicker=true 
    runat="server" />

See Also

Concepts

Managing Rich Media Assets in SharePoint Server 2010 (ECM)

Rich Media Programming Model in SharePoint Server 2010 (ECM)

How to: Customize the SharePoint HTML Editor Field Control (ECM)

Other Resources

Managing Web Content in SharePoint Server 2010 (ECM)