Push Button, Change Color

The Nintex Form 'Choice Control' allows users to choose between different display formats, such as: 

  • Check boxes (Multiple-Selection)
  • Drop down list
  • List (Multiple-Selection)
  • Option Buttons

The Option Buttons display format initially appears as radio buttons, but what if we wanted them to show as actual buttons?

Change the 'Render as buttons' value from No (default) to Yes and the radio buttons will now appear as buttons.

This is a great feature of Nintex Forms, but what if you wanted to really change the value of the background color of a selected option button when selected? 

Here comes simple CSS to apply this change!

The Build

So far, all that has been placed on the form is a Choice Control, with the display format as 'Option Buttons' and the Render as buttons setting set to 'Yes'. If you have accomplished this already, you're ready for adding some CSS. If not, please add the control and make the required setting changes.

The Code

The Choice control is different in how it is displays in the DOM and you'll need to dig to see if there is an attribute associated with the selected button that will allow you to change the color. Using the Developer Tools (F12), walk through the DOM Explorer to find the choice control element.

So what does this look like in the DOM? There are two portions to pay attention to:

  • The button text is located in a <span> element, but there isn't any way to see if that <span> has been selected. 
  • The parent element of the <span> is a <label> element, which contains an attribute, aria-pressed="true". Now we got it!

Add the following code in your Custom CSS section under Form Settings in the Forms Designer and you can target the span element, who is a child of a label element, but only when the label element has an attribute of aria-pressed=true.

label[aria-pressed=true]>span {
    background-color: #73E1DF !important;
}

The Result

The hex code of the selected button can be any color, but this will give an idea of how easy it is to change a background color on the Choice control of your Nintex Form.

Have Print, Will Edit!

Currently writing from Calgary where I got to spend some time with some amazing people, places and unreal eats! While meeting with customers, I was asked an excellent question about hiding some portions of a Nintex Form when using Print to PDF. 

So, can it be done? You know it!

The Build

We are going to use a very simple Leave Request form for this use case, and below you will see two areas we want to hide:

  • The red asterisk mark that shows a required field
  • The 'Close' button on the bottom of the form

Next, we are going to take advantage of media query listeners in CSS and use the media type of 'print' to hide those elements if the class of those elements match our CSS selectors.

The Code

Open up your Nintex Form in the Form Designer and click on Form Settings, and then expand Custom CSS. From there, paste the following code:

@media print {
    .ms-formvalidation {
        visibility: hidden;
    }

    input[type=submit] {
        visibility: hidden;
    }
}

After you have entered in the above CSS, save the form settings and publish your form. 

Let's take a look at our finished form!

The Result

If you open the display form, you'll notice it looks exactly the same, and that is exactly what we want. However, if you click on 'Print to PDF' in your ribbon and open the PDF document that is generated, you'll see something different.

Pretty easy to get up and running and looks awesome! Feel free to leave any comments or questions and as always, keep being awesome!

WinJS Controls FTW!

I love me some Microsoft, it's true. To get a little more Microsoft in your Nintex Forms, I'll show how to add the Microsoft JavaScript library, WinJS for a very cool new way to interact with your forms.

The Build

After you have created a List and added the columns you wish to collect, we need to snag the CDN links for WinJS. 

In the Nintex Forms designer tab, select Settings > Advanced > Custom CSS includes and place the following link: 

  • https://cdnjs.cloudflare.com/ajax/libs/winjs/4.4.0/css/ui-light.css

Bellow the Custom CSS includes section is the Custom JavaScript Includes section. Please paste the following CDN links in the Custom JavaScript Includes field: 

  • https://cdnjs.cloudflare.com/ajax/libs/winjs/4.4.0/js/base.js
  • https://cdnjs.cloudflare.com/ajax/libs/winjs/4.4.0/js/ui.js

Next, a Rich Text Control will be added to the Form so we can place some HTML within the form and create our own <div> elements.

The Code

Double click the Rich Text Control on your Nintex Form and then select body of the control. Once you do that you will see the Format Text tab on the ribbon. Click on 'Edit Source' to add the following HTML:

