Turning a form into a wizard-like experience

For this tutorial, we will be using jQuery steps. It is a jQuery (already included by default in our mobile forms) plugin which facilitates wizard creation.

Uploading a new support file

To include this extra file in your form directory, you need to upload it to your project's support files through our Developer API.

First, go to https://www.amigocloud.com/api/v1/me. Then click on the link corresponding to the "projects" entry. You should now see a list of all your projects. Find the one you are looking for (you can find the project id in the URL of the AmigoCloud web app like this: https://www.amigocloud.com/dashboard/index.html#/project-dashboard/1672/datasets). Under that project's entries you should see one called "support_files", click on it and then click on the "files" entry in that one.

Another, perhaps easier, way to get to this point is using the following URL:

https://www.amigocloud.com/api/v1/users/<YOUR_USER_ID>/projects/<PROJECT_ID>/support_files/list

And <YOUR_USER_ID> with your user id and <PROJECT_ID> with the id for the project on which you're working.

Scroll to the bottom of the page to find an upload button. Click on it and select the file you want to add. In this tutorial it should be the JavaScript file for jQuery Steps. Then click on the "POST" button and you should be good to go.

Using a new support file on your form

You've probably noticed this at the top of the form's HTML:

<link rel="stylesheet" href="bootstrap.min.css"/>
<link rel="stylesheet" href="mobiscroll.datetime.css"/>
<link rel="stylesheet" href="form-edit.css"/>
<script src="bootstrap.min.js"></script>
<script src="mobiscroll.datetime.min.js"></script>

These are the default dependencies, but you can add more as long as they're already uploaded to the support files (which we just did). Just insert whatever new dependencies you need.

Adapting the form for jQuery Steps

Now, the form as it looks by default won't be able to support jQuery Steps pre-requirements for making it wizard-like. 

First, remove the <ul> and <li> tags from the form. They will only get in the way from this point.

Next, add <h3> tags before each field. This will be the title for the corresponding wizard section. Then, wrap the field below the <h3> tag around an extra <div> tag. The result should look like this:

<h3>Step 1</h3>
<div>
  <div id="text_field" class="value-group">
    <label class="name">Text Field</label>
    <span class="assignment">:</span>
    <input type="text" class="value"></input>
  </div>
</div>

We need that extra <div> around the field because jQuery Steps messes with the id of the content and we already know that those ids must be the same as the column name.

Finally, we need to add a little piece of JavaScript at the bottom of the form. This will actually initialize the jQuery Steps plugin for our form object:

<script>
  $(document).ready(function () {
    $("#single-row-view").steps({

      headerTag: "h3",

      bodyTag: "div",
      autoFocus: true,
      enableFinishButton: false,
      labels: {
        current: ''
      }
    });
  });
</script>

You are encouraged to look into the documentation of jQuery Steps to see all of the available options. There may be some there that suit your needs better than the ones I've used in this tutorial.

Styling the jQuery Steps wizard

If you follow the tutorial correctly up to this point, you should get a wizard-like behavior on your form, but it will look really terrible. That's because there are no styling rules (aka CSS) for any of the wizard's shenanigans. Of course, you are free to customize it in any way you'd like to, but I'm attaching the wizard.css file I created to make it look as close to the example in the jQuery Steps page as possible.

Remember that, in order to be able to include that file as a dependency on your form, you need to first upload it to your project's support files. If you feel like that is too much of a hassle you can always copy the file's contents to a <style> tag in the form itself.

This is a screenshot of the final result for the sample HTML shown in the previous section:

We're always happy to help

If you have any remaining questions about this topic (or any other) feel free to contact the team at our help address. In addition to that, you can contact the author of this help article for more in-depth questions about forms at marco@amigocloud.com.