Skip to content

Fiddle Demo

Basic Usage

You can add a Fiddle to the page with pre-set transactions & query like so:

Run
Open in xt-fiddle

If you want to preserve whitespace you can do this:

Run
Open in xt-fiddle

Hide editors

Sometimes you just want to show of the query, you can hide the transactions like so:

Run
Open in xt-fiddle

You can do the same with the query of course:

Run
Open in xt-fiddle

If you have an error in the transactions/query it looks like this:

Run
Open in xt-fiddle

System Time

You can set system time on a transaction like so:

2020-01-01
Run
Open in xt-fiddle

Multiple Transactions

It can be useful to include multiple “batches” of transactions. Particularly for showing of valid time & system time:

2020-01-01
2020-01-02
Run
Open in xt-fiddle

Magic Context

While of course you can use hidden Txs to include transactions previously executed on the page but that can get tedious.

Instead you can tell the component to look at transactions from previous fiddles on the page. Note that it will only look for transactions from fiddles with the same context id string set.

For example:

2020-01-01
Run
Open in xt-fiddle

Note that it we only have docs from this fiddle.

2020-01-02
Run
Open in xt-fiddle

Note that now we have the transactions from the previous fiddle :)

This fiddle uses a different context id, so it will not use the context of previous fiddles:

2020-01-02
Run
Open in xt-fiddle

Caveats

Please note that the fiddle expects exactly one Query and it will always run it after all transactions are run For example:

Run
Open in xt-fiddle

And with no query you’ll get an error at load time in the browser console.

Run
Open in xt-fiddle

Having just a query is fine though (and useful with Magic Context):

Run
Open in xt-fiddle