1. The document discusses how to create a new view in Odoo by walking through the steps of building a basic "Hello World" view. 2. It begins by setting up the basic addon structure and files needed to define the new view type. It then covers importing dependencies, defining the view class, and exporting the view. 3. The document demonstrates adding functionality like fetching and displaying data, using an architectural definition, and extending the view using a JavaScript class. 4. It concludes that creating a new view in Odoo is relatively easy and fast, taking around 130 lines of code, but additional work is still needed for testing, documentation, customization, and validation.

1. Mathieu Duckerts-Antoine (DAM) • R&D Developer
Visualizing Data In Odoo:
How to create a new view
EXPERIENCE
2018

2. Why a view?1

3. View Client Action

4. View
Some constraints
but
Framework support
Client Action

5. View
Some constraints
but
Framework support
Client Action
Lot of liberties
but
Lot of work

6. Hello World View2

7. First steps

8. First steps .
└── hello_world_view
├── __init__.py
├── __manifest__.py
├── models
│ ├── __init__.py
│ ├── ir_action.py
│ └── ir_ui_view.py
├── static
│ └── src
│ ├── js
│ │ └── hello_world_view.js
│ └── scss
│ └── hello_world_view.scss
└── views
├── assets.xml
└── data.xml
● create basic addon structure

9. First steps .
└── hello_world_view
├── __init__.py
├── __manifest__.py
├── models
│ ├── __init__.py
│ ├── ir_action.py
│ └── ir_ui_view.py
├── static
│ └── src
│ ├── js
│ │ └── hello_world_view.js
│ └── scss
│ └── hello_world_view.scss
└── views
├── assets.xml
└── data.xml
● create basic addon structure
● make server recognize the new view type

10. First steps .
└── hello_world_view
├── __init__.py
├── __manifest__.py
├── models
│ ├── __init__.py
│ ├── ir_action.py
│ └── ir_ui_view.py
├── static
│ └── src
│ ├── js
│ │ └── hello_world_view.js
│ └── scss
│ └── hello_world_view.scss
└── views
├── assets.xml
└── data.xml
● create basic addon structure
● make server recognize the new view type

11. First steps .
└── hello_world_view
├── __init__.py
├── __manifest__.py
├── models
│ ├── __init__.py
│ ├── ir_action.py
│ └── ir_ui_view.py
├── static
│ └── src
│ ├── js
│ │ └── hello_world_view.js
│ └── scss
│ └── hello_world_view.scss
└── views
├── assets.xml
└── data.xml
● create basic addon structure
● make server recognize the new view type
● define assets bundles (js, scss)

12. First steps .
└── hello_world_view
├── __init__.py
├── __manifest__.py
├── models
│ ├── __init__.py
│ ├── ir_action.py
│ └── ir_ui_view.py
├── static
│ └── src
│ ├── js
│ │ └── hello_world_view.js
│ └── scss
│ └── hello_world_view.scss
└── views
├── assets.xml
└── data.xml
● create basic addon structure
● make server recognize the new view type
● define assets bundles (js, scss)

13. First steps .
└── hello_world_view
├── __init__.py
├── __manifest__.py
├── models
│ ├── __init__.py
│ ├── ir_action.py
│ └── ir_ui_view.py
├── static
│ └── src
│ ├── js
│ │ └── hello_world_view.js
│ └── scss
│ └── hello_world_view.scss
└── views
├── assets.xml
└── data.xml
● create basic addon structure
● make server recognize the new view type
● define assets bundles (js, scss)

14. Basic structure of a view

15. Basic structure of a view

16. Basic structure of a view
● Import things

17. Basic structure of a view
● Import things
● A view is… a view

18. Basic structure of a view
● Import things
● A view is… a view

19. Basic structure of a view
● Import things
● A view is… a view
● MVC pattern

20. Basic structure of a view
● Import things
● A view is… a view
● MVC pattern (with V=R!)

21. Basic structure of a view
● Import things
● A view is… a view
● MVC pattern (with V=R!)
● Export things

22. Basic structure of a view
● Import things
● A view is… a view
● MVC pattern (with V=R!)
● Export things
● Nice result but… empty

23. Hello World!

24. Hello World!
In renderer!

25. Hello World!
In renderer!

26. Use a library

27. Use a library
In view!

28. Use a library
In renderer!In view!

29. Use a library
In renderer!In view!

30. Use a library

31. Fetch and use Data

32. Fetch and use Data
In model!

33. Fetch and use Data
In model!

34. Fetch and use Data
In model!

35. Fetch and use Data
In model!

36. Fetch and use Data
In model!
In renderer!

37. Fetch and use Data

38. Use the search view

39. Use the search view
In model!

40. Use the search view
In model!

41. Use the search view
Fine! Just needs some protections
(leaflet has already rendered the map)
In model!

42. Use the search view
In renderer!
Fine! Just needs some protections
(leaflet has already rendered the map)
In model!

43. Use the search view

44. Use the arch

45. Use the arch (In data.xml)

46. Use the arch (In data.xml)
In view!

47. Use the arch (In data.xml)
In view!
In model!

48. Open a contact form

49. Open a contact form
In renderer!

50. Open a contact form
In renderer!

51. Open a contact form
In renderer!

52. Extend a view3

53. Use js_class

54. Use js_class New jS module!
Start again!

55. Use js_class New jS module!
Start again!

56. Use js_class
In controller!
Start again!
New jS module!

57. Use js_class
In controller!
Start again!
New jS module!

58. Use js_class
In controller!
No need to declare view server side!
Start again!
New jS module!

59. Use js_class
In controller!
No need to declare view server side! In arch!
Start again!
New jS module!

60. Extensions: js_class

61. Conclusion4

62. Conclusion
● At this point: a new view with approx. 130 loc

63. Conclusion
● At this point: a new view with approx. 130 loc
● Things to be done:
○ Write tests
○ Write documentation
○ Make customization easy by studio
○ write rng file for arch control

64. Conclusion
● At this point: a new view with approx. 130 loc
● Things to be done:
○ Write tests
○ Write documentation
○ Make customization easy by studio
○ write rng file for arch control
● Rather easy and fast to create a new view

65. Thank you.
#odooexperience
2018
EXPERIENCE
2018
View code available at https://github.com/Polymorphe57/hello_world_view_code