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