Category Archives: JavaScript

Free ebook: Programming Windows 8 Apps with HTML, CSS, and JavaScript

For those of you looks at the new Windows 8 platform and how to use items like the WinJS, commanding UI, animations and sensors, it’s a really nice run down of everything you would want for building out a basic and elegant Windows 8 app on a mobile platform.

I’ve skimmed the chapters and am now diligently working my way through the exercises…

http://blogs.msdn.com/b/microsoft_press/archive/2012/08/20/free-ebook-programming-windows-8-apps-with-html-css-and-javascript-second-preview.aspx

SharePoint | Add Alternating Row Background Colors to SharePoint Document Libraries with CEWP and JavaScript

SharePoint out of the box has some great tools for displaying documents located in a document library, probably because that’s what a lot of companies use it for.  Out of the box it looks pretty nice, however I had a request that besides having the view display the documents in the document library we also add conditional formatting to allow better visibility to separate the rows with background colors similar to how when we insert a table into a SharePoint page we can apply the a Style like “Table Style 2 – light banded” under Table Tools->Design->Styles to give a banded affect to the Document library, similar to the following:

image

This would allow some of our older colleagues to very clearly follow the rows associated with each item.  Seemed pretty simple and I spent some time trying to find the property that would turn on this feature for the document library.  Turns out there wasn’t one, however with a little creative JavaScript and some quick peeks under the covers at the page source it’s actually very easy to accomplish!

First, open the page you want to apply this style to, and view the source.  Now search for a table element with class="ms-listviewtable" and grab the id value, it should looks something like “onetidDoclibViewTbl0”, but if you’re using certain customized views might look more like “{GUID}-{GUID}”, for the most part though, you won’t need to change this value.

Once you have the ID of the table, you’re going to want to edit the page and insert a Content Editor Web Part.  

image

Now click on it so it brings up the Editing Tools->Format Text tab

image

and under Markup select HTML->Edit HTML Source so it brings up the dialog box.

image

Ok, now we can go ahead and insert our special JavaScript for alternating the row colors of the table, remember to substitute the parameter passed in the getElementByID ( “onetidDoclibViewTbl0”) with the value from your page if different.

<script type="text/javascript">

// Push this to the onload in order to have it run every time page loads
_spBodyOnLoadFunctionNames.push("AlternateRowColorStyle()");

function AlternateRowColorStyle() 
{
    // Set up our variable to identify the table we want alternating colors on.
    // This will usually be one of the tables on the page with class="ms-listviewtable"
    // Replace "onetidDoclibViewTbl0" with the value from your page
    var table = document.getElementById("onetidDoclibViewTbl0"); 

    // We also need to get a collection of rows to apply our styles to
    var RowCollection = table.getElementsByTagName("tr"); 

    //Now we walk through our collection of rows applying our style
    for(RowNumber = 0; RowNumber < RowCollection.length; RowNumber++)
    { 
        if(RowNumber % 2 == 0)
        {
            RowCollection[RowNumber].className = "EvenRow";
        }
        else
        {
            RowCollection[RowNumber].className = "OddRow";
        } 
    }
}
// Once the Rows have been tagged with a class, apply CSS formating
</script>


<style type="text/css">
.OddRow
    {
    BACKGROUND-COLOR: #bee5ff;
    }
.EvenRow
    {
    BACKGROUND-COLOR: white;
    }
</style>

Once you save the page and it reloads, that should trigger the AlternateRowColorStyle() and apply the appropriate classes and CSS to give you a nicely formatted document library view like this:

image

 

And just like that with the CEWP and a little JavaScript we save the day and have a very nicely formatted document library.

Use of ResolveClientUrl() method in getting browser-acceptable relative URL

In .NET, we always use tilde (~) to refer to root virtual directory of the web application. For instance,

<asp:Image runat="server" ImageUrl="~/images/mypic.gif" />

However, in order to generate a URL that can be used by client-side browser, the URL is actually resolved in the AddAttributesToRender() of the Image server control.

writer.AddAttribute(HtmlTextWriterAttribute.Src, ResolveUrl(ImageUrl));

That is the reason why you can use "~" in the ImageUrl property. But I afraid this might be the case if you do the same thing upon the normal HTML elements or HtmlGenericControl, such as :

<img src="~/images/mypic.gif" alt="" />

because the browser does not recognize what the "~" symbol stands for. In order to workaround with that, this is where the ResolveClientUrl() method comes into place.

<img src='<%= ResolveClientUrl("~/images/mypic.gif") %>' />

Apart from using it in HTML, it can also be used in code-behind that involves in getting the relative path for the URL. For instance, ResolveClientUrl() method is handy when we are trying to register the javascript reference in code-behind,

this.Page.ClientScript.RegisterClientScriptInclude(this.GetType(),"JSResolveClient", this.ResolveClientUrl("~/jscript/resolveclient.js"));

Not only that, you will always need this method in your custom server control development.