Use case 2 of a 4-part use case series. In this article, you'll learn how to update a task in your application.
Note: Before we start it's worth mentioning that to complete updating tasks properly, there is a pre-created Task overview page that will contain all our tasks.
Creating the page
The first thing that we need to do is to create a new page.
In this use case, we’ll use the page template called Header and footer. Let’s call the page Task details and change the URL to tasks/:task_id. The part in the URL: task_id refers to the ID of a task, it's a variable that we can use to show the details of a specific task.
Press Create page follow by Add without configuration to create the page, unless you have a header and footer available in that case, use those and hit Save.
Building the page
With our newly created page, we can add the functionality to add tasks. Navigate to the Form section and drag an Update Form on the page. Configure the component like the image below and hit Save.
After configuring the component the form appears on your page.
You can change some settings here; for example, change the text of the button to 'Update' instead of Send.
After we create the Update Form, we need to apply filtering to show the details of our task. To do this go to the variable section of your page and click on New variable.
Create a variable called: task_id just like we did in the URL.
Select the Update Form and click on Create filter in the options. Choose our model Task and then the property Id, and tell the filter it should be equal to the task_id variable that we just created. Press Apply and then Save to create the filter.
Once we applied our changes, press the Play button once to build the page, and immediately close the newly opened tab. Let's first navigate back to the main page with our task overview and add the functionality to navigate to a detail page of a specific task.
On the task overview page select the DataTable and scroll down to the Row click option. This option allows us to redirect a user when he clicks on one of the tasks and direct them to the task detail page we made.
Click on Select a page, select our Task detail page and click on Select page to select it. Now we get an option for an input variable this is the :task_id variable that we need to send from this overview to the detail page. So our Task Id and click on Select.
Press the Play button in the top left of the screen and test it out. When you click on one of the Tasks in the overview it will redirect you to the detail page where we can change the status or the name of the task!