<div class="simple_ItemTemplate" data-win-control="WinJS.Binding.Template" style="display: none;">    
   <div class="overlaidItemTemplate">       
      <img class="image" data-win-bind="src: picture; alt: title" alt=""/>       
      <div class="overlay">          
         <h2 class="win-h2 ItemTitle" data-win-bind="textContent: title">         
         </h2>       
      </div>    
   </div> 
</div> 
<div class="flipView" id="simple_FlipView" data-win-control="WinJS.UI.FlipView" data-win-options="{        itemDataSource: DefaultData.bindingList.dataSource,        itemTemplate: select(&#39;.simple_ItemTemplate&#39;)     }"> &#160;</div>

Save your changes in the Rich Text control and then let's add the CSS to the form settings. In the Nintex Forms tab in the ribbon, select Settings > Custom CSS and add the following CSS:

.flipView {
  width: 100%;
  max-width: 480px;
  height: 270px;
  background-image: url("/images/flipview/Texture.png");
}

.flipViewContent {
  width: 100%;
  max-width: 480px;
  height: 270px;
}

.overlaidItemTemplate {
  width: 100%;
  max-width: 480px;
  height: 270px;
}

.overlaidItemTemplate img {
  width: 100%;
  height: 100%;
}

.overlaidItemTemplate .overlay {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.65);
  height: 40px;
  padding: 20px 15px;
  overflow: hidden;
  width: 100%;
  bottom: 0;
}

.overlaidItemTemplate .overlay .ItemTitle {
  color: rgba(255, 255, 255, 0.8);
}

While still the Form Settings section, right below Custom CSS is Custom JavaScript. In that section add the following JavaScript:

NOTE: You will have to link to whatever images you wish to use. I had some simple icons that I link to in my form, but feel free to change the picture value to the appropriate picture source.

NWF$(document).ready(function(){
    var array = [
    { type: "item", title: "Tech Support", picture: "/SiteAssets/cogwheels12.png" },
    { type: "item", title: "Sales Support", picture: "/SiteAssets/customer%20service11.png" },
    { type: "item", title: "Ask an Executive", picture: "/SiteAssets/help9.png" },
    { type: "item", title: "Facilities Request", picture: "/SiteAssets/hammer6.png" },
    { type: "item", title: "Cloud Workflow", picture: "/SiteAssets/cloud%20computing1.png" }
];
var bindingList = new WinJS.Binding.List(array);WinJS.Namespace.define("DefaultData", {
    bindingList: bindingList,
    array: array
});
WinJS.UI.processAll();
});

The Result

OK, now that we have our code, let's take a look at what is actually going on.

If you were developing Windows App Store Apps with WinJS, you'd notice that all the code is wrapped in a Immediately Invoked Function Expression (IIFE). This is good for two reasons: one it prevents namespace collision and two, it immediately invokes the function. 

However, in our example, we are wrapping the code in the NWF$(document).ready() event. 

So, what did we create? We made a flip view photo gallery that will allow the user to move forward and backward through a set number of images. 

For more information on WinJS, please visit http://try.buildwinjs.com/ and tryout their awesome Playground experience to get more familiar with the available controls. You'll notice that some of this code looks like that of the playground, and that is cause it it! Big shout out to the WinJS team for building such an awesome set of controls to easily blend into your forms or app.

New Dialog: Add a Dialog Box in Your Nintex Forms

Although Nintex Forms allows you to show/hide labels to show additional information, sometimes it's just nicer to use a dialog box. In this example, I'll show you how to pop up a dialog box when you choose a certain value from a drop down. Let's get to it!

The Build

In your SharePoint list, add a Choice column with a drop down display using the following values: 

  • Breakfast
  • Lunch 
  • Dinner

Next, we will need to grab the CDN links for jQuery to greatly reduce the amount of code we will need to write. 

In the Nintex Forms designer tab, select Settings > Advanced > Custom CSS includes and place the following link:

  • //code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css

Right below the Custom CSS includes section is the Custom JavaSctipt includes section. In the Custom JavaSctipt includes field add the following links:

  • https://code.jquery.com/jquery-1.12.4.min.js
  • https://code.jquery.com/ui/1.12.0/jquery-ui.min.js

Next we will add a Rich Text Control and get ready to add some code!

The Code

