Update Your Data

So, we've now set up bindings so we can display 0:00 our external data inside of our interface. 0:03 But how do we now allow users to make changes to our dataset, 0:07 Like adding a new record that we then display in the interface? 0:10 Well, that's where workflows come in. 0:14 Now, the creating, updating, 0:17 and deleting of records all revolves around using workflows. 0:19 So in my project, when a user presses this Add Task button, 0:22 they're presented with a pop-up where they can create a new task. 0:26 And so when this pop-up is filled in, I want to add this newly created task 0:29 to the list of tasks that we display in the interface. 0:33 And so in order for this to happen, I'll need to add the record to my backend. 0:36 In this case, I'll need to add the record to our table in Supabase. 0:40 And so what I'll need to do 0:44 is I'll need to go into edit mode and go into this pop-up. 0:45 And on the form of the pop-up, in the workflows tab, I can see the 0:48 AI has already set up a workflow 0:52 for whenever the form is submitted to close the pop-up. 0:55 And so I'll need to alter this workflow slightly. 0:58 Before the popup is closed I want to add whatever the user has input 1:00 into this form as a record inside of Supabase 1:05 And then once that record has been added to Supabase refetch the collection 1:09 so our interface is up to date So I going to go inside of the workflow. 1:12 And at the start, I'm going to add an action. 1:17 And since we've added the Supabase plugin, we have access 1:19 to all of these specific Supabase actions. 1:23 And so to add a record to the database, I'll simply want to choose 1:26 the insert action. 1:29 I'll choose my marketing tasks table. 1:30 and here are all of the fields of the table. 1:32 Now, depending on the data source you're using, 1:34 the actions you have available inside of the workflow builder 1:36 will differ, but the base premise remains the same. 1:39 Whenever a user wants to edit the data, whether it be adding a new record, 1:42 editing a record or deleting a record, we'll need to make a request 1:46 to our backend to update the data in our backend. 1:50 And then once done, refetch the data so our interface is up to date. 1:52 And so now we have all the fields that we're going to send to Supabase, 1:57 but some of them I know will be generated automatically. 2:00 So I don't want to send everything. 2:02 So for example, I know that the ID will be generated automatically 2:04 and same with the created at and updated at. 2:08 So I can click on this field selector I choose select all 2:10 and then I deselect the ID and created at and updated at 2:14 since I don want to send them. They be done automatically. And now for what 2:17 I actually want to pass into these fields I want it to be dynamic 2:20 And because I want it to be dynamic I'm going to want to bind the fields. 2:24 So to do so, I can press the plug icon. 2:28 And so when I bind it, I have access to all of the data of my project, 2:30 including the inputs that are inside of the pop-up. 2:34 Meaning if I was to put this into preview mode and input something into this title 2:37 input, such as test when i now go back into the workflow 2:41 and go into the binding menu i can see here 2:46 i have access to whatever has been input into the title input 2:49 and so if i was to bind this this now means that whatever is typed in 2:53 will be dynamically passed here and so now i can do the same 2:56 for all of the other fields and bind them to their respective input 3:00 so all of those fields are now bound 3:08 and the final thing I want to add is an action to refetch the collection 3:10 so we have the latest data And so now when I put this into preview mode 3:14 and fill in all of the fields 3:17 So when I press save the pop should close 3:23 the record should be added to Supabase and the collection should be refetched 3:25 so we have the latest data inside of our interface. So when I press save, 3:29 we can see the pop-up was closed. 3:35 We refetched that data, and I can see at the bottom of our list, 3:36 we now have that new task in our interface. 3:40 And when I go into Supabase, I can see inside of our table we have that new task. 3:43 And so that would be the base 3:48 premise of how you allow users to edit the data in your backend. 3:49 Whether a user wants to update a record, create a record or delete a record, you'll 3:54 need to make a request to your backend to update the data in your backend. 3:58 And then once done, refetch the data inside of WeWeb 4:02 so the data shown in the interface is up to date. 4:05 Now, one critical piece we didn't cover here is authentication. 4:08 Chances are inside of your application, you'll want to introduce 4:11 some kind of privileges only to certain users. 4:14 For example, you might only want admins to be able to read all records. 4:17 This all revolves around setting up authentication and ensuring users 4:21 are signed in and authenticated when they try and make data updates. 4:25 I'll see you in the next step to learn how we do this. 4:29

You need to sign up for Treehouse in order to set up Workspace

Sign up