Odoo Help

0

Openerp QR code generation using client side validation?

By
Vyas Senthil
on 10/13/14, 9:52 AM 1,591 views

I would like to generate a QR code based on the field roll number and display it in a div container with id named "vyas_qrcode" using a javascript file(client side validation).

The 3 files I have created are,

    from osv import osv,fields
    
        class qrcode_clientside(osv.osv):
    
            _name = 'qrcode.clientside' # Name of the table.
    
            _columns = {
    
            'name': fields.char("Name", size=64, requried=True),    # Name of the person. The name should be between 5 and 10 characters and must not contain symbols . How to do this with the javascript file(qrcode_js.js)
            'roll_number': fields.integer("Roll Number", required=True),    # Roll number of the person.
            }

Then the xml file qrcode_js.xml

        <?xml version="1.0" encoding="utf-8" ?>
    <openerp>
        <data>
    
            <record model="ir.actions.act_window" id="action_qrcode_clientside">
                <field name="name">QRCode Generation</field>
                <field name="res_model">qrcode.clientside</field>
                <field name="view_type">form</field>
                <field name="view_mode">tree,form</field>
            </record>
    
            <menuitem name="QR Code JS" id="qrcode_js_menu" sequence="10" />
            <menuitem name="QR Code Side Menu" id="qrcode_js_sidemenu" parent="qrcode_js_menu" sequence="3" />
            <menuitem name="QR Code Generator" id="qrcode_js_finalmenu" parent="qrcode_js_sidemenu" sequence="4" action="action_qrcode_clientside" />
    
            <record model="ir.ui.view" id="view_qrcode_clientside_form" >
                <field name="name">qrcode.clientside Form View</field>
                <field name="model">qrcode.clientside</field>
                <field name="arch" type="xml">
                    <form string="QRCode Clientside Generation" version="7.0">
                        <sheet>
                            <group>
                                <group>
                                    <field name="name" /> <!-- The name should be between 5 and 10 characters and must not contain symbols . How to do this with the javascript file(qrcode_js.js).-->
                                    <field name="roll_number" class="roll_number_class" />
                                 </group>
                                 <group>
                                    <div id="vyas_qrcode" width="100" height="75" >    <!-- This is where the QR Code should be generated. It should have the value of the Roll number of the person. -->
                                            QR Code Placeholder
                                    </div>
                                </group>
                        </group>
                         </sheet>
                    </form>
                </field>
            </record>
    
    
            <record model="ir.ui.view" id="view_qrcode_clientside_tree" >
                <field name="name">qrcode.clientside Tree View</field>
                <field name="model">qrcode.clientside</field>
                <field name="arch" type="xml">
                    <field name="name" />
                    <field name="roll_number" />
                </field>
            </record>
    
    
        </data>
    </openerp>

Then the Javascript file qrcode_js.js .

    openerp.js_qrcode_vyas = function(instance){

    instance.js_qrcode_vyas = {};

    alert("Inside the main function ");

    instance.js_qrcode_vyas.qrcode_clientside = instance.web.Widget.extend({

    init: function(parent, name){
        console.log("qrcode_clientside page has been loaded.");
    },

    start: function(){
        this.$el.append('
            <script type="text/javascript" src="js_qrcode_vyas/static/src/js/jquery.qrcode.min.js"></script>
            <script>
                    $(document).ready(function(){
                            rollnumber_from_field = $(".roll_no_class").text();     // Getting the value of Roll Number from the roll_number field.
                            qroptions = { width: 40,height: 40, text:rollnumber_from_field  , size: 100, render:"image" }; // To pass arguments to get the QR code.
                            setTimeout(function(){$("#vyas_qrcode").qrcode(qroptions);}, 4000); // Generating the QR code and displaying it after a delay of 4 seconds.
                            });

            </script>
            ');

    },
    });
    };

1. The Logic for QR code generation is inside the js file(qrcode_js.js) in start: function () inside, this.$el.append(). The code inside the append works when typing inside chromes console but shows error here in this file saying '<' un-expected. 

2. I tried putting this logic directly inside the xml but it loads even before the page and dom is loaded and so the qrcode is generated but with empty values.

3. I know that I am supposed to put it inside the "start: function() " which refers to the page and DOM being loaded but am not sure about how to go from there.

4. I would also like to know how to validate field "name" and make it such that it has between 5 and 10 characters and also it should not contain symbols. And I don't want to do this from the python file but from the client side, either in the "init: function()" or the "start: function()" .  

5. And Thanks to everybody for taking your valuable time to help me out.

About This Community

This platform is for beginners and experts willing to share their Odoo knowledge. It's not a forum to discuss ideas, but a knowledge base of questions and their answers.

Register

Odoo Training Center

Access to our E-learning platform and experience all Odoo Apps through learning videos, exercises and Quizz.

Test it now

Question tools

1 follower(s)

Stats

Asked: 10/13/14, 9:52 AM
Seen: 1591 times
Last updated: 5/26/15, 5:47 PM