Get your Jamboard text

We’re doing some strategic planning in Google’s Jamboard. I find it good for the live/interactive aspects of the conversation but when I was looking back over it, it was hard for me to read and organize in my head. I decided I wanted the text from the various sticky notes in a spreadsheet so that I could think about them in different ways. Jamboard doesn’t seem to have any way to interact with it via Google Script or the normal routes I’d pursue. Let’s also pretend that I noticed the “export as PDF” option earlier and rejected it because it was image based.

What am I looking for?

First, I opened the Developer Tools manually (right click won’t work in these javascript appy things). I looked around a bit in the soup that is the HTML for the page. Eventually I saw the ‘jam-postit-element’ class was associated with the things I wanted. I also saw that the active board would be in the div with ‘jam-frame-active’.

Quick and easy

Because I’m just doing a quick thing, I don’t really have to make a robust magical unicorn. I just need the simplest path to my destination.

Grab the data

I navigate to the board I want. I used the developer tools to search for .jam-frame-active and I right click and copy the element.

A screenshot of Chrome with the developer tools open and the Elements tab selected. A search for .jam-frame-active is shown with the contextual menu showing to allowing copying of the element.

Display what I want

I made a quick HTML page so I could just paste in this data.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>get the data</title>
</head>

<body>
    <div id="show-me"></div>
<!--paste the jamboard data between here-->

<!--and here-->
 <script type="text/javascript" src="main.js"></script>

</body>

</html>

The javascript to do the work is tiny but so very handy. I use this pattern all the time.

const stickies = document.querySelectorAll('.jam-postit-element');//get all the things

const destination = document.querySelector('#show-me');//decide where I want them to go

stickies.forEach((sticky) => {//loooooop it
 let text = sticky.dataset.value;//get the data attribute since Google stores it there nicely
 destination.innerHTML += `<div>${text}</div>`;//write it out
});

You could make all this fancier in lots of ways. It’d be an easy one to turn into a bookmarklet for instance. I don’t know how it’ll deal with content that isn’t in the sticky format but it did what I needed and maybe it’ll help you.

Big picture

I like this as an aspect of digital fluency. I’m moving data from one tool/visual environment to another because I want to think about it differently. I realized that the display and interactions afforded by different environments impact how easily I could use those tools/environments1 to manipulate and think about the data. To do it quickly, it was helpful to know a number of things were possible technically but I think the more important part was to want to move it.

Nothing earth shaking, just another example. It is nice to see a pattern repeating. It means I can do something like this in 5 or 10 minutes now rather than struggling with the basics. Always good to see progress.


1 I need to thinka about that overlap in terms.

Comments on this post

  1. Brian Bennett said on March 25, 2022 at 12:09 pm

    This is nice. There’s an app we use which allows you to take a photo of a post-it note board and it’ll OCR all the notes and give you a digital representation you can interact with. One export option was into a spreadsheet. Since we picked up Jamboard, we’ve been using the post it style text blocks but have missed the exports.

    If you throw it into a Google Script, you might be able use the `UrlFetchApp` class to get the page HTML and write it directly into a sheet…might be fun to try out.

    • Tom Woodward said on March 25, 2022 at 2:26 pm

      Those are both solid ideas. Thanks Brian!

Leave a Reply

Trackbacks and Pingbacks on this post

No trackbacks.

TrackBack URL