JavaScript, Css and Jquery in OpenERP 7.0

From:http://openerpbay.blogspot.jp/2013/02/javascript-css-and-jquery-in-openerp-70.html

Hi Fellows,

               here i ' m showing how can use  JavaScript, Css and Jquery in OpenERP 7.0.There are one cool feature added in OpenERP 7.0 in which you can use HT ML tags inside openERP form view. This feature isn't available in older version (Web 6.0, 6.1). OpenERP already use HTML codes like <div> <H1> inside Form view. But can does much more than so you can use CSS and JavaScript inside Form view Code (OpenERP XML code). Even more your can use jquery also in Form View but jquery are only work if you have an old OpenERP 7 web.in next few weeks I W Ill show how jquery also used in latest OpenERP 7.0 Web code. 

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

Css

In the HTML we use CSS (inline) like this-same like can apply in openerp-

<p style="color:sienna;font-size:8pt; "

<field name="product_id" style="color:sienna;font-size:8pt; "/>

(This would apply CSS on the that field, but only if it's in readonly form or it's in the 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"/> <divclass="Oe_title"> <divclass="oe_edit_only"> <label for="name"string="Product Name"/> </div> "name"/>                        ............                       ............

JQuery
For jquery-Need to apply your JQuery code inside script tag same as JavaScript. It's 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"/> <divclass="Oe_title"> <divclass="oe_edit_only"> <label for="name"string="Product Name"/> </div> "name"/>                        ............                       ............

Has a good day.
save Paper, save Trees.