Solved

Use spservices to change text color

Posted on 2013-01-14
11
562 Views
Last Modified: 2013-05-21
Hello All,

I am using SharePoint 2010

The following code works without any error. It highlights the text of the item based on the value in the status column.  If the status is "Complete", "In-Progress" or "Not Started", the text gets color.  For this to work though, the title column will have to be on the page.  I don't want the title on the page.

<script language="javascript" src="/CNportal/js/jquery-1.8.2.js" type="text/javascript"></script><script language="javascript" src="/CNportal/js/jquery-1.8.2.min.js" type="text/javascript"></script><script type="text/javascript">





$(function(){
            $("td.ms-vb2").each(function(){
                var that = $(this);
                
                      if (that.text() == "Complete"){
                            that.parent("tr").children("td").css("color", "#0000FF");
                }else if (that.text() == "In-Progress"){
                            that.parent("tr").children("td").css("color", "#008000");
                }else if (that.text() == "Not Started"){
                            that.parent("tr").children("td").css("color", "#FF0000");
                }
                
            });
        });</script>

Open in new window



I would like to change the color of the text based on the value I get from the status column using spservices "Getlistitems" operations.  Here's what I have so far:

<script language="javascript" src="/CNportal/js/jquery-1.8.2.js" type="text/javascript"></script><script language="javascript" src="/CNportal/js/jquery-1.8.2.min.js" type="text/javascript"></script><script type="text/javascript">




$().SPServices({
    operation: "GetListItems",
    async: false,
    listName: "Deliverables",
    CAMLViewFields: "<ViewFields>" +
                       "<FieldRef Name='Status' />" +
                    "</ViewFields>",
    CAMLQuery: "<Query>" +
                  "<OrderBy>" +
                     "<FieldRef Name='GovtLead' Ascending='False' />" +
                  "</OrderBy>" +
               "</Query>",

    completefunc: function (xData, Status) {
      $(xData.responseXML).SPFilterNode("z:row").each(function() {
       var that = $(this);
       var status = $(this).attr("ows_Status");
 
       if (status == "Complete")
       {
            alert("Complete");
       }
    });
   }      
  });</script>

Open in new window



Here's the error I get:

Object doesn't support this property or method.

Any help would be much appreciated.

Thanks!
0
Comment
Question by:Isaac
  • 7
  • 4
11 Comments
 
LVL 44

Expert Comment

by:Rainer Jeschor
ID: 38775420
Hi,

I would like to test your script but have to wait to get my SP2010 dev machine.

In the meantime you might want to change your jQuery calls to not use "$" as jQuery ref but use it with no-conflicts state "jQuery" (because SP 2010 already loads an older version of jQuery).
See here:
http://www.stephanrocks.com/2011/10/05/_spbodyonloadfunctionnames-in-sharepoint-vs-jquerys-document-ready/

Please stay tuned

HTH
Rainer
0
 
LVL 5

Author Comment

by:Isaac
ID: 38775648
I still get the same error.

<script language="javascript" src="/CNportal/js/jquery-1.8.2.js" type="text/javascript"></script><script language="javascript" src="/CNportal/js/jquery-1.8.2.min.js" type="text/javascript"></script><script type="text/javascript">


jQuery().SPServices({
    operation: "GetListItems",
    async: false,
    listName: "Deliverables",
    CAMLViewFields: "<ViewFields>" +
                       "<FieldRef Name='Status' />" +
                    "</ViewFields>",
    CAMLQuery: "<Query>" +
                  "<OrderBy>" +
                     "<FieldRef Name='GovtLead' Ascending='False' />" +
                  "</OrderBy>" +
               "</Query>",

    completefunc: function (xData, Status) {
      jQuery(xData.responseXML).SPFilterNode("z:row").each(function() {
       var that = jQuery(this);
       var status = jQuery(this).attr("ows_Status");
 
       if (status == "Complete"){
                            that.parent("tr").children("td").css("color", "#0000FF");
                }else if (that.text() == "In-Progress"){
                            that.parent("tr").children("td").css("color", "#008000");
                }else if (that.text() == "Not Started"){
                            that.parent("tr").children("td").css("color", "#FF0000");
                }
    });
   }      
  });</script>

Open in new window


