So you want to replace the default SharePoint asset picker

I have just had reason to replace the default OOTB SharePoint 2013 asset picker, you know the one. It gives you lots of places to find things, but absolutely no way to search or filter. And God help you if you want to link to an asset in another site collection.




Anyway, there is a pretty simple way to replace this dialog with your own implementation. You just need to override some global variables so that SharePoint uses your dialog instead of the one specified in assetpickers.js

So, here is the code you need…


ExecuteOrDelayUntilScriptLoaded(function (){

    window.CONST_ImageAssetPickerDialogName = "mypicker/picker.html";
    window.CONST_LinkAssetPickerDialogName = "AssetPortalBrowser.aspx";
    window.CONST_EditHyperLinkDialogDialogName = "AssetEditHyperLink.aspx";
    window.CONST_EditImageDialogDialogName = "AssetImagePicker.aspx";

}, "assetpickers.js");


This modifies the dialog locations specified in assetpickers.js with your own custom one. Here I am replacing the Image Asset Picker with my own implementation. You can see your other options, but you only need to specify the ones you wish to change.

The one thing you to ensure is that your dialog implementation returns the same object as the OOTB SharePoint one. Your OK handler should go something like this…

function onOk(e){
   var result = { AssetUrl: <selectedURL>, AssetText: <selected title>, ListItemFields: null};
   window.frameElement.commonModalDialogClose(1, result)

This will return the correct format of the JavaScript object for the asset picker to work. You do get a lot of information passed in the query string, but I’ll leave it to you to decide if you need it or not. It’s also worth looking into assetpickers.js as there are a lot more global variables where you can override the default behaviour of your pickers.

Shame I can’t share the search based picker I wrote, but I might write my own cut-down version that I can share with you all. Until then there is no reason why you can’t implement your own picker.

blog comments powered by Disqus

SharePoint on Windows Phone

AgilisPoint a free App for your Windows Phone