• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Odoo - CMS dynamic widgets
 

Odoo - CMS dynamic widgets

on

  • 795 views

 

Statistics

Views

Total Views
795
Views on SlideShare
758
Embed Views
37

Actions

Likes
1
Downloads
69
Comments
0

2 Embeds 37

http://www.slideee.com 36
https://twitter.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Odoo - CMS dynamic widgets Odoo - CMS dynamic widgets Presentation Transcript

    • 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 ThibaultDelavallée(tde@odoo.com)
    • 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)
    • 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)
    • Demo
    • 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)
    • 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)
    • 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)
    • 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)
    • 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)
    • 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)
    • 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, ... 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)
    • 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)
    • 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)
    • 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)
    • 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)
    • Thanks for your attention Any questions ? tde@odoo.com / chm@odoo.com