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>


12 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
  5. That's amazing Mario!! Good job!
    Following this example, could be possible to force value on a custom field depending of a value in another custom field. Example, imagine that on this example that you exaplined I want to change the value on Workplace depending of Employee value. Thanks a lot man!!

    ReplyDelete
    Replies
    1. Yes, it is possible. You can set value in textbox with similar javascript, but you must save changes before you leave page if you want that value to be saved. But, there is a different solution, if you can do this in code behind, there is a solution in code behind:
      http://sharepoint1on1.blogspot.com/2013/01/project-server-update-custom-lookup.html

      Delete
  6. will this work in project 2013? when I try this I get the following messages
    "Cannot retrieve properties at this time" and then "Cannot save your changes". Any idea?

    ReplyDelete
    Replies
    1. Try to debug the solution and see on which line does it throw exception.

      Delete
    2. I don't see any issues with the solution, it throws an error when I add this code to the source editor on the HTML webpart which I add in PDP page for project server 2013.

      Delete
    3. Well, I don't know how to help you since I don't have Project Server 2013 and I can't replicate this error. Try asking question on Microsoft forum

      Delete