Odoo - CMS dynamic widgets

13,408 views

Published on

Published in: Technology
0 Comments
16 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
13,408
On SlideShare
0
From Embeds
0
Number of Embeds
126
Actions
Shares
0
Downloads
647
Comments
0
Likes
16
Embeds 0
No embeds

No notes for slide

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

×