Skip to main content

Runtime data usage

It is possible to use the data collected with the form while it is running and use that data outside of the form. This can be useful, for example, if you have an order form that calculates the total price of the order and you want to display this price somewhere outside the form. To do so, we can use the onData event of the runners. This event fires when the data in the form changes. Using one of the export functions we can retrieve the desired data value and then use it somewhere else.

👩‍💻 Simple example

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

definition: /* Supply your form definition here */,
onData: (instance) => {
// This example assumes the form has a field `TOTAL` that contains the total order amount
const total = Export.NVPs(instance, "strings")["TOTAL"] || "";

// Now we can use this value
console.log(`Total order amount: ${total}`);

⚛️ React example

import { AutoscrollRunner } from "@tripetto/runner-autoscroll";
import { useState } from "react";
import { Export } from "@tripetto/runner";

function OrderForm() {
const [total, setTotal] = useState("");

return (
definition={/* Supply your form definition here */}
onData={(instance) => setTotal(Export.NVPs(instance, "strings")["TOTAL"] || "")}
Total order amount is: {total}

📖 Reference

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