Easy Custom Layouts for Default SharePoint Forms

August 29, 2013 Mark Rackley Uncategorized 67

<UPDATE>THIS FUNCTIONALITY HAS BEEN UDPATED. PLEASE READ ABOUT THE UPDATES AND USE THE NEW SCRIPT.</UPDATE>

You know what really drives users crazy? Default SharePoint forms. Everything is in one column. It seems like you ALWAYS have to scroll to get to all the fields, and less face it: They have ZERO style. You look at a SharePoint form and think.. “Yep… that’s a SharePoint form.”

I mean, just look at the default New Item form for an Issue Tracking list:

image

See what I mean?

You know what drives developers crazy? Users that want custom forms. All your data is right there out of the box. You can change the order of the fields. So what if you have to scroll? You’ve got what you need to get your job done!

But what choices do I have? I’ve lost the design view in SharePoint Designer. I REALLY don’t want to create an InfoPath form because, well.. I hate InfoPath and there’s no way I’m going to justify creating a custom form in Visual Studio because you want it  to look pretty.

There has to be an easier way! Customizing a form in SharePoint should not be that hard.

So I started thinking…

I was pretty sure I could write a script that would allow me to move the fields on the form wherever I want. I just needed a way of knowing where to put the fields.  I came up with the following solution and I was pleasantly surprised by how well it came together.  All you have to do to get this to work is:

  1. Upload the below script to your Site Assets library (I called the script “hillbillyForm.js”)
  2. Create a custom layout using HTML, CSS and instead of putting the form inputs in the layout, put a placeholder span in there (described in more detail below).  Upload this file to your Site Assets directory as well.
  3. Edit the default form by adding two Content Editor Web Parts on the page. Link the first Content Editor Web Part to your custom layout and link the other Content Editor Web Part to the “hillbillyForm.js” script.

And Viola. That’s all there was to it. Because the script moves the contents of the field’s containers it brings with it everything you need so that your rich text editors, people pickers, and other fields all work seamlessly in your custom layout.

The Script

Here’s the script I wrote that is responsible for moving the contents of the form fields into your custom layout. You don’t necessarily need to understand what it’s doing, just make sure to include it on your page.

<script src=“//code.jquery.com/jquery-1.10.1.min.js”></script> <style type=“text/css”> .ms-formtable {display:none;} </style> <script type=“text/javascript”> $(document).ready(function() { //loop through all the spans in the custom layout $(“span.hillbillyForm”).each(function() { //get the display name from the custom layout displayName = $(this).attr(“data-displayName”);

displayName  = displayName.replace(/&(?!amp;)/g,’&amp;’); elem = $(this); //find the corresponding field from the default form and move it //into the custom layout $(“table.ms-formtable td”).each(function(){ if (this.innerHTML.indexOf(‘FieldName=”‘+displayName+‘”‘) != -1){ $(this).contents().appendTo(elem); } }); }); }); </script>

The key that makes it all work

So, the key that makes this all work is that the script is looking for each “span” in your custom layout that has the class “hillbillyForm”. This special span is the placeholder for your SharePoint Form input/display field.

The script then looks for a custom attribute in this span called “data-displayName”. The value of this attribute is the DISPLAY NAME of the SharePoint Form field for which the span is a placeholder for.

Confused yet?

For example, the following span is a placeholder for the field with the Display Name “Title”:

<span class=”hillbillyForm” data-displayName=”Title”>span>

So, all you have to do is design a form using standard html, with css, and whatever you want, and put this special span where you want the field input to appear making sure to put in the correct display name for that field.

Make sense? Still fuzzy? Take a look at my example form below, where I map all the fields from my Issue Tracking list into a basic HTML table.

My Form for this example

Here’s my super basic HTML form. I’m just using an old school table that basically turns the default form into a two column form.

