Solved

Use spservices to change text color

Posted on 2013-01-14
11
588 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
PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

 
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
 
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

PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Work Over Net is a new and very powerful collaboration product. With its new easy interface it is becoming very competitive to other similar products like webex and office interactive. WON 2010 have the standard business tools needed for multi-offic…
I recently came across an issue with a MOSS 2007 deployment where access into some sub-sites were denied, even for the MOSS farm administrators. A bit of background to the setup of this MOSS farm; this was a three server setup, consisting of a fr…
This Micro Tutorial will teach you how to censor certain areas of your screen. The example in this video will show a little boy's face being blurred. This will be demonstrated using Adobe Premiere Pro CS6.
Along with being a a promotional video for my three-day Annielytics Dashboard Seminor, this Micro Tutorial is an intro to Google Analytics API data.

809 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