Customize SharePoint List Form In A Wizard Style

Samarendra Swain

8y17.1k6100Article

SharePointSharePoint List Form

6 Comments

Join the conversation! Your thoughts help the community grow.

Debarshi Chakraborty6y ago
THank you so much..It worked seamlessly! Just a suggestion. Though I figured it out, just for the sake of completeness, plz also highlight, which part of the code to change if we want more OR less than 6 tabs (groups)
Kapil Kondapally7y ago
Thank you for this solution. Is it possible to have navigation links on left nav so that the user can click and go to any wizard?
Guest User8y ago
The Google drive download link worked just fine. Many thanks!
Guest User8y ago
When I click the download link at the top, it just opened a new page and displayed what I assume was part of the zip file.
Guest User8y ago
I am unable to download the source archive
- Samarendra Swain8y ago
  Hi Charlie, it should work. However try with this link. https://drive.google.com/file/d/1PMU76k-sshkGEmZjFdlWVwQkGX3P8tF0/view?usp=drivesdk

In this example, we will create a list and show the list columns in a wizard style.

Follow the steps.

Step 1

Create an Employee list with the set of columns. I have created 24 columns to show them in 6 steps, in a wizard.

By default, if you click on the new item in the Employee list, the web form looks like below.

Screenshots for your reference

SharePoint

Step 2 Enable content type in Advanced settings in the Employee list.

Click on the item content type and then click on Column order to set the position of each column to show in the right position in the wizard.

In this example, I have created 24 columns to show them in below 6 steps.

Employee: Basic Details (Contains 8 columns)
Employee: Project Details (Contains 3 columns)
Employee: HR Details (Contains 3 columns)
Employee: Finance Details (Contains 3 columns)
Employee: Insurance Details (Contains 4 columns)
Employee: Passport Details (Contains 3 columns)

To show the specific column in a specific step in the wizard, set the position from the top for each column in a sequence.

That means, as per the column order, step Employee: Basic Details will show 1st 8 columns, then step Employee: Project Details will show next 3 columns, then Employee: HR Details will show next 3 columns and so on.

Screenshots for your reference

SharePoint

Step 3

Prepare the below JS and CSS files. Please find the attached zip file (SharePointListFormWizardStyle.zip) containing the below files.

EmployeeFormWizardStyle.js (Custom file)
jquery-1.11.1.min.js (Generic file)
query-ui.css (Generic file)
jquery-ui.js (Generic file)

Create a folder(WizardStyle) in a document library and upload these files.

Edit EmployeeFormWizardStyle.js file and change the source path of the following files.

jquery-1.11.1.min.js
jquery-ui.css
jquery-ui.js

Screenshots for your reference

<script type="text/javascript" src="/sites/TestSite/Shared%20Documents/WizardStyle/jquery-1.11.1.min.js"></script>
<link type="text/css" rel="stylesheet" href="/sites/TestSite/Shared%20Documents/WizardStyle/jquery-ui.css" />
<script type="text/javascript" src="/sites/TestSite/Shared%20Documents/WizardStyle/jquery-ui.js"></script>

If you would like to change the Step name, change it in the EmployeeFormWizardStyle.js file.

Screenshots for your reference

<div id="StepDesc1" style="display: block;font-size:20px;color:Black;font-weight:bold;">Employee : Basic Details</div>
<div id="StepDesc2" style="display: none;font-size:20px;color:Black;font-weight:bold;">Employee : Project Details</div>
<div id="StepDesc3" style="display: none;font-size:20px;color:Black;font-weight:bold;">Employee : HR Details</div>
<div id="StepDesc4" style="display: none;font-size:20px;color:Black;font-weight:bold;">Employee : Finance Details</div>
<div id="StepDesc5" style="display: none;font-size:20px;color:Black;font-weight:bold;">Employee : Insurance Details</div>
<div id="StepDesc6" style="display: none;font-size:20px;color:Black;font-weight:bold;">Employee : Passport Details</div>

Also, if you would like to change the number of columns to show in a specific step in the wizard, change the size in the EmployeeFormWizardStyle.js file.

Screenshots for your reference

var tabInfo = [
{title:"Step1",size:8},
{title:"Step2",size:3},
{title:"Step3",size:3},
{title:"Step4",size:3},
{title:"Step5",size:4},
{title:"Step6",size:3}];

Save the EmployeeFormWizardStyle.js file and upload to document library.

Step 4

Click on New Item in Employee List which will redirect to /sites/TestSite/Lists/Employee/NewForm.aspx page. Edit the page and add a Content Editor Web Part.

Screenshots for your reference

Step 5

Get the URL of EmployeeFormWizardStyle.js file from the document library and type it. Then, click "Apply" and stop editing.

Example of file URL: /sites/TestSite/Shared%20Documents/WizardStyle/EmployeeFormWizardStyle.js

Step 6

Now, click "New Item" in Employee List which will show the New Form in wizard style.

You can click "Next" and "Previous" buttons to navigate between the steps in the wizard.

Click "Next".

Click "Next"

SharePoint
Click "Next".

Click "Next "

Step 7

Now if you would like to see the same wizard style design in EditForm.aspx page, follow the Steps 4 and 5 in /sites/TestSite/Lists/Employee/EditForm.aspx page.

Then, you will see the Edit form of an existing item as below.

SharePoint

Click "Next".

That's all!