A presentation by Odoo Developer, Martin Geubelle

1. From a web controller to a full
CMS
Martin Geubelle • Developper
From Hello World to Hello Wow!
EXPERIENCE
2018

2. Website, editor and themes1
Development on Website: the Snippet
Snippet options
2
3
The complete code: https://github.com/mge-odoo/oxp2018

3. Website, editor &
themes1

4. Website, editor & themes (1)
Make your page “website editable”

5. Website, editor & themes (1)
Make your page “website editable”
{
'name': 'Plant Nursery',
'version': '1.0',
…
'depends': ['web', … 'website'],
}
● Add website dependency
○ __manifest__.py

6. Website, editor & themes (2)
Make your page “website editable”
@route('/coucou/…/plants')
def plants(self, … website=True):
# do stuff
return request.render("plants", values)
● Add website dependency
● Modify controller
○ template context values

7. Website, editor & themes (3)
Make your page “website editable”
● Add website dependency
● Modify controller
● Modify frontend layout
○ call website.layout
○ add oe_structure
<template id="plant" name="Hello Wow">
<t t-call="website.layout">
<div class="oe_structure" id="oe_structure_plant_nursery_plant_1"/>
<!-- previous plants template -->
</t>
</template>

8. ● It’s done!
○ Create new pages
○ Install a “theme_” module
○ Have fun while customizing your website
■ https://www.youtube.com/watch?v=351Da7Qx0IQ
○ And much more…
Website, editor & themes (4)
Make your page “website editable”

9. Website, editor & themes (4)

10. Development on
Website: the Snippet2

11. Snippet (1)
(or Building Block)
● “A short reusable piece of computer code” [Wikipedia]
● Draggable & droppable
● Template in a qWeb view
● Behaviour in a JavaScript module
● Extension of its parent “the Widget”

12. Snippet (2)
Use Case: Plants in Promotion

13. Snippet (3)
The Snippets menu
<template id="snippet_promo_plant" inherit_id="website.snippets">
<xpath expr="//div[@id='snippet_effect']/div[contains(@class, 'o_panel_body')]" position="inside">
<t t-snippet="plant_nursery.s_promo_plants" t-thumbnail="/plant_nursery/static/…./icon.png"/>
</xpath>
</template>

14. Snippet (4)
The Snippet template
<template id="promo_plants" name="Plants in Promotion">
<section class="s_promo_plants">
<div class="container">
<div class="row"/>
</div>
</section>
</template>
● Basic template
○ extended dynamically in JS
○ use a unique class (later called “the selector”)

15. Snippet (5)
The Snippets behaviour
● Add to snippets registry
odoo.define('plant_nursery.snippets.animation', function (require) {
var sAnimation = require('website.content.snippets.animation');
var sPromoPlant = sAnimation.Class.extend({ … });
sAnimation.registry.sPromoPlant = PromoPlant;
});

16. Snippet (6)
The Snippets behaviour
● Add to snippets registry
● Extend website.content.snippets.animation
○ selector key (from the template)
○ Widget lifecyle: init, willStart, start, destroy
odoo.define('plant_nursery.snippets.animation', function (require) {
var sAnimation = require('website.content.snippets.animation');
var PromoPlants = sAnimation.Class.extend({
selector: ".s_promo_plants",
init: function () { … },
willStart: function () { … },
start: function () { … },
destroy: function () { … },
});
});

17. Snippet (7)
The Snippets behaviour
odoo.define('plant_nursery.snippets.animation', function (require) {
var sPromoPlant = sAnimation.Class.extend({
willStart: function () {
return this._rpc({
model: 'plant.plant',
method: 'search_read',
domain: [['promo', '=', true]],
fields: […],
}).then(function (result) { // do stuff with result });
},
});
});
● Add to snippets registry
● Extend website.content.snippets.animation
● Load plants (rpc)

18. Snippet (8)
The Snippets behaviour
odoo.define('plant_nursery.snippets.animation', function (require) {
var sPromoPlant = sAnimation.Class.extend({
xmlDependencies: ['/plant_nursery/static/src/xml/animation.xml'],
start: function () {
this.$('.row').append(core.qweb.render('plant_nursery.promo_plants', {plants: result}));
},
});
});
● Add to snippets registry
● Extend website.content.snippets.animation
● Load plants (rpc)
● Render the static content

19. Snippet options3

20. Snippet options (1)
The “edition” mode

21. Snippet options (2)
The option template
● Template in qWeb
○ data-js: snippet name in registry
○ data-selector: same selector as previously
<template id="snippet_promo_plant_options" inherit_id="website.snippet_options">
<xpath expr="." position="inside">
<div data-js="sPromoPlant" data-selector=".s_promo_plants">
<div class="dropdown-submenu">
<a href="#">Number of plants</a>
<div class="dropdown-menu">
<a data-limit="1" class="dropdown-item" href="#">1</a>
<a data-limit="2" class="dropdown-item" href="#">2</a>
…
</div>
</xpath>
</template>

22. Snippet options (3)
The Snippet editor
● Extend web_editor.snippets.options
odoo.define('plant_nursery.snippets.editor, function (require) {
var sOptions = require('web_editor.snippets.options');
var PromoPlants = sOptions.Class.extend({
start: function () { … },
cleanForSave: function () { … },
});
});

23. Snippet options (4)
The Snippet editor
● Extend web_editor.snippets.options
● limit function to set the data on the $target (the Snippet)
odoo.define('plant_nursery.snippets.editor, function (require) {
var sOptions = require('web_editor.snippets.options');
var PromoPlants = sOptions.Class.extend({
// ...
limit: function () {
this.$target.attr('data-limit', value);
},
});
});

24. Snippet options (6)
The Snippet editor
● Extend web_editor.snippets.options
● limit function to set the data on the $target (the snippet)
● Use limit option in Snippet
odoo.define('plant_nursery.snippets.animation', function (require) {
var sPromoPlant = sAnimation.Class.extend({
willStart: function () {
return this._rpc({
model: 'plant.plant',
method: 'search_read',
domain: [['promo', '=', true]],
fields: […],
limit: this.$el.data('limit'),
}).then(function (result) { // do stuff with result });
});
});

25. “We want more …”

26. ● Options can be set anywhere
● Effects API (wow!)
● A lot of available snippets (Google Maps, Twitter, etc.)
● An amazing on-the-fly editor
○ HTML
○ CSS
● Your endless imagination
We want more

27. Thank you.
#odooexperience
2018
Any questions?
EXPERIENCE
2018