Make a simple ToDo application with AWS Honeycode

Make a simple ToDo application with AWS Honeycode

Clock Icon2022.03.10

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

Introduction-

Hello everyone,

Recently I got to know about a new AWS service 'Honeycode'. It works on creating applications with no requirements of coding. This makes it easy for anybody to create and use applications and not just developers. This service is backed up by AWS database and an interface builder that facilitates drag and drop features.

I will show step by step procedure, so that you do not face any problem.

Features:

  1. No code app development
  2. Dynamic nature of spreadsheets
  3. Templates provided
  4. Lightweight functionality

Let's get started-

We will make a ToDo application, in which we can enter the task to be done and delete when we want.

Go to to start with your application. After making your account, you will find a table, which you can rename as 'ToDo'. Make 2 columns as shown below, and delete extras.

Make one table as 'Status', which will have only two values- yes and no. This table will help us identify if a task is completed or not.

In ToDo table, click on Status column and select properties. Under properties, select source type as 'Status'. This will link status column to status table(which has two values- yes and no). Now, there will be a drop down on every status column entry with values yes and no.

After completing table, let's move on to app. Click on app section on the left hand side. It will ask you to either create app from template, or from scratch. We will make it through scratch. You will see the below window.

You can use the objects, on the left hand side; drag and drop them and make your own app design. Add content box for text and headings.

After the heading, we have to show our ToDo table on the app. For that, we will enter a column list object as shown below.

So, the idea is that, we will show the incomplete tasks above and completed tasks below. For that, repeat the above steps- make a content box and add list column.

To click on view app on the top right corner, and check your web application.

The main step comes now. Remove yes/no content box under status and add button there. Customise the buttons with your favourite colour and add text to it.

We have to show the tasks above if their status is 'No' and only the tasks with status 'Yes' will be shown below. So let's add this functionality in the list properties as shown below.

=FILTER(ToDo,"ToDo[Status]=""No""")

=FILTER(ToDo,"ToDo[Status]=""Yes""")

Now, check your web application. The tasks are segregated now. It should be similar to this-

Now let's add the functionality to buttons. When you will click on the button of incomplete tasks, it should move to the completed tasks.

We have to add action in the button properties and change status entry from yes to no. Hence, let's click on overwrite action.

Change the 'Take data from' entry to below formula and 'Write it to' status column of ToDo table.

=FINDROW(Status,"Status[Status]=""Yes""")

We can add a 'x' button beside our completed tasks. This button will deleted that task from the list. For that, go to button properties > add action > delete a row > context row.

Now our buttons are working just fine. Let's add an 'Add' button to add a new task.

When clicking on '+', we will navigate to a new screen and add our task and status. So let's add the respective action from button properties.

Customise your new screen as your choice. Insert a form for task and status entry.

When clicking on Done button, your Task variable data will get into task column and status variable data will get into status column as a new entry. Hence, take reference from the below pictures and change button properties.

For cancel button, the screen should move back to the home-screen where all the tasks are displayed. We will add action to navigate to ToDo screen.

Now, your application is complete.

You can download 'Amazon Honeycode' from play store or app store in your mobile phone, login with your credentials and access the app.

You can add more entries, more functionalities and customise it according to your choice. I have covered all the basic features of honeycode in this blog through a simple application. If you face any trouble, don't forget to leave a comment, I will definitely try to solve it. Thank you for your time. Happy Learning!

Share this article

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.