Nintex Forms – The Form and Nothing but the Form

I had a need the other day to get a visual of a Nintex Form, without all the SharePoint stuff around it.  Almost like what you’d see if you were to use the Nintex Forms list form web part.

This is what the form looks like normally, when I just clicked on an existing item.

So as you can see from the image above, there’s the SharePoint ribbon, the title, the quick launch and event some item property details under the form.  I didn’t want any of that.  I just wanted to get the form itself.

This is really what I wanted to see :

What to do???? What to do????

Have you ever played with the Internet Explorer Developer Tools?  Basically, if you press F12 in IE, you get a cool tool at the bottom, and then you can select parts of the HTML page and it’ll show you the HTML and the CSS.  It’s pretty nifty and it let me find the nodes I’m dealing with so that I could add some JavaScript to my form to hide those elements.

Here’s what it looks like as I was jumping through the HTML to find the node for the Quick Launch bar on the left of my SharePoint page:

As I got a better feel for the nodes, the classes etc, I was able to put a little JavaScript together to hide everything around my form, other than the form itself.  The thing you should be aware, is that if you have a custom Master Page, it’s possible this won’t work for you and you’ll need to do some more work as there could be other bits on the page that will need to be hidden.

Let us wait no longer.  What does the JavaScript look like in my Nintex Form??

The Awesome JavaScript

NWF$(document).ready(function()
{
  if(window.location.search.toLowerCase().indexOf(“isclean=1”) > 0)
  {
    NWF$(“#s4-ribbonrow”).hide(); //ribbon bar 
    NWF$(“#sideNavBox”).hide(); //quick launch
    NWF$(“#contentBox”).attr(“style”,”margin-left:0px;”);
    NWF$(“#contentRow”).attr(“style”,”padding-top:0px;”);
    NWF$(“.nf-non-dialog-outer”).attr(“style”, “padding: 0px 0px;”);
    NWF$(“#suiteBar”).hide();
    NWF$(“.nf-form-line”).hide();
    NWF$(“.nf-form-footer”).hide();

   }
});

I do this on the “ready” function so that it happens when the entire page loads into memory. Most thing I just needed to hide.  Others, I had to also change the margins or padding so that there weren’t any odd white space around.

The end result is something I’m quite happy with.

QueryString Parameter to Control the Hiding

I added a query string parameter called “isclean” so that my JavaScript actually checks if that is in the url, and then it executes the script above.  So the normal behavior of the form is preserved unless that query string parameter is on there.

Hopefully, this helps anyone else who wants to do something similar.