Opening and closing AssetPortalBrowser.aspx in SharePoint modal popup

Question

I am trying to open the "OOB" AssetPortalBrowser.aspx from a page within a SharePoint native modal popup.

My aim is to get the selected filename back to the script. So far I was able to open the popup with the AssetPortalBrowser.aspx, but I don't know how to "close" the popup while clicking the built-in "OK" button on the AssetPortalBrowser.aspx.

When I click OK the AssetPortalBrowser.aspx page within the modal popup does not completely close. Instead the popup changes to a box with the following text:

"Please wait while your changes are processed."

and a title

"Processing...".

More specifically, I don't know where to write the code to close the form and return to the "dialogReturnValueCallback" function (just like it happens when the "Cancel" button gets clicked").

Please find below my code:

function InitiateAssetPickerPopUp(){

var context = new SP.ClientContext.get_current();
this.Web = context.get_web();
context.load(this.Web);
context.executeQueryAsync(Function.createDelegate(this, this.onSuccess),
    Function.createDelegate(this, this.onFail));
}

function onSuccess(sender, args){

var options = {
            title: 'My Dialog',
            width: 500,
            height:600,
            showClose: false,
            url: _spPageContextInfo.siteServerRelativeUrl+'/_layouts/AssetPortalBrowser.aspx?&AssetUrl='+_spPageContextInfo.siteServerRelativeUrl+'&RootFolder='+_spPageContextInfo.siteServerRelativeUrl+'&MDWeb='+this.Web.get_id()+'&AssetType=Link',
            dialogReturnValueCallback:function(dialogResult) 
            { 
              alert(dialogResult);
            }
  };  
  SP.UI.ModalDialog.showModalDialog(options);  
}

function onFail(sender, args) {
alert('Failed:' + args.get_message());
}

Answer 1

Referring directly the AssetPortalBrowser.aspx and getting the URL will be very much difficult, rather create an object and open the popup will be easier. Follow the below steps. I am getting the selected selected file in a text box and showing it in a alert.

• Go to Site Content > Site Assets
• Create a folder name Scripts
• Upload jquery-1.11.1.min.js and Script.js file. Script.js will contain following script:

$(document).ready(function () {
//Create a object which will be used for the Asset. The name can anything. I have used 'testAssetPickerObj'
    with(new AssetPickerConfig('testAssetPickerObj'))
    {{
         DefaultAssetImageLocation='';
         //CurrentWebBaseUrl will be the url of the site or site collection. My site comllection url is as follows.
         CurrentWebBaseUrl='http://SiteURL/sites/hub/';
         OverrideDialogFeatures='';
         OverrideDialogTitle='';
         OverrideDialogDesc='';
         OverrideDialogImageUrl='';
         //AssetUrlClientID is the id of the control in which the path of the selected file will be saved. I am saving the path in a text box. And the id is txtURL.
         AssetUrlClientID='txtURL';
         AssetTextClientID='';                                                             
         UseImageAssetPicker=true; //make this false to show Documents instead
         DefaultToLastUsedLocation=true;
         DisplayLookInSection=true;                                                             
         ReturnCallback = null;}}
});
function fnGetFileName(){
    //Following is the function which launch the AssetPortalBrowser.aspx automatically.
    APD_LaunchAssetPickerUseConfigCurrentUrl('testAssetPickerObj'); return false;
}

function fnTestFileName(){
    //Checking the text box value, where the url of the selected file is getting saved.
    alert($('#txtURL').val());
}

• Now go to Web Part page and add a Content Editor WebPart.
• Click the Edit Source button
• Add following code in the popup

<script src="/sites/hub/_layouts/15/AssetPickers.js" type="text/javascript"></script>
<script src="/sites/hub/SiteAssets/Scripts/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="/sites/hub/SiteAssets/Scripts/Script.js" type="text/javascript"></script>
<input id="txtURL" type="text"/>
<input onclick="fnGetFileName()" type="button" value="Get File"/><br/>
<input onclick="fnTestFileName()" type="button" value="Test File Name"/><br/>

- Click OK and Save the page

- Now test it. Click on the Get File button. AssetPortalBrowser.aspx popup should be opened. Select your file and click on Insert button. - Selected file path should come in your text box as shown below.

- Click on Test File Name. You will get the selected file path is in the text box.

Enjoy!!!

Answer 2

That action will need to be adjusted on asset portal browser page itself. The OK button commits differently than the cancel button does. What I would do personally is set up a JScript function on load in that page to look for a URL param. If that param equals..let's say 1 ... Look for the OK button on that page and change the on click function to the same as the cancel..if this applies... That way you are not changing the ootb functionality of the page. And still get the result you want. So your callback listener will see the dialogue result instead of an incomplete process