< Previous Article Next Article >

Stateful To Do List App

Profound.js Spaces 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 spaces.profoundjs.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 Profound.js Spaces 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.


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:".


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.


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.


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.


Adding Functionality

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


Inside todo.js, enter the following code:

function todo() {
  pjs.defineDisplay("display", "todo.json");
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.


Now, adjust your code as follows:

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

  var list = [
     { item: "Sign up for spaces.profoundjs.com" },
     { item: "Make my first application" }

  while (true) {
exports.default = todo;

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) {
  if (add) display.grid.push({ item: newItem });

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


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) {
  if (add) display.grid.push({ item: newItem });
  display.grid.applyFilter(entry => !entry.remove);


Connecting your App to a Database

Your Profound.js Spaces 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.


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.


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.


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.


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


Have questions about this topic? Ask for help on our Profound.js Spaces Discussion Forum.

< Previous Article Next Article >