This project has moved. For the latest updates, please go here.

Making Read-Only fields issue.

Jul 19, 2013 at 3:12 AM
Hi Experts,

Sorry to bother you with this very simple issue. I just want to make some fields Read-Only on my new customized form but I cant seem get to this working. I have this below code on the CEWP of my new form. Is there something I could be missing here? Please advise.
<script src="/TestSubsite/Scripts/SPUtility-example.js" type="text/javascript"></script>
<script src="/TestSubsite/Scripts/SPUtility.js" type="text/javascript"></script>
<script src="/TestSubsite/Scripts/prototype.js" type="text/javascript"></script>

<script language="javascript" type="text/javascript">

$(document).ready(function() {

SPUtility.GetSPField('Title').MakeReadOnly();
SPUtility.GetSPField('Name').MakeReadOnly();

};</script>
Thank You,

Arnel
Coordinator
Jul 19, 2013 at 4:23 PM
Arnel,
Probably the issue is the order in which you include your JS files. It should have prototype.js first, then SPUtility.js, and SPUtility-example.js last. Also, you are missing a parentheses at the end of your ready block.

Try this:
<script src="/TestSubsite/Scripts/prototype.js" type="text/javascript"></script>
<script src="/TestSubsite/Scripts/SPUtility.js" type="text/javascript"></script>
<script src="/TestSubsite/Scripts/SPUtility-example.js" type="text/javascript"></script>

<script language="javascript" type="text/javascript">

$(document).ready(function() {

SPUtility.GetSPField('Title').MakeReadOnly();
SPUtility.GetSPField('Name').MakeReadOnly();

});
</script>
Thanks,
Kit
Jul 21, 2013 at 2:07 PM
Thanks Kit. :)

Cool! I can see the” Hello World!” on the Title field now. So I see its being loaded from the SPUtility-example.js. Is this where I should put the code to make my read-only fields? I already have the above code you provided on the CEWP of my new form but the Title field and Name field did not became Read-Only as it seems to be overridden by the code in the SPUtility-ecample.js. I would just like to know if this is the right procedure. Will it also work by directly putting the codes on the CEWP instead on the SPUtility-example.js?

Thank You,

Arnel
Coordinator
Jul 21, 2013 at 4:36 PM
Arnel,
I would recommend using the SPUtility-example.js file to add your code. It will make editing and testing your script easier because you won't need to keep editing the page every time you want to change your script. You can use your favorite editor to make changes to the JavaScript files and upload to the library.

Also, if you need to use the same code on your NewForm and EditForm you can simply include the scripts in both places.
Thanks,
Kit
Jul 22, 2013 at 2:29 AM
Okay, thanks Kit. One question though. How can I make the auto-populate fields that I have on my new customized form read-only? I have InitiateDate that is auto-auto filled up by the current date and Initiator which is filled by the current user. Below is my code.
<script language="javascript" src="/RSQE/SCAR/Scripts/jquery.SPServices-0.7.2.min.js" type="text/javascript"></script>
<script language="javascript" src="/RSQE/SCAR/Scripts/jquery-1.6.2.js" type="text/javascript"></script>

<script language="javascript" type="text/javascript">

 $(document).ready(function() {
  $().SPServices.SPCascadeDropdowns({
   relationshipList: "Managers",
   relationshipListParentColumn: "Plant",
   relationshipListChildColumn: "Title",
   parentColumn: "OriginatingPlant",
   childColumn: "PlantManager",
   debug: true
  });

 });</script>


<script type="text/javascript">
$(document).ready(function() { 
$('nobr:contains("Title")').closest('tr').hide();       
}); </script>

<script type="text/javascript"></script><script src="/RSQE/SCAR/Scripts/jquery-2.0.3.js" type="text/javascript"></script>
<script src="/RSQE/SCAR/Scripts/jquery.SPServices-2013.01.js" type="text/javascript"></script>

<script language="javascript" type="text/javascript">

$(document).ready(function() {
    var userName = $().SPServices.SPGetCurrentUser({
        fieldName: "Title"
    });
    $("input[Title='Initiator']").val(userName); 
});</script><script language="javascript" type="text/javascript">


$(document).ready(function() {
    var userEmail = $().SPServices.SPGetCurrentUser({
        fieldName: "EMail"
    });
    $("input[Title='InitiatorEmail']").val(userEmail); 
});</script>


<script src="/RSQE/SCAR/Scripts/prototype.js" type="text/javascript"></script>
<script src="/RSQE/SCAR/Scripts/SPUtility.js" type="text/javascript"></script>
<script src="/RSQE/SCAR/Scripts/SPUtility-example.js" type="text/javascript"></script>
Whenever I include the references for Prototype.js, SPUtility.js and SPUtility-example.js, I am getting this error "TypeError: Unable to get the property 'MakeReadOnly' of undefined or null reference." I have the below code for my SPUtility-example.js file.
/* SPUtility.js example script */

// run after the page has loaded
Event.observe(window,'load',function(){
    try {
        // TODO: Put your code here...
        SPUtility.GetSPField('Initiator').MakeReadOnly();
        SPUtility.GetSPField('InitiateDate').MakeReadOnly();
    } catch (ex) {
        alert(ex.toString());
    }
});
What could be wrong with my code? Please advise.

