Pages

Tuesday 23 June 2015

Easy Custom Layouts for Default SharePoint Forms

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.e 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.

No comments:

Post a Comment