<h1>New Issueh1>
<table cellpadding="5" cellspacing="5" bgcolor="#FFFFCC" >
    <tr >
        <td>
            <b>Title:b><br>
            <span class="hillbillyForm" data-displayName="Title">span>
        td>
        <td>
            <b>Issue Status:b><br>
            <span class="hillbillyForm" data-displayName="Issue Status">span>
        td>
    tr>
    <tr >
        <td>
            <b>Assigned To:b><br>
            <span class="hillbillyForm" data-displayName="Assigned To">span>
        td>
        <td>
            <b>Priority:b><br>
            <span class="hillbillyForm" data-displayName="Priority">span>
        td>
    tr>
    <tr >
        <td>
            <b>Description:b><br>
            <span class="hillbillyForm" data-displayName="Description">span>
        td>
        <td valign="top">
            <b>Category:b><br>
            <span class="hillbillyForm" data-displayName="Category">span>
            <b>Alert Me:b><br>
            <span class="hillbillyForm" data-displayName="Alert Me">span>
            <b>Blame:b><br>
            <span class="hillbillyForm" data-displayName="Blame">span>
        td>
    tr>
    <tr >
        <td>
            <b>Related Issues:b><br>
            <span class="hillbillyForm" data-displayName="Related Issues">span>
        td>
        <td valign="top">
            <b>Due Date:b><br>
            <span class="hillbillyForm" data-displayName="Due Date">span>
        td>
    tr>
    <tr >
        <td>
            <b>Comments:b><br>
            <span class="hillbillyForm" data-displayName="Comments">span>
        td>
        <td valign="top">
        td>
    tr>
table>

Make sense? I just made sure to create a span for each field that I wanted to display in my custom layout.

Oh, and here’s a quick tip at no extra charge. If you don’t want a field to show up in your form, just don’t create a span for it. No error will be thrown (unless it’s a required field) and the form will still save and update just fine.

So, all I have to do is edit my default form and using Content Editor Web Parts link to my custom layout and the above script and that out of the box form magically becomes….

image

Okay… so maybe it’s not the prettiest form in the world, but at least I don’t have to scroll anymore to see all the fields. The point is, the options are totally limitless now. You can create a form template however the heck you want as long as you place the spans in the correct place for where you want the form inputs to appear. Add some CSS make it Snazzy. Make those users say “That’s SharePoint??”

Think about it, you could break up a form into multiple jQuery UI tabs, show and hide fields dynamically, give your users an incredible user experience.

The Video

So, want to see step by step how it all gets put together? Just watch the following video and I’ll walk you through it.

image

So, there you go. Not much to it. I’ve used this same script on SharePoint 2010, 2013, and in Office 365. It seems to perform very well although the script could be tweaked some to increase performance.

At this point, I haven’t written the script to move the Save and Cancel button to a different location, mainly because I was too lazy and I think they look fine at the bottom of the form. If this is a showstopper for you let me know and I’ll get to it soon.

Finally, this script works on the default New, Edit, and Display forms. So, the next time you feel the urge to crack open InfoPath for a simple form take a moment to give this method a shot, especially if you plan to promote all the fields anyway.

Thanks again for stopping by!

I continue to use this script to create custom form layouts all the time now. I don’t think I’ve ever written a script I like this much for simple reason that it’s SO easy to improve SharePoint’s default views.  Here are a couple of screen shots of what I’ve accomplished for a Display Form and an Edit Form.

Default Display Form for a Contact’s List Item

image

Default Edit Form for a Document Library with a lot of Metadata

image

What kind of cool views have you created?

Troubleshooting

Do your tabs appear fine in edit mode but then disappear when you exit edit mode? If you are using SharePoint 2013 go into your Site Settings->Site Features and disable the “Minimal Download Strategy” feature. This feature (as of the writing of this post) in Office 365 will cause some of your scripts to not execute properly. Disable this feature and you should be good to go!

