?
Solved

Use spservices to change text color

Posted on 2013-01-14
11
Medium Priority
?
617 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
Office 365 Training for Admins - 7 Day Trial

Learn how to provision tenants, synchronize on-premise Active Directory, implement Single Sign-On, customize Office deployment, and protect your organization with eDiscovery and DLP policies.  Only from Platform Scholar.

 
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

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

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

If you create your solutions on SharePoint sooner or later you will come upon a request to set  permissions of the item depending on some of the item's meta-data - the author, people assigned as approvers, divisions, categories etc. The most natu…
SharePoint Designer 2010 has tools and commands to do everything that can be done with web parts in the browser, and then some – except uploading a web part straight into a page that is edited in SPD. So, can it be done? Scenario For a recent pr…
In this video, Percona Solutions Engineer Barrett Chambers discusses some of the basic syntax differences between MySQL and MongoDB. To learn more check out our webinar on MongoDB administration for MySQL DBA: https://www.percona.com/resources/we…
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…

719 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