Link to media files on file server

Hi everyone!

I had a client a little while ago that had this requirement.

  • In a list it should be as simple as possible for the users to add a link to a media file that is located on a file server.
  • They did have a mapped net work drive and they were only connected to their Intranet while at office or through VPN.
  • The installation is a SharePoint Foundation

My first thought was to add a default value to a URL column so that they only had to add the last part, but that was not possible.

Then I tried to add the default value to a text column and that worked if it was an http-link but not a file-link.

My friend jQuery came to rescue and offered me a solution that came to be like this.

The idea is that the user, besides adding a few other things in this form, only should have to add the file name and file type e.g. “MyMovie.mov” in a field to build a link to the file on the server.

Ok, so I found a snippet of a JavaScript (I can’t remember where, sorry) that should be added to an aspx-file and when called, would open up a folder on a shared drive. And that my friends was almost what I was looking for, now I only needed to add the functionality to pick up a parameter and open a file in that folder instead.

First I added a new column “MediaLink” of the type URL. This column should be set to be hidden in the forms, but do that a little bit later.

Then I added a new column “MediaFile” of the type Text with a description of what they should be adding, name and type.

By adding this jQuery code to the edit and new forms, the URL to the JavaScript snippet file, and the value of the “MediaFile” is added to “MediaLink”. At the same time it checks if “MediaFile” is empty, if it is it won’t add the text “Link to media” in the column for that item.

<script type="text/javascript">
$(document).ready(function() {
$('input[title=MediaFile]').change(function() {
var value = $(this).val();
$('input[title=MediaLink]').attr({value: 'http://companyweb/SiteName/SitePages/media.aspx?fileName='+(value)});
if ($(value).length < 1){
$('input[name*="ff81$ctl00$ctl00$UrlFieldDescription"]').attr({value: 'Link to media'});
}
});
});
</script>

Be sure to change the URL to media.aspx if you will put it somewhere else. The last part of the attribute “name” you could find by viewing the source of the page, that is before you hide it of course 🙂

Ok so what about that JavaScript snippet, what should we do with that and where is it?

As you can see in the code above I add the parameter “fileName” to the URL of the “media.aspx“. This is the file that should have this snippet that I have been talking so much about 🙂

It looks like this.

<html>
 <body>
  <script type="text/javascript">
//Get querystring
var queryString = window.location.href.split("?")[1];
    var fileName = queryString.split("=")[1];
    // mapped network drive
    var drive = "file://Server/share"
    // folder within the mapped network drive
var folder = "/Folder1/Folder2/Folder3"

    window.open(drive + folder + fileName, "File");
    history.back();
  </script>
 </body>
</html>

So, simply add this code to a file called “media.aspx” and put the file in “SitePages”. Be sure to change the variables “drive” and “folder” so that they fit your environment.

I had a talk to Marc D Anderson about this and he gave me a few ideas that I will try to improve this further. When I have, I will update this post with these improvements.

I hope this will help someone!

CU in Vegas in a couple of weeks!

Advertisements

2 Comments on “Link to media files on file server”

  1. Lucy says:

    Good ole Jquery, what a trooper. He always shows up at the right time 🙂

  2. Great stuff, now wer’e only waiting for the next post, more jQuery to the people, bring it on dude!


Leave a comment

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s