Friday, February 21, 2014

SharePoint 2013: Manage Site/Web/Lists/Folder Filter using Picker Tree Dialog (LaunchPickerTreeDialogSelectUrl )

This last days i received some emails about the LaunchPickerTreeDialogSelectUrl Method and which parameters can be used to manage in my solution "Manage List Threshold" and how we can filter "Sites/web/Lists/Folders" and be used in other SharePoint Solutions, because of that i am making this short article.

First thing i have to say is that this option is a SharePoint OoB solution (i remember this method from SharePoint 2007) and you can find in many places in SharePoint, for example when you are uploading a document and you need to choose a sub folder or when you need to select a List from specific Web Parts.

Here some articles talking about this Method:

The Method LaunchPickerTreeDialogSelectUrl  from the SharePoint file 'pickertreedialog.js'.

Image Example (select List/folder from the current Site)



Here are my findings you can do to help implement this option:

The first thing we should know is the use of Internet Explorer Developer Tools to identify the properties and options of the Method.

For this example i access to modal dialog of Document Library where the Method that call the tree picker in the option "Choose Folder..."



when you access to folder using "Chrome" you are able to see the url with the parameter that was used to access the Picker Method, this can be useful to filter your tree dialog box .




When you select the IE Developer Tools you can access to the properties of the Method when you search for the method "LaunchPickerTreeDialogSelectUrl"

In the F12 (Alt+x > F12 Developer Tools) of your Internet Explorer and select Debugger and the page "Upload.aspx" you will be able to see the properties.




One of the most important parameter when we are filtering a List/Document Library is the var currAnchor "SPList:[ID]?SPWeb:[ID]:".
This option filter the Picker Tree dialog for a specif List/Document Library.




Here are some parameter we can use in the Method:

websLists - Returns all Lists/Document Library
websListsFolders -  Returns all Lists/Document Library and Folders
"scopeToWeb" - Return the Lists of the current Web, if you need to Scope for all Site Collection add the property "&scopeToSite=true" workaround in *Custom Browser for All Sites and Sub Sites talked in the examples below.
requireCT - Validate if a selected Content Type "Example CT Document 0x0101" exists in the List/document Library, if not returns error message.



To call the Method LaunchPickerTreeDialogSelectUrl  should use the reference to API File 'pickertreedialog.js'.

Custom Browser for List Picker (Code example):

For this Method add a dialogbox button and should open the current Web Object and list and Lists and their Folders. 

<script type="text/ecmascript" language="ecmascript">

function LaunchTargetPicker() {
    var callback = function (dest) {

        if (dest != null && dest != undefined && dest[3] != null) {
            document.getElementById('URLTextBox').value = dest[3];
        }
    };
   
    var iconUrl = "/_layouts/15/images/smt_icon.gif?rev=32";
    SP.SOD.executeFunc('pickertreedialog.js', 'LaunchPickerTreeDialogSelectUrl', function () {
        LaunchPickerTreeDialogSelectUrl('CbqPickerSelectListTitle', 'CbqPickerSelectListText', 'websListsFolders', '', 'https://[Site]', '', '', '', iconUrl, '', callback, 'true', '');
    });
}
</script>
<input type="text" name="" id="URLTextBox" value=" " />
<input type="submit" class="ms-input" value="Browser" id="BtnBrowseReportStorageLocation" onclick="LaunchTargetPicker(); return false;" /> 



I

Custom Browser for All Sites and Sub Sites (Code example):

For this Method the dialogbox should open the current Site and their SubSites and list and Lists with their Folders

function LaunchTargetPicker() {
    var callback = function (dest) {

        if (dest != null && dest != undefined && dest[3] != null) {
            document.getElementById('URLTextBox').value = dest[3];
        }
    };

    var iconUrl = "/_layouts/15/images/smt_icon.gif?rev=32";
    SP.SOD.executeFunc('pickertreedialog.js', 'LaunchPickerTreeDialogSelectUrl', function () {
        LaunchPickerTreeDialogSelectUrl('CbqPickerSelectListTitle', 'CbqPickerSelectListText', 'websListsFolders', '', 'https://[site]', '', '', '', iconUrl, '', callback, '&scopeToSite=true', '');
    });
}




Custom Browser for Folder Picker in specific Library (Code example):

This method Filter a select Lists/Document Library and his Folder.
to support this method is needed the values SPList ID of the List you want to filter and Web ID from the site and concatenate with the following sequence;
SPLIST:[ID]&SPWeb:[ID]:
To automatic select the subfolder se the url Path as describe in parameter [add SubFolder url]

function LaunchTargetPicker(TextBoxId) {

    var callback = function (dest) {
        if (dest != null && dest != undefined && dest[3] != null) {

            document.getElementById('URLTextBox').value = dest[3];
        }
    };

    var iconUrl = "/_layouts/15/images/smt_icon.gif?rev=32";
    SP.SOD.executeFunc('pickertreedialog.js', 'LaunchPickerTreeDialogSelectUrl', function () {
        LaunchPickerTreeDialogSelectUrl('CbqPickerSelectListTitle', 'CbqPickerSelectFolderText', 'websListsFolders', 'SPList:94dbbb89-0a50-4f16-b002-ecb5cabda31b?SPWeb:be7803ee-376e-4e7f-a4b9-e483f749f377:''https://[site]', '[add SubFolder url]', '', '', iconUrl, '', callback, 'true', '');
    });

}





This is a last minute method, This is another Dialog Picker you can use from the page "AssetPortalBrowser.aspx". This Out of the box Page gives you the ability to select file or List from the existing Site.





Custom Browser to select File in Site (Code example):


<script>
function OpenAssetPortalBrowserDialog() {

    var clientContext = SP.ClientContext.get_current();
    Web = clientContext.get_web();
    clientContext.load(Web);
    clientContext.executeQueryAsync(function(){
        var UrlPagePicker= "/_layouts/15/AssetPortalBrowser.aspx";
        var Parameteres = "?&AssetType=Link&AssetUrl=" + _spPageContextInfo.webServerRelativeUrl + "&RootFolder=" + _spPageContextInfo.webServerRelativeUrl + "&MDWeb=" + Web.get_id();
        var url='';
        if (_spPageContextInfo.webServerRelativeUrl =='/')
        {url=UrlPagePicker+Parameteres}
        else{url=_spPageContextInfo.webServerRelativeUrl+UrlPagePicker+Parameteres}
        var options = SP.UI.$create_DialogOptions();
        options.url = url;
        options.dialogReturnValueCallback = Function.createDelegate(null, CloseAssetPortalBrowserCallback);
        SP.UI.ModalDialog.showModalDialog(options);
    }, function(){alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());});      
}
function CloseAssetPortalBrowserCallback(result, target) {
    if (result == SP.UI.DialogResult.OK) {
        document.getElementById('URLTextBox').value=target.AssetUrl;
    } 
}
</script>

<input type="text" name="" id="URLTextBox" value=" " />

<input type="submit" class="ms-input" value="Browser" id="BtnBrowseDocumentStorageLocation" onclick="OpenAssetPortalBrowserDialog(); return false;" />




To give one overview of the Values that return, you can select the Callback Value from the Modal Dialog using IE Developer Tools Debugger Mode and see the parameters






Hope you like this article, 
Kind regards, 
Andre Lage

Post a Comment