Skip to main content

Implement stock runner using HTML

You can use good old HTML to implement a stock runner. To do so, you need to load the Runner library from a CDN or host the library yourself. If you want to use a CDN, you could go with unpkg, or jsDelivr.

info

The stock runners all depend on the Runner library. This library is the actual workhorse of the Tripetto runners. It parses the form definition and prepares it for UI rendering.

📄 Basic implementation​

This code example shows the minimal code required to run a form using simple HTML. The example assumes you have created a form and saved the form definition, so you can use it in the runner.

<html>
  <body>
    <script src="https://cdn.jsdelivr.net/npm/@tripetto/runner"></script>
    <script src="https://cdn.jsdelivr.net/npm/@tripetto/runner-autoscroll"></script>
    <script>
    TripettoAutoscroll.run({
      definition: /* Supply a form definition here. */,
      display: "page" // Let the runner know it runs full-page
    });
    </script>
  </body>
</html>

Run Try on CodePen

👩‍đŸ’ģ Use a custom HTML element​

If you want to display the runner inline with other content, you can specify a custom HTML element as a host element for the runner.

<html>
  <body>
    <div id="RunnerElement"></div>
    <script src="https://cdn.jsdelivr.net/npm/@tripetto/runner"></script>
    <script src="https://cdn.jsdelivr.net/npm/@tripetto/runner-autoscroll"></script>
    <script>
    TripettoAutoscroll.run({
      element: document.getElementById("RunnerElement"),
      definition: /* Supply a form definition here. */
    });
    </script>
  </body>
</html>

Run Try on CodePen

tip

There is no need to specify the display property as we did in the previous example since inline rendering is the default behavior.

đŸ“Ĩ Collecting response data​

The next step is actual data retrieval from the form. To do so, you use the onSubmit event. This event fires when the form completes and the response data is ready for further processing. The event receives a reference to the active form instance. Together with one of the Export functions from the Runner library, you use it to retrieve data in a convenient format. The following example shows how to export the data using the exportables or CSV function.

<html>
  <body>
    <script src="https://cdn.jsdelivr.net/npm/@tripetto/runner"></script>
    <script src="https://cdn.jsdelivr.net/npm/@tripetto/runner-autoscroll"></script>
    <script>
    TripettoAutoscroll.run({
      definition: /* Supply a form definition here. */,
      onSubmit: function(instance) {
        // This exports all exportable data in the form
        const exportables = TripettoRunner.Export.exportables(instance);

        // Iterate through all the fields
        exportables.fields.forEach((field) => {
          // Output each field name and value to the console
          console.log(`${field.name}: ${field.string}`);
        });

        // This exports the collected data as a CSV object
        const csv = TripettoRunner.Export.CSV(instance);

        // Output CSV to the console
        console.log(csv.fields);
        console.log(csv.record);
      }
    });
    </script>
  </body>
</html>

Run Try on CodePen

tip

The onSubmit event supports some additional features for error handling. Have a look at the Collecting response data guide for more information and guidance.

🌎 Self-host the library​

If you want to host the runner files on a custom domain, you must publish the required JavaScript files to that domain. To do so, download the following files (right-click and select save as) and publish it to the desired domain. Update the src-attributes of the script tags, so it points to the domain and location of the JavaScript files.

đŸ“Ĩ https://unpkg.com/@tripetto/runner

đŸ“Ĩ https://unpkg.com/@tripetto/runner-autoscroll

📖 Reference​

Have a look at the complete autoscroll runner API reference for detailed documentation. In the examples above, the following symbols were used:

⏭ī¸ Up next​

Now you've got the basic implementation for the runner up and running, dive deeper into the following topics: