Monday, August 5, 2013

Project Server - Set Custom Field as readonly on PDP using jQuery

 In Project Server 2010, on Project Detail Page (PDP) user has no option for setting certain Custom Field as readonly. Sometimes, field needs to be set as readonly depending on some other condition or depending on value of another field.

But, there is option for inserting javascript (and jQuery) directly on the page, and, with javascript, you can do almost anything.

SCENARIO:

Let's say that we have one Custom Field called "Employee" that reads values from Lookup Table (values "Yes" and "No") and another Custom Field (plain text field) called "Work Place".

Let's say that we want to set field "Work Place" as readonly if user in field "Employee" selects value "No".


First, HTML Web Part needs to be added on Project Detail Page (Site Actions --> Edit Page --> Add a Web Part).


Just copy the following script into that Web Part that executes our scenario:


<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-migrate-1.0.0.js" type="text/javascript"></script>
<script>


$(document).ready(function(){

        //first, we need to attach "onchange" event to "Employee" field, so each change of "Employee"

        //field field will  trigger our function
        var projectType =document.body.getElementsByTagName("INPUT");
        for (i=0; i < projectType.length;++i)
        {
            if(projectType[i].type=="text")
            {
                if(projectType[i].title=="Employee")
                {
                    projectType[i].setAttribute("onchange", function(){MakeReadOnly();})
                }
            }
        }

        //this call triggers on every refresh of the PDP
        MakeReadOnly()
});

function MakeReadOnly()
{     

    var inputs=document.body.getElementsByTagName("INPUT");   

    var fieldWorkPlace;
    var isEmployee = true;

    for (i=0; i < inputs.length;++i)
    {
        if(inputs[i].type=="text")
        {
            if(inputs[i].title=="Employee")
            {
                if(inputs[i].value == "No")
                {
                       isEmployee = false;
                }
            }
           
            if(inputs[i].title=="WorkPlace")
            {
                fieldWorkPlace= inputs[i];
            }
        }
    }

   
    //if "No" is selected, then disable field
    if(isEmployee == false)          
         fieldWorkPlace.disabled = true;
    else
         fieldWorkPlace.disabled = false;

 }

</script>


6 comments:

  1. This comment has been removed by a blog administrator.

    ReplyDelete
  2. Why you removed my Comment Sir? Am i fake? No. I,m Original Follower of Blogs.

    ReplyDelete
  3. Sorry Juanid, I removed it automatically because I thought that it is spam (since it wasn't related to the topic of the post). But, I've visited your blog afterwards and I've found some very useful tips there and I am visiting your blog on a daily basis. Thank you for your comment and all your help. I can't restore your deleted comment.

    ReplyDelete
    Replies
    1. Thank a lot Mario! I usually visit your blog. But I had noticed your reply. You have great content. I know it's not my field. But I,m interested to learn languages as well. And I think your best one. Well, why don't you think to visit my new blog SEO and Blogging and comment on your favorite SEO tips. I,ll be grateful to see you there. I,ll wait for you Mario!
      Regards
      Junaid Raza

      Delete
  4. Great Mario!
    Your script is working properly. Hope to see your again soon with a wonderful content.

    ReplyDelete