Sunday 10 February 2013

Use of < table > tag in openERP 7

Hi Folks,

               After reading last post you will know that in openERP 7 you can use some HTML tags inside openERP form view.Now I'm going to give some more information about openERP 7 form view.
      
                  If you have some prior knowledge of OpenERP ,then you should know use of col, colspan,newline etc. This some attributes are not longer supported in OpenERP 7. Instead of that you can use <group> tags for manage user interface for your form view. But everything have some pros and cons. With help of <group> you can use limited column in your form view UI. For showing form elements in one row you can use  "class" attribute and give value "oe_inline"

Example

        <field class="oe_inline" name="type"/>

              But this will help you for only some case because of the the value of column in OpenERP 7 is depend on resolution. Means view in 1024×960, 1152×864.... (CRT Monitors ) resolution is may be differ from view in 1024×768,1280×800.... (LCD monitors) resolution.You can see this problem in below video.





               This is only two or three column, but if there is six or seven columns then what ?For solution of this problem you can use < table > tag for help help of table tag you can use more column in openerp form view. Here below given a video in which i show how you  can use < table > tag and  in form View.





For this you need to use < table > tag as you use in HTML.You just need to write field in < td > tag of table.

Example

< table >
....
....
    <tr>
            <td>
                    < field name="xyz"/>
            </td>
     </tr>
....
....
</table>

This will manage your UI of form view as per your requirement. But as i say everything have pros and cons and < table > tag also have pros and cons.

Advantage:
  • More column in  form view.
  • Easy handling of UI compare to < group >.
  • colspan and rowspan support.
  • Also can apply css in this table.
Disadvantage:
  • When you inherits  such view which have < table > tag then you need to consider < tr >,< td > tags.
  • OpenERP 7 truncate all the white space from table so padding and cell spacing will not work so you need one alternative way for solving this. you can add label with apply colour white.I also use this thing in form view shown in video.
        Example.  
               <td>
                    <label string="----" style="color:white"/>
               </td>




   Go Green:
       You are a product of your environment so if no producer,no product.

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.