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!


Need a link to create a new document from an Office template?

Hi everyone!

I found this blog post the other day and you can’t imagine the thrill I felt 🙂

This is something I have wanted to be able to do so many times and didn’t know how to, now I do and I want you to do as well.

As you can see (and read in the blog post) the saveLocation is set from where the template is located. I did a little change to route the save location to a place I decided. I also added a little change to wait until the page is loaded before the function is executed, always a good thing to do.

This is the original code:

<script type="text/javascript" src="/_layouts/jquery.min.js"></script>
<script type="text/javascript">
$( function () {
$("a[href$='.dot'], a[href$='.dotx'], a[href$='.xlt'], a[href$='.xltx']").attr("onclick", "").click( function () {
saveLocation = $(this).attr("href").split("/").slice(0, -2).join("/")
createNewDocumentWithProgID(window.location.protocol + '//' + window.location.host + $(this).attr("href"), window.location.protocol + '//' + window.location.host + saveLocation, 'SharePoint.OpenDocuments', false)
return false
})
})
</script>

and this is my modified one with a hard coded save location:

<script type="text/javascript" src="/Style%20Library/Scripts/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a[href$='.dot'], a[href$='.dotx'], a[href$='.xlt'], a[href$='.xltx']").attr("onclick", "").click( function () {
createNewDocumentWithProgID(window.location.protocol + '//' + window.location.host + $(this).attr("href"), makeAbsUrl('http://MyIntranet/sitename/sitename/librar%20name'), 'SharePoint.OpenDocuments', false)
return false
})
})
</script>

Here is another one that prompts to save the document in the logged in users local Document library.

<script type="text/javascript">
$(document).ready(function(){
$("a[href$='.dot'], a[href$='.dotx'], a[href$='.xlt'], a[href$='.xltx']").attr("onclick", "").click( function () {
createNewDocumentWithProgID(window.location.protocol + '//' + window.location.host + $(this).attr("href"),'C:\Users\{login}\Documents' , 'SharePoint.OpenDocuments', false)
return false
})
})
</script>

As always when we are working with jQuery you have to make sure that you reference the location of that .js-file

CU

/Niax


Add customizable information to a library page

Hi everyone!

As you know when you add a web part to a library page, like Allitems.aspx or a page of a custom view that you’ve made, the ribbon gets wacky. That’s because it doesn’t know which web part it should have its focus on.

So what could we do if we really want some information, let’s say above the library web part?

And the information should be able to edit in an easy manner without using SharePoint Designer (SPD).

In this example I have a top site and underneath this I have some sub sites that are created from a site template I made. The things we are going to do now is made to that template so it could be reused.

First of all we have to edit the page’s code a bit, so bring up the page in your favorite editing tool SPD!

Find where the web part zone for the library begins and add two DIV’s right before it starts, like this:

PlaceHolderMain" runat="server">
<div id="success"></div>
<div id="error"></div>
<WebPartPages:WebPartZone runat="server" FrameType="None" ID="Main" Title="loc:Main">

As you can see I have added two DIV’s right after PlaceHolderMain with the ID’s of success and error. Don’t close this page, we are coming back here real soon.

What we are going to do now is to add some content to the success DIV.

First we need to have some content, right?

On the top site, let’s create a new Web Part Page, call it content.aspx and choose Full Page, Vertical.

Add a Content Editor to the page, click inside it, choose to Edit HTML Source…

…and paste this code:

</pre>
<div id="<span class=">MyDiv"></div>
<pre>
The content within this DIV will be shown above the document library.
<div>
<ol>
<li>To think about...</li>
<li>And this as well...</li>
</ol></div></div>

Ok, so now we have som content and as you can see the content is kept inside a DIV with the ID of MyDiv.

Now we are going back to the first page (where we have the library and added the two DIV’s) to add this information to the success DIV.

Let’s add som jQuery!

Find AdditionalPageHeader and add this code:

<asp:content contentplaceholderid="PlaceHolderAdditionalPageHead" runat="server">
 <SharePoint:RssLink runat="server"/>
<script type="text/<span class=">// <![CDATA[
javascript</span>" src="/sitename/Shared%20documents/jquery-1.6.2.min.js">
// ]]></script>
<script type="text/javascript">
 $(document).ready(function() {
 $("#success").load("/sitename/sitename/SitePages/content.aspx #MyDiv",
 function(response, status, xhr) {
 if (status == "error") {
 var msg = "Page is missing: ";
 $("#error").html(msg + xhr.status + " " + xhr.statusText);
 }
 });
});
</script>
</asp:content>

As you can see, first I have a reference to my jQuery file, you should replace the URL so that it corresponds to your environment.
Then in the next section we are loading the content in MyDiv into the DIV with the ID of success.

Now we are done!

Save all pages and try it, it should look something like this:

This way you can create new sites from this site template and just by editing the Content Editors in the page content.aspx you could update the contents on all sites.

Isn’t that nice?

CU!

/Niax