Solved

Use spservices to change text color

Posted on 2013-01-14
11
608 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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 Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Sharepoint 2010 Auditing for One Site 3 75
Sharepoint KB 2 99
Mirror a Sharepoint 2007 datasheet list? 8 46
Drag & Drop Error 5 33
We had a requirement to extract data from a SharePoint 2010 Customer List into a CSV file and then place the CSV file into a directory on the network so that the file could be consumed by an AS400 system. I will share in Part 1 how to Extract the Da…
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…
In a recent question (https://www.experts-exchange.com/questions/29004105/Run-AutoHotkey-script-directly-from-Notepad.html) here at Experts Exchange, a member asked how to run an AutoHotkey script (.AHK) directly from Notepad++ (aka NPP). This video…
Attackers love to prey on accounts that have privileges. Reducing privileged accounts and protecting privileged accounts therefore is paramount. Users, groups, and service accounts need to be protected to help protect the entire Active Directory …

710 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