As there is already a comprehensive discussion on the basics of QWeb in the Creating or modifying templates – QWeb recipe from Chapter 15, CMS Website Development, we'll focus on what is different here. First of all, you need to realize that we're dealing with the JavaScript QWeb implementation, as opposed to the Python implementation on the server side. This means that you don't have access to browsing records or the environment; you only have access to the parameters you have passed from the qweb.render function.

In our case, we have passed the current object via the widget key. This means that you should have all the intelligence in the widget's JavaScript code and have your template only access properties, or possibly functions. Given that we can access all the properties that are available on the widget, we can simply check the value in the template by checking the totalColors property.

As client-side QWeb has nothing to do with QWeb views, there's a different mechanism to make those templates known to the web client—add them via the qweb key to your add-on's manifest in a list of filenames relative to the add-on's root.