Posts Tagged ‘jQuery’

On SharePoint lists you can receive email notifications when items change in a list, the ‘Alert me’ function in the Actions menu of a list.

In some occasions there are multiple lists where the data in it is interesting to monitor. For example values of currencies or commodities. When a webpart is used to display values of these lists to users it can be difficult for users to set the email notifications on one or more of these lists, because the user doesn’t (have to) know which lists are involved.To make it all a bit user friendly I’m going to give the user the possibility to easily add an email notification at the same page the webpart is displayed. The user can stay on one page to analyze some data and create a notification for the lists used (the source data lists) in the webpart.

The webpart (not specified further here) to analyze some data uses a subset of all the lists available at the SharePoint site. The lists used are listed in another list, from now on called BaseList. So the BaseList contains all the lists (static name) used as source data.
  

Content editors can easily add other lists with data to the SharePoint site for analyzing purposes. To use these lists for analyzing purposes in the webpart they can add (or remove) that list to the BaseList. The webpart uses all the lists specified in BaseList and the users can set notifications to these lists.

For displaying all the possible email notifications to set on the page, SPServices comes to the rescue.  

Because of the BaseList it is easy to determine which source data lists are involved. To set an email alert always the same default SharePoint page from the _layouts folder is used: SubNew.aspx with the listguid as parameter. If these two are combined, the solution is already there.  

First a function is created to retrieve all the lists from the BaseList:

        function GetAvailableLists(listName) {
            counter = 0;
            $().SPServices({
                operation: "GetListItems",
                listName: listName,
                async: false,
                CAMLViewFields: '<ViewFields><FieldRef/><FieldRef/></ViewFields>',
                completefunc: function(xData, Status) {
                    $(xData.responseXML).find("[nodeName= z:row]").each(function() {
                        GetListId($(this).attr('ows_NameOfList'), $(this).attr('ows_DisplayNameOfList'));
                        counter += 1;
                    });
                }
            });
        }

The ViewFields contains two columns of the BaseList, one for the static name of the list and one with a self made up display name. The display name will be used as text of the link generated below, the static name for retrieving the guid of the list.  

In the code above the function GetListId() is used:

        function GetListId(listName, displayName) {
            var id = "";

            $().SPServices({
                operation: "GetList",
                listName: listName,
                async: false,
                completefunc: function(xData, Status) {
                    id = $(xData.responseXML).find("List").attr("ID");
                    if (id != null) {
                        items[counter] = "<a href='/_layouts/SubNew.aspx?List=" + id + "&Source=" + returnToPage + "'>" + displayName + "</a>";
                    }
                }
            });
        }

This piece of code gets the guid of the list and formats the right url for the notification. The Source parameter here is set to a returnpage. It is convenient for the user to be redirected to page he was coming from otherwise he will be redirected to the AllItems.aspx page from the list where the notification has been set. The formatted url is stored in an array, because I have another function for displaying it nicely at the page, that I’m going to leave to your imagination.  

Copy all the code in a Content Editor webpart  and you’re done.
The result on the page is dependent on how you format it, but practically no more than a bunch of links, e.g.:
  

With the link set to:  

http://<your site>/_layouts/SubNew.aspx?List={1FAFC5F9-F8D8-4CB6-852E-5AD4DB12CB04}&Source=Default.aspx

A very easy way to retrieve the guid of a list with SPServices: 

<script type="text/javascript" src="../ICTLibrary/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="../ICTLibrary/jquery.SPServices-0.5.4.min.js"></script> 

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

function GetListId(listName) {
var id = "";
$().SPServices({
operation: "GetList",
listName: listName,
async: false,
completefunc: function (xData, Status) {
id = $(xData.responseXML).find("List").attr("ID");
}
});
return id;
} 

var listid = GetListId("Plastic");
if(listid!=null)
{
$("#listid").append(listid);
}
else
{
$("#listid").append("list not found");
} 

});
</script>
<div id="listid" >Plastic list guid: </div>

On Codeplex the SPServices library is available. This is a jQuery library for SharePoint Web Services.
One of the functions available in the library is the SPAutoComplete:
http://spservices.codeplex.com/wikipage?title=%24%28%29.SPServices.SPAutocomplete  

The SPAutocomplete lets you provide values for a Single line of text column from values in a SharePoint list. The function is highly configurable and can enhance the user experience with forms.  

To use this function you have to put it on a new item form. On one of the fields of this new item form the SPAutoComplete can be implemented and used.  

To make this work, create a new blank webpart page. Open the page in SharePoint Designer and insert a dataview on the page. At the Data Source Library select the list you want to create a new item form for and select Show Data. Select the desired fields to show on the new item form and select Insert Selected Fields as … New Item Form. Save the page and edit the page in the browser.  

Imagine:
I have a list called Customers with a Title column with the name of the customer. In another list I need these names also but I want to suggest the user who adds a new item which customers we already have and how these are spelled.  