63 Comments

  1. Thanks for this post, I’ve been using this now for a while and has been working great … unitl now ….. I can’t seem to get SharePoint’s default Attachments field to work in my NewForm, EditForm and DisplayForm. I also have 2 enhanced rich text fields that I can’t seem to get to work either (in SP2010)… I was able to use the enhanced rich text fields successfully on another site a few months back, but, now nothing. Odd. Any help would be greatly appreciated as I need to get this new form rolled out asap. Thank you!

    • Hmmm… are you still having these issues? I have not had any problems with Rich Text fields and I’ll look into the Attachments field issue you are having. I’ve honestly never tried an attachment field before.

  2. Mark, have you tried this with People Picker fields? We’re having an issue getting those to render correctly.

    Otherwise this is super ninja.

  3. Mark (or community),

    Thanks much for this. Just curious, is there a way to include the Content Type field? I tried using Content Type for the Display Name, which I thought was correct, but to no avail. Since it’s case sensitive I’ve tried several other configurations as well. I’ll need the ability to switch between content types periodically (though not often).

    That in mind, any thoughts on hiding the spans if the field doesn’t exist. For example:

    Content Type 1 contains Columns A – C, Content Type 2 contains Columns A – D. With the current set up, The “Column D:” would always appear, regardless of the existence of the field. If you switch from 2 to 1, you wind up with a strange looking blank spot.

    Thanks!

    • You could use JavaScript to conditionally hide elements as you needed to based on content type. I’ve not tried to display the Content Type field before in a form using this method. I’ll take a look and see what I can figure out. May need a nag if you don’t hear back from me soon on this. Good luck!

      • Did you ever come up with a solution for this? I have a Document Library that uses several Content Types including a “Custom Document Set” and several “Custom Documents” (all of which inherit from a base “Custom Document” content type). I need to show the “Content Type Dropdown” and when the Content Type is switched, it will adjust which fields are shown. This is how the “OOTB forms” work, but I am assuming since some fields WILL be rendered and some wont (depending on the Content Type the user chooses), this particular solution doesn’t necessarily handle that properly. I haven’t actually tried your solution yet, but judging by your reply to this post, there was an issue and you were going to look into a solution. Before I use this solution to customize my (Edit and Display) Forms, I thought I better ask you if you had discovered a solution to this “problem”?

        Thanks for your help!
        Shayne

        • Hey Shayne, to be honest, I’ve never looked at addressing this. I simply haven’t had the time. I would imagine you would just need to make sure to take into account ALL the fields for every content type in your “template” and then write a piece of script that hides the field labels for this fields that don’t exist? Shouldn’t be too difficult (famous last words, right?). good luck!

  6. Mark,
    This is really great stuff! Anyway you can send me or post the scripts to the forms you have showing at the bottom of your post with the tabs? That would be much appreciated, thanks!

  7. Great script! I am looking at your Default Display Form example and would like to know how you got the tabs working with your script. What are you using? Could you share your code for one of your examples at the end of the article? That would be very helpful!

  8. Hi,
    I have tried using your script for changing our list default pages.
    It works fine for all the columns but, in my list i have used 2 Kwizcom columns. so in that case it dosenot show appropriate result.

    Can you help me with this

    • I don’t know how Kwizcom generates their custom field HTML and don’t have Kwizcom installed. Sorry. If you wanted to send me the HTML source for your page with the Display Names of the Kwizcom fields I could try and take a look?

  9. I’m testing your script but it is not showing any data. I’m editing the edit form with 2 content editor web parts for the script and html. the html displays but no data / form field from orginal form (which is a web part on the edit form page). Suggestions?

    • Press F12 in the browser and click on the “console” tab. See if your scripts are throwing any errors. It sounds like maybe the script is just not executing. Maybe the jQuery library is not accessible?

  10. hi. I really found this incredibly easy. How do I implement tabs as I have a great deal of metadata for my forms?

  11. I tried the following and it worked 🙂

    In Master Page:

    • Adding the .js file and loading it only on the “NewForm.aspx” pages (New Item form).
    • Add an empty within the Master page after “mainContent”.
    • Load the template (.html) at Run-Time dynamically –> We just have to make sure we have “Url of the List” is same as “The name of the template”.

    =====================================================
    MasterPage:
    =========
    ….

    ….
    …
    ..
    .

    var enSite = window._spPageContextInfo.siteAbsoluteUrl;
    if( $(‘.ms-formtable’).length > 0)
    {
    document.write(“”);

    var locationPath = location.pathname;
    if (locationPath.indexOf(“/NewForm.aspx”) >= 0)
    {
    var tempUrl = locationPath.split(“/”);
    var listUrl = tempUrl[tempUrl.length-2];

    $( “#tempId” ).load( enSite + “/SiteAssets/” + listUrl + “.html”, function( response, status, xhr ) {
    if ( status != “error” ) {
    var filename = enSite + “/Style Library/MBASlayte/js/hillbillyForm01.css”;
    var fileref = document.createElement(“link”)
    fileref.setAttribute(“rel”, “stylesheet”)
    fileref.setAttribute(“type”, “text/css”)
    fileref.setAttribute(“href”, filename);
    document.getElementsByTagName(“head”)[0].appendChild(fileref);
    }
    });
    }

    …
    .
    ====================================================
    hillbillyForm01.css
    ==============
    .ms-formtable
    {
    display:none;
    }
    ====================================================
    hillbillyForm01.js
    ==============
    $(document).ready(function() {
    //loop through all the spans in the custom layout
    $(“span.hillbillyForm”).each(function()
    {
    //get the display name from the custom layout
    displayName = $(this).attr(“data-displayName”);
    elem = $(this);
    //find the corresponding field from the default form and move it
    //into the custom layout
    $(“table.ms-formtable td”).each(function(){
    if (this.innerHTML.indexOf(‘FieldName=”‘+displayName+'”‘) != -1){
    $(this).contents().appendTo(elem);
    }
    });
    });
    });
    ====================================================

    Good Luck 🙂

  12. This is absolutely fantastic! Thanks for sharing. Is there any chance you could put up an example of the tabs working? I’ve tried but just can’t get it working. Many thanks

  14. Thank you for that great solution…
    Still have problems with the attachment field. In the newForm site I can’t see the attached item as I can see it in the default form. After adding the attachment nothing appears after “Attachment:”. I added the data-displayName -> Attachments but no Chance ?
    Hope someone can help me …
    thank you
    dominik

  15. Hi this is amazing! But I’m really really new to all of this. So silly question, if I want to display fields that don’t need to be side by side, how do I do that?

  17. Hi guys…
    I am just wondering what would it be like if I wanted to hide some field based on value of another field.

    For example: If Issue Status = Active then Category would be hidden.

    I have been strugling with this all day.

    Thanks a lot…

  20. Hi, this is really incredible. I’ve been using it for some time and it works just fine. Just one question, how can I have checkboxes of a choice field displayed on different table cells without necessarily showing the labels?

    • The “easy” solution for your check box question is to create multiple checkbox fields for each choice selection and then you can put them wherever you want in the template. Otherwise you’d need to write some jQuery specific to that field to manipulate the checkboxes as you need to. It’s possible but “out of scope” for the solution I provided.
      Good luck!

  21. Has anyone had any luck with posting back attachments? I’m trying to get this to work in the helper file:

    The HTML5 tag works and I can capture an image from the tablet, but how do I use this to post the image back as an attachment?

    Thanks!

    • Yes, but that’s not what this script does. This script simply moves the fields into a template without changing their size or altering them in any way. YOu could write a piece of script that resizes the middle initial field to make it shorter though it might look something like $(“input[title=’Middle Initial’]”).attr(“size”,”5″); or something similar

  23. What would be the advantage of this approach over using client side render and template overrides on SharePoint 2013?

    • Great question! This approach works in SharePoint 2007, 2010, and 2013 where as CSR is only available in 2013. Also, this solution is hopefully more approachable for a non-developer since all you need to do is write HTML and use the provided script.

  24. Hey.. have just improted the script to my sharepoint site, and created a HTML page, but I have a little problem, when I go create my Default New Form I add 2 web parts and link them to my html and js file, when I click apply on the js file all the field are showing on my form… but when I click stop editing and click create new on my list, the fields are gone, and I hust have the text… what do I do wrong ??

    • Sounds like you might have the Minimal Download Strategy Feature enabled. Go to your Site Settings->Site Features and disable Minimal Download Strategy and see if that fixes your problem.
      Good luck!

  25. I can’t tell you how excited I was to find this script! Your whole blog is brilliant. I’m having some trouble using this with lookup fields, though. I can pull the display name of the initial lookup field, but by default that appears as a link. When I pull over the title as an additional column, which displays without the link, the script doesn’t recognize the 2nd column name. Any suggestions, or is this not possible? Thank you!

  26. One of the simplest explanations how to use js and customize html forms.
    Could you please make another tutorial on how you adjusted the scripts, and created these tabbed form? the screenshots look awesome!

  28. Just ran across this to tonight and can’t wait to give it a try. I have been creating web forms in Dreamweaver for many years now and am anxious to use it for SharePoint forms now that I know how.

    It’s things like this that make us enjoy IT work, so thanks a bunch for sharing!

  30. Hi Mark — thanks for the tutorial. I have done everything, and everything goes to plan re: the (2) content editors. The form looks and operates exactly as it should in edit mode (i.e. I can toggle the drop downs, enter values, etc.)

    However, when I press ‘stop editing’ and go to Add New Issue, the form isn’t editable. It looks exactly like it did BEFORE you uploaded the jscript in the 2nd content editor. i.e. the uneditable html appears, but I can’t toggle/add any values.

    Any ideas?

    Thanks in advance

    • 2 things. Did you edit the new form or the edit form? Also, make sure the minimal download strategy feature is disabled under site settings->site features

  31. Thanks for this solution. We have some issues… It worked fine, until we migrated it to the live system (SP 2013).
    The FieldName=XXX is missing there… Is there a switch for that, or is that a decision of Mifrosoft?

    Is there an alternative?

  34. Has anybody found a span name that will display the form validation message?
    My form looks great but I am always looking for more!

2 Trackbacks / Pingbacks

  1. Easy Custom Layouts for Default SharePoint Forms | Share your knowledge
  2. Sigh… SharePoint Forms… |

Comments are closed.