2

I have a custom page layout hosting Javascript. In it, I have a text field and a browse button that when clicked should open the SharePoint Asset Picker and subsequently populate the text field with the URL of the selected item.

Is it possible to do this using the JSOM?

7

Yes you can. I've written a wrapper utility for working with the SharePoint AssetURLSelector (or Asset Picker) that wraps the whole thing up in a nice Promise based API.

Here's the essence of what you need to do:

  1. Load the Asset Picker onto your page.
  2. Create a configuration object for the picker.
  3. Launch with the configuration.
  4. Process return data in a callback.

To load the Asset Picker you need to load it using the Script-on-Demand mechanism

<script>
RegisterSod('assetpickers.js', '/_layouts/15/assetpickers.js');
EnsureScriptFunc('assetpickers.js', null, function(){
  //Your code that uses the asset picker here
});
</script>

Once it's loaded you construct a configuration object with a callback and give it to a ´LinkAsset´ instance. This is what you would do inside the ´EnsureScriptFunc´ function above.

var config = new AssetPickerConfig('');
config.ReturnCallback = function(url, text, config, newAsset){
  //This function is called once the user selects an asset.
  //If the user cancels the dialog this function is NOT called.
};
var linkAsset = new LinkAsset([server-relative url for site here]);
linkAsset.LaunchModalAssetPicker(config);

That's about it. The server-relative url is used as the base of the link asset dialog so modifying this can change the context when the dialog is opened.

Edit:

You can exchange new LinkAsset for new ImageAsset in-place if you want to load images instead. You should also specify the AssetType parameter if you do this. This will place dialog in the PublishingImages folder and show image thumbnails.

var config = new AssetPickerConfig('');
config.ReturnCallback = function(url, text, config, newAsset){
  //This function is called once the user selects an asset.
  //If the user cancels the dialog this function is NOT called.
};
config.AssetType = 'Image';
var assetLauncher = new ImageAsset([server-relative url for site here]);
assetLauncher.LaunchModalAssetPicker(config);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.