SharePoint – Using JQuery & SP Services

If you are developing SharePoint you just can’t get around JQuery and the marvelous SPServices. Especially if you are dealing with SharePoint Web Services.

There are many hits on the internet if you type in these 2 keywords. But nevertheless there are very few post explaining you how to and which approach and tools can help you in your project.

Let’s say you you want to retrieve some Document ID’s & Names from documents linked into a list Form Body Text.

$(document).ready(function(){

$.fn.SPServices({
    operation: "GetListItems",
    async: false,
    webURL: "/webs/sitecollection/site",
    listName: "YourListName",
    CAMLViewFields: "",
    CAMLQuery: "1503",
    completefunc: function (xData, Status) {

    // Debug
    //alert(xData.responseText);

var liHtml = ""
      $(xData.responseXML).SPFilterNode("z:row").each(function() {

      //  $("#tasksUL").text(xData.responseText); // Debug info 

      liHtml =  "</pre>
<ul>
	<li>" + $(this).attr("ows_FileLeafRef") + "</li>
</ul>
<pre>
";
         $("#tasksUL").append(liHtml);
      });
    }
 });

});</pre>
<ul id="tasksUL"></ul>
<pre>

The code above will do so. But the mystery is which is the ”ows_xxx” XML attributes you are looking for to get the File Name appearing in your Form.

Solution :

Uncomment this section in the code :

