SharePoint – Using JQuery & SPServices

January 24, 2015

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.

image

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

image

It’s got some millage but still going strong. Smile

image

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.

image

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 !

image

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.

January 22, 2015

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

image

2. Next Convert the field

image

Change the dropdown to a Text Box now we can.

clip_image002

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

January 22, 2015

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

image

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

image

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.

image

But as a Display Item Form from the menu.

clip_image002

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.

image

Choose for the list you need.

clip_image002[4]

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


SharePoint – JQuery Calendar Control

June 27, 2014

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

image

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

image

Well the JQuery Calendar control can handle this and much more

Here is how it will look at the end.

image

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 2010 Filter a List, using an input box

December 8, 2013

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.

image

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.

image

The result will look like this.

image

When you save the page you can run some tests.

image

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

November 22, 2013

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

image

But this opens up the ugly Standard Form.

image

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

image

Solution is simple :

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

image

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

May 14, 2013

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.

image

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.

image

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.

image

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

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

image

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 !