Let’s proceed.
Edit the page in the browser and add a Content Editor Webpart, modify the webpart and show the Source Editor to add some code.

<script type="text/javascript" src="../ICTLibrary/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../ICTLibrary/jquery.SPServices-0.5.4.min.js"></script>
 

<script type="text/javascript">
    $(document).ready(function() {
        $().SPServices.SPAutocomplete({
            sourceList: "Customers",
            sourceColumn: "Title",
            columnName: "CustomerName",
            numChars: 2,
            ignoreCase: true,
            slideDownSpeed: 100,
            debug: true
        });
    });
</script>

For all available options to set please take a look at the link provided earlier, but for the important ones here.
sourceList: the list to get the suggestions from
sourceColumn: the static column name to get the suggestions from
columnName: the displayname of the field in the new item form
You can hide the content editor webpart so you only see the new item form. Go ahead and type the first letters of a customername.

Ofcourse you want to use the autocomplete function on other pages or in other webparts and not only on a new item form.
For this purpose you can use the jQuery UI plugin (http://docs.jquery.com/UI/Autocomplete, implemented in release 1.8) in combination with the SPServices library.
With the SPServices library the items can be pulled out of the desired list and column and with the auto complete function of the jQuery UI the source can be set to the values to show.
To get the desired data from the list:

            $().SPServices({
                operation: "GetListItems",
                async: false,
                listName: "Customers",
                CAMLViewFields: '<ViewFields><FieldRef/></ViewFields>',
                CAMLQuery: '<Query><OrderBy><FieldRef Name=\'Title\' Ascending=\'True\' /></OrderBy></Query>',
                completefunc: function(xData, Status) {
                    $(xData.responseXML).find("[nodeName= z:row]").each(function() {
                        itemSource[k] = $(this).attr('ows_Title');
                        k = k + 1;
                    });
                }
            });

  

And use the gathered data in the input field at the page:

            $("input#autocompletebox").autocomplete({
                source: itemSource,
                minLength: 2
            });

Where ‘autocompletebox’ is the id of the input control:

<input id="autocompletebox" />

  

And the output of this all in the browser:

To enable jQuery intellisense for Visual Studio 2008 install SP1 first, here is the link: http://www.microsoft.com/downloads/details.aspx?FamilyId=FBEE1648-7106-44A7-9649-6D9F6D58056E&displaylang=en

Restart your system, you will be asked to do.

Install the VS2008 SP1 Hotfix KB 958502: http://code.msdn.microsoft.com/KB958502/Release/ProjectReleases.aspx?ReleaseId=1736
This hotfix adds jscript editor support for “-vsdoc.js” intellisense documentation files.

When you receive the message
“None of the products that are addressed by this software update are installed on this computer. Click Cancel to exit setup.”
make sure you installed VS2008 SP1.

After installing start Visual Studio and create a new ASP.NET project.
Add a folder and put the script file and the -vsdoc.js into this folder.

You can find these files at http://docs.jquery.com/Downloading_jQuery, the -vsdoc.js can be found at the Visual Studio link.

To add a reference in Default.aspx to the script file, drag the script file from the solution explorer to the source view of the aspx file. This adds the reference to your page:
<script src=”scripts/jquery-1.4.1.js” type=”text/javascript”></script>

To use the jQuery intellisense now add script tags en start to type $., you will see the intellisense show up:

By the way, VS 2010 has built-in support for –vsdoc files.

 

September 2009 – heden

SharePoint 2010 consultant/developer

 

Buiten MOSS 2007 is Anita ook op SharePoint 2010 gebied zeer gedreven. Vanaf december 2009 is ze actief bezig met allerlei aspecten van SharePoint 2010 en heeft veel evenementen bijgewoond op SharePoint 2010 gebied waaronder Microsoft SharePoint Connections (2 dagen) in Amsterdam en SharePoint 2010 Evolution Conference (3 dagen) in Londen.

Ter voorbereiding op het examen voor developers van SharePoint 2010 heeft Anita de nieuwe onderdelen van SharePoint 2010 uitvoerig bestudeerd en zelf uitgeprobeerd middels het schrijven van code (C#). Specifieke SharePoint 2010 onderdelen welke aan de orde zijn geweest zijn sandboxed solutions, full-trust proxies, BCS, workflows, web analytics, custom rating icons, dialogs, ribbon customizations (ook contextueel), client object model, LINQ to SharePoint en taxonomy (term store). 

SharePoint 2010, Microsoft Office SharePoint Designer 2010, Visual Studio 2010, jQuery.

Accessing a SharePoint list with the jQuery SPServices is very cool and neat! But I just discovered an issue with it:

Sometimes you get a message: ‘SPServices’ is null or not an object.

Make sure you reference the ‘base’ jquery first, then the services js file:
<script type=”text/javascript” src=”ICTLibrary/jquery.3.2.min.js”></script>
<script type=”text/javascript” src=”ICTLibrary/jquery.SPServices-0.5.4.min.js”></script>

<script language=”javascript” type=”text/javascript”>
 var userName = “”;

$(document).ready(function()
{
 alert(“ready”);
 userName= $().SPServices.SPGetCurrentUser({
  fieldName: “Title”
 });

alert(userName);
 });

</script>

AND make sure you close all tags and functions properly!!

 

Branche: Zuivel

September 2009 – oktober 2010

SharePoint consultant/developer

 

Koninklijke FrieslandCampina voorziet miljoenen mensen in meer dan honderd landen verspreid over de hele wereld van melkproducten, kaas, boter en ingrediënten. Voor meer informatie: http://www.frieslandcampina.com

Dairy News & Analysis is de intranet site van FrieslandCampina’s Corporate Strategy afdeling. DNA is opgezet om goede gefundeerde beslissingen te kunnen maken in business tactieken en strategieën.

Het DNA project waaraan Anita heeft gewerkt betrof de migratie van DNA op LiveLink naar SharePoint (MOSS 2007). Binnen dit project zijn meer dan 50.000 documenten op LiveLink gemigreerd naar SharePoint met behoud van de metadata.

Anita heeft in dit project maatwerk webparts, timerjobs en een controltemplate (custom column type, cascading dropdown, multichoice, jQuery) gebouwd om de werking van de DNA applicatie optimaal op SharePoint te faciliteren.

Notificaties kunnen worden ingesteld om nieuwe items zowel per email en/of op een blackberry te kunnen ontvangen. De email en blackberry berichten zijn volledig opgemaakt volgens de FrieslandCampina huisstijl en worden op een vast tijdstip, met keuze dagelijks of wekelijks, verstuurd naar de geabonneerde. Gebruikers van het systeem kunnen zelf opgeven van welke informatie zij op de hoogte gehouden willen worden.

Met de ontwikkelde webparts kunnen verschillende dwarsdoorsneden worden gemaakt van de meer dan 50.000 documenten welke in SharePoint zijn opgeslagen. Hierbij wordt gebruik gemaakt van SharePoint Search Scopes en managed properties. De verschillende zoekmogelijkheden zijn zowel met CAML als met SharePoint Enterprise Search SQL statements geïmplementeerd, afhankelijk van de wens of de data per direct beschikbaar moet zijn voor gebruikers, bijvoorbeeld dagelijks nieuws, of dat een vertraging acceptabel is, bijvoorbeeld bij het maken van analyses waarbij veel data wordt opgevraagd.

Verder wordt de prijsontwikkeling van verschillende grondstoffen bijgehouden. Hiervoor heeft Anita een custom grafiek module geprogrammeerd, voor het gebruik in SharePoint, welke de data grafisch weergeeft. De grafiek met de ruwe data kan geëxporteerd worden als pdf of MS Excel formaat. Bij het exporteren wordt een vaste volgorde van de weergave van de gegevens gehanteerd inclusief een inhoudsopgave. De keuzes welke de gebruiker heeft gemaakt voor het genereren van de grafiek, bijvoorbeeld tijdsperiode en grondstof, worden overgenomen in het rapport. De opmaak van het rapport is geheel volgens FrieslandCampina huisstijl.

Om bij te houden hoeveel en welke soorten gegevens er in het systeem gebruikt wordt is er een timerjob ontwikkeld welke periodiek aantallen van bijvoorbeeld type documenten en andere gebruikte bronnen verzamelt in een lijst. Met behulp van jQuery en SPServices worden de gegevens overzichtelijk aan de gebruiker gepresenteerd.

SPServices in combinatie met jQuery is veelvuldig gebruikt om gegevens overzichtelijk aan gebruikers te presenteren, bijvoorbeeld een aangepaste weergave van een lijst met ondernemingen welke in het systeem aanwezig zijn en het tonen en verbergen van tabbladen op basis van aanwezige gegevens. In het systeem zijn ook TV Commercials te raadplegen middels een geavanceerd zoekscherm opgebouwd met SPServices en jQuery.

Het ontwikkelde maatwerk is in features in combinatie met solutions opgeleverd.

Naast dit project, wat de hoofdopdracht was, heeft Anita gewerkt aan andere SharePoint zaken als het uitbreiden van het Content Query webpart en aanpassen van de bijbehorende xslt, het maken van een newsticker (à la CNN, tv) op basis van een extern aangeboden rss feed en het maken van aspx pagina’s met dataviews en connected webparts met behulp van SharePoint Designer. 

Voor een interview over het DNA project voor het internet personeelsblad Spark, klik hier.

Microsoft Office SharePoint Server 2007, Microsoft Office SharePoint Designer 2007, Visual Studio 2008, javascript, jQuery, SPServices, xslt, Visual Source Safe, MS Chart Controls