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.
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.
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.
Those are both solid ideas. Thanks Brian!