Use jQuery to populate and hide fields in an EditForm.aspx

We’ve got an interesting requirement. We’re using a SharePoint list to store documents which are related to K2 SmartObjects. One of my colleagues is building a custom user control that’s going to show information from this SmartObjects, and associated documents. We want to allow users to

  • click to add a document to our smart object entity
  • upload a file to a library
  • fill in some details
  • automatically associate that file by a GUID

Sounds complicated? Actually, it’s not so hard!

There are two forms involved – Upload.aspx, and EditForm.aspx.

upload

editform

It turns out that the Upload.aspx file is actually quite convenient – it will ‘pass on’ any get parameters to the EditForm.aspx following it.

The EditForm.aspx also has a nice feature – if you specify a content type (e.g. &ContentTypeId=0x010100... ) it will show that content type when you initially go to the form.

So, to store our GUID to our SmartObjects, I created a string column call ‘SmartObjectReference’, and I went and added it to some of the content types in our document library (not all content types in our library have such references…). The value of the GUID will get to the EditForm in the query string parameters of the page, along with the content type ID. In other words, our users will click a link to add a document. The URL will be like:

http://server/site/_layouts/Upload.aspx?List=...[snip the normal stuff]... &ContentTypeId=[MyContentTypeID]&SmartObjectReference=badbad-dead-beef-dead-beefdeadbeef

This is the normal upload URL, with the Content Type Id and a ‘SmartObjectReference’. When we go to the EditForm.aspx page we’ll see:

editform-showing-smartobjectreference-column

Great! Our Content Type is displayed by default, ‘cos it’s in the URL. And our SmartObjectReference is in the query string:

reference

Cool… so now we need to populate our SmartObjectReference column. Well, using jQuery, piece of cake…

I opened SharePoint Designer, and editted my EditForm.aspx for my document Library. I added a reference to jQuery in:

<script language="javascript" type="text/javascript" src="/_layouts/jquery/jquery-1.3.2.min.js"></script>

… and some JavaScript code, including this jQuery…

$(document).ready(function() {
var smartObjVal = GetQueryParam("SmartObjectReference");
if( smartObjVal != null ) {
var smartObjRef = $(":input[title='SmartObjectReference']");
if( smartObjRef.val() != undefined ) {
smartObjRef.val(smartObjVal);
}
}
});

Resulting in…

editform-with-populated-smartobjectreference-column

Great! Now, how do I hide both the SmartObjectReference and Content Type rows? Easy…

smartObjRef.parent().parent().parent().hide();
$(":input[title='Content Type']").parent().parent().hide();

And that makes…

final-edit-form-with-hidden-fields

But the data is still there, and still getting captured:

captured-data-in-document-lib

Great! So, one final question – how do I stop users manually going into my document library and trying to create my document types that use the ‘SmartObjectReference’ column, ‘cos they won’t be able to fill in the GUID by hand? I tried using the ‘Hidden’ feature from the List’s Schema.

list-schema

This removed the content type from the ‘New’ menu on the list’s toolbar – but not the ‘Content Type’ drop down list on the EditForm.aspx.

not-shown-on-new-menu

shown-in-content-type-drop-down

To remove those, I looked at using an event receiver when I provision the list, but that proved… challenging. It was a blog post in it’s own right. For now, I’ve decided to make do with a little more jQuery…

$("option:contains('Examination Document')").remove();

I’ll work on that some more, but the ‘hidden’ flag in the schema definitely doesn’t seem to do the job, and updating through C#was … problematic. More about that when I’ve figured out what was going on.

Next up – user interface to show these documents in our app.

Advertisements
Use jQuery to populate and hide fields in an EditForm.aspx

