SPEasyForms: HTML Snippet Container User Guide • SPEasyForms • Joe McShea's Blog

SPEasyForms is fast approaching a year old. Since it’s inception, the most frequently requested feature is the ability to insert some arbitrary HTML into the form. I understand the need; a large form looks better if you break it up into sections with headers. Plus you might want to just tweak the css of a single form a little or insert a tiny bit of JavaScript to change the look or behavior of some control. And I’ve always intended to add something to address this at some point.

The HTMLSnippetContainer is intended to address all of these needs, and potentially more. It is a container, but unlike the other containers in SPEasyForms, it doesn’t contain fields, it just contains a bit of HTML. This container is part of AddOns.2015.00.08, so the rest of this guide will assume that you already have that or a later version installed.

How would you like to be able to make your forms look like this?

OK, I’ll admit, maybe not exactly like this. This looks vaguely InfoPath 2007ish. But if you could make your form look like this, you could make it look pretty much however you want it to look, and that’s what the HTML snippet container gives you.

I’m going to start off providing step by step instructions to add a header with a background in nauseating detail and assuming that you know nothing about HTML, CSS, or JavaScript. To add an HTMLSnippet container:

Click the Add Container button, choose HTMLSnippet as the container type, and hit Add. This brings up the snippet editor, which is a rich text editor:

Enter a space, hit return, and enter another space. This just gives you two lines (under the hood two divs). Some of the styles like background color apply to the enclosing div, so if you want multiple background colors it helps to create multiple divs before applying background. The reason we entered a space on each line is that many browsers will help you out and remove any empty divs automatically.
Now move the cursor back to the first line, hit the background color icon (all of the buttons have a tooltip explaining what they do, some of them even have shortcut keys), and select the darkest green:

Hit the Font Color icon and select white.
Hit the Font icon and select Comic Sans MS.
Hit the Font Size icon and select 6.
Hit the Bold , Italic , and Center icons.
Now type in Primary Fields and the editor should look something like:

Now move the cursor to the second line (or div), hit the background icon , and select a lighter green, which gives you something like:

That’s about as fancy as you can get using the rich text editor. You can also add ordered or bulled list, images, hyperlinks, and/or horizontal rules. The resulting HTML from the above example should look something like:

<div align="center" style="background-color: rgb(0, 51, 0);">
    <strong>
        <em>
            <font color="#ffffff" face="Comic Sans MS" size="6">Primary Fields</font>
        </em>
    </strong>&nbsp;
</div>
<div style="background-color: rgb(51, 204, 0);">
    &nbsp;
</div>

Note that it may not look exactly like this. It depends on which browser you’re using and even which version of the browser. That’s because the rich text editor is just putting an iframe in design mode, which means it is using the browser’s native HTML editor, so the steps I describe above may not work exactly the same on your browser. You’ll have to play around with it and see what works for you. I used Internet Explorer 11 for this guide.

Now looking back at the original form picture at the top of this post, it’s a tad fancier than the one we just created. There are a couple of narrow bands of different shades of green at the bottom of the headers. There’s also a border around each header, and there are border and background effects applied outside of the headers.

To achieve this, I had to switch the editor to source mode

. The source code I ended up with looks like:

<div style='border: 1px solid darkgreen;'>
    <div align="center" style="background-color: rgb(0, 51, 0);">
        <strong>
            <em>
                <font color="#ffffff" face="Comic Sans MS" size="6">Primary Fields</font>
            </em>
        </strong>
    </div>
    <div style="font-size: 0.4em; background-color: rgb(0, 153, 0);"> &nbsp; </div>
    <div style="font-size: 0.3em; background-color: rgb(0, 255, 0);"> &nbsp; </div>
</div>
<div> </div>
<link rel='stylesheet' type='text/css' href='https://thesharepointconcierge.sharepoint.com/sites/SPEasyForms/speasyformssubsite/SiteAssets/HtmlSnippetDemo.css'>

Note that there is a link to an external stylesheet in the source too. Technically putting such a link in the body is controversial to say the least, but generally any modern browser will accept it and I’m not a purist. If you are a purist, you could insert some script to shove the link tag into the head, which would make the W3Schools people happier. Yes, you can insert script into the HTML snippet container (ideally you should link to an external script file). Anyway, this stylesheet contains a little CSS to style things outside of the header, and looks like:

#spEasyFormsContainersPre {
    border: 1px solid darkgreen;
    background: #ddd;
}

table.speasyforms-columns {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

div.speasyforms-tabs, div.speasyforms-accordion {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

So if you are comfortable with HTML and CSS, you now have enough information to customize the form’s appearance as much as you like using only HTML snippet containers. The things that I did that could not have been accomplished using only the rich text editor are:

I nested the header divs inside a div with a border. There is no way to reliably nest divs in the rich text editor. There is also no way to apply borders.
I created a couple of narrow bands of different shades of green at the bottom of the headers using divs with a font size specified in fractional em. You can only specify font sizes of 1 through 7 using the rich text editor.
And finally, I linked to an external spreadsheet, which you can’t do in the RTE.

If you want to exceed the capabilities of the rich text editor, but don’t want to muck around editing raw HTML in source mode, there are a couple of options:

Use whatever HTML editor you like and copy the source code into the snippet container in source mode.
If you’re more graphically inclined and you have decent image editing software, create an image, upload it to a picture library, and link to it in the snippet container rich text editor.

Anyway, that’s about it for my first crack at the HTML snippet container. Hope it scratches the itch. As always, feedback is welcome.

Leave a ReplyCancel reply