Fahad Zia

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:

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:

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;";
        }
    }
}