18 thoughts on “Use jQuery to populate and hide fields in an EditForm.aspx

  1. Ben says:

    I have tried to use your code above as its exactly what I need to to on an EditForm.aspx (although with out attachments). However it does not seem to to work. Do it matter when the javasctrtip code is place on the page?

    on the line var smartObjRef = $(“:input[title=’Resolution’]”); is ‘Resolution’ the name of the column as defined in Site Settings ?

    Thanks for you help

    Ben

    Like

  2. Ben,

    Probably the easiest way to check the name being used is to go to the page and view the source. Something like the IE Dev toolbar can make that much simpler. Check through the inputs on the page until you find the correct one, and check the title.

    Also, did you remember to put in a reference to jQuery (I always forget that)

    Oh, and your script tags must be full “<script … ></script>” tags. “<script … />” won’t work.

    Like

  3. drew says:

    I’m a bit confused on how to do this (I think what I did should have worked!).

    I just need to hide the content type field. So after is where i put my code:

    $(“:input[title=’Content Type’]”).parent().parent().hide();

    Did I place it in the wrong part of the page? Did I do something wrong in the second part?

    Like

  4. drew says:

    It seems to have removed my HTML. I’ll try it one more time:
    So after < asp:Content ContentPlaceHolderID=”PlaceHolderMain” runat=”server” > is where I put my code:
    < script language=”javascript” type=”text/javascript” src=”URL TO 1.3.2.min.js” > < /script >
    < script language=”javascript” type=”text/javascript” >
    $(“:input[title=’Content Type’]”).parent().parent().hide();
    < /script >

    Did I place it in the wrong part of the page? Did I do something wrong in the second part?

    Like

  5. I’d’ve maybe used one of the content placeholders in the HEAD tag, but that should be a fine location.

    What you might need to do is put your line of code inside a

    $(document).ready(function() {
    … {Your code here} …
    });

    What this will do is then run your code – but only after the Document is ready. Other than that, it looks fine.

    You could also replace the .parent().parent() bit with another jQuery if you wanted, but it isn’t really necessary. If you’re curious, it’d be something like this to find a first matching parent:

    Like

  6. Hi Thank You.

    I’m trying to fit something very similar into this.. Here trying to change the label text for columns label fields of an editform.aspx, this condition trips and does contain my column name, but the next line does not actually change it.. I suspect because inside a . Sorry new to jquery here.

    function smartform(){
    $(“td.ms-formlabel”).each(function(){

    if($(this).text().match(‘#HP#’)){
    $(this).text(‘something else’);

    }

    Related to what you are doing here, and how would hide all rows (labels and input controls) that don’t have “#HP#” in the the label (column name)?

    Thanks.

    Like

  7. Hi
    I want to hide “Content Type” Field in EditForm.aspx
    I dont have sharepoint designer stet up. so How to add jqueryscript to ContentEditorWebpart.

    could you please provide complete script to add it to the contenteditorwebpart.

    Thanks,
    Vardhan.

    Like

  8. Hi

    I created custom list and added content types from sharepoint UI.
    when edit the List items, I want to hide the “Content Type” Field.
    could you please help me.

    Like

  9. Hi

    In editform.aspx I have used below script to hide Content Type field
    But its not working ..

    $(document).ready(function()
    {
    $(“:input[title=’Content Type’]”).parent().parent().hide();
    )};

    Please help me where I am going Wrong.

    Like

  10. Hi All,

    I am running same issue what you had before. Please let me know How Do I hide the content type drop down on EditForm.aspx page in Custom List.

    My code
    =================================================

    $(document).ready(function() {
    $(“:input[title=’Content Type’]”).parent().parent().hide();
    });

    ============================================

    Please help me If you can.

    Like

  11. My Code was:
    $(“:input[title=’Content Type’]”).parent().parent().hide();

    …so I don’t really see anything wrong with what you’ve written Prasad.

    Are you sure you’ve referenced the jQuery .js library?

    Like

  12. Vishwajit Walke says:

    Hello Andy,

    I’ve a document library in which I’ve associated multiple site content types. In each of these site content type, I’ve a common site column “x”. The weird thing is that when I click to add new item, I don’t see this site column “x” in NewItemForm.aspx whereas it is visible in EditItemForm.aspx. And the same column is visible for all (new, edit, view) forms when referenced through other content types.

    Can you please give me some useful pointers about how to solve this scenario for this specific content type ?

    Thanks,

    Vishwajit

    Like

    1. In a document library? Isn’t the new form in a document library typically only the “Upload” field? I mean, until the file it uploaded, you don’t have a document to store the data against…

      Or are you creating folders in the document library?

      Like

  13. Reza says:

    Hello Andy
    Upload.aspx will ‘pass on’ any get parameters to the EditForm.aspx following it , but it seems that Upload.aspx sends parameters in non Unicode format .

    Can you please give me some advice to have Unicode query string parameters in EditForm!
    Thanks
    Reza

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s