The error points to the following line:
jQuery().SPServices({

same as before
0
 
LVL 44

Expert Comment

by:Rainer Jeschor
ID: 38775706
Hi,

I tried to reproduce your situation and as always: IWOMM.

What do you want to achieve with the second code?
Where do you want to change the color?
There is just an alert output (which I get twice as I have to list items with status completed).

The following code works on my dev machine (using the OOTB tasks list):
<script type="text/javascript" src="/sites/ee/Assets/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="/sites/ee/Assets/jquery.SPServices-0.7.2.min.js"></script>
<script type="text/javascript">
jQuery().SPServices({
    operation: "GetListItems",
    async: false,
    listName: "Tasks",
    CAMLViewFields: "<ViewFields>" +
                       "<FieldRef Name='Status' />" +
                    "</ViewFields>",
    CAMLQuery: "<Query>" +
                  "<OrderBy>" +
                     "<FieldRef Name='Priority' Ascending='False' />" +
                  "</OrderBy>" +
               "</Query>",

    completefunc: function (xData, Status) {
      $(xData.responseXML).SPFilterNode("z:row").each(function() {
       //var that = $(this);
       var status = $(this).attr("ows_Status");
 
       if (status == "Completed")
       {
            alert("Complete");
       }
    });
   }      
  });
</script>

Open in new window


From your code:
- Please ensure that you load the jquery library only once (it does not make sense to load both min and full version)
- Ensure that the check on "Complete" is correct (OOTB status list has "Completed")

Perhaps you might want to add a screenshot and/or a more detailed explanation.

HTH
Rainer
0
 
LVL 44

Expert Comment

by:Rainer Jeschor
ID: 38775710
Sorry,
just saw your comment.
In your second script you did not reference the SPServices library.
Perhaps thats the issue?

HTH
Rainer
0
 
LVL 5

Author Comment

by:Isaac
ID: 38775998
Thanks!

What do you think about the code I have?  I don't get any errors but it's also not changing the text-color.

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



jQuery().SPServices({
    operation: "GetListItems",
    async: false,
    listName: "Deliverables",
    CAMLViewFields: "<ViewFields>" +
                       "<FieldRef Name='Status' />" +
                    "</ViewFields>",
    CAMLQuery: "<Query>" +
                  "<OrderBy>" +
                     "<FieldRef Name='GovtLead' Ascending='False' />" +
                  "</OrderBy>" +
               "</Query>",

    completefunc: function (xData, Status) {
      jQuery(xData.responseXML).SPFilterNode("z:row").each(function() {
       var that = jQuery(this);
       var status = jQuery(this).attr("ows_Status");
 
       if (status == "Complete"){
                            that.parent("tr").children("td").css("color", "#0000FF");
                }else if (that.text() == "In-Progress"){
                            that.parent("tr").children("td").css("color", "#008000");
                }else if (that.text() == "Not Started"){
                            that.parent("tr").children("td").css("color", "#FF0000");
                }
    });
   }      
  });</script>

Open in new window

0
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 5

Author Comment

by:Isaac
ID: 38776010
I did an alert on status, alert(status) and that works so I think the following code is wrong:

  that.parent("tr").children("td").css("color", "#0000FF");
0
 
LVL 5

Author Comment

by:Isaac
ID: 38776040
So I think the problem is might be "that".

Any ideas?
0
 
LVL 44

Expert Comment

by:Rainer Jeschor
ID: 38777122
Hi,
with "that" you are referring to the response document from the SPService call, and nothing on the page.
To you want to create a complete new output?
Or do you want to change the color of an existing e.g. list web part?
This might not be possible as you have no "link / relation" from the SPService result to the list view web part.
Can you please explain, what output (table) you want to colorize? Perhaps you can attach a screenshot and the existing HTML output of the page (makes jQuery selectors easier to build ;-))

HTH
Rainer
0
 
LVL 5

Author Comment

by:Isaac
ID: 38780028
As you can see from the image below, the color of text is based on the value of the Status column.  I do not want the status column to show, that's why I though spservices would hellp.  I would query the list and color the text of a row based on the "ows_status".  Hope that makes sense.

color code list
0
 
LVL 5

Accepted Solution

by:
Isaac earned 0 total points
ID: 39171089
I finally resolved it by just using all jquery.

var statusColor="";
	$(xData.responseXML).find("z\\:row").each(function() 
	{  	
	
		if ($(this).attr("ows_Status")=="Complete")
		{
				statusColor="complete";
		}
		else if ($(this).attr("ows_Status")=="Not Started")
		{
				statusColor="notStarted";
		}
		else if ($(this).attr("ows_Status")=="In Progress")
		{
				statusColor="inProgress";
		}
	//alert($(this).attr("ows_Status"));
	//alert(statusColor);
		$("#DeliverableTbl").append("<tr class='"+statusColor+"'><td>Edit</td><td>"+parseInt($(this).attr("ows_CNID"))+"</td><td>"+$(this).attr("ows_FY")+"</td><td>"+$(this).attr("ows_Activity")+"</td><td>"+$(this).attr("ows_Project")+"</td><td>"+$(this).attr("ows_Product")+"</td><td>"+$(this).attr("ows_GovernmentLead")+"</td><td>"+$(this).attr("ows_PerformerPOCs")+"</td><td>"+$(this).attr("ows_Description")+"</td><td>"+$(this).attr("ows_StartDate")+"</td><td>"+$(this).attr("ows_EndDate")+"</td><td>"+$(this).attr("ows_CompletionDate")+"</td><td>"+$(this).attr("ows_Planned")+"</td><td>"+$(this).attr("ows_StaffMonths")+"</td><td>"+$(this).attr("ows_Function")+"</td><td>"+$(this).attr("ows_Status")+"</td></tr>");
	});

Open in new window

0
 
LVL 5

Author Closing Comment

by:Isaac
ID: 39183767
It worked
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

I used to be SharePoint evangelist in our company, so my Outlook always full of questions about how to do this, or where I can find that. One day I found such an email with the following question: "how to attach 3-State workflow (one of the workflow…
There is one common problem that all we SharePoint developers share: custom solution deployment. This topic can't be covered fully in this short article, so all I want to do in this one is to review it from a development-to-operations perspectiv…
Sending a Secure fax is easy with eFax Corporate (http://www.enterprise.efax.com). First, Just open a new email message.  In the To field, type your recipient's fax number @efaxsend.com. You can even send a secure international fax — just include t…
In this tutorial you'll learn about bandwidth monitoring with flows and packet sniffing with our network monitoring solution PRTG Network Monitor (https://www.paessler.com/prtg). If you're interested in additional methods for monitoring bandwidt…

707 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now