SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our User Agreement and Privacy Policy.
SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our Privacy Policy and User Agreement for details.
Successfully reported this slideshow.
Activate your 14 day free trial to unlock unlimited reading.
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)
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)
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)
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