The potential of buttons!

#1

Hi everyone!

I’m sure that some form of buttons are going to be added to Coda someday, but I just wanted to start a conversation about what they could be like and what the use cases might be.

I think that adding programmable buttons would make it so people can really turn their Coda docs into apps. Basically, the interface of the app would be made of mostly buttons, but then the buttons help control data which is held inside tables on a different section of the doc.

A specific example that I can think of would be for a goal tracker. If my goal was to read 30 books, the interface of the app would have of a button that, when pressed, tells the table data that I have read 1 more book. Then, under the button would be a simple formula taking that data and showing how many books I’ve read out of the 30.

I know it’s super simple, but it would help me so much. I’m curious, how would you all use buttons?

7 Likes
#2

I actually built an “app” in Sheets a few years ago that used buttons. Essentially, I wanted to do push-ups, squats, or jumping jacks anytime I had a specific amount of contact points. So, 10 calls = 10 pushups, 1 chat = 10 squats, etc.

Most buttons require scripts… I wonder if it would be possible to emulate that functionality with the current functions available in Coda.

1 Like
#3

@zoglow the fastest “button” you have is a table with a count column and then a view for input. Here’s a picture and I’ll walk through some of the behaviors.

Button Click is a view of Button Log with the “Date” column hidden and the filter set to ID.IsBlank(). This makes every click of the + automatically generate a new row. Thanks to the ID column being pre-filled, it will instantly disappear after clicking away.

Button Log contains every new row we made inside of the Button Click view. The “ID” column has a formula of thisRow.RowId(), a fast and easy way to guarantee a unique record. A “Date” column makes it easy for us to query later and ask “how many times was the button clicked during a certain window” with a default value of now(). The “count” column has a default value of 1 and makes our summing work as expected.

Every time we click the + inside of Button Click we’ll create an entry in Button Log no matter where it is in our coda doc.

Beyond this basic button, default values in views such as user() can make it possible to create signup forms or surveys (using the card view).

Give it a try and let me know your thoughts.

6 Likes
#4

Interesting! Thanks, I will test this out and see what I can make.

#5

Wow, thanks @jakobheuser ! I’m using the thisrow.created=now to enter data in a view field, but this technic seems nice to use.

Concerning buttons, I asked this a few times in private to Coda. I called it Triggers. Button as triggers would be awesome in Coda. This is for more something important that is missing.
For example, I want to enter data in a table and add it to another table as freezed values. I can’t do this actually because it would require formulas in my target table so the values would change anytime I change them in my input table.

1 Like
#6

@zoglow You wouldn’t believe how nice it is to see this suggestion - we built a version of this in a hackathon a couple years back, and I’ve been itching to get this onto our roadmap and shipped. I think we actually have a very elegant idea of how to do this that I call “action links”. Hopefully, more on this soon.

@jakobheuser Wow, that’s a super creative solution, I haven’t seen that before. I’m hoping we can do something less hacky than that, but it’s an interesting workaround in the meantime. One small suggestion would be to have the Button Click view show just a single column with a checkbox - e.g. “Read a book”… check! Also, for @zoglow’s use case, she might want to add some info (e.g. the name of the book) and then have it disappear.

One last thought is that we’re starting to beta test our first API entrypoints through our zapier integration. It would be great to get someone to build something like this via zapier as well. E.g. create a button (maybe even a chrome extension) that when pressed, creates a row in the appropriate coda table.

Exciting thread!

7 Likes
#7

@shishir I’ll be looking forward to hearing more about action links! Also, thanks for the suggestion about adding a book title before having it disappear, it really helps me to imagine specific use cases.

@jakobheuser Thanks again for the thorough tutorial on how to hack buttons. I put the concept into my doc, but haven’t done anything with it yet. I have lots of ideas I am excited to try, though.

#8

@shishir A Zapier integration sounds interesting. Any way of getting a beta invite?

While waiting for the Coda mobile app, I’d like to build a way to add to-do’s on the go. Using one of the connected Zapier to-do apps and an integration with Coda could be a way of doing it…

1 Like
#9

I would love to get an invite to test the Zapier integration. I’m using Bubble.is (a powerfull “zero” code developing tool) with zapier/sheetsu and google sheets, would love to try coda for that. Bubble.is also have an API Connector that basically can get (& post) any json api and input/manipulate the data in my app.

2 Likes
#10

@Iona_Matheus Bubble seems great, I’ll give it a try. I’m a noob concerning api but I definitely need to use some. Did you think it would be possible to automate getting some informations here : https://steamspy.com/api.php
Then update some Coda rows from it?

#11