In the Rich Text control, click within the body of Rich Text field in the Control Settings modal window and then click on the 'Edit Source' button on the Format Text ribbon. Next, add the following html:

<div title="Important Meal" id="dialog-lunch-dinner">            
   <p>                        
      <span class="ui-icon ui-icon-circle-check" style="margin: 0px 7px 50px 0px; float: left;"></span>    Don&#39;t forget, breakfast is the most important meal of the day!  </p>
</div>
<div title="Lunch" id="dialog-breakfast-lunch">            
   <p>                        
      <span class="ui-icon ui-icon-circle-check" style="margin: 0px 7px 50px 0px; float: left;"></span>    Lunch is great, but don&#39;t forget to snack!  </p>
</div>

On the form designer you will see the following in your Rich Text control, but don't fret, we will hide this control with some JavaScript on form load.

Let's go back to Form Settings and select Custom JavaScript. Please paste the following JavaScript in your Custom JavaScript field:

NWF$(document).ready(function() {
 NWF$('#dialog-breakfast-lunch').css("display", "none");
 NWF$('#dialog-lunch-dinner').css('display', 'none');
 NWF$('#' + chFood).change(function(){
  var ddFood = NWF$('#' + chFood + ' option:selected').val();  
   switch (ddFood) {
    case ("Breakfast"):
    NWF$('#dialog-lunch-dinner').dialog();
    break;
    case ("Lunch"):
    NWF$('#dialog-breakfast-lunch').dialog();
    break;
   }
 });
});

Great, now let's save these settings and Save the form in the designer. Let's take a look at what we just built!

The Result

On form load, you'll notice that that Rich Text control is no longer visible.

Select 'Breakfast' from the Food choice control and you will see a new dialog box appear:

Select 'Lunch' and you will be presented with another dialog box:

Pretty cool feature with just a tiny bit of code! 

 

Have Print, Will Watermark!

Nintex Forms recently released the awesome functionality of Print to PDF. This feature allows users to render their forms in a PDF format for either printing or saving. Since you are using Nintex Forms, which allows designers to add custom CSS, I thought we should take it one step further and add a watermark to our printed forms!

Wanna see it? Here it goes!

The Build

Open the Nintex Forms designer for either SharePoint 2010 or 2013 and expand the length of the canvas in Form Settings.

Next, add a bunch of Single Line Text  and Date/Time controls to your form. I would also recommend adding some labels to identify the input type controls.

Within the form, you'll see a box that I've added behind some of the input controls. This is a Rich Text control.

Next, I'll show you why you just added that Rich Text Control to your form!

The Code

In the Rich Text Control, open the configuration settings and then click on 'Edit Source' in the control ribbon. Next, add the following HTML:

<<p id="watermark">Watermark!</p>

Next, open the Nintex Forms tab > Settings > Custom CSS and add the following CSS at the top:

@media print {
#watermark {
 font-size: 50px;
 font-weight: bolder;
 opacity: 0.5 !important;
 font-color: black;
 padding-top: 30px;
 -webkit-transform: rotate(-45deg);
 -moz-transform: rotate(-45deg);
 -ms-transform: rotate(-45deg);
 }
}#watermark {
 font-size: 50pt;
 -webkit-transform: rotate(-45deg);
 -moz-transform: rotate(-45deg);
 -ms-transform: rotate(-45deg);
 opacity: 0.0;}

The Result

After you publish your form, go ahead and create a new item. Place info in all of the inputs and save. Open the newly created item (notice no watermark) and click on the 'Print to PDF' button located on the ribbon and look at your new work!

 

 

 

Hide Choice: Nintex Forms Office 365

Nintex Workflow for Office 365 contains the great Assign task action that allows for a ton of flexibility in how the action is configured. Sometimes, you may want to take advantage of LazyApproval, Reminders and Escalation, but only want to have one outcome. How you ask? CSS to the rescue!

The Build

Open Nintex Workflow for Office 365 and add the Assign a task action.

From here, double-click the Assign a task action and click on Edit Task Form in the ribbon. Notice that there are two outcomes, "Approved" and "Rejected". We want to get rid of the "Rejected" option.

The Code

In the Nintex Forms Designer, open Form Settings > Custom CSS and add the following CSS:

tr:nth-of-type(2){
display: none !important;
}

Say What?!

So this CSS says nothing about hiding an option or label. What are we doing here?

Nintex Forms stores the Radio Button Choice control options in a table. We want to remove/hide the second row of that table. Using CSS, we select the <tr> element and then only call on the second row (2) of that type of element. From there, we set the display property to a value of 'none'. 

The Result

Not too bad for one line of CSS!

Feel free to post any questions or comments below!

Dynamic Choices: Nintex Forms

While at work today, I got this great question about how to build dynamic option values in a drop down control based on the output of other drop down controls.

For example,  I have Drop down A, that has two values (X, Y) and I have Drop down  B, that has two values (Green, Red). The third drop down, Drop down C, will have the selected values of both Drop down A and Drop down B as the available options to select. So how do you do this in Nintex Forms? Find out below:

The Build

Open the Nintex Forms Designer and then add three Choice Controls. 

In each drop down, you will then need to give them Client ID JavaScript variable names and for the first two drop downs, add some values. In the first drop down, I'll add  the choice options of my two fellow Americas Technical Evangelist buds, Vadim and Brad. Next, I'll change the Display format to 'Drop down list' and then give it the Client ID JavaScript variable name of 'dd1'.

Now let's take a look at how the second Drop down is configured:

Notice the Client ID JavaScript variable name is 'dd2'. That will be important for our code later on.

Finally, let's take a look at look at how the third Drop down control, with the Client ID variable 'dd3', is configured:

Easy enough, right? Now let's get to the code!

The Code

What we need to do is to change the option values of the 'dd3' drop down control to be whatever the selected values are of 'dd1' and 'dd2'. So we will need to:

  • Latch onto the change event of both of those controls.
  • Store the selected values of both controls.
  • Create and Object to store those values.
  • Remove any values that existed before the change event.
  • Append the new options as the available values for 'dd3'.

So what does that translate to in JavaScript? I'm glad you asked:

NWF$(document).ready(function(){
    var changeMe = NWF$('#' + dd1);
    var changeMe2 = NWF$('#' + dd2);
    NWF$(changeMe).add(changeMe2).click(function(){
        var x = NWF$('#' + dd1 + ' option:selected').val();
        var y = NWF$('#' + dd2 + ' option:selected').val();
        console.log(x + ' ' + y);

        var newChoices = {
            val1 : x,
            val2 : y
        };
        var lastDD = NWF$('#' + dd3);
        lastDD.empty();
        NWF$.each(newChoices, function(val, text){
            lastDD.append(
                NWF$('<option></option>').val(val).html(text)
                );
        });
    });
});

So copy/pasta that bad boy into the Custom JavaScript section of the Form Settings and let's see what happens. 

The Result

I'll go ahead and choose a value for the first two drop downs. The selected values will be the only options available in my third drop down.

I've always fancied a BMW, so let's give only those options.

Give it a try in your Nintex Forms environment! Like always, I'd love to hear your thoughts and questions in the comments section. Thanks for reading!

Click to Enable: Nintex Forms

Nintex Forms has awesome Conditional Validation/Formatting rules and I highly recommend taking advantage of them when building your forms, but sometimes you need validation or formatting of your form when a certain event occurs.

I was working with a customer and they had a great question of making a checkbox enable only after a user clicks on a hyperlink on the form. Awesome use case and I'll show you how it's done!

The Build

Open the Nintex Forms Designer and add one label control and one Yes/No control.

In the Yes/No control, open the configuration settings and "I clicked on Nintex!" in the Text field. Next, expand the Advanced section and change 'Store Client ID in JavaScript variable' to Yes. Enter the value 'ackBox' in the 'Store Client ID in JavaScript variable' field.

