Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
CMS Dynamic Widgets
Thibault Delavallée, R&D Engineer
Dynamic widgets
ThibaultDelavallée(tde@odoo.com)
Dynamic widgets
Widgets, Snippets -> CMS building blocks
Dynamic widgets: Discussion Groups, Mailing Lists
ThibaultDelaval...
Dynamic widgets
Efficient and simple way to customize your website
Integrates with Odoo apps: subscribe to a discussion
grou...
Show me the stuff !
Running example: Contact WidgetContact Widget
small contact form
create leads from questions
drag 'n d...
Demo
Talk structure
Running example: Contact Widget
body, content
addition in CMS editor
dynamic configuration: choosing
the sal...
Body: widget content
Body = HTMLHTML + CSSCSS (bootstrap)
a (hidden) sales team
a question
an email
a submit button
<input...
Addition in Editor
Snippets ? QWeb template !
<?xml version="1.0" encoding="utf-8"?>
<openerp><openerp>
<data><data>
<temp...
Addition in Editor
Snippet addition: extend the editor QWeb template
<template<template id="contact_snippet"
name="Contact...
Addition in Editor
thumbnail: icon in editor
<xpath<xpath expr="//div[@id='snippet_feature']" position="inside">>
...
<div...
Snippet options
placement: data-selector-...
menu option: li, option menu entry
<div<div data-snippet-option-id='contact_s...
Widget -> Dynamic Widget
Dynamic customize
Customize menu
To link with
ThibaultDelavallée(tde@odoo.com)
Dynamic customize
Add a snippet.Option to add dynamic configuration
Example: Discussion Group choice, Sales Team choice, .....
Link with back-end
To contact the back-end: define a new routeroute
Route: URL -> action performed by server
Defined in Pyth...
Link with back-end
crm/contact_short definition
@http.route@http.route([(['/crm/contact_short'],], type=='json'))
defdef co...
Dynamic behavior
Bind Contact Us to the back-end
snippet..animationRegistry..contact == snippet..Animation..extend({({
sta...
And we are done !
Definition: an HTML body in
a template
Placement: XML declaration
Configuration: JS Option
Behavior: JS An...
Thanks for your attention
Any questions ? tde@odoo.com / chm@odoo.com
Upcoming SlideShare
Loading in …5
×

Odoo - CMS dynamic widgets

15,689 views

Published on

Published in: Technology
  • Be the first to comment

Odoo - CMS dynamic widgets

  1. 1. CMS Dynamic Widgets Thibault Delavallée, R&D Engineer
  2. 2. Dynamic widgets ThibaultDelavallée(tde@odoo.com)
  3. 3. Dynamic widgets Widgets, Snippets -> CMS building blocks Dynamic widgets: Discussion Groups, Mailing Lists ThibaultDelavallée(tde@odoo.com)
  4. 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. 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. 6. Demo
  7. 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. 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. 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. 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. 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. 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. 13. Widget -> Dynamic Widget
  14. 14. Dynamic customize Customize menu To link with ThibaultDelavallée(tde@odoo.com)
  15. 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. 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. 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. 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. 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. 20. Thanks for your attention Any questions ? tde@odoo.com / chm@odoo.com

×