Bubble.is is truly amazing, git it a try. About the steam spy, as you can check runing (for example) this url in your browser (http://steamspy.com/api.php?request=genre&genre=Early+Access), you can see the json results. This is everything you need to connect with Bubble API Connector to use the data. Inputing in coda could be trickier, since you will probably need the zapier integration first.

#12

Hi everyone. I’m a product manager at Coda working on external integrations.

As Shishir mentioned, we are starting with a Zapier integration and we have currently kicked off an alpha. Most likely, we’ll break Zapier integrations when we go from alpha to beta which is why we’ve kept it small. :slight_smile:

That being said, I’m really stoked about your excitement around Zapier - I’ll kick off a separate thread to learn more about what’s most important to all of you. @William_Larsten and @Iona_Matheus, I’ve also added you to our beta list - should be able to get you access soon!

4 Likes
Forms that can be created easily
#13

Hi @preeyanka, I’d love to hear more about a Zapier integration. We are interested in using Typeform to add data to tables in Coda.

Don’t hesitate to reach out if you think my feedback could be useful .

1 Like
#14

Hi Raul!

That sounds like a great use case. I’m sending you a direct message to follow up!

Preeyanka

#15

I second the request for invite to use Coda w/ Zapier!

#16

Hey, I wanted to share my experience with “dynamic buttons” and Zapier on a working example of a Meeting Room Booking Application with you.

The result GIF (click to expand)

This is a workaround and I would love to do the same WITHOUT Zapier, but I think it shows some possibilites and a way, that buttons would make a lot of sense in Coda. I already discussed a similiar test with Coda team im private, but this is a way better use case.

IMPORTANT: Before you use this workaround, check out the “Known Issues” at the end of this post!

Let’s imagine we want to make a simple Booking Application with the power of Coda. What we want is to book a specific room for a specific day at a specific time. Also we want only to be able to book the room when the room is free at this time and day. And all that with just one Drop Down (Date Picker) and one Button Click (or even with only one Button if we want to book for today).

So how does it work?
The principle is:
Coda → Dynamic link that transports data to Zapier
→ Zap that creats a new row with the data in Coda

Step by step guide

First I created the Date Picker and the two Tables.

The setup (click to expand)

Than I created a new Zap with a and chose „Webhook“ as my trigger in Zapier, to fetch dynamic data with a hyperlink.

What is a webhook? (click to expand)

A webhook is basically just a URL. E.g. “http://webhk.com/1234/”. If you open it, it can fire an event at the service where you created it. Also, a webhook can be used to send data from service A to service B. To do that, we have to add so-called “GET-parameters” to the webhook. You have seen them in the adressbar of your browser “http://webhk.com/1234/?parameter1=value1&parameter2=value2”. With that in mind, we can send data from Coda to Zapier and fire our event. E.g. “http://webhk.com/1234/?date=3/8/2018&room=blue

After that, I created a “dynamic hyperlink” to fill my webhook with data. “Dynamic” because I used the Hyperlink & the Format function to generate a link with variables in it.

=Hyperlink(Format("https://hooks.zapier.com/hooks/catch/_MYWEBHOOKID_/?date={1}&time={2}&room=red&owner={3}",chosendate,thisRow.Time,User()),"Book now")

So this formula is set in the “Blue Room” (with room=blue) and “Red Room” (with room=red) columns. It fills in the date of the data picker, the time of the row, the room name and the logged in user in the hyperlink. If you open the link, data will be transfered to Zapier and the Zap will be triggered.

How the data looks in Zapier (click to expand)

All that is left now is the Coda integration as an endpoint in zapier to post this data in my table.

Coda integration alpha (click to expand)

The integration part is now ready and working. But there ist still one thing to do! We don’t want people to book a room twice. So I just added a IF to the formula of the link:

if(count(Bookings.Filter(Date = chosendate && Time = thisRow.Time && Room = "red")) > 0, "❌",Hyperlink(Format("https://hooks.zapier.com/hooks/catch/1220017/k6i60i/?date={1}&time={2}&room=red&owner={3}",chosendate,thisRow.Time,User()),"Book now"))

This formula checks now, if there is an entry at the date, time and room and shows the red X as an indicator for “Not available at this time”. But it could also be something like “booked by USER

That’s it :raised_hands:t4:

Known Issues
This example works perfect - except of one funny fact: You are not allowed to click the buttons! You have to mouseover them. Check out why:

Known issues (click to expand)

Issue 1: Coda has a very nice features: Preview of Hyperlinks. That means that when you mouse over on a Hyperlink, Coda shows you whats underneath. That is great for websites, but a big problem with our webhooks. Because they FIRE WHEN YOU MOUSEOVER! That means, when you click a button, you fire it at least twice. Took me a while and costed me all the free Zapier tasks you can execude in a month within just a few hours to figure out why :smiley:

Issue 2: The insertion of “user” doesn’t really work for me. I get the username, but not the user with picture and link. But since it is an alpha state, this is now big deal.

Issue 3 As you can see in the result clip, it is slow. The webhook takes about a second to fire and put the data back in.

How could it be done in Coda without Zapier?
I think of an “Insert/update” function, that can be executet by buttons or links. It could work like filter, something like =table.insert(values, filter optional) or in our given case:

=Bookings.insert(Date = chosendate && Time = thisRow.Time && Room = "blue" && Owner = User())

I’m super curious about your thoughts and feedback on that :slight_smile:

7 Likes
#17

Super cool @Daniel_Stieber! Just curious, what service is the webhook going to in Zapier? I wonder if the latency has to do with Zapier, Coda, or the underlying service you are calling.

#18

Hey Al, I just use the webhook provided by Zapier itself. I think the latency is partly the “hover” effect but mostly Zapier. It also takes some time when I open the link in the browser.

edit: I updated the part where I chose the webhook to make the instructions more clear in the step by step guide.

1 Like
#19

@Daniel_Stieber You won’t believe it but that implementation is remarkably close to the hackathon project we did to produce buttons. You got a great response from the team when they saw that you landed on a hyperlink based model!

On the hover state firing the get - that’s a bit tricky to get around. We’ll think about workarounds, but of course, like you point out, the real goal is to make this a native Coda feature :slight_smile:

2 Likes
#20

@Daniel_Stieber just wow.