Skip to main content

Implement runner using plain JS

You can implement a stock runner using plain JS.

✅ Add packages to your project​

First, you need to add the required packages to your project. To do so, run the following command:

npm install @tripetto/runner-autoscroll @tripetto/runner
info

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

📄 Basic implementation​

This code example shows the minimal code required to display the runner. It uses the run function to bootstrap the runner using a single call. By default, the runner will use the body element of the browser consuming the full-page viewport (have a look here if you want to display the runner inline with other content).

import { run } from "@tripetto/runner-autoscroll";

// Open the runner
run({
  definition: /* Supply your form definition here */,
  display: "page" // Let the runner know it runs full-page
});

Run Try on CodeSandbox

👩‍đŸ’ģ 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 for the runner.

import { run } from "@tripetto/runner-autoscroll";

// Open the runner
run({
  element: document.getElementById("CustomElement"),
  definition: /* Supply your form definition here */
});

Run Try on CodeSandbox

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.

import { run } from "@tripetto/runner-autoscroll";
import { Export } from "@tripetto/runner";

// Open the runner
run({
  definition: /* Supply your form definition here */,
  onSubmit: (instance) => {
    // This exports all exportable data in the form
    const exportables = 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 = Export.CSV(instance);

    // Output CSV to the console
    console.log(csv.fields);
    console.log(csv.record);
  }
});

Run Try on CodeSandbox

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.

📖 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: