Creating a multi-step form widget

[Bastiaan de Zw1]

Hi, 

I'm trying to get better at creating widgets and understanding portal development. 

I'm actually trying to recreate this from W3schools. https://www.w3schools.com/howto/howto_js_form_steps.asp

Looking at this code, how would this look in ServiceNow in the Client Script?

var currentTab = 0; // Current tab is set to be the first tab (0)
showTab(currentTab); // Display the current tab

function showTab(n) {
  // This function will display the specified tab of the form ...
  var x = document.getElementsByClassName("tab");
  x[n].style.display = "block";
  // ... and fix the Previous/Next buttons:
  if (n == 0) {
    document.getElementById("prevBtn").style.display = "none";
  } else {
    document.getElementById("prevBtn").style.display = "inline";
  }
  if (n == (x.length - 1)) {
    document.getElementById("nextBtn").innerHTML = "Submit";
  } else {
    document.getElementById("nextBtn").innerHTML = "Next";
  }
  // ... and run a function that displays the correct step indicator:
  fixStepIndicator(n)
}

function nextPrev(n) {
  // This function will figure out which tab to display
  var x = document.getElementsByClassName("tab");
  // Exit the function if any field in the current tab is invalid:
  if (n == 1 && !validateForm()) return false;
  // Hide the current tab:
  x[currentTab].style.display = "none";
  // Increase or decrease the current tab by 1:
  currentTab = currentTab + n;
  // if you have reached the end of the form... :
  if (currentTab >= x.length) {
    //...the form gets submitted:
    document.getElementById("regForm").submit();
    return false;
  }
  // Otherwise, display the correct tab:
  showTab(currentTab);
}

function validateForm() {
  // This function deals with validation of the form fields
  var x, y, i, valid = true;
  x = document.getElementsByClassName("tab");
  y = x[currentTab].getElementsByTagName("input");
  // A loop that checks every input field in the current tab:
  for (i = 0; i < y.length; i++) {
    // If a field is empty...
    if (y[i].value == "") {
      // add an "invalid" class to the field:
      y[i].className += " invalid";
      // and set the current valid status to false:
      valid = false;
    }
  }
  // If the valid status is true, mark the step as finished and valid:
  if (valid) {
    document.getElementsByClassName("step")[currentTab].className += " finish";
  }
  return valid; // return the valid status
}

function fixStepIndicator(n) {
  // This function removes the "active" class of all steps...
  var i, x = document.getElementsByClassName("step");
  for (i = 0; i < x.length; i++) {
    x[i].className = x[i].className.replace(" active", "");
  }
  //... and adds the "active" class to the current step:
  x[n].className += " active";
}

Any pointers or help would be much appreciated!

[Sebastian L · Accepted solution]

Hi Bastiaan, 

So, first of all, if you want to know more about Service Portal I would much rather look into AngularJS instead of what you have found here. 

Here is a very simple plnkr of how to move from step 1 to 2 to 3 etc. by using Angular. Just so you can understand the differences : https://plnkr.co/edit/ofha6qAyNgJZj7XQ5Zk7?p=preview&preview 

Here is one that has a funtional form, where you can see how it somehow translates. You can then compare what you have in your HTML example to the one only using angulkar: https://codepen.io/jaa2015/pen/GqparY 

The JS part is what would be the Client Script on the Service Portal. So everything after the controller (which is the client controller part on the widget). Instead of using the document and classes, you will be using $scope, ng-model, ng-class and basically just plain simple angular methods. 

Hope it makes sense and gives you something you can dig into! 🙂 

[Bastiaan de Zw1]

Thank you for your extensive answer! Needed these pointers to get started 😀