Steps demo

Steps wizard

Steps wizard allows to build a wizard-like functionality using buttons to go through the different steps and using events allows to hook into each step individually.

If you're going to use another solution for handling steps (e.g. process framework), you may only be interested in the HTML markup.

Customizable options

var wizard = Wave.StepsWizard(
  el,   // a DOM node to which the wizard will be attached to
  {
    selectedItem: {
      step: 1   // sets the initial step,
                // by default the wizard will look for the first step-label with .steps-label--is-active class
    },
    addClickHandlers: true,   // whether the navigation buttons should have click handlers attached (defaulting to true)
    enableOverview: true,     // whether an overview of steps should be displayed when clicking on the navigation bar at smaller screen screens
    shouldScrollToTop: true   // whether scroll position should be always set to top when switching steps (defaulting to false)
  }
);

Component's API

.enable(stepNumber) enables a given step.

.disable(stepNumber) disables a given step.

.isEnabled(stepNumber) returns a boolean indicating whether a given step is enabled.

.getStates() returns an array of objects containing information about each step's state.

.prev() moves to the previous step.

.next() moves to the next step.

.selectedItem(object) sets the wizard to the step you specify. Expects object structured like so: { step: 2 }. If the parameter is omitted it will return an object containing a step property with the index number for the current step.

.destroy() reverts the wizard back to its original state and removes event listeners.

.on('init', function()) event that triggers after component is initialized and when initial step displays to the user.

.on('change', function(data)) event that triggers when a step is changed and displays to the user. Data is an object like so: { step: 1 }.

.on('navigate', function(data)) event that triggers immediately when next or previous button is clicked. Data is an object like so: { step: 1, direction: 'next' }.

.on('back', function()) event that triggers when back/cancel button is clicked on the first step.

.on('finish', function(content)) event that triggers when finish/complete button is clicked on the last step.

Usage example

var wiz = Wave.StepsWizard(document.querySelector('.js-stepsWizard'));
wiz.on('change', function (data) {
  console.log(data);
});
wiz.on('finish', function () {
  alert('Executing a callback after all steps are completed');
});
wiz.on('back', function () {
  document.location.replace('index.html');
});

View the required markup for the wizard

Steps demo

Steps wizard

Go to sub steps Jump to first step

Skisse

Skissen fra søknaden må oppdateras og settes i korrekte mål får at ferdigmeldingen skal godkjennes.

Eksisterende skisse
Erlandsgate11.pdf

Kartlag

VA Påkobling VA Dagbok VA Ledninger VA Punkter VA Dagbok

Title

Suspendisse aliquam in ante a ornare. Pellentesque quis sapien sit amet dolor euismod congue. Donec non semper arcu. Sed tortor ante, cursus in dui vitae, interdum vestibulum massa. Morbi lobortis urna quis augue mollis, eget vulputate nunc feugiat. Nunc pulvinar, nunc quis convallis congue, velit odio pharetra ipsum, quis tempor tortor augue ut ante.

Title

Nulla fringilla, erat vel lobortis adipiscing, lorem massa elementum felis, quis aliquet orci felis consectetur enim. Curabitur facilisis eget orci vitae tempor. Phasellus arcu lorem, dapibus sit amet elit vitae, porta mattis magna. Donec interdum felis at iaculis dictum. Aliquam convallis lorem vitae orci porttitor blandit.

Steps demo

Steps wizard

Eiendomsdetaljer

Navn

Ole Halvor Olsen

Adresse

Erlands gate 11, 4010 Stavanger

Tiltakshaver

Navn

Ole Halvor Olsen

Adresse

Erlands gate 11, 4010 Stavanger

Hustelefon

93265845

Mobil

93265845

E-mail

ole.halvor.olsen@outlook.com

Annet

A description of the work order. A description of the work order. A description of the work order. A description of the work order. A description of the work order. A description of the work order.

Vedlegg

Attachment no 1, with a long name
Attachment no 1, a sketch of …

Arbeid som skal utføres

Ny tilknytning til offentlig vann-/avløpsanlegg

Bolig

Steps wizard
Form
Additional
Page toggles
Map
Columns
Summary

Steps wizard

Customizable options

Component's API

Usage example

Add details

Steps wizard

Toggle sections

Collapse sections

Page 3

Page 4

Skisse

Kartlag

Title

Title

Steps wizard

Eiendomsdetaljer

Navn

Adresse

Tiltakshaver

Navn

Adresse

Hustelefon

Mobil

E-mail

Annet

Vedlegg

Arbeid som skal utføres

Steps markup