Monday, 4 February 2013

JavaScript ,Css and Jquery In OpenERP 7.0


Hi fellows,

               Here i'm showing how can you use  JavaScript ,Css and Jquery In OpenERP 7.0.There is one cool feature added in openERP 7.0 in which you can use HTML tags inside openERP form view. This feature is not available in older version (Web 6.0 , 6.1). OpenERP already use HTML codes like <div> <H1> inside form view. But you can do much more than that you can use css and JavaScript inside form view code (OpenERP XML Code). Even more you can use JQuery also In Form View but JQuery is only work if you have old OpenERP 7 Web.In next few weeks i will show you how jquery also used in latest OpenERP 7.0 Web Code.  

                     Now, let's see how use this thing in form view. It is very if you have little knowledge of CSS and JavaScript. You can apply css as like you apply css in HTML code but only different is here you apply css in openerp form code.  




  Here given one video in which i show how you can use this three basic tools to create good effect in side OpenERp 7.0

 
CSS
    In HTML we use css(inline) like this-                     Same like you can apply in OpenERP-
    <p style="color:sienna;font-size:8pt;"></p>                         <field name="product_id" style="color:sienna;font-size:8pt;"/> 
                      (This will apply css on that field but only if it in readonly form or it is in saved state.)

JavaScript

For JavaScript you can define script anyplace in code whare you can use HTML Tags.

<record id="product_normal_form_view" model="ir.ui.view">
       <field name="name">product.normal.form</field>
       <field name="model">product.product</field>
       <field name="arch" type="xml">
               <form string="Product" version="7.0">
                      <sheet>
                        <script>
                                    alert("Hi I'm JavaScript :P ");
                        </script>
                       <field name="image_medium" widget="image" class="oe_avatar oe_left"/>
                       <div class="oe_title">
                       <div class="oe_edit_only">
                                <label for="name" string="Product Name"/>
                       </div>
                       <h1>
                                  <field name="name"/>
                       </h1>
                       ............
                       ............ 

JQuery

For JQuery you need to apply your JQuery code inside script tag same as JavaScript. But this is not working in latest code. 

<record id="product_normal_form_view" model="ir.ui.view">
       <field name="name">product.normal.form</field>
       <field name="model">product.product</field>
       <field name="arch" type="xml">
               <form string="Product" version="7.0">
                      <sheet>
                        <script>
                                    $(document).ready(function(){
                                    $(".oe_edit_only").click(function(){
                                            $(this).hide();
                                     });
                              });

                        </script>
                       <field name="image_medium" widget="image" class="oe_avatar oe_left"/>
                       <div class="oe_title">
                       <div class="oe_edit_only">
                                <label for="name" string="Product Name"/>
                       </div>
                       <h1>
                                  <field name="name"/>
                       </h1>
                       ............
                       ............
 
Have a good day.
Save Paper, Save Trees.



10 comments:

  1. Hi admin,
    I see that openerp can call jquery function directly in the XML view,which is a very nice feature.
    but can u teach me how to fetch a data from another file using AJAX ?
    I tried to put 'test.txt' in the same directory with my XML view,
    in the XML view I put this code:

    <script>
    $(document).on('click','.somebutton',function(){
    $.get('test.txt',function(data){
    alert(data);
    });
    });
    </script>

    but it's not working
    if I remove the $.get and alert('asd') it's working -_-

    ReplyDelete
    Replies
    1. You must tell the path of file, you can put anywhere in file system.

      Delete
  2. Hello
    please let me know how to do http request with jquery,if my data is postback from python how to handle it

    ReplyDelete
  3. This comment has been removed by the author.

    ReplyDelete
    Replies
    1. Hello!
      I have a wierd problem with javascript in openerp...
      < script>
      var x= '< table border=1>';
      function es()
      {
      for(i=0;i<5;i++)
      {
      x+='< tr>< td>Hello World'< /td>;
      }
      x+=''< /table>;
      }
      es();
      document.write(x);

      It says: XMLSyntaxError: AttValue: " or ' expected, line 154, column 36 (that is the first character of the script, Var).
      I inserted the code above in a form view.
      Can you help me?


      I don't know why but blogspot delete closing () tag...

      Delete
    2. This comment has been removed by the author.

      Delete
    3. Hi Leonardo,

      If you replace the < with &lt followed by a semi colon (;) (sorry if I type it all together it is replaced by a <) in the for statement, it should fix the error.

      I hope this helps.

      Delete
  4. Thank you Ryan but I found some more problems:

    1)replacing < and > won't translate tags (output will be < table>, not the graphical table)

    2)for and while statements (the two I tried) don't work in openerp

    3) document.write function would rewrite the whole page so I'd obtain a blank page with function output. I chose to use element.innerHTML=output function. The problem is that I can't get elements external from script, neither for ID nor name.

    Thank you again for your patience.

    ReplyDelete
  5. Hola si se puede lo que muestras en el video me lo podrias pasar

    ReplyDelete