Thursday, August 7, 2014

Put Some Swag in Your Nintex Forms Tabs

One of my favorite TV shows in college was "Pimp My Ride." I loved how Xzibit, or X-to-the-Z as I affectionately call him, would come pick up a jalopy of a car, take it to his buddies who would throw unnecessary enhancements on the car and effectively "pimp" the car. Forms are very similar to the cars on "Pimp My Ride": drab and functional. Why have drab and functional forms when you can have some swag in your tabs that isn't a tepid jQuery animation? Today we're going to pimp a Nintex form by creating some novel looking tabs using HTML, CSS, and jQuery.

Panels

First, we're going to need a series of panels. These panels will hold the elements we're going to tab through. In this post I'm going to have a parent panel called "Wrapper." Within wrapper I have three panels, "Apple", "Banana", and "Cherry." It should look something like the image below.

clip_image001

Make sure that all of the panels are nested within Wrapper. You can do this by clicking Wrapper. When Wrapper is selected, all of the nested panels should be selected too.

Next thing we need to do is give our tabs some nice CSS classes. In Nintex Forms, you do this via the ribbon in the formatting section.

clip_image002

First, assign wrapper a CSS class of wrapper. Then give apple, banana, cherry the classes of tab apple, tab banana, tab cherry.

What we need to do now is make it so when we toggle through the tabs, that the different panels appear on the top. As is, if we were to toggle, only apple would appear at the top; banana and cherry would be in the middle and bottom of the form respectively. CSS can help take care of this problem.

Add this to the form's CSS.

.wrapper {

position: relative !important ;

}



.wrapper .nf-container-inner {

overflow:visible !important;

}

 

.ms-formbody .tab{



position: absolute ;



top: 0 !important;

}

When you preview the form, depending on how your panels are built, you should only see one panel because they’re all stacked on top of each other due to the CSS. But when I crack open the developer tools, I can see that all of my panels are there and are nested beneath wrapper. This is what we want.

clip_image003

Tabs

Now that the panels which will contain our content are built and assembled, we need a way to toggle through them. I was inspired by this post and wanted to make the chevrons function as tabs in the form. I did made some minor adjustments however; instead of an unordered list, I wanted to use an ordered list. This way my tabs have numbers on them.

In the space above the wrapper panel, add a rich text control. Edit the rich text control and add this markup:

<div id="crumbs">         

   <ol class="simple-list">                  

      <li class="selected">                           

         <a class="singletab" href="#" target="_blank" data-target="apple">                                     

            <span class="title">Apple                          </span>                                     

            <br class="summary"/>Apples are delicious and know no limits.<br/>          </a>        </li>                  

      <li>                           

         <a class="singletab" href="#" target="_blank" data-target="banana">                                     

            <span class="title">Bananas</span>                                        

            <br class="summary"/>Bananas are best when sliced up and served over cold cereal.<br/>          </a>       </li>                  

      <li>                           

         <a class="singletab" href="#" target="_blank" data-target="cherry">                                     

            <span class="title">Cherry</span>                                        

            <br class="summary"/>Cherries make or break ice cream sundaes.<br/>          </a>         </li>         

   </ol>

</div>

 

A few things to note. The first LI has a class of selected. This means that it'll be selected by default when the form knows. Also, when we toggle through the tabs, this class will be assigned to the other LIs. Lastly, I'm using the data-target property. For each LI, the data-target should match the whatever comes after "tab" in the respective tab's CSS class.

Now we have a raw list which we will turn into tabs with CSS. If this were "Pimp My Ride", Xzibit would stare into the camera and make some droll joke right now before wheezing out a THC-laced cough. Since I don't have the comic delivery of X-to-the-Z, let's keep working.

Add these styles to the form's Custom CSS properties.

#crumbs ol {

list-style: none; display: block;

}

#crumbs ol li {

background: rgb(242, 242, 242); margin: 0px 20px; display: inline-block;

}

#crumbs ol li a {

margin: 0px 10px 0px 0px; padding: 15px 40px 15px 80px; width: 130px; height: 120px; text-align: left; color: rgb(0, 0, 0); font-size: 12px; text-decoration: none; float: left; display: block; position: relative;

}

#crumbs ol li a br {

color: rgb(255, 255, 255);

}

#crumbs ol li a .title {

line-height: 18pt; font-size: 18pt; font-weight: bold;

}

#crumbs ol li a::after {

top: 0px; right: -40px; border-top-color: transparent; border-bottom-color: transparent; border-left-color: rgb(242, 242, 242); border-top-width: 75px; border-bottom-width: 75px; border-left-width: 30px; border-top-style: solid; border-bottom-style: solid; border-left-style: solid; position: absolute; z-index: 1; content: "";

}

#crumbs ol li a::before {

left: 0px; top: 0px; position: absolute; content: "";

}

#crumbs ol li:hover {

background: rgb(0, 158, 224); color: rgb(255, 255, 255);

}

#crumbs ol li a:hover::after {

border-left-color: rgb(0, 158, 224);

}

#crumbs ol li.selected {

background: rgb(0, 102, 153);

}

#crumbs ol li.selected {

color: rgb(255, 255, 255);

}

#crumbs ol li.selected a {

color: rgb(255, 255, 255);

}

#crumbs ol li.selected a::after {

border-left-color: rgb(0, 102, 153);

}

ol.simple-list {

list-style-type: none; counter-reset: ol-counter;

}

ol.simple-list > li::before {

content: counter(ol-counter); counter-increment: ol-counter;

}

ol.simple-list > li:hover::before {

color: rgb(255, 255, 255);

}

ol.simple-list > li.selected::before {

color: rgb(255, 255, 255);

}

ol.simple-list {

padding: 0px; list-style-type: none; counter-reset: li-counter;

}

ol.simple-list > li {

margin-bottom: 20px; position: relative; min-height: 3em;

}

ol.simple-list > li::before {

top: 10px; width: 0px; text-align: right; color: rgb(51, 51, 51); line-height: 1; padding-left: 30px; font-size: 86pt; font-weight: bold; float: left; position: relative; content: counter(li-counter); counter-increment: li-counter;

}

ol.simple-list > li