SPServices Cascade dropdown columns with an example

SharePoint 2007 lacks support to access SharePoint object model in javascript as opposed to SharePoint 2010 that has CSOM (client side object model).

SPServices is a javascript library that can access SharePoint object model. Using that library we can build up cascade dropdown functionality in a list's NewItem or EditItem forms.

Lets say we have three lists Countries, Cities and Regions.

The columns of these lists are
Countries: Title
Cities: Title, Country (lookup column from Countries)
Regions: Title, City (lookup column from cities)

Create a target list "Company" and create three lookup columns Country, City and Region.

Go to the NewForm and EditForm of the target list and put this code snippet in a CEWP.

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript" src="http://moss-dev:7780/_layouts/jquery.SPServices-2013.01.min.js"></script>

<script type="text/javascript">
  $(document).ready(function(){

    $().SPServices.SPCascadeDropdowns({
      relationshipList: "Cities",
      relationshipListParentColumn: "Country",
      relationshipListChildColumn: "Title",
      parentColumn: "Country",
      childColumn: "City",
      debug: true
    });

    $().SPServices.SPCascadeDropdowns({
      relationshipList: "Regions",
      relationshipListParentColumn: "City",
      relationshipListChildColumn: "Title",
      parentColumn: "City",
      childColumn: "Region",
      debug: true
    });

});
</script>

Test the three dropdowns on the forms to see in action.

Lookup column - "Add new items" hyperlink on the list's EditForm

For better user experience, sometime we need to add a new value in the lookup column. So we need to have a hyperlink just beneath the lookup column in EditForm of the list. We can achieve this by using this code snippet.

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>


<script type="text/javascript">
var targetNewFormUrl = "{url of the lookup list NewForm.aspx}";
$(document).ready(function(){
    var sourceNewFormUrl = "";
    if(document.URL.indexOf("?") > 0)
        sourceNewFormUrl = encodeURIComponent(document.URL.substring(0, document.URL.indexOf("?")));
    else
        sourceNewFormUrl = encodeURIComponent(document.URL);
    targetNewFormUrl += "?source=" + sourceNewFormUrl ;

    var h = "<br/><a href='"+targetNewFormUrl +"' >Add new item</a>";
    $($( "nobr:contains('Modality String'):last" )).parent().parent().siblings().children().after(h); //use your own column name

});
</script>

.Net 2015, .Net Core, .Net CoreFX, .Net CoreCLR, DNX and ASP.Net 5 in a nutshell

.Net 2015
As the name suggests .Net 2015 is the .Net version in the year 2015. It consists of two main items. the .Net Core 5 and the .Net Framework 4.6

.Net Core
.Net Core also known as .Net Core 5 is a subset of class libraries from .Net Framework 4.6. It is modular meaning it has separate independent modules. All these modules are open source on Github and are supported to work on Windows, Linux and Mac. One of the key benefits of .NET Core is its portability. You can package and deploy the CoreCLR with your application, eliminating your application’s dependency on an installed version of .NET

.Net CoreFX
.Net CoreFX is a set of libraries distributed via NuGet. They are factored as individual NuGet packages according to functionality, named “System.[module]” on nuget.org. It is open source on Github

.Net CoreCLR
.Net CoreCLR is a small optimized runtime to run applications that target the CoreFX. It is also open source on Github

DNX

As opposed to framework which consists of libraries, DNX (.Net Execution Environment) is an SDK (software development kit) that consists of libraries, compilation system and tools to run the .Net 2015 application. It targets not only Windows but also Linux and Mac. It allows to have different .Net framework versions on the same machine. It takes care of hosting the CLR, handling dependencies and starting the application.

ASP.Net 5
ASP.Net 5 is a unified framework for MVC, Web API and SignalR. It can target both .Net Core or full .Net Framework 4.6.

ISAPI extension in IIS?