Thank You,

Arnel
Coordinator
Jul 22, 2013 at 2:46 PM
Arnel,
The main problem I see is that jQuery and prototype libraries conflict with each other (both attempt to use the $). You can call jQuery.noConflict() to let prototype.js use $. The downside is that then you need to use jQuery(...) instead of $(...) when you want to call jQuery code. I'm pretty sure SPServices will work as long as you include them in the correct order.
  1. Include jQuery
  2. Include SPServices
  3. Call jQuery.noConflict()
  4. Include prototype.js
  5. Include SPUtility.js
  6. Include SPUtility-example.js
  7. Include the rest of your scripts, replacing $() with jQuery() since now $ will be using prototype.js functions. For example: $().SPServices will need to be jQuery().SPServices.
I know this is a pain. I did start on converting SPUtility.js to use jQuery but I haven't had time to finish it. What type of fields are you using? I might be able to prioritize getting those field types working so that we could get rid of prototype.js and noConflict. It won't be a finished library but it might work for what you are trying to do.

Hopefully this makes sense.
Thanks,
Kit
Jul 23, 2013 at 5:41 AM
Oh I see. Thanks for digging into this Kit, appreciate it. :) I will probably need to make the following type of fields’ read-only (Single line of Text, Multi-line of text, Number field, dropdown list and Date & Time). Anyway, can you make an example on my below code on how will the codes look like following the 7 steps you have given above? Just want to see if I can understand it that way. If so, I will be fine with it. No needs for you dig into this further. :)
<script language="javascript" src="/RSQE/SCAR/Scripts/jquery.SPServices-0.7.2.min.js" type="text/javascript"></script>
<script language="javascript" src="/RSQE/SCAR/Scripts/jquery-1.6.2.js" type="text/javascript"></script>

<script language="javascript" type="text/javascript">

 $(document).ready(function() {
  $().SPServices.SPCascadeDropdowns({
   relationshipList: "Managers",
   relationshipListParentColumn: "Plant",
   relationshipListChildColumn: "Title",
   parentColumn: "OriginatingPlant",
   childColumn: "PlantManager",
   debug: true
  });

 });</script>


<script type="text/javascript">
$(document).ready(function() { 
$('nobr:contains("Title")').closest('tr').hide();       
}); </script>

<script type="text/javascript"></script><script src="/RSQE/SCAR/Scripts/jquery-2.0.3.js" type="text/javascript"></script>
<script src="/RSQE/SCAR/Scripts/jquery.SPServices-2013.01.js" type="text/javascript"></script>

<script language="javascript" type="text/javascript">

$(document).ready(function() {
    var userName = $().SPServices.SPGetCurrentUser({
        fieldName: "Title"
    });
    $("input[Title='Initiator']").val(userName); 
});</script><script language="javascript" type="text/javascript">


$(document).ready(function() {
    var userEmail = $().SPServices.SPGetCurrentUser({
        fieldName: "EMail"
    });
    $("input[Title='InitiatorEmail']").val(userEmail); 
});</script>


<script src="/RSQE/SCAR/Scripts/prototype.js" type="text/javascript"></script>
<script src="/RSQE/SCAR/Scripts/SPUtility.js" type="text/javascript"></script>
<script src="/RSQE/SCAR/Scripts/SPUtility-example.js" type="text/javascript"></script>
Thanks again,

Arnel
Coordinator
Jul 23, 2013 at 4:19 PM
Arnel,
You had a couple of issues in your code above which I fixed. Give this code a try (note, I haven't tested this since my environment isn't the same as yours):
<script language="javascript" src="/RSQE/SCAR/Scripts/jquery-1.6.2.js" type="text/javascript"></script>
<script language="javascript" src="/RSQE/SCAR/Scripts/jquery.SPServices-0.7.2.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$.noConflict()
</script>
<script src="/RSQE/SCAR/Scripts/prototype.js" type="text/javascript"></script>
<script src="/RSQE/SCAR/Scripts/SPUtility.js" type="text/javascript"></script>
<script src="/RSQE/SCAR/Scripts/SPUtility-example.js" type="text/javascript"></script>


<script language="javascript" type="text/javascript">
jQuery(document).ready(function() {
    jQuery().SPServices.SPCascadeDropdowns({
        relationshipList: "Managers",
        relationshipListParentColumn: "Plant",
        relationshipListChildColumn: "Title",
        parentColumn: "OriginatingPlant",
        childColumn: "PlantManager",
        debug: true
    });

    var userName = jQuery().SPServices.SPGetCurrentUser({
        fieldName: "Title"
    });
    var userEmail = jQuery().SPServices.SPGetCurrentUser({
        fieldName: "EMail"
    });
  
  /* SPUtility methods */
  
  // hide the Title field
  SPUtility.GetSPField("Title").Hide();
  SPUtility.GetSPField("Initiator").SetValue(userName);
  SPUtility.GetSPField("InitiatorEmail").SetValue(userEmail);
});

</script>
Thanks,
Kit