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";

run({
  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 (
    <>
      <AutoscrollRunner
        definition={/* Supply your form definition here */}
        onData={(instance) => setTotal(Export.NVPs(instance, "strings")["TOTAL"] || "")}
      />
      <div>
        Total order amount is: {total}
      </div>
    </>
  );
}

📖 Reference​

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