Skip to content
Classic documentation
  • There are no suggestions because the search field is empty.

Adding a task

1 of a 4-part CRUD use case series. In this article, you'll learn how to add a task to your application

Note: For this example, a Task overview page has already been set up with a data table containing all existing 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. We can keep the page public – only for testing purposes!

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.

1. Navigate to the Form section and drag a Create Form on the page. Configure the component like shown below and hit Save.

After you configure the component, the form will appear on your page.

2. You can change some settings here; for example, change the text of the button to Add instead of Send.

3. As we applied our changes, press the Play button once to compile 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.

4. 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.

5. Press Play again and click on Add new task to create a new task.

6. 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 is added successfully, a Success banner will confirm it. If something goes wrong, a Error banner will show an error.

Adding Redirect interaction

When a task is created successfully, we want it to appear immediately on the Tasks overview. To achieve this, replace the current Success alert interaction with one that redirects to the overview page.

Select the Form component, open the interaction linked to the success alert, and update the interaction that starts with `onActionSuccess` so it matches the following configuration:

On action success - Redirect to - Tasks overview

Now, when we successfully add a new task we'll automatically get redirected to the overview of our Tasks overview.

 

→Next article: Updating task