Posts Tagged ‘SharePoint Designer 2007’

jQuery SPServices and autocomplete

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:

FrieslandCampina

 

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

Berg Project Support

Berg Project Support

Branche: Advies

November 2008 – heden, enkele uren per week

SharePoint consultant

Berg Project Support levert SharePoint oplossingen aan bedrijven ter ondersteuning en inrichten van diverse projecten. Anita geeft adviezen en uitleg over de inrichting en werking van diverse onderdelen binnen SharePoint (WSS), zoals webparts, rechten management en workflows.

WSS 3.0, Microsoft Office SharePoint Designer 2007

Loparex

Logo Loparex

Branche: Release liners

December 2008

   Trainer

Binnen Loparex wordt gewerkt met MOSS 2007. Om meer inzicht te verkrijgen in de werking van workflows binnen SharePoint heeft Anita een 1-daagse training verzorgd aan vier medewerkers van Loparex. In deze training zijn de principes en werking van workflows uitgelegd en zijn er diverse opdrachten gemaakt door de deelnemers om hands-on ervaring op te doen.

MOSS 2007, Microsoft Office SharePoint Designer 2007