In this tutorial, we will be creating a simple Todo List App using Odoo OWL Framework. We will start creating from plain html, css and javascript. Using the basic functionalities, you will understand on how to implement OWL Framework easily.
Below are the needed files and application for this tutorial:
First thing that we need to do is to setup our development environment. Since we need only a static server, we can just simply create a new folder to any location we want and let's name it as todo app. Using Visual Studio Code editor, let's import this folder and create the following basic files:
index.html - used to display user interfaces to be displayed on the web browser
styles.css - used to add custom styles since we will be using Bootstrap CSS.
app.js - used for dynamic content and to make the web page interactive
In our index.html file, copy the code below and import styles.css and app.js.
Once installed, go back to index.html and at the bottom right corner, you will see Go Live. Click it and you will be directed automatically to the browser.
Before using OWL Framework, let's build first the user interface so that styling and designing will be done on this stage and later we can focus only on javascript files using OWL. Using bootstrap classes, components and icons, copy the code below.
Now that the user interface is done, we can start using OWL Framework. To verify if owl is working, let's open app.js console log owl using the code below:
app.js
js
Show or Hide Code
console.log(owl)
You should see a console log similar to the image below.
There are three basic class and functions in owl to start our new component which we will import as follows:
Component - used to create new Component
xml - used to design the user interface or the template which will show in the web browser
mount - used to apply the xml template being defined and select which part on the page it will be mounted.
Copy the code below to and save it to app.js file.
app.js
js
Show or Hide Code
const {Component, mount, xml} = owl
class Root extends Component { static template = xml` Test OWL ` } mount(Root, document.getElementById("root"))
Be sure to add any div in index.html with id as root since that is what being selected in mount method. Let's try it between the title description and task form.
For now let us statically add our list of task. In adding a list of task, first, we need to import useState from owl. To initialize the state, we need to add it under setup life cycle. In the template, we will use QWEB "foreach" directive to iterate to each task. In addition, we will use t-key to each task to avoid error. This is the same like mapping list in reactjs.
app.js
js
Show or Hide Code
const {Component, mount, xml, useState} = owl
class Root extends Component { static template = xml` <div class="m-0 p-4 bg-white rounded"> <div class="input-group-lg bg-white rounded border d-flex w-100 align-items-center"> <input type="name" class="form-control-lg fs-5 flex-fill border-0" placeholder="Add your new task" aria-label="Add your new task" id="name" name="name" aria-describedby="button-addon2"/> <input type="color" class="form-control-lg border-0 bg-white m-0 form-control-color" id="color" value="#563d7c" title="Choose your color"/> <button class="btn btn-primary" type="button" id="button-addon2"><i class="bi bi-plus-lg fs-3"></i></button> </div>
Let's make our task dynamic which will allow us to add task name and task color using the form we added. In order to make this happen, we need to create a new state that will hold our task. We will be using t-model and t-value to bind our state to the form inputs.
// reset states after saving let state = this.state this.state = {...state, name:"", color: "#FFF700"} } }
mount(Root, document.getElementById("root"))
Create new subcomponent for each task
It is good to separate our components into subcomponent so that we can manage it easier, hence, will make it modular. We will separate each task as subcomponent and then pass the states from parent component and access it using props.
// use to add sub component static components = { Task };
// add task codes }
mount(Root, document.getElementById("root"))
Add toggle task functionality
Let's add toggle functionality which add line through to the our task name which means the task has been completed. We will use isCompleted state to add the style to task checkbox label.
To add delete functionality, we need to use bind since the delete function start from our Task subcomponent and will be passed to the parent component which is Root. Under parent component, we will get the index of the task and remove it to tasks state.
Lastly, let's add edit functionality. Unlike toggle and delete functionality, we need to add a new state in our task component since we need to bind it to the form input for us to get the new task name.
Let's add new form input and new state isEditing for us to show and hide this form input. We then use same functionality in deleting task.
Congratulation! You're now able to create a Todo list app using OWL Framework. Please leave comments below if you have issues. You can also watch video version of this tutorial below.
Read next article
Action and Service (Todo List App) - OWL Javascript Framework