Creating custom widgets
As you saw in Chapter 9, Backend Views, we can use widgets to display certain data in different formats. For example, we used widget='image' to display a binary field as an image. To demonstrate how to create your own widget, we'll write one widget that lets the user choose an integer field, but we will display it differently. Instead of an input box, we will display a color picker so that we can select a color number. Here, each number will be mapped to its related color.
Getting ready
For this recipe, we will be using the my_library module with basic fields and views. You will find the basic my_library module in the Chapter15/00_initial_module directory in the GitHub repository.
How to do it...
We'll add a JavaScript file that contains our widget's logic, and an SCSS file to do some styling. Then, we will add one integer field to the books form to use our new widget. Perform the following steps to add a new field widget...