Tulip – simple CRUD app with postgres

Until a built in table editor is created (hopefully soon) this is a quick way to create a simple CRUD app.

This is basically copying the technique from the https://community.tulip.co/t/kaizen-funnel-example/185/9

Assuming you have a postgres table like this

First thing is to use a connector and a function to get the data. Of note, passing the id with a sort, greater than and a limit let’s you bring back 5 records at a time (so we can page through them).

Postgresql treats identifiers case insensitively when not quoted (it actually folds them to lowercase internally), and case sensitively when quoted; many people are not aware of this idiosyncrasy

Ok, now you have a function to bring back some data. Let’s drop it in to tulip

First, create a trigger to run the connector function and bring in the first 5 records and store it into a variable.

Of interest is when you let tulip create these variables, it creates an array like below. As far as I can tell, you can’t make a variable like this unless you use the auto create from the trigger screen.

Next, you can quickly drop a text variable that will explode out the table! (I find this pretty nifty!)

If you want to see it in action, what I like to do is fire up a copy of chrome canary and use the browser based ‘player’ by going to https://acme.tulip.co/player (or you could use an incognito tab, or the tulip player) and run the trigger.

tada, some table data

Next, lets make a button to get the next 5 records. Simply increment the ‘id’ counter, and re-run the connector function to overwrite the table variable.

Now it looks like this, the previous button just decrements instead of increments. Of course, at this point you can tap dance on the buttons to increment beyond the range of your data, I’m not gonna worry ’bout that at the moment.

Next, we want to be able to edit some fields. Well as mentioned above, until a native table widget comes out, the next best way is to make use of some hardcoded transparent buttons.

This is where you have to mess with spacing a bit. Make your first button and make it half way transparent and place it about where the first row of data will be. Now, flip to your chrome canary. Continue moving and sizing until you like how it looks.

Then, set the trigger on the first row button.

Now we want to split out the three fields into matching variables

Pro tip – Hit tab twice and then the first letter of thing you want to select while creating actions i.e. use the keyboard as much as possible for the data entry 🙂

So, now what we have is a button that will grab the data from the first element in the array and pop it into three variables. Add the v_selected_author and v_selected_title using ‘input’ text box (so we can make edits and then update them back into the DB)

When you click the ‘Bob’ button you should see Author and Title fill in with the data from that element.

Copy that button four times, aligning it with the rows and incrementing the static value to match the corresponding row.

Now let’s write the logic for the update. Create a function that updates based on the id, and updates the Author and Title. Pass some test values and see if it updates.

Now create an update button that calls your update function, passing it the author and title variables. Also, reload the current five records so it will show the change.

And there you have it, a simple way of reading and writing some records. There are of course some improvements that could be made to make it more reliable, but this could be a basic pattern.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s