11/05/09
Fahad Zia
tags:  

Using SharePoint image picker to select images in custom web part


In a SharePoint rich html field you see option to insert image and when you click on the image button you see a nice dialog that lets you select images from current or other sites. Something like shown below:

imagepicker1

imagepicker2

imagepicker3

Using this dialog box in a custom web part is not very straightforward. To demo this I will show how you can use a textbox and button to interact with this dialog. But before I do that here is how the final web part looks like:

imagepicker4

imagepicker5

1. Create a ToolPart that consists of a TextBox, Butoon,ScriptLink and Literal Control
2. Include AssetPickers.js from 12/LAYOUTS/1033 directory. To include this script I am using ScriptLink control. To get a good idea of how this script is being used look at the html source of /_layouts/AssetPortalBrowser.aspx, /_layouts/AssetEditHyperLink.aspx and /_layouts/AssetImagePicker.aspx in IEDeveloper Toolbar
3. Initialize AssetPickerConfig object that tells the dialog which SPWeb to show image library from, where to return the selected images url etc. I use Literal control to include the script that initializes this object:

string strAssetPickerConfig = string.Format(@"
                                            <script type='text/javascript'>                                                         
                                            with(new AssetPickerConfig('myAssetPickerObj'))
                                            {{
                                                 DefaultAssetImageLocation='';
                                                 CurrentWebBaseUrl='{0}';
                                                 OverrideDialogFeatures='';
                                                 OverrideDialogTitle='';
                                                 OverrideDialogDesc='';
                                                 OverrideDialogImageUrl='';
                                                 AssetUrlClientID='{1}';
                                                 AssetTextClientID='';                                                             
                                                 UseImageAssetPicker=true;
                                                 DefaultToLastUsedLocation=true;
                                                 DisplayLookInSection=true;                                                             
                                                 ReturnCallback = null;}}
                                                </script>",
                                                 strRelativeWebURL,
                                                 txt.ClientID);
lit.Text = strAssetPickerConfig;

3. OnClientClick of Button calls javascript function “APD_LaunchAssetPickerUseConfigCurrentUrl(‘myAssetPickerObj’)” . APD_LaunchAssetPickerUseConfigCurrentUrl function is defined in AssetPickers.js included above.

Here is the full code of the ToolPart:

using System;
using System.Collections.Generic;
using System.Text;
using Microsoft.SharePoint.WebPartPages;
using Microsoft.SharePoint.WebControls;
using System.Web.UI.WebControls;
using System.Web.UI;
using Microsoft.SharePoint.Utilities;

namespace WebPart1
{
    class ImagePickerToolPart: ToolPart
    {
        TextBox txt;
        Button btn;        
        ScriptLink sl;
        Literal lit;

        private void ImagePickerToolPart_Init(object sender, EventArgs e)
        {
            txt = new TextBox();
            btn = new Button();
            sl = new ScriptLink();
            lit = new Literal();

            sl.Name = "AssetPickers.js";
            sl.Localizable = true;
            sl.Language = "javascript";

            btn.Text = "...";
            
            SyncChanges();
        }

        public ImagePickerToolPart()
        {            
            this.Init += new EventHandler(ImagePickerToolPart_Init);
        }

        public override void ApplyChanges()
        {
            WebPart1 parentWP = (WebPart1)this.ParentToolPane.SelectedWebPart;            
            parentWP.SelectedImageURL = txt.Text;            
        }

        public override void SyncChanges()
        {
            EnsureChildControls();
            
            WebPart1 parentWP = (WebPart1)this.ParentToolPane.SelectedWebPart;
            txt.Text = parentWP.SelectedImageURL;
        }

        protected override void CreateChildControls()
        {
            base.CreateChildControls();
            
            Controls.Add(sl);
            Controls.Add(txt);
            Controls.Add(btn);
            
            string strRelativeWebURL = SPEncode.HtmlEncode(SPControl.GetContextWeb(Context).ServerRelativeUrl);
            if (strRelativeWebURL.Trim() =="/")
            {
                strRelativeWebURL =""; //blank browses the root spweb
            }
            string strAssetPickerConfig = string.Format(@"
                                                        <script type='text/javascript'>                                                         
                                                        with(new AssetPickerConfig('testAssetPickerObj'))
                                                        {{
                                                             DefaultAssetImageLocation='';
                                                             CurrentWebBaseUrl='{0}';
                                                             OverrideDialogFeatures='';
                                                             OverrideDialogTitle='';
                                                             OverrideDialogDesc='';
                                                             OverrideDialogImageUrl='';
                                                             AssetUrlClientID='{1}';
                                                             AssetTextClientID='';                                                             
                                                             UseImageAssetPicker=true; //make this false to show Documents instead
                                                             DefaultToLastUsedLocation=true;
                                                             DisplayLookInSection=true;                                                             
                                                             ReturnCallback = null;}}
                                                            </script>",
                                                             strRelativeWebURL,
                                                             txt.ClientID);
            lit.Text = strAssetPickerConfig;
            Controls.Add(lit);

            btn.OnClientClick = "APD_LaunchAssetPickerUseConfigCurrentUrl('testAssetPickerObj'); return false;";
        }
    }
}

9 Responses to “Using SharePoint image picker to select images in custom web part”

  1. Brian Brian

    Great tip. Not many people seem to have covered this and it helped me out. Thanks.

  2. Panoone Panoone

    This is just what I was looking for. Seems so simple when you know how. 🙂

    I want to replace the “List Name” text field in an existing web part with an asset picker control. I notice you’re inheriting from Toolpart and not WebPart. Is this interchangeable?

    Also, the AssetUrlSelector seems to have a ton of properties. If I wanted to set the default location and restrict selection type to Image Library, do you think I could do it with this class?

  3. Panoone Panoone

    I think I already answered my own question. The ToolPart is a separate class that needs to be called in my WebPart. 🙂

  4. Panoone Panoone

    Thanks for the great little article on adding an AssetPicker control as an Editor Part.

    I’ve applied this code but for some reason the text box does not reflect my selection from the asset picker. I’ve checked the rendered source and everything appears to be in place – assetpicker.js ref, event handler and assetPickerConfig settings.

    Any assistance would be appreciated.

  5. John Doe John Doe

    I have the same trouble as Panoone… any help?

  6. Falak Falak

    Hi Fahad, I am writing to ask if it is possible to change this script to make the Asset selector to work across site collections? I have used your script and I can open the Asset Selector in another site collection, but when I try to select the Image, URL is not being returned and hence the Text Box remains empty. Please help me I am being fucked up at the moment.
    /Falak

  7. Inoka Inoka

    Great article. It worked well for me. Thanks !

  8. Piet Piet

    Man I’ve been looking for something like this for about a week…! killer I like it, great solution…!

Leave a Reply

*