Create a To-do List App

Day 6 of #14DaysofNoCode

Max Haining
|
67 steps
|
6 minutes

Glideapps

Log in to your [Glide](https://glideapps.com/?utm_source=14daysofnocode-lesson&utm_medium=referral&utm_campaign=14daysofnocode) dashboard.

To complete this lesson, you'll need to upgrade to Glide's "Explorer" plan. Details of how to do this can be found[here](https://community.glideapps.com/t/100-days-of-nocode-ai-welcome-faqs/74604).

Create from template

Click '**New app**'

Select '**Basic App**'. \ \ This template will speed up the process of creating a to-do list app.

Click '**Create app**'.

By default, this template is set to a 'List' style. Change the style to '**Checklist**'.\ \ This will give you the functionality of changing the status of a note/task later on.

Customizing the database

You're now going to customise the data input for the app. \ \ Click '**Data**'.

You'll see that this template includes some test data, which you're going to customise.\ \ Click the **+ new field** button in the table.

Name this field '**Task**', ensure the 'Type' is set to '**Text**' and click '**Save**'.

Click and drag this field left until it appears as the first field in the table.

You're now going to create a 'Status' button which you can use to set a task to complete or incomplete within your to-do list.\ \ **Click the drop-down field menu** from the arrow button within the '**Name**' field.

Click '**Edit**'.

Change the 'Name' to '**Status**'.

Change the field type to '**Boolean**'.

Click '**Save**'.

Give the first 3 tasks in the table the task names 'Task 1', 'Task 2' and 'Task 3'. \ \ This is just for demonstration purposes as you're going to be testing the functionality of your app using these tasks in a moment.

Add 'Task 1'.

Add 'Task 2'.

Add 'Task 3'.

Click the '**Layout**' button at the top of the page to head back to the app editor.

Data mapping

You're now going to map the 'Task' field you added in the table to the item titles in your list.\ \ Click '**Collection**' from the left-hand menu.

In the right-hand menu, remove "**Status**" and replace it with "**Task**"

You'll see that the items in your app have now updated. The bold title for each item in the list is now mapped to the 'Task' field in the table that you just customised.\ \ The three tasks that you gave task names to should appear in the list. Items in the table without task names will just appear with short descriptions.\ \ You'll also see here that the '**Checked**' item data is automatically mapped to your '**Status**' table field. You'll see how this works in a moment.

Configuring the 'Task' screen

Click on the text of '**Task 1**'

You're now presented with the components and options specifically for this 'screen' within your app.\ \ Click the '**Title**' component.

On the right-hand side of the screen you'll see the options for this section of the screen.

Change the Title from "**Status**" to **Task**"\ \ This is because you want the Task name to appear in bold as the title on this screen.

Select the '**Fields**' component from the left-hand menu.

You're now going to add a new '**Switch**' component. \ \ This 'Switch' will be used to determine whether an item is complete or incomplete. You'll see how this works in a moment.\ \ Click the **+ button** next to 'Components'.

Search and select the '**Switch**' element.

You'll see that a Switch button has been added to this screen, and it's automatically mapped to the '**Status**' field in the database.\ \ Let's test it, so you can see how it works.

Click the back button on your app.

Testing the 'Status' functionality

Now you can test how this 'Status' switch works. \ \ Let's assume you've completed the task and want to cross it off your list.\ \ Click the checkbox on this screen and you'll see the item is now greyed out.

Now click the text within '**Task 2**' to be taken into the item.

Toggle the '**Status**' button on (assume for this app that toggling the button 'on' is marking it as complete).

Click the back arrow to go to the home screen.

You'll see the task is now greyed out within your items list.

Now let's see how this relates to the database.\ \ Click '**Data**'.

Check the box for '**Task 3**'.

Click '**Layout**' to head back to the app editor.

You'll see that 'Task 3' is also greyed out as it's been checked in your database (meaning it's complete).

Adding a 'delete note' function

You're now going to add a '**Delete**' button. \ \ This will allow you to remove items from the database by clicking on a button within the app.\ \ Enter '**Task 1**' from your app.

**Click the + button** next to '**Components**'.

Search and select the '**Button**' action.

You'll see a button is now added to the item screen.\ \ On the right-hand menu, select open the '**ACTION**' menu.

Change the button title to '**Delete Note**'

Click the drop-down icon menu.

Select the X icon.

Click the drop-down action menu.

Select '**Data**' > '**Delete row'**

Now, test to see if this action is working as expected by clicking the '**Delete Note**' button you just created for Task 1.

Go back to your app home screen and you will see that Task 1 no longer appears.\ \ Now, delete each item without a task name.

Click '**Data**'.

You'll see that everything is functioning as expected as these items have been removed from your database. \ \ Click '**Layout**' to head back to your app.

Adding a home screen title

Now let's give your app a tiny bit of customisation by adding a heading at the top of the home screen.\ \ **Click the + button** next to 'Components'.

Search and select the '**Headline**' component.

Drag the 'Headline' component to the top of the components list. You'll see that this will bring it to the top of your app's home screen.

Using the option from the right-hand menu, **centre align this headline.**

**Now change the headline text** to '\[your name\] to-do list'

Select the drop-down menu for the headline style.

Click "**Headline XLarge**"

Adding a new item

Great, almost there...\ \ You're now going to test how your app works when adding a new item.\ \ **Click the + icon** on the home screen.

In this '**Add item**' screen you'll see that the component is incorrectly mapped to the 'Status' field.\ \ You now need to correctly map this component.\ \ Select the 'Text Entry: Name' component from the left-hand menu.

On the right-hand menu, click the drop-down menu in the '**Column**' field.

Select '**Task**'.

Now fill in all the fields for an item.

When you're ready, click '**Submit**'

Boom 💥 you've got a functioning to-do list app!\ \ Today you've got hands on with the front end and back end development of a to-do list app in Glide. \ \ You've customised the app to clearly mark completed items, you've mapped components to items in the app's database, and you've configured a component with an action to delete items from the database.\ \ Great work today. 👏👏👏\ \ If you want, you can publish your app by clicking the '**Publish**' button in the top-right hand corner of the screen and following the instructions.