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.



20 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
  6. This comment has been removed by the author.

    ReplyDelete
  7. David Walsh is Mozilla’s senior web developer, and the core developer for the MooTools Javascript Framework. David’s blog reflects his skills in HTML/5, JS and CSS, and offers a ton of engaging advice and insight into front-end technologies. Even more obvious is his passion for open source contribution and trial-and-error development, making his blog one of the most honest and engaging around.
    Website: davidwalsh.name

    ReplyDelete
  8. David Walsh is Mozilla’s senior web developer, and the core developer for the MooTools Javascript Framework. David’s blog reflects his skills in HTML/5, JS and CSS, and offers a ton of engaging advice and insight into front-end technologies. Even more obvious is his passion for open source contribution and trial-and-error development, making his blog one of the most honest and engaging around.
    Website: davidwalsh.name

    ReplyDelete
  9. David Walsh is Mozilla’s senior web developer, and the core developer for the MooTools Javascript Framework. David’s blog reflects his skills in HTML/5, JS and CSS, and offers a ton of engaging advice and insight into front-end technologies. Even more obvious is his passion for open source contribution and trial-and-error development, making his blog one of the most honest and engaging around.
    Website: davidwalsh.name

    ReplyDelete
  10. David Walsh is Mozilla’s senior web developer, and the core developer for the MooTools Javascript Framework. David’s blog reflects his skills in HTML/5, JS and CSS, and offers a ton of engaging advice and insight into front-end technologies. Even more obvious is his passion for open source contribution and trial-and-error development, making his blog one of the most honest and engaging around.
    Website: davidwalsh.name

    ReplyDelete
  11. David Walsh is Mozilla’s senior web developer, and the core developer for the MooTools Javascript Framework. David’s blog reflects his skills in HTML/5, JS and CSS, and offers a ton of engaging advice and insight into front-end technologies. Even more obvious is his passion for open source contribution and trial-and-error development, making his blog one of the most honest and engaging around.
    Website: davidwalsh.name

    ReplyDelete
  12. David Walsh is Mozilla’s senior web developer, and the core developer for the MooTools Javascript Framework. David’s blog reflects his skills in HTML/5, JS and CSS, and offers a ton of engaging advice and insight into front-end technologies. Even more obvious is his passion for open source contribution and trial-and-error development, making his blog one of the most honest and engaging around.
    Website: davidwalsh.name

    ReplyDelete
  13. David Walsh is Mozilla’s senior web developer, and the core developer for the MooTools Javascript Framework. David’s blog reflects his skills in HTML/5, JS and CSS, and offers a ton of engaging advice and insight into front-end technologies. Even more obvious is his passion for open source contribution and trial-and-error development, making his blog one of the most honest and engaging around.
    Website: davidwalsh.name

    ReplyDelete
  14. I always love to see more of this love this Post, thank you for sharing and I Read Your Next Post.

    Hire Freelancer & Contractor | Find Construction Jobs | ContractorBay

    ReplyDelete
  15. Great with detailed information. It is really very helpful for us.
    Village Talkies a top-quality professional corporate video production company in Bangalore and also best explainer video company in Bangalore & animation video makers in Bangalore, Chennai, India & Maryland, Baltimore, USA provides Corporate & Brand films, Promotional, Marketing videos & Training videos, Product demo videos, Employee videos, Product video explainers, eLearning videos, 2d Animation, 3d Animation, Motion Graphics, Whiteboard Explainer videos Client Testimonial Videos, Video Presentation and more for all start-ups, industries, and corporate companies. From scripting to corporate video production services, explainer & 3d, 2d animation video production , our solutions are customized to your budget, timeline, and to meet the company goals and objectives.
    As a best video production company in Bangalore, we produce quality and creative videos to our clients.

    ReplyDelete