Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Use spservices to change text color

Posted on 2013-01-14
11
Medium Priority
?
624 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
NFR key for Veeam Backup for Microsoft Office 365

Veeam is happy to provide a free NFR license (for 1 year, up to 10 users). This license allows for the non‑production use of Veeam Backup for Microsoft Office 365 in your home lab without any feature limitations.

 
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

Free learning courses: Active Directory Deep Dive

Get a firm grasp on your IT environment when you learn Active Directory best practices with Veeam! Watch all, or choose any amount, of this three-part webinar series to improve your skills. From the basics to virtualization and backup, we got you covered.

Question has a verified solution.

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

When installing SharePoint 2010 RTM I came across a strange error, I was getting timeouts during the installation. I searched the web and found the best solution to be found here (http://social.msdn.microsoft.com/Forums/en-US/sharepoint2010genera…
I thought I'd write this up for anyone who has a request to create an anonymous whistle-blower-type submission form created using SharePoint 2010 (this would probably work the same for 2013). It's not 100% fool-proof but it's as close as you can get…
Want to learn how to record your desktop screen without having to use an outside camera. Click on this video and learn how to use the cool google extension called "Screencastify"! Step 1: Open a new google tab Step 2: Go to the left hand upper corn…
This lesson discusses how to use a Mainform + Subforms in Microsoft Access to find and enter data for payments on orders. The sample data comes from a custom shop that builds and sells movable storage structures that are delivered to your property. …
Suggested Courses

885 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