< Previous Article

Stateful To Do List App

NodeRun makes it very easy for you to create full-stack applications!

This guide walks you through quickly building a fully functional, database-driven To Do List App with the help of Rich Displays and Stateful concepts. The process should take approximately 15 to 20 minutes.

Getting Started

  • First, click New Space on NodeRun.com
  • Close the Application Template window
  • Close the README tab; the Rich Display Designer will appear

Building the User Interface

In the next few steps, you will see how NodeRun and Rich Displays make it easy to create a visual display for your applications.

When you start, you should see a blank canvas. Go to the right side of the IDE; under the Screens tab, double-click on "Unnamed Screen" and then type "todoScreen" instead.

Then, save the file as "todo.json" (this will be the screen definition file your users will interact with).

Next, click Publish and give your workspace a name. Once this step is completed, a pop-up window will display the runnable links for your application.

json_file

Now, let's add some elements to the screen. From the Widgets Sets tab, drag and drop a label, a textbox, and a primay button to the todoScreen.

Double-click the label and change its value to "New Item:".

add_elements

Next, let's modify the textbox and the button.

Double-click to bind the textbox value property to "newItem" (camel case notation) and change the length to 50 characters long.

For the button, change the value to "Add", bind the response to "add" and keep it as a Boolean Indicator.

name_elements

Now, drag and drop a grid onto the screen.

There are 3 grid columns by default. Remove the last column by clicking the minus sign icon in the left corner. Then expand the width of the two remaining colmuns. Name the first column "Action" and the second column "Items". Name the grid widget "grid".

Save your changes.

new_grid

Whenever you drag and drop an element into the first row of a grid, the whole column gets populated. Add a "Cancel" button to the "Action" column and an output field to the "Items" column. Modify the value of the button to "Remove" and bind the response to "remove". For the output field, bind the field to "item" with a length of 50 characters.

grid_items

Adding Functionality

Create a new JavaScript file and save it using the name "todo.js".

todo_js

Inside todo.js, enter the following code:

function todo() {
  pjs.defineDisplay("display", "todo.json");
  display.todoScreen.execute();
}
exports.default = todo;

Save your changes.

Then, in the Files tab, rigth click on "todo.js", select Properties and in the pop-up window toggle App Start File. Launch your application in the browser and you should be able to see the application's user interface, with no functionality yet.

launch_app

Now, adjust your code as follows:

function todo() {
  pjs.defineDisplay("display", "todo.json");

  var list = [
     { item: "Sign up for NodeRun.com" },
     { item: "Make my first application" }
  ];
  display.grid.replaceRecords(list);

  while (true) {
    display.todoScreen.execute();
  }
}

This initializes the grid to a hard-coded list of items. It also keeps redisplaying the screen as the user interacts with it.

Save your changes and relaunch the application or refresh the browser where the application is running to see your changes.

Now, let's make the Add button work. You may recall that it has a Boolean response field named "add". When the "add" variable is true, we know the user pressed the button. Let's check for that within the while loop, and push a new record to the grid. Your while loop should now look like this:

while (true) {
  display.todoScreen.execute();
  if (add) display.grid.push({ item: newItem });
}

Save your changes and try to add items to the grid.

add_one

To remove items from the grid, we will use ES6 notation with the applyFilter() method and the response from the Remove button (the Boolean property named "remove"). The code within the while loop should now look as follows:

while (true) {
  display.todoScreen.execute();
  if (add) display.grid.push({ item: newItem });
  display.grid.applyFilter(entry => !entry.remove);
}

remove_one

Connecting your App to a Database

Your NodeRun space already comes with a relational databse. Now, it's a matter of creating the necessary database table(s) for your application.

Switch to the Database tab, right-click Tables, and select Create Table. Name the table "todos" and add one column named "item" with a VARCHAR data type and a max length of 50 characters.

create_database

Now that we have a database to work with, let's replace the hard-coded list with a query to the databse by changing that line of code to the following statement:

let list = pjs.query("SELECT * FROM todos");

Click here for more information about pjs.query().

Next, we will implement the Add button. Add the following function to the bottom of todo.js:

function addItem(grid, newItem){
  pjs.query("INSERT INTO todos SET ?",  { item: newItem });
  grid.push({ item: newItem })
}

Then, add a call to this function from within while loop in todo(). Also, add a line to initialize newItem to an empty string.

add_to_table

Last but not least, let's change the code for the Remove button so that it deletes items from the "todos" database table.

First, create a new removeItem() function at the bottom of your todo.js code. This function will use the methods filter() and forEach() to execute a DELETE query on every item the user selected to remove.

function removeItem(grid){
  var toRemove = grid.filter(entry => entry.remove);
  toRemove.forEach(record => pjs.query("DELETE FROM todos WHERE item = ?", record.item));
  grid.applyFilter(entry => !entry.remove);
}

Then, call removeItem() from within the while loop.

remove_from_table

Save your changes and launch your application in a browser. Be sure to play around with it. Close it and open it again to make sure it has data persistence.

finished

That's it! You created a full-stack stateful application with a runnable version to share with others.

Questions?

Have questions about this topic? Ask for help on our NodeRun Discussion Forum.

< Previous Article