Use case 1 of a 4-part use case series. In this article, you'll learn how to add a task to your application.
Note: Before we start it's worth mentioning that to complete adding tasks properly, there is a pre-created Task overview page with a data table that contains all our tasks.
Creating a page
The first thing that we need to do is to create a new page.
In this use case, we’ll use the Header and footer page template. Let’s call the page New tasks and change the URL to tasks/new.
Press Create page follow by Add without configuration in the next configuration step 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 a Create Form on the page. Configure the component like shown 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 'Add' instead of Send.
As 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 tasks (Tasks overview page) and add a button that redirects us to the New task page. Go to the Button section and drag an Open Page button on the page. Select New tasks and hit Save. Rename the button to Add new task and give it a fitting icon.
Press the Play button again and click on the + Add new task button to create a new task.
Simply fill in a name and a status for the new task and click on Add to add to create a new task.
If the task gets added successfully you'll see a green banner indicating this; else if you get an error a red banner will appear.
When a task gets successfully created we'd like to instantly see it on our Tasks overview. We can make this happen by changing the success alert interaction to an interaction that redirects to our overview of tasks. So make sure to select the Form itself and open the interaction from the alert; the interaction we want to change is the one that starts with onActionSuccess, make sure the interaction changes to this:
Now, when we successfully add a new task we'll automatically get redirected to the overview of our Tasks overview.