pwarrak@iss-mea.com

Dynamic Progress Bar with Nintex Form

Blog Post created by pwarrak@iss-mea.com Champion on Mar 2, 2017

Good day,

 

It's my first Blog here. 

 

I will show you a Nintex "Feedback" form where I will add a panel to use it as a progress bar. The form contains a set of questions (Choice controls). I will use the following techniques in order to accomplish what I need:

 

1-CSS

2-Bootsrap font (glyphicons-halflings-regular)

3-jQuery

 

Step 1: Let's create the form containing the following.

   a-A random number of choices with the below settings:

 b-A panel (Our progress bar) with the below settings:

Step 2: Download the glyphicons-halflings-regular font with the (.woff .woff2 .eot .svg .ttf) extensions:

Step 3: Add the following JavaScript file (I named it "progressive.js") with the below code to the "Site Assets" library:

Step 4: Add the following CSS file (I named it "progressive.css") with the below code to the "Site Assets" library:

Step 5: Let's add references to the files in our form:

Step 6: The "Site Assests" Library will look like:

Step 7: My form will look like :

Attached you can find all the needed files. Extract and copy them as they are to the Site Assets library.
Don't hesitate to ask for any clarification.

Enjoy the power of Nintex!!!

Let's make the world better .

Attachments

Outcomes