Write variables to file?

Community Help
1

Hi all, I’m a new observables user.

I plan to embed an observable notebook into my blog for my small blog community to play with.
At the end of playing, they can press a submit button and the value of the four variables they have selected (via sliders) should be appended to a file. After a week I will use the data in the file to produce a statistical graphic back to the blog.

  1. can this be done directly in the observable notebook (ie pass/append variables to a file)?
  2. if not (I suspect), can the variables be passed from the iframe (embedded notebook ) to the parent frame in my blog page? (relatively easy to export from there)

Thanks

2

Good question!

Re: 1.

You’re right that there’s no way to do that purely within Observable, in that Observable does not offer persistent storage. You can’t write to a file attachment or other built-in database. If you have a database connected you can write to it (just a regular INSERT INTO), but that only works with private notebooks.

But you can call any API from a notebook, including posting data to it. Often you don’t wanna have to set up a server just for that purpose, so people have used stuff like Firebase and Airtable as lightweight writeable stores. @tomlarkworthy often magically appears in threads like because he’s done a ton of that: see his Firebase wrapper and his expansive serverless notebooks initiative.

Re: 2.

I’m a little rusty but I think security restrictions prevent you from accessing the parent window from inside the iframe. If you call window.parent from the notebook you’ll see “SecurityError: Blocked a frame with origin “https://yourname.static.observableusercontent.com” from accessing a cross-origin frame.” (Your notebook code runs inside an iframe even on observablehq.com; when you use the iframe embed, it’s really an iframe within an iframe.) So you can’t use postMessage to send a message from the iframe to your blog, because you couldn’t obtain a reference to your blog window.

So this might be a case for embedding the notebook more directly onto your blog (no iframe) using the Runtime API. (Change the dropdown from “Iframe” in the embed modal.) E.g., here’s an example where, when a value changes, it calls a React useState setter function (the return {fulfilled: setSelection} part).

1 Like
3

For this kind of light collaboration I would use Firebase (Firebase and Firebase UI / Tom Larkworthy / Observable).

for an app with no realtime requirements and no security concerns I might just use the REST API directly without a client Firebase Database REST API

1 Like
4

Thanks for the leads @tophtucker and @tomlarkworthy, firebase option looks great. Will give that a go.