Skip Ribbon Commands
Skip to main content

:

> Posts > Easy Custom Layouts for Default SharePoint Forms
August 29
Easy Custom Layouts for Default SharePoint Forms

Comments

Tables vs. CSS

The only thing I've done to change this is instead of using tables everything is in DIVs with CSS positioning. Makes it more flexible so if the user wants it on the left or right or whatever (with a little JavaScript you can even have it dynamic). The tabs would be a a nice idea so I might do a follow-up post on my blog to show something like that on a large form. Great stuff!
 on 8/29/2013 9:22 PM

Good news Bil!

I was going to create the form using just DIVs and CSS positioning when suddenly I realized I still really suck at it. :) Glad to hear confirmation that it works.  Thanks for playing around with it!
Mark
EMS\markrackleyNo presence information on 8/29/2013 9:56 PM

Wow!

Mark:

You and I have done this stuff so many times in other ways, but the simplicity that you've got here is wonderful. Great job!

M.
 on 8/30/2013 7:39 AM

Thanks Marc...

When I first started writing the script I was actually trying to use the title attribute and it starting getting overly complicated.. was finally able to simplify it to what you see here. Am I odd that I find that kind of challenge fun??

Anyway! Feel free to post a link to your solution as well. I'm all about giving people options!

Cheers!
The other M
EMS\markrackleyNo presence information on 8/30/2013 8:14 AM

Mr

Oh, I don't have any other "solution", but I do this sort of stuff all the time with script.

If there was any consistency with the way that SharePoint renders the different types of form fields, the Title would always contain the DisplayName. That's simply not the case, nor would it always make sense (e.g., radio buttons, though there are obviously way's to make things consistent).

What you've done is come up with a nice, relatively simple templating approach. It's not going to be for the faint of heart (I can already hear the "support" questions you're going to get) but it's awesome for those who will "get it".

M.
 on 8/30/2013 8:53 AM

You are a beast

So first of all, GREAT approach to solving a long-running problem.

Second, I'm a new Mark Rackley fan first and foremost because you're one of the very few SharePoint Experts who ACTUALLY uses SharePoint for their outward-facing site.
 on 9/6/2013 11:36 AM

Doing it without jQuery

Nice technique! Thanks for sharing, Mark.

Based on your example, I made a modified version that should work without using jQuery (for IE8 and up), but it required that I give all my spans an ID attribute.

The modified HTML form has an id for the wrapper div to make my query selection more efficient, and ids for the spans that are going to be holding field controls so that I can modify them with document.getElementById. The IDs of the spans can be anything... so long as they actually have IDs, the code will work.

Not sure if this form will mangle my HTML, but I'll give it a shot:

Example HTML Form (also demonstrates table-style CSS divs):
<h1>Beautiful New Form</h1>
<div style="display:table; table-layout:fixed;" id="hillbillyform">
<div style="display:table-row><div style="display:table-cell"><b>Title:</b><br/><span id="hillybilly1" data-displayName="Title"></span></div>
<div style="display:table-cell"><b>Description:</b><br/><span id="hillbilly2" data-displayName="Description"></span></div></div>
</div>

Modified Script File:
<style type="text/css">
  .ms-formtable
  {display:none;}
</style>

<script type="text/javascript">  
        var newfields = document.getElementById("hillbillyform").querySelectorAll("[data-displayName]");
var oldfields = document.querySelectorAll("table.ms-formtable td");
for(var i=0; i<newfields.length; i++)
        {
            displayName = newfields[i].getAttribute("data-displayName");
            elem = document.getElementById(newfields[i].id);
            for(var j=0; j < oldfields.length; j++){
                if (oldfields[j].innerHTML.indexOf('FieldName="'+displayName+'"') != -1){
                    elem.appendChild(oldfields[j]);
break;
                }
            }
        }
</script>
 on 9/27/2013 12:37 PM

works fine only in edit mode but

Hi Mark,
Am using SP 2013 Online, your solution work's fine when I am in edit mode, but as soon as I save and then try to "add an item" it goes back to the small compact box you have before you update Content Editor 2.

Any suggestion on how to fix?
 on 2/19/2014 9:43 PM

Did you modify both New and Edit forms?

There is a different form for new (NewForm.aspx) and edit (EditForm.aspx). You must modify both forms if  you want both to be styled, although you can re-use the same script on each form.

Good luck!
Mark
EMS\markrackleyNo presence information on 2/20/2014 8:48 AM

Input boxes are missing

Hi Mark,
Me again, I think I know the problem, simply the input boxes are missing, this is why all the field names are bunched up together. I copied and pasted the hillbillyForm.js so should not have a problem there.
The html looks good, I only changed the field names, and displays ok, except for the missing input boxes.
Any suggestions on a fix?

I have other list on my project, do I have to do this for all the lists?

PS Viola is actually spelled Voila
 on 2/21/2014 9:33 PM
1 - 10Next

Add Comment

Items on this list require content approval. Your submission will not appear in public views until approved by someone with proper rights. More information on content approval.

Title


Body *


Name *


Who are you?

Email *


How do I find you?

captcha *


Attachments


SharePoint Architect, Developer, Blogger, Speaker, Author, and general pain in the butt.
 
Thoughts, views, and opinions expressed in this blog are solely my own.
 
Remember, the Impossible just takes longer.
​​​​
 

 Blogs you should be reading