Sort a List / Document Library view using URL

This one's an add-on to the previous post. Even though it's quite quick to sort items in a List / Document Library view by clicking on the column title, you can do this also by using URL. Just add parameters

?SortField=[Field Name]&SortDir=[Asc / Desc]

Example: to sort by Title descending, type ?SortField=Title&SortDir=Desc

When is it more worth to use URL instead of clicking? When you...

... like typing urls :)
... need to use this in a script
... need to make direct links manually
... don't want to create an extra view just for sorting

Oznake ponudnika Technorati: SharePoint

Quickly filter a List/Document Library View using URL

This one's very useful when you're having a lot of items in a list or document library and you need a quick filter.

If you'll select the filter field it can happen that it will load for a long time. So lately I'm using URL. Suppose you have a long list of contacts and you need to find a contact named Boris.

In the AllItems.aspx - view of the page, add parameters

?FilterField1=[Field Name]&FilterValue1=[Value]

You can add more filterfield and filtervalue parameters to apply filters to more fields (FilterField2, FilterValue2, ...)

The only trick is to know the Field Name like it's saved in SharePoint. You can see this in the list settings page (click on a column name and check URL) or just make a manual filter for the first time.

In my case to find a contact with First Name Boris, I'd go to

http://[site_URL]/lists/contacts/AllItems.aspx?FilterField1=FirstName&FilterValue1=Boris