Here is what the form looks like in Design mode (I'll show you the HTML to write in the Label control in a bit).

The Code

In the label control, open up the Control settings and then click in the body of the Label Control, then click on Edit Source in the ribbon.

Enter the following HTML in the body of the Edit Source window:

<p>Please visit <a id="link" href="http://www.nintex.com/" target="_blank">Nintex</a> for more information!</p>

Save the HTML in the label control and also the label control settings, and then open up  Settings in the Nintex Forms Ribbon at the top of the designer.

From there , expand 'Custom JavaScript' and paste in the following code:

NWF$(document).ready(function() {
 NWF$('#' + ackBox).attr("disabled", true);
 NWF$('#link').click(function() {
 NWF$('#' + ackBox).attr("disabled", false);
})
});

Click Save to save the new Form settings and now it's time to test out your form!

Now, to prevent users from submitting the form, you can write a Validation Rule (after you add a name to the Yes/No checkbox(in this example it's named 'chkBox')) such as the following:

The Result

Notice the Yes/No control is disabled even though the link (the word 'Nintex') is purple because it's a link I have visited. This is important if a person will use this form more than once.

Now, I'll try to submit the form without checking the box either and without clicking the link.

Lastly, I'll visit the link to enable to box and check it.

Not too bad for the first real post of the year! Like always, feel free to add any comments or questions below.

Thanks!



InspireX: Form Build Best Practices

Ok, I admit it. I'm not the best at designing form layouts, and I'm sure we've all been there and designed a form that looks like this form past the link: http://ntx.lv/1ZgBQlY

It's horrible, it's ghastly, it's from the early 90's!

I'm proud to say that Nintex has allowed me to join Andy Budiman, UX Manager for Nintex, to give a talk at InspireX about Nintex Forms best practices and extensibility. 

For those interested in attending, you'll find plenty more information on Nintex Workflow and Forms. 

If you're a brave soul and are interested in the JavaScript used to make the above form look horrible, here it is:

The Code

NWF$(document).ready(function () {
    var b = document.getElementById("blinking");
    var e = document.getElementById("explode");
    var s = document.getElementById("shake");
    var f = document.getElementById('flash');    
  for (var count = 0; count < 1000; count++) {
        if (count <= 1000) {
            NWF$(b).effect("bounce", "slow");
            NWF$(s).effect("shake", 1000, "left");
            NWF$(e).toggle('blind');
            NWF$(f).toggle('puff');
        }
    }
});

If you have any questions or topics you'd like either Andy or myself to discuss, please leave comments below!

Hello 2016: Updates for the New Year

Hi Everyone and Happy New Year! (I know, I'm late to the game)

I wanted to take some time to shed some updates on new blogs that I'll be posting about in addition to the JavaScript/CSS/HTML - Nintex Forms posts. 

I'm lucky enough to be a Technical Evangelist for Nintex, which means I get to travel all over North America and speak at User Groups, Conferences, SharePoint Saturdays and other gatherings. I usually get to talk about some awesome things you do with Nintex Workflow/Forms/Mobile and I'd like to be able to show some of those talks with those that are not able to join me at the conferences. 

For those that are able to join, I'd love it if we can continue our talks here about whatever topic was discussed or any additional topic you'd like to cover. 

The point of these blog posts are to make end users more enabled to design cooler looking, more functional forms, and if you are only able to see what I post on the blog and not what I talk about at speaking engagements, then I'm only supplying you with half as much content. 

So here's to an awesome 2016 and all the content we will cover!

Cheers,

Sean

Altered Inputs in Nintex Forms

Aside from Labels, Single Line Text Boxes are probably one of the  most used controls in Nintex Forms. However, most users don't know what else you can do with a Single Line Text Box control with a little JavaScript. All we will be doing in these examples is altering the attributes of the controls and taking advantage of some of the  HTML5 functionality.

The Build

Let's go ahead and add some Single Line Text Box Controls to a Nintex Form in the Nintex Forms Designer.

The important part to remember is to add the correct name for the intended control in the JavaScript variable name field in the Control Settings. 

For example, if we wanted to create an input to collect emails, we can call the variable name 'varEmail'.

Add a Single Line Text Box for each of the Variable Names listed below:

varPerson

varEmail

varRange

varColor

varReset

The Code

Below is the JavaScript that we will use to replace the attributes of the Single Line Text Boxes:

 NWF$(document).ready(function () {
 NWF$('#' + varPerson).attr("Placeholder", "First Name");
 NWF$('#' + varEmail).attr({type:"email", Placeholder:"name@domain.com"});
 NWF$('#' + varRange).attr({type:"range", min:0, max:12, value:2});
 NWF$('#' + varReset).attr("type", "reset");
 NWF$('#' + varColor).attr("type", "color");
 NWF$('#' + showColor).attr("type", "button");
 });

For example, the Range  Single  Line Text Box can be configured to have a default  value, and minimum/maximum values for how far the slider will move.

NOTE: The color picker will work in Chrome (not IE, currently).

The Result

In Internet Explorer, you can see how the form will render with  the input slider:

Here is a cool little trick too, you can HTML5 to validate the value in the email input is actually in an email format (still will not verify if the address actually exists though):

Also, all of these controls can be connected to your SharePoint columns to collect the values you have entered on the form!

Feel free to leave comments if you have any questions about the form layout or code!

Conditional Defaults in Nintex Forms

One of the most asked questions I get is how to set the default value of a control on Nintex Forms based on the value of another control. Usually this is based on a Choice (drop down)  control. The following post will cover how to set those defaults in a Single Line Textbox control when using a Choice control with a drop down view.

The Build

Once you have opened up the Nintex Form Designer, please add the following controls:

  • Choice - settings as followed:

NOTE: Make sure you set the 'Store Client ID in JavaScript variable' setting to 'Yes', and then set the 'Client ID JavaScript variable name' to 'colorDrop'. Also, in this example I am using the three color choices of [Red, Green, Blue].

Single Line Textbox - settings as followed:

NOTE: Give the Single Line Textbox a 'Control CSS class' value of 'defaultTXT', or you can give the Single Line Textbox a JavaScript Variable name of the same value.

The Code

Super simple CSS this time! Just add the following to the 'Custom CSS' section of Forms Settings:

.defaultTXT{}

Next, we will use JavaScript / jQuery to grab the value of the drop down control and a switch to set the default value of the Single Line Textbox control every time the value of the drop down changes. Please insert the following JavaScript in the 'Custom JavaScript' section of Form Settings:

NWF$(document).ready(function() {   
    NWF$('#' + colorDrop).change(function() {
        var d = NWF$('#' + colorDrop + ' option:selected').val();

        switch (d) {
            case "Red": 
                NWF$('.defaultTXT').attr("value", "Red");
                break;
            case "Green":
                NWF$('.defaultTXT').attr("value", "Green");
                break;
            case "Blue":
                NWF$('.defaultTXT').attr("value", "Blue");
                break;
            default:
                NWF$('.defaultTXT').attr("value", "Please select a color!")
        }
    });
});

The Result

A New Fantastic Point of View: Slide UX for Nintex Forms

Nintex Forms allows for Forms Designers to create some really awesome ways for users to interact with forms and create an awesome experience. Well, let's take that experience one step further and build out a form with transitions from panel to panel instead of using tab-like functionality.

The Build

First we will need to open up the Forms Designer and add a few controls. You need to place four panels on the form with the following controls nested within each panel:

  • Label - For Step Number
  • Label - For buttons
  • Single Line Text Box for input
  • NOTE: Panels 2 - 3 will require two button (labels) for Next Slide and Previous Slide. 
  • NOTE: Panels 1 and 4 will only require one button (Panel 1 - Next Slide / Panel 4 - Previous Slide)
  • Save and Cancel buttons for panel 4.

The Code

For each label, you will need to edit the source of the label and insert the HTML elements that will act as buttons. The following HTML will have each button's HTML:

<div class="btn" id="1Next">
   <h3>Next Slide</h3> 
</div>

<div class="btn" id="2Prev">
   <h3>Previous Slide</h3> 
</div>

<div class="btn" id="2Next">
<h3>Next Slide</h3>
</div>

<div class="btn" id="3Prev">
   <h3>Previous Slide</h3> 
</div>

<div class="btn" id="3Next">
<h3>Next Slide</h3>
</div>

<div class="btn" id="4Prev">
   <h3>Previous Slide</h3> 
</div>

Next we will add the CSS classes in the Form Settings: 

.firstTab{
    visibility: visible;
    background-color: #00E2E2;
}
.secondTab{
    visibility: visible;
    background-color: #00E2E2;
}
.thirdTab{
    visibility: visible;
    background-color: #00E2E2;
}
.fourthTab{
    visibility: visible;
    background-color: #00E2E2;
}
.btn{
    background-color: #B6B6B6;
}

NOTE: Each panel has it's own CSS class. This is to assist us when calling on the .fadeIn() / .fadeOut() jQuery.

Once you have added the CSS classes (Nintex Form Settings > Custom CSS), please ensure that you add the appropriate CSS class to each panel (control settings). 

And last, but not least, let's add the JavaScript that will make this bad boy work! (Nintex Form Settings > Custom JavaScript):

NWF$(document).ready(function () {
    NWF$('.secondTab').fadeOut("fast");
    NWF$('.thirdTab').fadeOut("fast");
    NWF$('.fourthTab').fadeOut("fast");
    NWF$('#1Next').click(function () {
        NWF$('.firstTab').fadeOut();
        NWF$('.secondTab').fadeIn();
    });
    NWF$('#2Prev').click(function () {
        NWF$('.firstTab').fadeIn();
        NWF$('.secondTab').fadeOut();
    });
    NWF$('#2Next').click(function () {
        NWF$('.secondTab').fadeOut();
        NWF$('.thirdTab').fadeIn();
    });
    NWF$('#3Prev').click(function () {
        NWF$('.secondTab').fadeIn();
        NWF$('.thirdTab').fadeOut();
    });
    NWF$('#3Next').click(function () {
        NWF$('.fourthTab').fadeIn();
        NWF$('.thirdTab').fadeOut();
    });
    NWF$('#4Prev').click(function () {
        NWF$('.thirdTab').fadeIn();
        NWF$('.fourthTab').fadeOut();
    }); 
});

The Result

Want to see it in action??? Using Nintex Live, you can experience the awesomeness! Click the following URL: http://ntx.lv/1Xf39sz

Tab Indexing in Nintex Forms

There are a lot of users that love to use their keyboard instead of their mouse when navigating through an online form. I don't blame them, pressing 'Tab' is much faster then dragging a pointer and clicking in the next field. 

But what if I want to set up a custom tab order in my form? The following post will show how to setup a tab index in your Nintex Form.

The Build

Open the Nintex Forms Designer and place three 'Single Line Textbox' input controls. Next to each control, place a label (my labels are named for the order in which the user can tab through);

In the order you wish to apply the tab order, go into the Control Settings of each Single Line Text box, expand the Formatting section, and add the appropriate CSS Class into the 'Control CSS class' section: 

NOTE: My CSS classes are: firstStop, secondStop, thirdStop.

Next, let's add the CSS and JavaScript required to make this form work!

The Code

Place the following CSS in the Custom CSS section of the Form Settings:

.firstStop {}
.secondStop {}
.thirdStop{}

Next, add the following JavaScript in the Custom JavaScript section of the Form Settings:

NWF$(document).ready(function () {
    NWF$('.firstStop').attr("tabindex", "1");
    NWF$('.secondStop').attr("tabindex", "2");
    NWF$('.thirdStop').attr("tabindex", "3");
});

The Result

Nothing too much to show here, but all user interaction, however when the form renders, users will be able to tab through the inputs you have added to your form in the order you specify!

Feel free to post any questions/comments about this post!

 

Client-Side Random Term Validation in Nintex Forms

As of the time of writing this post, Nintex Forms does not have an ability to add server-side CAPTCHA out-of-the-box. But what if you want to have a random word generated on the screen and then have users enter in the correct word before they are able to progress with the form? Well, I have a workaround for you! 

NOTE: This validation is performed client-side.

The Build

Open up the Nintex Forms Designer and add a Rich Text control. After adding the Rich Text Control, open the configuration settings of the control and click body of the control and then click on the 'Edit Source' button.

The Code

Place the following code in the HTML Source of the Rich Text Control:

<label for="random">Random Term</label> 
<input disabled="disabled" id="random"/>
<p>
 <label for="randomInput">Please enter Random Term output: </label>
 <input id="randomInput"/>

You should now see the following in the Rich Text box:

Next, click on the Save button and add the CSS class name to the control: "testClass".

Open the Form Settings in the Forms Designer and expand the 'Custom CSS' section. 

Add the following CSS Class:

.testClass {
visibility: collapse;
 }

Next, let's add the JavaScript used to grab the term from the Array and control if the Save button is visible or not. 

With the Form Settings window still open, expand the Custom JavaScript section and add the following JavaScript:

NWF$(document).ready(function () {
 var valArray = ["Purple","Monkey","Dishwasher","Shell","Peanut","Stout","Brooklyn","Hugo","Ranger","Jet"];
 var randVal = valArray[Math.floor(Math.random()* valArray.length)];
NWF$('#random').val(randVal);
NWF$('#randomInput').blur(function () {
var rInput = NWF$('#randomInput').val();
 if (rInput != randVal) {
alert("Please enter matching values");
NWF$('.testClass').css("visibility", "hidden");
} else if (rInput == randVal) {
 NWF$('.testClass').css("visibility", "visible");
}
});
});

Save the JavaScript and then Save/Publish your form. Let's see what this guy looks like!

The Result

Here is what the form looks like on load:

What happens if I enter an incorrect term in the Random Term output input?

When the input field loses focus, the JavaScript will fire and since the terms did not match, the alert appears asking us to enter matching values. 

So what happens if I enter the correct term?

Notice that the Save button now appears! Only if the values match, will the save button appear per the CSS classes we assign the button control.

Feel free to leave any questions or comments and remember to check out Nintex Connect for awesome information on all things Nintex!

Cut The Ribbon: Remove the Ribbon in Nintex Forms for Office 365

The ability to add custom CSS (inline and through external files) in Nintex Forms for Office 365 allows you to can change the way the new/edit/display forms look. 

For Example, let's look at removing the ribbon in your Nintex Form.

The Build

Here is a general out-of-the-box Nintex Form (in Office 365), but we want to hide the ribbon:

The Code

To find the CSS Class we need to change, use the Developer Tools built into the browser you are using (F12 for Internet Explorer) and select the element you wish to hide.

Select Element Icon

Now that we found the <div> the ribbon lives in and the CSS class applied to it, we can find the parent <div> and class and add the correct CSS in order to collapse the element.

Go back to the Nintex Forms Designer and Select Form Settings > Custom CSS.

Once there, add the following CSS:

.nf-ribbon-fixed-top {
visibility: collapse;
}

Click Save and then Publish your form.

The Result

When you open the form again, you will see the ribbon is no longer there:

Feel free to leave any questions or comments and remember to check out Nintex Connect for awesome information on all thing Nintex!

How's it Progressing? Add a Progress Bar to your Nintex Form

Nintex Forms is awesome and offers a ton of flexibility and methods to add custom functionality to your form. One bit of functionality I've been asked about was a progress bar.

For example, you have a Nintex Form with tab functionality, but you want to have a progress bar on each panel to show how far along the end user is with the sections they are filling out. Let's take a look at how to do that.

The Build

Go ahead and create a Nintex Form with three 'Panels' and a 'Choice' control with the following configuration:

Next, add a few controls to each panel. I placed a label control with a question (See if you can guess where I got the questions), and a Single Line Text Box:

Almost there!!

Now the fun part. Nintex Forms allows you to add custom HTML to controls such as 'Rich Text' and 'Label'. When you click on the body section of the control configuration, you will see a button for 'Edit Source'. 

Add a label control to each panel. Now, in the first label you added, open up the configuration settings (click Edit Source!!!) and let's add the following HTML!

The Code

<progress value="1" max="3"></progress>

Make sure you have clicked 'Edit Source' before you place the code in, because otherwise the label will render the exact text value you entered instead of a progress bar. 

Since I have three panels, the max value is 3 and the value of the first panel is 1. The next two panels are as follows:

<progress value="2" max="3"></progress>
<progress value="3" max="3"></progress>

This is pretty simple stuff, but visual aids like a progress bar go along way with improving usability. I then added a label next to each progress bar to note it is for showing the progress of the form, and viola! 

Next, you'll have to build the Formatting Rules for each panel that you want to hide. Remember, place the hide rule only on the panel you want to hide and not the controls nested within the panel. Here is how the rule is configured for the first panel:

First Rule Configuration

After adding the additional rules for the second and third panel, give the form a test.

The Result

Feel free to leave any questions or comments and remember to check out Nintex Connect for awesome information on all things Nintex.