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

Sharepoint shortcut URL's

Hi Guys,

Sometimes we wanted to bypass some of the UI navigation steps and wanted directly to get into some page like settings or edit mode etc.,

Here are some of the relative links that I know.

Site Settings page:
/_layouts/settings.aspx

View all site content page:
/_layouts/viewlsts.aspx

Pages library:
/pages/forms/allitems.aspx

Manage Site Collection features page:
/_layouts/managefeatures.aspx?Scope=Site

Manage Site Features page:
/_layouts/managefeatures.aspx

Sign in as a different user prompt:
/_layouts/closeconnection.aspx?loginasanotheruser=true

If you want see which all webparts on a page, you can simple go to Web Part Maintenance page by adding the below query string to the end of the URL of any aspx page.
?Contents=1

Sandboxed Solution Gallery page:
/_catalogs/solutions/Forms/AllItems.aspx

Welcome Page settings page:
/_layouts/AreaWelcomePage.aspx

Happy Learning...

Javascript to check broken links

Hi Guys, recently i came across to find out whether the given set of URL's are broken links or not.

I have created below sample snippet to findout whether a URL exists Or not.

<html>
<head>
<script type = 'text/javascript'>
function IsUrlExists(url) {
  var http = new XMLHttpRequest();
  alert(http);
  http.open('HEAD', url, false);
  http.send();
  alert(http.status);
  return http.status != 404
}
</script>
</head>
<body>
<input type="text" name="Url" id="url">
<input type="button" value="Check" id="btncheck" onclick="IsUrlExists(document.getElementById('url').value);">
</body>
</html>

Hope this helps..

Publishing Infopath Form to a new site/ Infopath change publish location

Hi Folks,

In this post we are going to Change the target site/ list url for publishing Infopath form

Problem Statement:

You have a Infopath form developed with a List template, present in a Sharepoint List of Development Environment. Now that you want to publish this form to Production environment but while publishing you will not be prompted to enter new URL in publishing wizard.

When you try to open the publishing Wizard from File Menu and then click on Publish you can see only the below two options.

·         Sharepoint List

·         Export Source Files

The "Sharepoint List" option remembers the Quick Publish Location and even has a Label stating: "The form will be published to: http://oldurl"

Clicking on the it, just does exactly the same as Quick Publish action i.e., quick publish without bringing up the wizard to choose the publish location.

Solution:

I found the best approach as below. It involves in updating the manifest files and view files. Below is the approach which does the trick.

1.       Infopath form (xsn) file is basically a cab file with bunch of related files in it.

2.       Rename xsn to cab extension

3.       Extract the cab file to a location

4.       Open the manifest.xsf file and replace the OLD URL with new URL.

5.       Update the new ListID and ContentTypeID in the Manifest.xsf(If you don’t do this, you will get List not found error).

6.       Open all the xsl files(views) present under extracted folder and perform the steps 4 and 5 if it has old URL and ListID/ContentType ID present.

7.       Save all the modified files and then right click on the manifest.xsf file and open click on design.

8.       This will open the Infopath form and Go to Publish. You will be able to see the updated New URL. Go ahead and Publish It and you are done.

Happy Learning...

Related Post Perform a case insensitiv​e string comparison in InfoPath 2007 web based forms