Thursday 25 April 2013

How to get SharePoint browse button in sharepoint application pages

Here is a quick demo on how to use browse button for selecting files present within a SharePoint site.

1. Create a text box (for displaying SharePoint URL to users), and a normal button (which would be used as a browse button) in application page, as shown below.


2. In the header section of application page, just add the below script section for getting the picker tree dialogue control reference.

<script type="text/javascript" language="javascript" src="/_layouts/1033/PickerTreeDialog.js"></script>

3. In the header section, add another script section for ecma script, which defines the function defined in point 1 (launchPicker()). Here is the code for launchPicker() function:


<script type="text/ecmascript">
        var lastSelectedListSmtPickerId = '';
        function launchPicker() {
            var url = location.protocol + "//" + location.hostname + ":" + location.port;
            if (!document.getElementById) return;

            var listTextBox = document.getElementById('<%=txtDestURL.ClientID %>');
            var rootVar = document.getElementById('<%=hidField.ClientID %>').value;
            var varListURL = document.getElementById('<%=hidListURL.ClientID %>').value;
            if (listTextBox == null) return;

            var serverUrl = '\u002f';

            var callback = function (results) {
                if (results == null
                        || results[1] == null
                        || results[3] == null) return;

                lastSelectedListSmtPickerId = results[0];
                var listUrl = '/';
                if (results[3].charAt(0) == '/') results[3] = results[3].substring(1);
                listUrl = listUrl + results[3];
                listTextBox.value = url + varListURL + listUrl;
            };
            LaunchPickerTreeDialog('ProductFolderURLPicker', 'ProductFolderURLPicker', 'websListsFolders',  rootVar, serverUrl, varListURL, '', '', '/_layouts/images/Copy.gif', '', callback, '', '');
        }
    </script>

4. Here "txtDestURL" is the name of the text box created in step-1.
5. "hidListURL" and "hidField" are 2 hidden fields, which I created for storing the server relative list url and other necessary parameter for loading the picker control.
6. Here is how I created the hidden fields in application page:







7. Here is the code for setting up the values of hidden field in class file of application page. The values has to be set on Page_Load of application page.

string sListID = Request.Params["ListID"];

hidField.Value = "SPList:" + sListID.Substring(1, sListID.Length - 2) + "?SPWeb:" +  _web.ID + ":";
hidListURL.Value = (_web.Lists[new Guid(sListID)]).RootFolder.ServerRelativeUrl;



No comments:

Post a Comment