ISAPI extensions are applications that run on IIS and have access to all of the functionality provided by IIS. They are implemented as DLLs (aspnet_isapi.dll) and are loaded into a process (w3wp.exe) that is controlled by IIS.

An asp page can be called through ISAPI extension as http://Server_name/ASP.dll/File_name.asp. However, to simplify ASP requests, IIS uses a script mapping that associates ".asp" file name extensions with ASP.dll.

ISAPI extensions can only be developed using C or C++. Visual Studio includes wizards that speed ISAPI development.

ASP.Net page - Request and Response

How a web browser displays an ASP.Net page when we enter a Url in a web browser?

Web browser to http.sys
The web browser sends the request to the server where the Url web page is hosted. On the server there is a driver called http.sys that manages all the http requests.

http.sys to IIS
The http.sys driver then forwards the request to the web server (usually IIS) listening on some port (usually 80).

IIS to ASP.Net ISAPI (aspnet_isapi.dll)
The IIS determines the ISAPI extension of the request. To make it simple, it checks the file name extension and calls the mapped dll. For aspx it calls aspnet_isapi.dll and for asp it calls asp.dll. These ISAPI dlls are configurable in IIS.

aspnet_isapi.dll
aspnet_isapi.dll now takes care of the request and creates an Application Domain. Within Application Domain an HTTPRuntime object is created. Further objects that it creates are self explanatory in the diagram below.

Traffic lights on the SharePoint calculated column

Lets say we have a calculated column "Status" in a SharePoint list with the formula.

=IF([Available Budget]>0,"/_layouts/images/completed_green.gif",IF([Available Budget]=[Original Budget],"/_layouts/images/yellow.gig",IF([Available Budget]<0,"/_layouts/images/red.gif","/_layouts/images/blue.gif")))

"Available Budget" being a numeric column.

and would like to display the images (traffic lights) on the list view. The javascript snippet in a CEWP can achieve this.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">
$(function(){
  var id = $("TD:.ms-vb2");
  for(i=0 ; i<id.length ; i++){
    if(id[i].innerHTML.indexOf('red.gif') > 0 || id[i].innerHTML.indexOf('yellow.gif') > 0 || id[i].innerHTML.indexOf('completed_green.gif') > 0){
      //alert(id[i].innerHTML);
      id[i].innerHTML = "<img src='"+id[i].innerHTML+"'/>";
      //return;
    }
  }
});
</script> 

Hiding the SharePoint columns on the DisplayForm.aspx or EditForm.aspx

SharePoint list columns can be made hidden from the Content Type settings but sometimes we need to hide a column only from the DisplayForm.aspx or EditForm.aspx and not both. The out of the box functionality hide the columns from both forms.

The javascript snippet in a CEWP can hide the columns. Make sure the CEWP should be added at the end of the page.

<script type="text/javascript">
function HideField(title){
var header_h3=document.getElementsByTagName("h3") ;

for(var i = 0; i <header_h3.length; i++)
{
    var el = header_h3[i];
    var foundField ;
   if(el.className=="ms-standardheader")
    {
        for(var j=0; j<el.childNodes.length; j++)
        {
            if(el.childNodes[j].innerHTML == title || el.childNodes[j].nodeValue == title)
            {
                var elRow = el.parentNode.parentNode ;
                elRow.style.display = "none"; //and hide the row
                foundField = true ;
                break;
            }
        }      
    }
    if(foundField)
        break ;
}
}

HideField("All Day Event");
HideField("Recurrence") ;
HideField("Workspace") ;
</script>

Changing the width of SharePoint list column

Changing the width of SharePoint list column is something that is not available out of the box. The solution is to add a javascript snippet in a content editor web part on the list view page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">
                $(document).ready(function(){

$('.ms-vh2-nograd:contains("Related Models")').css("width", "300px");

$('.ms-vh2-nograd:contains("Data Source IQDs")').css("width", "300px");


                });
</script>