$(“#tasksUL”).text(xData.responseText);

And comment this line :

// liHtml =  “<li>” + $(this).attr(“ows_FileLeafRef”) + “</li><br/>”;

This will retrieve the bare output of the return SOAP Envelope in your form.

You can select it out of your Form, and paste it in for example XML Notepad.

It’s got some millage but still going strong.

Here you can see all the Nodes and Attributes in the tree structure.

The one we are interested in is the attribute ows_FileLeafRef in the node z:row

That’s where the document ID and Name appears in.

Once we use that in our code, the result is looking good.

I got the 2 document references from a Document Library somewhere else in SharePoint using SP Web Services !

Hopefully this can clear some mist on how to get all the missing mystery information and parameters correct.

SharePoint – Convert Drop Down Box in a New Item Form to Text Box.

It is possible to Convert drop down box in a NEW form to Text Box.

Even if the list field type remains a Dropdown Box.

This can only be achieved if in a CUSTOM List Form ! Not on a standard List Form created from the menu.

1. Create a Custom Form

2. Next Convert the field

Change the dropdown to a Text Box now we can.

3. Set the value on load.

Now you can set the field value using a Query String Parameter value.

<!-- Change to Parameter Variable @HeaderID -->
<asp:TextBox runat="server" id="ff2{$Pos}" text="{@Sample_Header}" __designer:bind="{ddwrt:DataBind('i',concat('ff2',$Pos),'Text','TextChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@Sample_Header')}" />

<!-- Change to Variable $HeaderID -->
<asp:TextBox runat="server" id="ff2{$Pos}" text="{$HeaderID}" __designer:bind="{ddwrt:DataBind('i',concat('ff2',$Pos),'Text','TextChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@Sample_Header')}" />

See the code is slightly edited by replacing the variables

text=”{@Sample_Header}”  to text=”{$HeaderID}”

 

This is not possible if we use the original Dropdown field (at least in an easy way).

SharePoint – Query String Parameters

In your development project you might need at some point in time to create a Query String Parameter.

But there are some challenges if you want to pass this to a Form Variable !

Here we go :

1. Create a Query String Parameter any string is fine.  and construct your URL.

http://server.com/Site/Lists/ListName/NewForm.aspx?HeaderID=23

2. Create a JQuery function for the receiving party.

$(document).ready(function() {

var lastId = $().SPServices.SPGetLastItemId({
    listName: "Sample_Header"});

var nextId = Number(lastId) + 1;
 //alert("Last ID " + lastId);

    $("#Details").click( function()
           {
                      alert("Next ID " + nextId );
     var URL = '/sites/Lists/Sample/NewForm.aspx?HeaderID=' + nextId ;
     alert ('We go to this ' + URL);
    window.location.href = URL;
           });
       });    

In this case we will use the parameter to filter a Data View Web Part. So add the script in the receiving Form to intercept is and pass it on to a Data View Parameter

3. Create the DVWP Parameter

In SharePoint Designer create a new Parameter

We call it as well HeaderID and refer to the Query String Parameter called HeaderID.

IMPORTANT :

This does NOT work for a Item Display Form a DVWP ?

Solution is to add this in the standard DISPLAY form NOT as a CUSTOM FORM.

But as a Display Item Form from the menu.

Don’t ask me why ?

For the other Forms (Edit and New) it does not seem to be a problem.

Best always test both ways in case of problems, anyhow.

In case you need to do some manual changes to the Forms.

Don’t use the Insert NEW Item Form from the MENU. Otherwise it goes wrong ?

Choose CUSTOM LIST FORM instead.

Choose for the list you need.

So bottom line is that it is not so straight forward, to get the ball rolling

SharePoint – JQuery Calendar Control

In SharePoint out of the box the calendar control is quite basic and rigid.

Giving an example here : let’s say you are working in an international environment and you need to change the date Format depending on the user region.

Or you want to change the week start day not being a Sunday but a Monday for example

Well the JQuery Calendar control can handle this and much more

Here is how it will look at the end.

And this is how to get there :

First you need to get the JQuery libr. installed. But that’s obvious.

Next you need to remove the original calendar image.

Next you need to bind a .Change Event to the input box.

This is only a snippet out of the full code but it should be enough to get you going

<script type="text/javascript">
/* Remove "From" Calendar Image link */
$('#ctl00_m_g_...  ').each(function () {
    $(this).replaceWith($(this).text());
});
/* Remove "To" Calendar Image link */
$('#ctl00_m_g_...   ').each(function () {
    $(this).replaceWith($(this).text());
});

/* Set Date Field "To" based on the Date Field "FROM", Change Event*/
$('#ctl00_m_g_...   ').datepicker(
{
        dateFormat: 'dd/mm/yy',
        firstDay: 1,
        onSelect: function(dateText, inst) 
{
$("[name='ctl00$m$g_...   ']").val(dateText);
    }
});

/* DatePicker "To" Field */
$('#ctl00_m_g_...   ').datepicker(
{
        dateFormat: 'dd/mm/yy',
        firstDay: 1, 
        onSelect: function(dateText, inst) 
{
        $(this).val(dateText);
 }

});
</script>

Enjoy !

SharePoint – Filter a List, using an Input Box

Sometimes you need to filter a SharePoint List for some condensed view of the data.

There are multiple ways of doing this server side or client side.

The easiest way is to use a Jscript and a CEWP.

For testing proposes you can create a new Web Part Page.

First add a CEWP and next the List which you want to filter.

 

In the CEWP you add this Jscript. plus the input box and the button :

<p>Search on Name: <input id="textboxFilter" size="30">
<input onclick="FilterList();" value="Search" type="button"></p>
<p><em>Use <span class="ms-rteForeColor-2">*</span>
as wildcard</em></p>

<script language="javascript" type="text/javascript">
function FilterList(){
var url=$(location).attr('href').split("?")[0] + "?";

    var sQuery=$("#textboxFilter").val();
    if(sQuery!=""){
       url=url + "FilterName=Title&amp;FilterMultiValue=" + sQuery
       $(location).attr('href',url);
    }
    else {
       $(location).attr('href',url);
    }
}</script>

This will use the value of the input box and construct a QueryString that will filter the List.

The result will look like this.

When you save the page you can run some tests.

If it works fine you can just add a CEWP to the original List.aspx and add your code there to benefit from all the list features, like workflows and custom menu buttons etc.

Enjoy!

SharePoint – Search results DispForm.aspx Redirect

When you do a search in SharePoint 2010 you get the results listed with a link to the Default DispForm.aspx.

But this opens up the ugly Standard Form.

While you might have put a lot of efforts in designing a Custom Form.

Solution is simple :

Add a redirect to the Standard Form to the Custom Form and you are done. Using the jQuery().SPServices library.

Code is here :

<script language="javascript" src="/sites/Scripts/jquery.SPServices-0.7.2.min.js"></script><script type="text/javascript">

$.noConflict();

$(document).ready(function(){
// alert(jQuery().SPServices.Version());

// Get Activity ID from URL
   var queryStringVals = jQuery().SPServices.SPGetQueryString();
   var ID = queryStringVals["ID"];

//alert (ID);

var URL = 'https://www.yoursite.com/ICT/Lists/HelpDesk/DispForm.aspx?ID=' + ID;

//alert ('We go to this ' + URL);

window.location.href = URL;
});
</script>

Enjoy !!

SharePoint – Computer HW & SW Inventory

For many years, up till now I was spoiled by an Exchange Forms solution build by … can’t remember who … to grab the Computer details over the network, and save this in Outlook / Exchange.

Now that Exchange forms are not available by default anymore in the newer releases. I had to switch over to SharePoint 2010.

So I converted this to a custom SharePoint List.

When opening you get a pop-up message if the IE settings are not set properly.

Once opened just press the Get Info button, when the PC / Server is online you see the button color appear green else it goes red.

You get all the needed info from the remote hosts.

I added some conditional formatting to highlight disk capacity thresholds in red.

Save it and then get the next one, no firewall issues.

Our data is saved in a hosted SharePoint in the cloud, so I can access all the information easily even on my mobile device.

So migrating my old school tool made my life quite easy !

All is working using JavaScript to load all the Hard and Software information online and remote if needed.

Recently I migrated to SharePoint Online click here

SharePoint – JQuery is Null or Not an Object – Error

If so you are sure there is probably a conflict of JQuery objects in 1 SP form.

In this case SharePointBoost Cross-Site Lookup also uses a JQuery object to have their webpart function properly.

http://www.sharepointboost.com/cascaded-lookup.html

To solve the error conflict, you have to use the $.noConflict() method.

http://api.jquery.com/jQuery.noConflict/

Just add an extra line :

$.noConflict();
jQuery(document).ready(function($)
Code here ...

And you can start mixing JQuery Objects in 1 SharePoint form.

SharePoint – JQuery Scripts Examples

Lock input field and change background color

<br>/* --- Doc ready ---*/</p> <p>$(document).ready(function() {<br>/* --- End doc ready ---*/<br>/* --- Set Subject Read Only - Grey Color ---*/</p> <p>$("input[title='Subject']").attr("readonly","true").css<br>('background-color','#ccc').width(370);<br>});

Set a ‘To’ date field based on the ‘From’ date field. As you can see you need to find the proper field ID which is a long unique refference.

<br>/* Set Date Field "TO" based on the Date Field "FROM" */</p> <p>var sFrom= $("[name='ctl00$m$g_2a1915de_8d5b_445a_9443_...<br>Field$DateTimeFieldDate']").val();</p> <p>$("[name='ctl00$m$g_2a1915de_8d5b_445a_9443_2b18a9b32a7...<br>Field$DateTimeFieldDate']").val(sFrom);<br>;

The same as above but then on Change Event of the “From” date Field

<br>/* Set Date Field "TO" based on the Date Field "FROM" Change Event*/</p> <p>$('#ctl00_m_g_2a1915de_8d5b_445a_9443_2b18a9b32a70_ff3...<br>1_ctl00_ctl00_DateTimeField_DateTimeFieldDate').datepicker({<br>onSelect: function(dateText, inst)<br>{<br>$("[name='ctl00$m$g_2a1915de_8d5b_445a_9443_2b18a9b32a...<br>70$ff41$ctl00$ctl00$DateTimeField$DateTimeFieldDate']").val(dateText);<br>}<br>});<br>

Later I will add the print screen of how it looks :

SharePoint -JQuery Tools

Recently I needed to break out of the limited features that SharePoint had to offer out of the box. Condition was not to start programming, and especially not to change anything in the Backend of the SP Server.

So the solution was to turn to JScript, it runs client side !

Figure 1. Client Object Model Architecture

JavaScript Class Library

http://msdn.microsoft.com/en-us/library/ee538253(v=office.14).aspx

But with nearly ever touched JScript this would take me a while to get into it.

So the final solution came for the JQuery Library.

How to install the JQuery library

http://jquery.com/

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensbility, jQuery has changed the way that millions of people write JavaScript.

And the related SharePoint specific derivate tools, like :

SPFF Field assistant (needs JQuery Libr.)http://spff.codeplex.com/releases/view/28099

Dynamic Forms (needs JQuery Libr.)http://sharepointjavascript.wordpress.com/2012/05/29/dynamic-forms-for-sharepoint-production-release/

SPServices on Codeplex (needs JQuery libr.)http://spservices.codeplex.com/

SPAPI Webservices Libr (needs JQuery libr.)http://ekoncis.blogspot.be/2011/05/sharepoint-query-with-spapi.html

Jpoint API Framework Client side http://jpoint.codeplex.com/releases/view/37224

http://www.sharejpoint.com

Some examples in a next post.