Add Asset picker(Browse and select file) control to Textbox in a Sharepoint list form Or Page

Hi Guys,

In this post we are going to learn How to add Asset picker control to a SharePoint FORM/Page.

Recently I came across a requirement where user needs to add the reference of a document present in a document library while adding a new list item. As Sharepoint doesn't provide you any OOTB column/field control to pick the asset from the site, User has to go the document library select the particular document then copy shortcut and finally paste the copied URL into List form.

Some of the users do not like this behavior when they have the file already present in document library and expects the option of browse and pick behavior.

In this post we will be adding the "browse and pick file" control to any Textbox box field(of List form) in which you wants to save the URL of the file.

Below are the steps which does the trick.

Step 1:
Create a js file called "createassetpickercontrol.js"

Step 2:
Add the following snippet to the "createassetpickercontrol.js"

$(document).ready(function () {

// With the below line we will be dynamically adding the Browse control next to the textbox where we need to place this. 

//Replace "controlid" with your actual id of the textbox.

$("textarea#controlid").closest('td').append("<div id='btnbrowsectrl' style='display:none'><input onclick='GetFileURL()' type='button' value='Browse File' /><span>Browse File location if exists on same site</span></div>");

 //The below snippet to acheive the browse functionality

//Create a object which will be used for the Asset. I have used the object name as 'assetPickerObj'

    with(new AssetPickerConfig('assetPickerObj'))

    {{

         DefaultAssetImageLocation='';

         //CurrentWebBaseUrl will be the url of the site or site collection.

         CurrentWebBaseUrl='https://siteurl.com';

         OverrideDialogFeatures='';

         OverrideDialogTitle='';

         OverrideDialogDesc='';

         OverrideDialogImageUrl='';

         //AssetUrlClientID is the id of the control in which the path of the selected file will be saved.

         AssetUrlClientID='controlid';

         AssetTextClientID='';                                                             

         UseImageAssetPicker=false; //make this false to show Documents instead

         DefaultToLastUsedLocation=true;

         DisplayLookInSection=true;                                                            

         ReturnCallback = null;}}

});

function GetFileURL(){

    //Following is the function which launch the AssetPortalBrowser.aspx automatically.

    APD_LaunchAssetPickerUseConfigCurrentUrl('assetPickerObj');

//the above line will just give you the relative url to the textbox.

//set absolute url in textbox if required then use the below lines

var newabsoluteurl= window.location.protocol + "//" + window.location.host+$("#controlid ").val().replace(/\s+/g,"%20");

$("#controlid").val(newabsoluteurl);

return false;

}

Step 3: 

Upload the above JS to your site.

Step 4:

Go to the List and then Select default New Form as shown below.

Add a HTML Form webpart and then add the below JS references in it and then Save the page.

AssetPicker.js is a sharepoint farm JS file and will be available in layouts folder. The folder structure will change from 2007 to 2010 environment.

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

<script src="/Style%20Library/Scripts/jquery-1.11.1.min.js" type="text/javascript"></script>

<script src="/Style%20Library/Scripts/createassetpickercontrol.js" type="text/javascript"></script>

There you go, you could now see the browse button to pick the file url when you open the LIst form as below.

Hope this helps...

How to convert text to UPPER case using CSS

Hi Folks,
In this post we are going to see how to convert a text to UPPER Case using CSS. Here we are writing a css class which will transform/convert text of the element to UPPER case.

Below is the CSS which does the trick.

.transformUpperCase
{
      text-transform: uppercase !important;
}


Hope this helps...

How to hide ribbon from SharePoint page using CSS

Hi Folks,
In this post we are going to write a css class which will hide ribbon of the sharepoint page.

Below is the css class which does the trick.

#s4-ribbonrow
{
      display:none !important;
}

Hope this helps...

Related post: Hide Sharepoint Recent Changes Section

Open and Close a Sharepoint Modal Dialog with URL

Hi Folks, in my earlier post we have seen how to launch a popup in any page using purely jquery approach. Click here...
In this post we are going to acheive this with Sharepoint framework.

Sharepoint has exposed some client side functions where we can easily call a page as modal dialog/ pop up.

SP.UI.ModalDialog.showModalDialog(options) Method helps us in acheiving the same.

Below is the actual implementation of this function.

function openDialogAndReceiveData(tUrl, tTitle) {
         var options = {
             url: tUrl,
             title: tTitle,
    autoSize: false,
    width:600,
    height:350,
    dialogReturnValueCallback: onPopUpCloseCallBackWithData
         };
         SP.UI.ModalDialog.showModalDialog(options);
     }

function onPopUpCloseCallBackWithData(result, returnValue) {
//If any action that needs to be done on parent page upon close of popup.      
}

The above function is a generic one where we just need to call this function on the onclick of the button on which we are expecting the popin/modal dialog to be opened.
Parameters:
tUrl = absolute or relative path of the page which we need to see as a dialog
tTitle = Title of the modal dialog.

Hope this helps...

RELATED POST: Show and Hide a SharePoint modal dialog with HTML structure
RELATED POST: How to Show and Hide a jquery dialog popup