The document discusses dynamic widgets in CMS building. Dynamic widgets allow efficient customization of websites by integrating with Odoo apps like allowing users to subscribe to discussion groups or create leads from a contact form. The document outlines how to create a contact widget with a contact form that can create leads from submitted questions by defining the widget content, adding it to the CMS editor, allowing dynamic configuration of sales teams, and linking it to backend controllers and routes to interface with Odoo apps.

1. CMS Dynamic Widgets
Thibault Delavallée, R&D Engineer

2. Dynamic widgets
ThibaultDelavallée(tde@odoo.com)

3. Dynamic widgets
Widgets, Snippets -> CMS building blocks
Dynamic widgets: Discussion Groups, Mailing Lists
ThibaultDelavallée(tde@odoo.com)

4. Dynamic widgets
Efficient and simple way to customize your website
Integrates with Odoo apps: subscribe to a discussion
group, create leads, fill issues, ...
Use the full power of odoo
·
·
·
ThibaultDelavallée(tde@odoo.com)

5. Show me the stuff !
Running example: Contact WidgetContact Widget
small contact form
create leads from questions
drag 'n drop it anywhere usefull
·
·
·
ThibaultDelavallée(tde@odoo.com)

6. Demo

7. Talk structure
Running example: Contact Widget
body, content
addition in CMS editor
dynamic configuration: choosing
the sales team
link with backend: linking the
button to the lead creation
·
·
·
·
ThibaultDelavallée(tde@odoo.com)

8. Body: widget content
Body = HTMLHTML + CSSCSS (bootstrap)
a (hidden) sales team
a question
an email
a submit button
<input<input type="hidden" name="section_id" value="0"/>/>
<textarea<textarea name="description"></textarea>></textarea>
<div<div class="input-group">>
<input<input type="email" name="email_from"/>/>
<button<button type="submit">>Contact Us</button></button>
</div></div>
·
·
·
·
ThibaultDelavallée(tde@odoo.com)

9. Addition in Editor
Snippets ? QWeb template !
<?xml version="1.0" encoding="utf-8"?>
<openerp><openerp>
<data><data>
<template<template id="snippets">>
<!-- here be snippets by categories -->
...
</template></template>
</data></data>
</openerp></openerp>
ThibaultDelavallée(tde@odoo.com)

10. Addition in Editor
Snippet addition: extend the editor QWeb template
<template<template id="contact_snippet"
name="Contact Snippet"
inherit_id="website.snippets">>
<xpath<xpath expr="//div[@id='snippet_feature']" position="inside">>
<!-- begin snippet declaration -->
<div><div>
...
</div></div>
<!-- end of snippet declaration -->
</xpath></xpath>
</template></template>
ThibaultDelavallée(tde@odoo.com)

11. Addition in Editor
thumbnail: icon in editor
<xpath<xpath expr="//div[@id='snippet_feature']" position="inside">>
...
<div<div class="oe_snippet_thumbnail">>
<img<img class="oe_snippet_thumbnail_img" src="/images/icon.png"/>/>
<span<span class="oe_snippet_thumbnail_title">>Contact Snippet</span></span>
</div></div>
</xpath></xpath>
body of the snippet
<xpath<xpath expr="//div[@id='snippet_feature']" position="inside">>
...
<section<section class="oe_snippet_body js_contact">>
<!-- snippet HTML content -->
</section></section>
</xpath></xpath>
·
·
ThibaultDelavallée(tde@odoo.com)

12. Snippet options
placement: data-selector-...
menu option: li, option menu entry
<div<div data-snippet-option-id='contact_snippet'
data-selector=".js_contact"
data-selector-siblings="p, h1, h2, h3, blockquote,
div, .well, .panel">>
<li><li>
<a<a href="#" class="button js_contact_sales_team">>
Change Sales Team
</a></a>
</li></li>
</div></div>
·
·
ThibaultDelavallée(tde@odoo.com)

13. Widget -> Dynamic Widget

14. Dynamic customize
Customize menu
To link with
ThibaultDelavallée(tde@odoo.com)

15. Dynamic customize
Add a snippet.Option to add dynamic configuration
Example: Discussion Group choice, Sales Team choice, ...
snippet..options..contact_snippet == snippet..Option..extend({({
on_prompt:: functionfunction ()() {{
returnreturn website..prompt({({
window_title:: _t(("Add a Contact Snippet"),),
init:: functionfunction ((field)) {{
returnreturn website..session..model(('crm.case.section'))
..call(('name_search',, [['',, []])},[]])},
}).}).then((functionfunction ((sales_team_id)) {{
self..$(('.js_section_id').).attr(("value",, sales_team_id););
});});
}}
});});
ThibaultDelavallée(tde@odoo.com)

16. Link with back-end
To contact the back-end: define a new routeroute
Route: URL -> action performed by server
Defined in Python, in a controller
classclass ContactUsShort((http..Controller):):
# define my custom controller
@http.route@http.route(('/my/route',, ......))
defdef my_route((......):):
{http://myodoo.com/}crm/contact_short will be a route
creating a lead from data coming from the form
·
·
ThibaultDelavallée(tde@odoo.com)

17. Link with back-end
crm/contact_short definition
@http.route@http.route([(['/crm/contact_short'],], type=='json'))
defdef contactus((self,, question==None,, email==None,,
section_id==None,, ****kwargs):):
lead_values == {{
'name':: 'Lead from %s (Contact Snippet)' %% email,,
'description':: question,,
'email_from':: email,,
'section_id':: section_id,,
'user_id':: False,,
}}
returnreturn request..registry[['crm.lead']]..create((cr,, uid,, lead_values,,
context))
ThibaultDelavallée(tde@odoo.com)

18. Dynamic behavior
Bind Contact Us to the back-end
snippet..animationRegistry..contact == snippet..Animation..extend({({
start:: functionfunction ((editable_mode)) {{
thisthis..$(('.js_contact_btn').).on(('click',, functionfunction ((event)) {{
// perform verification
......
// json call to a route
returnreturn openerp..jsonRpc(('/crm/contact_short',, 'call',, {{
'section_id':: ++section_id,,
'email':: email,,
'question':: question,,
}).}).then((functionfunction ((result)) {{ ...... });});
});});
},},
});});
ThibaultDelavallée(tde@odoo.com)

19. And we are done !
Definition: an HTML body in
a template
Placement: XML declaration
Configuration: JS Option
Behavior: JS Animation
Link: Python controller and routes
·
·
·
·
·
ThibaultDelavallée(tde@odoo.com)

20. Thanks for your attention
Any questions ? tde@odoo.com / chm@odoo.com