Easy Custom Layouts for Default SharePoint Forms
Easy Custom Layouts for SharePoint Forms

Easy Custom Layouts for Default SharePoint Forms

Posted by on Thursday, September 5th, 2013  

 

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 let’s 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:

Easy Custom Layouts for Default SharePoint Forms

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 Voila. 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");
            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 Issue</h1>
<table cellpadding="5" cellspacing="5" bgcolor="#FFFFCC" >
    <tr >
        <td>
            <b>Title:</b><br>
            <span data-displayName="Title"></span>
        </td>
        <td>
            <b>Issue Status:</b><br>
            <span data-displayName="Issue Status"></span>
        </td>
    </tr>
    <tr >
        <td>
            <b>Assigned To:</b><br>
            <span data-displayName="Assigned To"></span>
        </td>
        <td>
            <b>Priority:</b><br>
            <span data-displayName="Priority"></span>
        </td>
    </tr>
    <tr >
        <td>
            <b>Description:</b><br>
            <span data-displayName="Description"></span>
        </td>
        <td valign="top">
            <b>Category:</b><br>
            <span data-displayName="Category"></span>
            <b>Alert Me:</b><br>
            <span data-displayName="Alert Me"></span>
            <b>Blame:</b><br>
            <span data-displayName="Blame"></span>
        </td>
    </tr>
    <tr >
        <td>
            <b>Related Issues:</b><br>
            <span data-displayName="Related Issues"></span>
        </td>
        <td valign="top">
            <b>Due Date:</b><br>
            <span data-displayName="Due Date"></span>
        </td>
    </tr>
    <tr >
        <td>
            <b>Comments:</b><br>
            <span 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….

Easy Custom Layouts for Default SharePoint Forms

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.

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!

 

Disclaimer
The sample scripts are not supported under any Summit 7 Systems standard support program or service. The sample scripts are provided AS IS without warranty of any kind. Summit 7 Systems further disclaims all implied warranties including, without limitation, any implied warranties of merchantability or of fitness for a particular purpose. The entire risk arising out of the use or performance of the sample scripts and documentation remains with you. In no event shall Summit 7 Systems, its authors, or anyone else involved in the creation, production, or delivery of the scripts be liable for any damages whatsoever (including, without limitation, damages for loss of business profits, business interruption, loss of business information, or other pecuniary loss) arising out of the use of or inability to use the sample scripts or documentation, even if Summit 7 Systems has been advised of the possibility of such damages.

Posted by on Thursday, September 5th, 2013  

Subscribe to RSS Feed

Sign Up for Newsletter