Changing colors of field contents

  • In our person screen, I'm trying to figure out how to change the colors of the contents of the Status field based on the field data.  For instance, if a status is set to Inactive, I want the word "Inactive" to be red, and if it's set to "Active" I want the word "Active" to be green.  I've seen tips on how to change the colors of the actual title of the field using translations, but I can't figure out how to change the color of the contents.  I'm guessing it's an OnCreate script, but I'm not sure of the code to use.

  • Hi dgooge,

    This is possible by adding some client-side JavaScript to the custom content of the person summary screen.

    I have put some sample code below. The code adds a new function for when the page is loaded. This function will retrieve the hidden form field value for the person status, and change the Cascading Style Sheet (CSS) attributes of the containing <span> tag accordingly.

    I hope this helps.

    regards,

    Eoin

    -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=

    
    
    <script type="text/JavaScript">
      // when the page is fully loaded, call the function below
      window.attachEvent("onload", checkStatus);
      
      // this function will check the value of the person status field
      function checkStatus()
      {        
        // check that the status field is on the screen
        if (document.getElementById("_HIDDENpers_status"))
        {  
          // get the value of the person status from the hidden form field
          var fieldVal = document.getElementById("_HIDDENpers_status").value;
          
          if (fieldVal == "Active")
          {
            // set the CSS attributes of the span tag
            document.getElementById("_Datapers_status").style.color = "green";
            document.getElementById("_Datapers_status").style.fontWeight = "bold";
          }
          else if (fieldVal == "Inactive")
          {
            // set the CSS attributes of the span tag    
            document.getElementById("_Datapers_status").style.color = "red";
            document.getElementById("_Datapers_status").style.fontWeight = "bold";
          }    
        }
      }
    </script>
    
    
    
  • That worked like a charm, I greatly appreciate it.  I'm excited about this new user community and hope it does well.  It is very difficult to find active forums or messageboards for Sage CRM help and advice.

  • Glad to hear that :)

  • HELP!!!

    I've got this message: pers_status jscript error: Syntaxfehler Line: 2 Char: 0 on top

    AND can't go back to the "Person Status" to remove the script. There are a lot of script on top of the page, wich i can't remove because of not getting to the pers_status field:

     

     

  • The red box at the top of the page would indicate that the script is being run server-side, rather than client-side. Was this script entered in the createscript or validatescript boxes?

    It should be entered into the custom context box as it is a client side script. If you can't remove the script through customisations, you might need to update it directly on the custom_screens table and refreshing the metadata.

  • I placed the script into the right field. Was that wrong?

  • Hi,

    Yes - that's the "Create Script", which is run on the server. The middle one is the OnChangeScript which is run client side by the browser, and the bottom one is the Validate Script which is run on the server. These scripts are all linked to specific fields.

    The textbox beneath the list of fields is the Custom Content, which is run clientside. This is not linked to any specific field, and can take any client side content (HTML, CSS, JavaScript etc).

    regards,

    Eoin

  • ok, i've got it! Thanx!

    could you please tell me, how to modify the script to colorize the status-field not for person but for company?

  • You should be able to just do a find and replace in that example script to change pers_status to comp_status.  

  • As dgooge says, a search and replace should work fine.

    I would recommend installing the Internet Explorer Developer Toolbar as this makes it much easier to inspect the elements on a web-page, so you can see their IDs, attributes etc.

  • Thank you all for your helpful hints! :-)