How Can I create a simple widget in odoo10

Question

How Can I create a simple widget in odoo10?? Corresponding code for following in odoo10? HOw can i convert this code to odoo10?

    local.HomePage = instance.Widget.extend({
        start: function() {
        this.$el.append("<div>Hello dear Odoo user!</div>");
        var greeting = new local.GreetingsWidget(this);
       return greeting.appendTo(this.$el);
    },
   });

Answer 1

Create Widgets and Templates in Odoo-10

Widget:

• Widget is different or alternate representation to display a screen, fields and attributes in odoo.
• Widget allows to change view using different rendering templates and also allows to design as you want.

Example:

widget_name.js

odoo.define('module.model_name', function(require) {
    "use strict";
    var Widget = require('web.Widget');
    var core = require('web.core');
    var Model = require('web.Model');
  
    var QWeb = core.qweb;
    var _t = core._t;
  
    // here we are getting the value in an array.
    var widget_name = Widget.extend({
        //render your template
        "template" : "template_name",
    
        //initialize
        init : function () {
            var self = this;
            this._super(parent);
            //initialize values to variables
        }

        //Binding Events
        events : {
            'click .class_ex': 'method1',
            'click .class_ex1': 'method2',
        },
  
        start : function() {
            var self = this;
            this._super(parent); 
            //your functionality code and logic
        },

        //creating functions
        method1:function(){
            //do something when click event fire on class_ex
        },
        method2:function(){
            //do something when click event fire on class_ex
        },
    });

    return widget_name;
});

You need to add this .js & .css files in odoo like this.

assets_backend.xml

<odoo>
    <data>
        <template id="assets_backend" inherit_id="web.assets_backend">
            <xpath expr="script[last()]" position="after">
            <script type="text/javascript" src="/module/static/src/js/widget_name.js"></script>
            <link href="/module/static/src/css/home.css" rel="stylesheet"></link>
            </xpath>
        </template>
    </data>
</odoo>

Design Widget Template:

• Create XML and add xml:space="preserve" as argument in template tag.
• t-name is name of your template that is defined in .js file and the same name is used as widget name in XML while you use it.

tmpl.xml

<?xml version="1.0"?>
<templates id="template" xml:space="preserve">
     <t t-name="template_name">
        <div class=”myclass”>
            //design your template here 
            <div class=”class_ex”>
                //body
            </div>
            <div class=”class_ex1”>
                //body
            </div>
        </div>
    </t>
</templates> 

NOTE: No need to write odoo tag in tmpl.xml file.

• It is important to have the template name to be the same, as given in your in .js (widget_name.js) file.

How to use a widget

• Use widget by action or object button.

• Shown below we add template_name to action_registry, so now we can use this name to execute using XML.

Example:

<record id="template_id" model="ir.actions.client">
    <field name="name">template name</field>
    <field name="tag">template_name</field>
    <field name="target">new</field>
</record>  

• Set your "template name" in HERE
• You can also write some events on your button, fields and then make a function that handles event and execute function that renders your template. Return this id (template_id) as a result when object button clicked.

You can use your widget like this also.

<field name="mobile" widget="template_name" />