I'm always browsing a document library with filtering by specific document type. So I've created a simple script. Just add a Content Editor Webpart to your homepage, edit its source and add the following code (just update the url to your document library (docLibUrl):

<script type="text/javascript">
function docLib(dropdown) {
  var vtype = dropdown.options[dropdown.selectedIndex].value;
  var docLibUrl = "/Shared Documents/Forms/AllItems.aspx";
  var filterField = "DocIcon"
  if (vtype != 'Select') {
    document.location=docLibUrl+"?FilterField1="+filterField+"&FilterValue1="+vtype;
  }
}
</script>
<select style="margin:10px; 0px;" id="DocumentTypes" onchange="docLib(this)">
<option value="Select">Select document type</option>
<option value="Select">-- Office 2007 --</option>
<option value="docx">Word 2007</option>
<option value="xlsx">Excel 2007</option>
<option value="pptx">PowerPoint 2007</option>
<option value="Select">-- Office 2003 --</option>
<option value="doc">Word 2003</option>
<option value="xls">Excel 2003</option>
<option value="ppt">PowerPoint 2003</option>
<option value="Select">-- Other --</option>
<option value="pdf">Acrobat (PDF)</option>
</select>

Oznake ponudnika Technorati: SharePoint,JavaScript

Adding Flash animation in SharePoint Blog and other lists pt. 2

This post continues the topic from my first part about embedding Flash videos in SharePoint Blogs where we've learned how to embed one Flash animation or video (or have a lot of work for publishing each flash).  The problem arises if we want to embed more videos and have them displayed automatically.

Since SharePoint is very strict about filtering a LOT of the code out, I've devised a way of passing all the parameters needed for swf object through ID. And how to recognize divs for the swfobject? Using CSS class name.

Here's what we need to do:

1. Have te swfobject.js uploaded to the site.

2. Add the following javascript at the end of the page (or in a Content editor webpart below the posts or list items:

<script type="text/javascript" src="swfobject.js"></script>

<script type="text/javascript">

function embedFlashes() {
    var myLayers = document.getElementsByTagName('div');
    if (myLayers.length>0) {
        var myFlashes = new Array()
        for (i=1; i<myLayers.length; i++) {
            if (myLayers[i].className == 'flashcontent') {
                myFlashes.push(myLayers[i].id)
            }
        }
        var so = new Array()
        for (j=0; j<myFlashes.length; j++) {
            tempParam = myFlashes[j].split('::')
            so[j] = new SWFObject(tempParam[0], tempParam[1], tempParam[2], tempParam[3], tempParam[4], tempParam[5]);
            for (p=6; p<tempParam.length; p++) {
                detail = tempParam[p].split('=')
                so[j].addVariable(detail[0], detail[1])
            }
            so[j].write(myFlashes[j])
        }
    }
}

embedFlashes()
</script>

3. Now in the content you need to edit the HTML code of the body and insert the layers in the following format (note - input parameters are separated by double colon.:

<div class="flashcontent" id="[url_of_swf_file]::[unique_id]::[width]::[height]::[minimum_flash_version]::[background_color]::[flashvar1=flashvar1_value]::[flashvar2=flashvar2_value]...">[Alternate_content]</div>

Let's reuse the sample from previous post and some color coding. To embed

<object width="425" height="355"><param name="movie" value="http://www.youtube.com/v/Z2yNzw00mpA&rel=1"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/Z2yNzw00mpA&rel=1" type="application/x-shockwave-flash" wmode="transparent" width="425" height="355"></embed></object>

Insert the following html to the blog post body:

<div class="flashcontent" id="http://www.youtube.com/v/Z2yNzw00mpA&rel=1::video01::425::355::8::#FFFFFF">Please view this post on my website to display the video.</div>

The rest of parameters are made up - video ID is video1, it requires flash 8 and background color is #FFFFFF - white. Let's do another sample with flashvars - the same video on MSN Video. The Embed code is:

<embed

src="http://images.video.msn.com/flash/soapbox1_1.swf" quality="high" width="432" height="364" base="http://images.video.msn.com" type="application/x-shockwave-flash"
allowFullScreen="true" allowScriptAccess="always" pluginspage="http://macromedia.com/go/getflashplayer" flashvars="c=v&v=d41e1dfd-919b-4d57-89c9-736f9c75db14&ifs=true&fr=msnvideo&mkt=en-US&brand="></embed>

To embed this video you'd use the following HTML code:
 

<div class="flashcontent" id="http://images.video.msn.com/flash/soapbox1_1.swf::MSNVideo01::432::364::8::#FFFFFF::c=v::v=d41e1dfd-919b-4d57-89c9-736f9c75db14::ifs=true::fr=msnvideo::mkt=en-US::brand=">Please view this post on my website to display the video.</div>

And the result:

 

Yeee, working!

Technorati tags: SharePoint JavaScript Flash SharePoint Blog

Adding Flash animation in SharePoint Blog and other lists pt. 1

UPDATE: This is an outdated method. There is a much easier way. See ERTE on Codeplex or ERTE on my new blog.

SharePoint's rich text field is much better than in version 2.0. It even enables to edit the HTML source. But one thing I don't understand is why it filters out the HTML code so much that we can't even embed the Flash animations or videos into the content. This is a major drawback for SharePoint Blog.

Fortunately I've come up with a nearest thing to a remedy. It's using Deconcept SWF object. It will replace an "alternative" content in a layer with a flash animation (this is also a good way to bypass the "Click to activete this control..." issue in IE). 

Let's say we have a blog and a video to embed for example - this one from YouTube. A simple way of doing it - if you have only one video in the page is:

1. Create a document library and upload the swfobject.js (downloaded from author's website) to it (or just upload it to the root of your website with SharePoint Designer).

 

2. Add a blog post and in the body edit the HTML code and insert the following code:

<div id="flashcontent">Please check this post on my website to view the video</div>

3. In the blog homepage and in the post details page (post.aspx), add a Content editor webpart and edit the source. Enter the following code:

<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
    var so = new SWFObject("http://www.youtube.com/v/Z2yNzw00mpA&rel=1", "mymovie", "425", "355", "8", "#FFFFFF");
    so.write("flashcontent");
</script>

For comparison I'm pasting also the YouTube's embed code and I'm color coding it to match the script:

<object width="425" height="355"><param name="movie" value="http://www.youtube.com/v/Z2yNzw00mpA&rel=1"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/Z2yNzw00mpA&rel=1" type="application/x-shockwave-flash" wmode="transparent" width="425" height="355"></embed></object>

For more details on the script and how to add flashvars. Just be sure to have the right path to swfobject.js and to have the right ID of the div and in the script (in the case above: "flashcontent".

This is the result:

 

Unfortunately in the RSS is still showing the alternate content.

 

This is the method of adding only one video per page. You'd need multiple div ids and you't always need to add to the script below. Fortunately I've prepared a way of automating this. More about this... Stay tuned for my next post.

Technorati tags: SharePoint JavaScript Flash SharePoint Blog

Adding webparts to other SharePoint pages than homepage and webpart page

Recently I wanted to add some text descriptions to the "NewForm.aspx" and "EditForm.aspx". I remembered a trick Pedro Serrano showed me some time ago. It works for SharePoint 2.0 and SharePoint 3.0.

All you need to add to the page are the
 
?PageView=Shared&ToolPaneView=2
 
parameters.

This opens the Task pane for adding webparts. So now you can add any webpart to the page. Some practical uses are to add Content Editor Webparts to the page or related lists,...

Oznake ponudnika Technorati: SharePoint

Free Undelete utilities

Not long ago I've had a bit of mishap by deleting some of my very important pictures (birth of my kid). With the first shock I couldn't find quickly any free software for undeleting.

After calming down I've found the following two:

Office Recovery FreeUndelete 2.0

Free Undelete +

They did a very good job and I have my photos back :) I hope by posting these here they'll help someone else too. I'd be glad to hear about similar situations or software in the comments of this post.

Refferencing Hours and Minutes dropdown on "Date and Time" field with JavaScript

I've already posted on how to refference SharePoint field with JavaScript (here - with functio getField).

For "Date and Time" type of fields you can use the above function only to refference the Date part. Thanks to Erik / Tanker who commented my post and discovered that these dropdowns get the same ID but just have added "Hours" or "Minutes" to it I'm posting now the 2 more functions to refference Hours and Minutes with these kind of fields.

There are numerous options - you can merge all together in one function, you can make separate functions, etc. I've decided to make two additional functions:

1. You'll need the getField function I've already posted

2. Add the two following functions:

function getDateFieldHours(fieldTitle) {
    var dateField = getField('input',fieldTitle)
    return document.getElementById(dateField.id+'Hours')
}

function getDateFieldMinutes(fieldTitle) {
    var dateField = getField('input',fieldTitle)
    return document.getElementById(dateField.id+'Minutes')
}

So if you have for example "Start Time" field which is Date and Time you can refference:
- the Date part with getField('input','Start Time')
- the Hours part with getDateFieldHours('Start Time')
- the Minutes part with getDateFieldMinutes('Start Time')

Thanks again, Erik!

Oznake ponudnika Technorati: SharePoint,JavaScript